vue less 切换主题（皮肤）

记录一下基于vue和less的项目是咋切换主题的。这个方法适用于已经在代码里到处都是less全局变量或mixins，想让每个变量在不同主题下有不同的值的情况。不兼容ie

就以一个颜色举例：假设我已经在项目里使用了很多次@dark1-background: #141414，这个全局变量已经被存放在variables.less里

1. 写一个theme.css用于存放所有主题的所有样式，不同主题下@dark1-background所代表的颜色不同

.dark-theme {
  --dark1-background: #141414;
}
.light-theme {
  --dark1-background: #f4f4f4;
}

2. 在variables.less里引入theme.css，并修改原来的语句

@import 'theme.css';
// @dark1-background: #141414; 本来是这样子，改成下面那样
@dark1-background: var(--dark1-background);

3. 需要切换的时候

document.getElementById('app').className = "dark-theme"
//或者 document.getElementById('app').className = "light-theme"

完成！