PC端项目的暗黑和正常主题的切换设置

打个比方，最近有个节日，老板想让线上的系统有一个暗黑主题色，但是节日过后还需要变回原来的背景色，这个时候我们就需要考录到让暗黑主题色和正常主题色都存在，由此不仅省去了软件的多次修改，也让软件多了层特效。废话不多说，拉起柚子开始絮叨絮叨如何实现的

一、插件的下载

	对于实现全局背景色加字体的切换肯定少不了插件：yarn add sass-resources-loader

二、在assets文件中引入scss文件，其中包含theme-mixin.scss、theme-var.scss两个文件

插件下载完成后，接下来就是逻辑的整理

1.首先在theme-mixin.scss文件中定义字体颜色和背景颜色的方法
		/* --------------------------------设置字体颜色---------------------- */
		
		@mixin font_color(
		 $font_color_black, //黑色主题时字体颜色
		 $font_color_white, //白色主题时字体颜色
		 $font_weight_black: normal, //是否需要加粗
		 $font_weight_white: normal //是否需要加粗
		) {
		
		 // 主题为黑色时的字体颜色
		 [data-theme="#{$theme-black}"] & { //记住这里一定要有 & 符号，否则样式不生效
		   color: $font_color_black;
		   font-weight: $font_weight_black;
		 }
		
		 // 主题为白色时的字体颜色
		 [data-theme="#{$theme-white}"] & {
		   color: $font_color_white;
		   font-weight: $font_weight_white;
		 }
		}
		
		/* ----------------------------------设置字体颜色------------------- */
		
		/* --------------------------------设置背景颜色---------------------- */
		
		@mixin bg_color($bg_color_black, $bg_color_white) {
		
		 // 主题为黑色时的背景颜色
		 [data-theme="#{$theme-black}"] & {
		   background-color: $bg_color_black;
		 }
		
		 // 主题为白色时的背景颜色
		 [data-theme="#{$theme-white}"] & {
		   background-color: $bg_color_white;
		 }
		}
		
		/* ----------------------------------设置背景颜色------------------- */
		
		/* --------------------------------自定义设置属性---------------------- */
		//第一个为属性值，第二个为黑色主题时的颜色，第三个参数为白色主题时的参数，最后一个参数为接受不确定的参数个数，类似于reset参数
		@mixin setAttribute($attribute, $bg_color_black, $bg_color_white, $value...) {
		
		 // 主题为黑色时的背景颜色
		 [data-theme="#{$theme-black}"] & {
		   #{$attribute}: $bg_color_black $value; //#{}为插值语法解析成字符串 多用在属性值以及选择器上比如#{border}-right: 1px solid #fff;
		 }
		
		 // 主题为白色时的背景颜色
		 [data-theme="#{$theme-white}"] & {
		   #{$attribute}: $bg_color_white $value;
		 }
		}


2.在theme-var.scss文件中设置按钮切换时的属性值

	// 主题风格list
	$theme-black: 'black';
	$theme-white: 'white';
	$theme-list: 'black', 'white';

三、在vue.config.js中引入定义的模块

	定义结果如下：
		chainWebpack: config => {
    		const oneOfsMap = config.module.rule('scss').oneOfs.store;
		    oneOfsMap.forEach(item => {
		      item
		        .use('sass-resources-loader')
		        .loader('sass-resources-loader')
		        .options({
		          // Or array of paths
		          resources: [
		            'src/assets/scss/theme-mixin.scss',
		            'src/assets/scss/theme-var.scss'
		          ]
		        })
		        .end();
		    });
		 }

四、在store->modules->common.js中引入

state:	theme: localStorage.getItem('data-theme') ?? 'black'
mutations:
	[types.CHANGE_THEME](state, param) {
        state.theme = param ? 'white' : 'black';
        localStorage.setItem('data-theme', state.theme);
      }

五、在store->mutation-types.js中注册

	// 更改主题
export const CHANGE_THEME = 'change_theme';

六、在home组件引入

import { mapState, mapMutations } from 'vuex';
computed: {
    ...mapState('common', ['userInfo', 'theme'])
  },
  watch: {
    theme: {
      handler(newVal) {
        window.document.documentElement.setAttribute('data-theme', newVal);
      },
      immediate: true
    }
  },

七、在组件中使用
@include font_color() =>修改字体颜色
@include bg_color() => 修改背景颜色