(一) 前言
主题切换,是目前很多产品需要定制的功能,常见的比如需要给用户提供两套主题,日间和夜间模式,那么我们需要找出一种在实际项目中使用的方案
(二) 切换方案
已知道的主题切换方案有如下几种
- DWZ富客户端
实现方式:
将不同主题的样式抽取出来。
生成多份不同的主题样式文件。
动态引入。
比如
// theme1.css
.demo {
color: red;
}
// theme2.css
.demo {
color: green;
}
// theme3.css
.demo {
color: blue;
}
然后将3个css作为不同的css文件上传到服务器,在用户点击切换时候,link不同的css文件样式,但是弊端也很明显,需要同时维护多份主题文件,而且随着主题的扩展,将会增大维护成本
实现方式:
先把默认主题文件中涉及到颜色的 CSS 值替换成关键词:https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L250-L274
根据用户选择的主题色生成一系列对应的颜色值:https://github.com/ElementUI/theme-preview/blob/master/src/utils/formula.json
把关键词再换回刚刚生成的相应的颜色值:https://github.com/ElementUI/theme-preview/blob/master/src/utils/color.js
直接在页面上加 style 标签,把生成的样