本文作者為 360 技術中台數據平台部的前端開發工程師
原文地址：https://juejin.cn/post/7117911005841063944
背景最近有個需求，要給系統做個主題切換功能，網上關於主題的方案挺多，準備做一些調研，因為項目是react+antd的一個後台系統，開始從antd官方文檔中開始着手，做下整理對比，最後選一個最佳的方案用於實踐。
技術選型less.modifyVarsantd提供的一種主題切換方式，通過配置webpack的less-loader，添加modifyVars對象，官方已經內置了一些主題變量，每次構建時更換對應色值即可實現主題切換。
//webpack.config.jsmodule.exports={rules:[{test:/\.less$/,use:[{loader:'style-loader',},{loader:'css-loader',//translatesCSSintoCommonJS},{loader:'less-loader',//compilesLesstoCSS+options:{+ lessOptions:{//如果使用less-loader@5，請移除 lessOptions 這一級直接配置選項。+modifyVars:{+'primary-color':'#1DA57A',+'link-color':'#1DA57A',+'border-radius-base':'2px',+},+javascriptEnabled:true,+},+},}],//...otherrules}],//...otherconfig}Link標籤替換插入一個新的Link標籤，用新的css鏈接替換原來的樣式，這種方案實現上沒有難度，也沒有兼容問題，需要新建一套完全一樣的樣式類名，然後替換其中的色值，缺點是工作量太大，尤其開發中的項目來說，擴展性比較差，後期更換樣式類名，需要同步更改主題樣式文件：
theme2CSS Variable另外一個是用ConfigProvider，需要注意在antd@4.17.0-alpha.0版本起才支持，而且webpack中如果使用了 babel-plugin-import，需要將其去除。本質是通過CSS Variable（css變量）實現，將顏色賦值變量，最大的問題是——有兼容性問題，在IE瀏覽器中不支持。補充：antd好像對CSS Variable做了兼容處理。
項目內需要引入使用變量樣式文件：
調用部分：
import{ConfigProvider}from'antd';ConfigProvider.config({theme:{primaryColor:'#25b864',},});css-vars-ponyfill為彌補css variable的不足，css-vars-ponyfill做了一套兼容處理，原理大概是在ie等不支持css var的瀏覽器中將var（）中的變量值替換為對應色值，在支持css var的瀏覽器中不做處理。另外是操作dom，所以在node環境中無法使用。css-vars-ponyfill主要暴露了一個cssVar方法，方法入參如下：
exportinterfaceCSSVarsPonyfillOptions{rootElement?:Document|HTMLElement;shadowDOM?:boolean;include?:string;exclude?:string;variables?:{[key:string]:string};//顏色鍵值對onlyLegacy?:boolean;preserveStatic?:boolean;preserveVars?:boolean;silent?:boolean;updateDOM?:boolean;updateURLs?:boolean;watch?:null|boolean;onBeforeSend?(xhr:XMLHttpRequest,elm:HTMLLinkElement|HTMLStyleElement,url:string):void;onError?(message:string,elm:HTMLLinkElement|HTMLStyleElement,xhr:XMLHttpRequest,url:string):void;onWarning?(message:string):void;onSuccess?(cssText:string,elm:HTMLLinkElement|HTMLStyleElement,url:string):void;onComplete?(cssText:string,styleElms:HTMLStyleElement[],cssVariables:{[key:string]:string},benchmark:number):void;onFinally?(hasChanged:boolean,hasNativeSupport:boolean,benchmark:number):void;}主要的參數：variables：顏色鍵值對，切換主題即更換不同的variables
技術對比less.modifyVars是靜態更改主題，適合定製化主題，構建完成之後不能再變；css標籤的方法工作量太大，擴展性差；css variable比較靈活，但有兼容問題，相對於css標籤方法，擴展性好點；css-vars-ponyfill是css variable的優化版，解決了兼容問題，雖然會有服務端渲染的問題，如果項目是在瀏覽器dom環境下無傷大雅。
補充做了一個簡單的demo，分別用三種方式實現主題切換：css標籤，css variable，css-vars-ponyfill。GitHub地址：react-antd-theme
theme_link-END-
留言列表