css实现主题切换

项目中常遇到主题且切换的需求，网上有很多实现方法，这里主要总结下分别用css和less实现的思路

CSS实现：

• 第一步：定义全局变量，我的全局变量是定义在App.vue中，这样其他页面就可以直接使用这些变量

  
  image.png
• 第二步：需要切换颜色的部分使用变量，举个简单的例子，比如头部组件

.header{
  background: --themeColor;
  color: --fontColor;
}

• 第三步：提供触发切换的事件,我这里用了elementui的颜色选择组件，当选择颜色的时候，把 color1传入changeThemeColor

<el-color-picker v-model="color1" @change="changeThemeColor"></el-color-picker>

changeThemeColor 方法是 提交的 store里的 mutation

image.png

• 也就是说，我把主题色都是放在vuex里做状态管理的。

  
  image.png

• 最后就是，我们在App.vue中，取出vuex存放的主题变量，并监听他们的变化，并把新的值赋给#app下的变量

  
  image.png

总结：这种方法虽然简单，但是不够灵活，后期变量多了维护也比较麻烦。

下边改进一下，变量的默认值，我们还是写在#app中，或者:root中 。我们新建一个单独的样式文件，里边放入我们要切换的不同的主题

// theme.js
export const themeModel = {
    themeA:{
        themeColor:'#008cff',
        fontColor:'#fff'
    },
    themeB:{
        themeColor:'pink',
        fontColor:'#000000'
    },
    themeC:{
        themeColor:'green',
        fontColor:'#f5de19'
    }
}

• 然后我们再在store.js中引入theme.js

  
  image.png
  image.png

• 最后就是在App.vue中，动态的给#app设置变量样式

  
  image.png