vue less 切换主题(皮肤)
开开 2021-10-28 18:08:53 2021-10-28 134 0
记录一下基于vue和less的项目是咋切换主题的。这个方法适用于已经在代码里到处都是less全局变量或mixins,想让每个变量在不同主题下有不同的值的情况。不兼容ie
就以一个颜色举例:假设我已经在项目里使用了很多次@dark1-background: #141414,这个全局变量已经被存放在variables.less里
- 写一个theme.css用于存放所有主题的所有样式,不同主题下@dark1-background所代表的颜色不同
.dark-theme { --dark1-background: #141414;}.light-theme { --dark1-background: #f4f4f4;}
- 在variables.less里引入theme.css,并修改原来的语句
@import 'theme.css';// @dark1-background: #141414; 本来是这样子,改成下面那样@dark1-background: var(--dark1-background);
- 需要切换的时候
document.getElementById('app').className = "dark-theme"//或者 document.getElementById('app').className = "light-theme"
完成!