css主题切换

方式大概有几种 切换css文件，webpack插件配置，less.modifyVars（只用于less），css3 css变量定义方式。

我们项目是less，好处是还有个base.less定义了很多基础色值，为了跟base.less对接，最终还是选择用css3变量方式合适。

用法：

定义一个theme.css引入

body {
  --B6: #f2f2f2;
}

改造一下base.less  @B6  less变量的定义：

@B6: var(--B6, #F2F2F2); /* 0 0 0 .05 */
@bg-color: @B6;
@controlInput: @B6;

 

更改方法（setTimeout模拟延迟切换）：

setTimeout(() => {
      document.body.style.setProperty('--B6', 'red');
    }, 5000);

　　

换肤方式倾向less.modifyVars或者css3变量定义，less.modifyVars方式需要引入预处理程序，想对css3不够直接，推荐css3 至于兼容性看自己需求：

兼容性查看 https://caniuse.com/css-variables