css换肤总结

两种可行的办法

1. 多套不同主题的css

用less/sass变量代替颜色值，用编译工具生成主题文件

theme-dark.css
theme-green.css

切换文件使用，不要append link，直接修改原有theme的link的href，就行了

//根据不同的企业用户加载不同的css
document.querySelector('#customerTheme').setAttribute('href','./theme-green.css')

这样会下载全量css，切换较慢，可以将主题的css抽取出来，单独切换这个css

theme-skin-dark.css
theme-skin-green.css

切换 theme-skin-green 这个小的css，速度会快很多。

2. css变量定义主题

js可以直接修改变量值，最佳实现方案 (不支持IE，快淘汰了，还好)

:root {
    --theme-color: red /* css 变量赋值位置 */
}
.title {
    color: var(--theme-color) /* 用css变量标记颜色 */
}

js可以直接修改css变量，十分方便

function changeColor(color = 'blue') {
    document.documentElement.style.setProperty("--theme-color",color);
}