通过less或者scss 定义变量 实现 vue主题切换

更新
不需要全局引入less或者scss的可以直接在body上面挂载css变量

body{
--baseColor: #4F94FA; 
--activeColor: #4F94FA;
--fontColor: #4F94FA;
}

然后在需要使用的地方

.title{
 color:var(--baseColor); 
}

=======================================================================
最近做一个主题切换功能，查了一下网上的实现方式，找到的都不是我想要的效果，于是我便按照自己的想法做了一套方案。

	style.less  //定义颜色等主题变量并全局引入
	factory.js  //定义修改变量值的方法
	vuex  //管理动态变更主题样式单一值
	model.js  //存放固定方案主题样式

首先我们要全局引入一个文件，这样可以在项目中直接调用中的变量，为了实现这个功能我们需要借助插件。

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

安装完成之后在配置里面添加

pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, "src/theme/")] // 引入全局样式变量
    }
  }

到这一步，我们已经可以在项目里面直接使用里面的变量

@baseColor:var(--baseColor, #4F94FA); 
@activeColor: var(--activeColor, #4F94FA);
@fontColor:var(--fontColor, #4F94FA);

:export {
    name: "less";
    baseColor: @baseColor;
    activeColor: @activeColor;
    fontColor:@fontColor;
}

组件内部样式

<style lang="less">
.app-header {
  background-color: @baseColor;
  }
</style>

这里的:export是为了导出样式中的变量值，不需要的可以不使用，var(–变量名，变量值）这是css中的使用方式为了后续在js更改值。

/**
* 切换主题修改页面样式
**/
export const changeStyle=(obj)=>{
    for(let key in obj){
        document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, obj[key]);
    }
}

这里通过直接操作页面元素的方式修改页面样式的值。

import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
import * as getters from './getters';
import * as mutations from './mutations';
import Account from 'js/model/common/account';
Vue.use(Vuex);
const state = {
    baseColor:'#4F94FA'
};
export default new Vuex.Store({
    state,
    actions,
    getters,
    mutations
});

变更的值可以通过vuex来管理在state中存放baseColor

页面中绑定

 <el-color-picker v-model="$" @change="SwitchTheme" title="主题" class="color"></el-color-picker>

切换主题色

SwitchTheme(){
	let obj = {
	  baseColor:this.$store.state.baseColor
	}
	changeStyle(obj)
}

本地存储主题数据

/**
* 自定义主题方案
**/
export const menusModel = {
  themeA: {
    baseColor:'#FFF',
    activeColor:'#4f94fa',
    fontColor:'#333',
  },
  themeB: {
    baseColor:'#FFF',
    activeColor:'#4f94fa',
    fontColor:'#333',
  },
  themeC: {
    baseColor:'#FFF',
    activeColor:'#4f94fa',
    fontColor:'#333',
  },
  themeD: {
    baseColor:'#FFF',
    activeColor:'#4f94fa',
    fontColor:'#333',
  },
}

读取本地或者远程的样式数据，通过changeStyle来修改，具体实现看个人需求