vue项目设置多套主题色

    公司移动端项目需要设置多套主题色，后端配置使用哪套移动端显示对应主题色，实现思路为：写对应套数的样式文件，根据接口返回的设置值选用对应样式主题。

1、App文件中进行判断引入主题文件，App.vue：

<script>
	export default {
		data() {
			return {}
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			//接口判断主题，此处为设定默认样式
			var themesCss = "default";
			//存进缓存，后面有用
			uni.setStorageSync('cssStyle', themesCss);
			//全局引入对应样式文件
			require("./static/themes/" + themesCss + "/css/style.scss");
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>
<style lang="scss">
	@import "uview-ui/index.scss";
</style>

2、样式文件中，style.scss：

/**
 * 公共主题样式
 */ 

:root{
	/*默认主题颜色*/
	--custom-color: #ff6f0d;

	// 渐变按钮色
	// 深
	--btn-dark:#ff6f0d;
	// 浅
	--btn-light:#FFA726;

}

3、使用的文件中使用主题样式：

<style>
	.bg{
		background-color: var(--custom-color);
	}
	.bth{
		background-image:linear-gradient(45deg, var(--btn-dark), var(--btn-light));
	}
</style>

4、因有些框架设置的样式值需在data中定义，无法在css中重写，如uviews框架中tabs的高亮色，此处使用笨办法引用js文件用变量实现，style.js：

/**
 * 本js文件只为处理有些组件色彩值需在data中定义无法在css中重写的样式，如tabs的高亮色
 */
export default {
	/*主题颜色*/
	customColor: "#ff6f0d"
}

使用时：

<template>
	<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="activeColor" font-size="26rpx" inactive-color="#333333"></u-tabs>
</template>
<script>
	export default {
		data() {
			return {
				activeColor: '',
				css:''
			}
		},
		onLoad() {
		//此处取的js文件目录路径与App.js中取到的主题颜色的路径一致
			this.css = require("@/static/themes/" + uni.getStorageSync('cssStyle') + "/style.js")
			this.activeColor = this.css.default.customColor;
		}
	}
</script>