要求：把项目中原有的主题色从白色更换暗黑（仅提供思路）
现阶段的换肤方案
- 由于时间关系，现阶段采用的换肤方案是写了两套 主题色皮肤，使用最简单的强覆盖的方案
/**
* 蓝色 主题样式
*/
@themeColor: blue;
.au-bu-theme {
// 引入的样式文件已经经过 样式变量的抽取
@import '../less/com.less';
...
@import '../less/bottom-button.less';
}- 最突出的问题：代码超级难维护 !!!
更简单的 换肤方案 探索
方案：var() 结合 :root 伪元素 换肤方案
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。 ---mdn：链接 developer.mozilla.org/zh-CN/docs/…
-
该方案最简单，最容易理解
-
实现代码:
// 直接在 .less 文件中编写。:root 始终会变成 <html> 标签 的伪元素
:root {
'--primary-color': #1DA57A;
}
// 兼容之前的变量写法
@themeColor: var(--primary-color);
// 修改变量 --primary-color 以实现换肤
let docEle = document.documentElement
const auTheme = {
'--primary-color': 'bule';
'--hello-color': 'red';
}
// 批量覆盖样式
for (const key in auTheme) {
if (auTheme.hasOwnProperty(key)) {
const value = auTheme[key];
// 关键
docEle.style.setProperty(key, value)
}
}
// 释放内存，避免内存溢出
docEle = null
- 问题： ie 不支持
var()。经过网上资料的查找，发现npm上有 css3 var 的垫片插件css-vars-ponyfill！！！垃圾ie终于有救了