老h5項目動態換主題顏色的快速集成方案 | 創做者訓練營

源起

最近遇到一個老的h5項目須要動態換主題顏色的需求，所謂動態換主題色，就是頁面須要在運行的時候，根據一些條件來更換顏色，而不是在編譯的過程當中就把顏色打包進去的靜態更換顏色。咱們這個項目是react+less的，以前用Less的變量作過靜態的更換顏色。今天也是忽然遇到這個問題，而且時間比較急，最後也是花了幾個小時來解決這個問題。

難點在哪？

1. 是老項目的問題，這個頁面連色值的變量都沒替換，仍是每一個地方都用的是色值。首先就是要統一的替換這些色值變爲顏色的變量。並且須要進行一些整理還要注意不能影響老的樣式不能錯。因此在行內直接用變量判斷使用不一樣的class或者樣式的方法開始先擱置了，想用一個侵入性比較小方案。
2. 是要作成動態的變色，在打包的時候，更改色值，是能夠作的。可是要在runtime動態更改顏色，一開始沒想到特別好也侵入性比較小的方案。

一些失敗的嘗試

我最開始搜索一些方案，發現less.js（是的，我也是今天才知道less還有js的工具），中實際上是有個方法(less.modifyvars)來動態更改less的變量的。固然首先遇到的問題就是不生效。一開始懷疑是頁面的生命週期的問題，因此就把modifyvars方法更改了幾個生命週期，發現都不生效。後面發現less.js報出一個錯誤，是說沒有讀取到樣式文件。通過查詢，是說要把less文件用link標籤在html頁面中引用，才能被讀取到。因此我就把放變量的less文件整個上傳到了七牛上，而後經過link標籤引用這個theme.less。引用後發現，在less的文件中，是讀取的不到這些顏色的變量的，會報錯。這時候這條路就感受走不通了。

以後又找過一些webpack的插件，好比有一個叫'switch theme'的webpack插件。這個插件須要把樣式文件按照它的方式放到指定的目錄下，而且須要另外的loader纔可以生效。它提供了一個js的方法去動態的更改顏色。可是以爲這個改動仍是比較大，須要更改webpack的配置，並且自己咱們在less-loader和css-loader也有一些根據不一樣頁面的定製化配置，也不是很好的集成，因此這個方案也暫時放棄了。

快速集成的方案

花了兩三個小時的查資料與折騰後，讀到了一篇大佬的文章：《史上最簡單的ant-design的換膚方案》，他的思路是使用css變量，在更改顏色的時候，經過js建立一個style標籤，把這些顏色的變量更新。

下面是一些關鍵代碼，可讓你快速瞭解css變量 less 文件：

：root { // css變量放在:root中
 --theme-color:red;// 這裏定義一個css變量
}

div.selected {
    color: var(--theme-color); // 經過var()來使用這個變量
}
複製代碼

js文件

const cssVar = `
  :root {
      --primary-color: green;// 這裏是要更改的顏色
  }
`;

styleNode = document.createElement('style'); // 建立一個style 標籤

styleNode.innerHTML = `${cssVar}`; // style標籤中包含更改的css變量的內容
document.getElementsByTagName('head')[0].appendChild(styleNode); // 把這個style標籤放在header中，這樣更換的顏色就生效了
複製代碼

mdn上有介紹css變量的，想要深刻了解的能夠自行查閱。

兼容性怎麼樣？

可能各位會擔憂css變量的兼容性，這裏附上caniuse的截圖 其實大部分瀏覽器是已經支持了，覆蓋率在94.5%。

以後的探索

1. 其實ant.design是實現了動態更改主題顏色的。ant.design也有一些webpack插件能夠更改ant.design中的主題色。我但願以後有時間的話能夠學習一下ant.design是怎麼實現的。

2. 能夠探索一下css變量的一些靈活的使用，不單單侷限於改變顏色

這是我2021年更30篇文的第2篇，進度2/30

文章標題XXX | 創做者訓練營 徵文活動正在進行中......