Vue+Less 动态更改主题色（动态参数改变，主题色随之改变）

UI库： VantUI。

思路：

根据css伪类 :root配置全局变量，根据参数修改:root的class，根据当前作用class取主题变量。
相关样式的取值为主题变量值。这样，随着class名的变更，取值也就随之变化。

实现

1. 配置主题less文件
   vue.config.js， less部分配置modifyVars，初始化引入变量文件：

module.exports = {
	css: {
   	loaderOptions: {
    		 less: {
       		lessOptions: {
         			strictMath: true, // 严格模式
        			modifyVars: {
           			// 初始化，全局主题变量文件引入，引入后全局可直接使用变量
           			hack: `true; @import "/src/styles/theme.less";`
        	 		}
   	        }
     		}
   	}
 	},
}

2. 设置变量主题
   在上述引用的theme.less中，设置不同class下的主题色：

/* 默认主题色 */
@default: #1989fa;
/* 设置默认主题色 */
:root {
	--color-primary: @default;
}
:root.theme_red {
	--color-primary: #ee0a24;
}
:root.theme_dark {
	--color-primary: #333;
}

3. 将需要改变主题色的样式，引用主题色，并设置VantUI的相关影响样式：

/* class为'text'的内容，要根据主题色更改颜色 */
.text {
	color: var(--color-primary);
}
/* 涉及到的VantUI样式 */
@button-info-background-color: var(--primaryClr);
@tabs-default-color: var(--primaryClr);
@tab-active-text-color: var(--primaryClr);

4. 更改主题色:
   通过修改根元素class更改作用主题色。
   在需要更改的地方，直接调用：

/* 更新root class，key为目标class主题关键字 */
// 删除现有主题class
for (let index = 0; index < document.documentElement.classList.length; index+=1) {
	const element = document.documentElement.classList[index];
   if (element.match(/^theme_./))
   	document.documentElement.classList.remove(element);
}
// 添加目标class
document.documentElement.classList.add('theme_' + key);

完。