vue项目实现简单换肤功能

项目遇到换肤功能，需求是固定三种主题色配置，
实现思路如下

换肤实现

在src/assets/css/目录下定义了mixin.scss文件
文件中定义各主题色下，不同需要随着主题色改变的色值，比如：
定义主题字体颜色色值

@mixin theme-color {
  [data-theme="blue"] & {
    color: #387af0;
  }

  [data-theme="yellow"] & {
    color: yellow;
  }
}

在组件中引入mixin.scss文件

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
</style>

在需要使用字体色值的地方使用
@include theme-color;
即可实现色值随着主题改变而改变

在打开项目时先调用接口，获取当前需要显示的主题色，并根据管理端设置的主题色显示当前主题色

curretTheme().then(res => {
	this.theme = res.theme
	if(this.theme == 1) {  // 根据实际项目后端配置来做判断
		window.document.documentElement.setAttribute('data-theme', 'blue')
		this.$store.commit('changeTheme', 'blue')
	}else if(this.theme == 2) {
		window.document.documentElement.setAttribute('data-theme', 'red')
		this.$store.commit('changeTheme', 'red')
	}else if(this.theme == 4) {
		// 设置全站灰色系,用于清明节等哀悼日
		document.getElementsByTagName('body')[0].style.cssText = `
              -webkit-filter: grayscale(100%); 
              -moz-filter: grayscale(100%); 
              -ms-filter: grayscale(100%); 
              -o-filter: grayscale(100%); 
              filter: grayscale(100%);
              filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
              filter:gray;
            `
	}
})