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