前端主题色配置

主题色配置

1. 自定义样式变量，定义主题

   // theme.css 在main.js里全局引入
   :root[theme = 'defined1'] {
          /*  字体颜色 */
          --font-color:#2c3e50;
          /*  背景色 */
          --bg-color: #D9EEE2;
   }
   :root[theme = 'defined2'] {
        /*  字体颜色 */
       --font-color: #deffff;
       /*  背景色 */
       --bg-color: pink;
   }
   

2. 使用已定义的变量

   // 某个界面
   .hello{
     background-color: var(--bg-color);
   }
   h3 {
     margin: 40px 0 0;
     color: var(--font-color);
   }
   

3. 用户操作，切换对应的主题

    <button @click="changeTheme1">切换defined1</button>
    <button @click="changeTheme2">切换defined2</button>
   

   changeTheme1(){
       document.documentElement.setAttribute('theme', 'defined1');
   },
   changeTheme2(){
       document.documentElement.setAttribute('theme', 'defined2');
   }
   

4. 可以加上本地存储，方便维护。

​