要求:把项目中原有的主题色从白色更换暗黑(仅提供思路)
现阶段的换肤方案
- 由于时间关系,现阶段采用的换肤方案是写了两套 主题色皮肤,使用最简单的强覆盖的方案
/**
* 蓝色 主题样式
*/
@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
终于有救了