登录/注册
开开
7560
占位
8
占位
12
浏览量
占位
粉丝
占位
关注
vue less 切换主题(皮肤)
开开
2021-10-28 18:08:53 2021-10-28
50
0

记录一下基于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;
}
  1. 在variables.less里引入theme.css,并修改原来的语句
@import 'theme.css';
// @dark1-background: #141414; 本来是这样子,改成下面那样
@dark1-background: var(--dark1-background);
  1. 需要切换的时候
document.getElementById('app').className = "dark-theme"
//或者 document.getElementById('app').className = "light-theme"

完成!

原文: https://blog.csdn.net/EllynX/article/details/112637163

暂无评论