關(guān)于前端主題切換的思考和現(xiàn)代前端樣式的解決方案落地

demo在線體驗地址： v-theme-colors[1]
源碼地址： v-theme-colors[2]（ps 大部分功能暫未同步發(fā)布）

一、換膚
網(wǎng)站或者應(yīng)用一鍵切換主題（簡稱：換膚）功能，對每個前端開發(fā)者來說已經(jīng)非常常見了，通常是一深一淺，或自由組合衍生出眾多主題，或任意主題，這時候，設(shè)計一個工程化主題切換功能，并梳理現(xiàn)代前端樣式的解決方案顯得尤為重要。

二、換膚調(diào)研
很久以前，通常的做法是每個顏色主題塊編寫樣式表，切換的時候?qū)?yīng)去切換。現(xiàn)代前端主題切換——目前主流的方案往往通過 CSS 變量（CSS 自定義屬性）[3]來實現(xiàn)，將主題有關(guān)的顏色，通過業(yè)務(wù)和語義化的方式命名。接下來我們看看前端圈比較知名的UI他們是怎么做的：

（1）ElementUI[4]



我們可以看到 element-plus 官網(wǎng)，主題切換主題，是在html標(biāo)簽加里 class="dark" 涉及到主題的變量，基于html.dark,和：root配合改變。當(dāng)然我們也可通過源碼看到element-plus是用的是scss。

（2）ant.design[5]

我們可以看到 ant.design 官網(wǎng)，主題切換主題，是在html標(biāo)簽加里 color-scheme 和在body里添加自定義標(biāo)簽data-theme="dark",和：root配合改變。CSS 屬性允許元素指示它可以輕松呈現(xiàn)的配色方案,操作系統(tǒng)配色方案的常見選擇是“亮”和“暗”，或者是“白天模式”和“夜間模式”。當(dāng)用戶選擇其中一種配色方案時，操作系統(tǒng)會對用戶界面進(jìn)行調(diào)整。這包括表單控件、滾動條和 CSS 系統(tǒng)顏色的使用值。通過源碼，我們也可以看到ant用的是less。

三、換膚痛點和思考
(1) 正如上文ElementUI和ant，都分別借助不同的CSS預(yù)處理器（sass和less）來組織代碼，再微前端盛行的時代，怎么設(shè)計一套通用的多團(tuán)隊可用，并且去css預(yù)處理的換膚CSS 自定義屬性？

(2) 誰來維護(hù)不同主題色，研發(fā)和設(shè)計之間，如何保持不同主題色值的同步溝通？

(3) 如何最小化前端工程師的開發(fā)量，不需要做多份主題色？
(4) ...

基于以上考慮，舉個例子，我們希望做到在開發(fā)時，編寫：

.text {
  color: var(--c-color)
}
這樣就可以一勞永逸——直接支持兩套或者多套主題模式。

但是業(yè)務(wù)往往是千變?nèi)f化的，正如我司：

（1）換膚的需求是，有一個色調(diào)（深淺），然后，根據(jù)深淺，衍生出很多 主題色，比如深藍(lán)、深黃、深紅、淺藍(lán)、淺黃、淺紅...

（2）對于深淺來說，有定于出一些基礎(chǔ)色，對于組件顏色來說，通常用一組基礎(chǔ)色即可滿足，但是業(yè)務(wù)頁面中可能涉及到千變?nèi)f化的顏色...

四、換膚架構(gòu)

正如上圖，我們可以把換膚提升到一個平臺或中臺來：

（1）對于UED同學(xué)，他們可以自己去配置換膚相關(guān)的系統(tǒng)色系，衍生的主題色，系統(tǒng)色系色系基礎(chǔ)色

（2）對于各個前端團(tuán)隊來說，可以通過主題色，色系基礎(chǔ)色，任意自定義和配置 自己業(yè)務(wù)需要顏色的變量

五、換膚技術(shù)選型和實現(xiàn)
筆者這里是用基于css-vars-ponyfill[6]的換膚方案，至于它的優(yōu)勢正如它們官方所描述，在傳統(tǒng)和現(xiàn)代瀏覽器為css自定義屬性 提供客戶端支持的 pnyfill。


【1】該方案的亮點和規(guī)則
（1）純JS實現(xiàn)，對外暴露initThemes初始化方法，不依賴CSS預(yù)處理器（sass和less），兼容ie9

（2）抽離深淺色系基礎(chǔ)色（統(tǒng)一治理輸出），以及主題色，混合顏色（黑白色）都可以動態(tài)接口獲得

（3）統(tǒng)一規(guī)范業(yè)務(wù)色常量命名，JS定義自定義函數(shù)方法 1、 Mix函數(shù)實現(xiàn)媲美sass的顏色混合機(jī)制，2、十六進(jìn)制和RGB（rgba）互相轉(zhuǎn)換函數(shù)

（4）技術(shù)路線不抖，直接用var()函數(shù)使用，后期封裝成JS庫 ，皮膚配置中臺，可以提供給各個團(tuán)隊使用

（5）關(guān)于業(yè)務(wù)自定義變量，設(shè)計有兩個治理方案：（1）全局變量， 全局單獨維護(hù)（2）局部業(yè)務(wù)變量，局部單獨維護(hù)

【2】核心原理
（1）在應(yīng)用端觸發(fā)換膚操作的時候，配合 JavaScript 狀態(tài)管理，同步主題切換的信號，對應(yīng)對應(yīng)觸發(fā)initThemes 方法

  // 測試新主題
  let varList = {
    ...colorColor
  }
  let tPrimaryList = themePrimaryList
  initThemes('', tPrimaryList, varList, '')
（2）切換該主題色甚至該業(yè)務(wù)下的變量對應(yīng)的值，通過css-vars-ponyfill，把自定義常量打到對應(yīng)的DOM節(jié)點（通常是html或者body下），從而實現(xiàn)切換主題

theme.js

import cssVars from "css-vars-ponyfill";
import { themeTypeList, themePrimaryList } from "./themeList.js";
import { mix, hex2rgb } from "./com/util";
/**
 * initThemes 全局初始化 主題
 * @param theme 主題 [必填]
 * @param tPrimaryList 主題列表[必填] array ['theme1','theme2']
 * @param valList 自定義主題列表 {val1:['theme1-color','theme2-color']} ....
 * @param themeType 主題類型  -深淺 ....
 * @param changeType 區(qū)分改的是主題類型，還是主題色 [ 預(yù)留字段 ]....
 * @returns {boolean}
 */
 
export const initThemes = (theme, tPrimaryList, varList, themeType) => {
  let variables = getVariables(
    theme || "lightBlue",
    tPrimaryList,
    varList,
    themeType
  );

  cssVars({
    watch: true, // 當(dāng)添加，刪除或修改其或元素的禁用或href屬性時，ponyfill將自行調(diào)用
    variables: variables, // variables 自定義屬性名/值對的集合
    onlyLegacy: false, // false  默認(rèn)將css變量編譯為瀏覽器識別的css樣式  true 當(dāng)瀏覽器不支持css變量的時候?qū)ss變量編譯為識別的css
  });
};
themeList.js 這里存放一些假設(shè)我們在應(yīng)用端設(shè)置的一些主題和色系（深淺）基礎(chǔ)色






import { light } from './com/light'
import { dark } from './com/dark'

// 主題 - 主題色
export const themePrimaryList = {
  dark: [
    {
      color: '#FFAA0E',
      name: '深黃',
      theme: 'darkYellow'
    },
    {
      color: '#FFAA0E',
      name: '深藍(lán)',
      theme: 'darkBlue'
    },
  ],
  light: [
    {
      color: '#FFAA0E',
      name: '深黃',
      theme: 'lightYellow'
    },
    {
      color: '#256DFF',
      name: '淺藍(lán)',
      theme: 'lightBlue'
    }
  ]
}

export const themeTypeList = {
  dark: dark,
  light: light,
}
【3】色組 & 色值平臺設(shè)計
對于前端使用者來說，我們只需要關(guān)注 具體有哪些常量，和怎么去定于常量。例如我司，我們基于業(yè)務(wù)的定義了一些常用的語義化的一些業(yè)務(wù)常量，例如

    // 功能色
    "--c-primary": color.C00, // 主題色
    "--c-primary-rgb": hex2rgb(color.C00), // 主題色RGB
    "--c-primary-hover": mix(white, color.C00, 12),
    "--c-primary-active": mix(black, color.C00, 12),
    "--c-fill-primary": mix(white, color.C00, 88), //主題色文字的背景填充色
    "--c-border-primary": mix(white, color.C00, 80), //主題色文字的邊框色
    "--c-primary-mix-1": mix(white, color.C00, 10),
    "--c-primary-mix-2": mix(white, color.C00, 20),
    "--c-primary-mix-3": mix(white, color.C00, 30),
    "--c-primary-mix-4": mix(white, color.C00, 40),
    "--c-primary-mix-5": mix(white, color.C00, 50),
    "--c-primary-mix-6": mix(white, color.C00, 60),
    "--c-primary-mix-7": mix(white, color.C00, 70),
    "--c-primary-mix-8": mix(white, color.C00, 80),
    "--c-primary-mix-9": mix(white, color.C00, 90),

    "--c-success": color.C01, // 成功色
    "--c-warning": color.C01, // 警告色
    "--c-error": color.C01, // 錯誤色

    "--c-green": color.C06, // 語義綠 跌
    "--c-green-rgb": hex2rgb(color.C06),
    "--c-green-hover": mix(white, color.C06, 12),
    "--c-green-active": mix(black, color.C06, 12),

    "--c-red": color.C08, // 語義紅 漲
    "--c-red-rgb": hex2rgb(color.C08),
    "--c-red-hover": mix(white, color.C08, 12),
    "--c-red-active": mix(black, color.C08, 12),

    "--c-yellow": color.C07, // 語義黃
    "--c-yellow-rgb": hex2rgb(color.C07),
    "--c-yellow-hover": mix(white, color.C07, 12),
    "--c-yellow-active": mix(black, color.C07, 12),

    // 文字色
    "--c-text": color.C02, // 一般文本
    "--c-text-title": color.C02, // 標(biāo)題
    "--c-text-subtitle": hex2rgb(color.C02, 0.65), // 次要 - 副標(biāo)題
    "--c-text-info": hex2rgb(color.C02, 0.45), // 提示
    "--c-text-placeholder": color.C02, // 占位文本色
    "--c-text-link": color.C01, // 鏈接文本色
    "--c-text-disable": hex2rgb(color.C02, 0.3), // 禁止或失效

    // 填充色
    "--c-fill": color.C04, // 組件默認(rèn)背景顏色
    "--c-fill-body": color.C11, // 頁面背景
    "--c-fill-shadow": hex2rgb(color.C11, 0.1), // 陰影
    "--c-fill-zebra": color.C05, // 斑馬線色
    "--c-fill-mask": color.C11, // 遮罩背景
    "--c-fill-disable": hex2rgb(color.C02, 0.07), // 禁止

    "--c-fill-scroll": hex2rgb(color.C02, 0.5), // 滾動條色
    "--c-fill-scroll-hover": mix(white, color.C02, 12),
    "--c-fill-scroll-active": mix(black, color.C02, 12),

    // 邊框/分割線顏色
    "--c-border": color.C01, // 基本邊框色
    "--c-border-line": hex2rgb(color.C02, 0.07), // 分割線
    "--c-border-light": hex2rgb(color.C02, 0.12), // 淺邊框色 （小邊框）
    "--c-border-lighter": hex2rgb(color.C02, 0.07), // 更淺色
    "--c-border-disable": hex2rgb(color.C02, 0.04), // 禁用邊框

    // 圖標(biāo)色
    "--c-icon": hex2rgb(color.C02, 0.65),
    "--c-icon-hover": color.C09,
    "--c-icon-active": color.C01,
    "--c-icon-down": color.C10,

    // 標(biāo)簽色
    // ...getTabColor(color),
    
    // 業(yè)務(wù)自定義- 寫在業(yè)務(wù)方變量
    //由主題切換的時候，動態(tài)傳入入的 自定義變量列表 varList
    ...getBusinessVars(theme, type, varList, tPrimaryList),
使用的時候只需要熟悉這些語義化的常量即可，當(dāng)然我們也設(shè)計了一個可視化頁面，可以看到全量的自定義變量，對應(yīng)的顏色，這樣更為方便全局查看。

當(dāng)然至于上面的混合代碼，可能各位看著有些奇怪，這是我們這邊UED同學(xué)為了減少顏色設(shè)計了一套顏色規(guī)范（例如 懸浮色，根據(jù)8.8成默認(rèn)色和1.2成白色混合計算得出；按下色根據(jù)8.8成默認(rèn)色和1.2成黑色混合計算得出 ），例如混合Mix函數(shù)（顏色混合 規(guī)則符合 scss - mix），剩余的就是RGB和十六進(jìn)制顏色互相轉(zhuǎn)換 這類的函數(shù)

【4】獲取在當(dāng)前主題自定義變量顏色
自定義變量顏色：對于業(yè)務(wù)來說，可能基礎(chǔ)色并不能滿足所有業(yè)務(wù)的顏色覆蓋，或者每種主題下基礎(chǔ)色并不能一一對應(yīng)，此時自定義變量顏色，這個功能變得必不可少。主要原理也是根據(jù)每種主題可以自己填寫對應(yīng)的業(yè)務(wù)需要的顏色（極端情況），這邊也分以下兩種情景：

（1）完全自定義常量多態(tài)，即一種主題色自定義常量都有對應(yīng)一種顏色

例如 系統(tǒng)主題有四種 [dark1,dark2,light1，light2] ，某個業(yè)務(wù)背景色，我們定義了一個常量 --color-codercao-fill01 它在：
dark1主題下的顏色是一個基礎(chǔ)色 dark.C01；
dark2主題下的顏色是一個基礎(chǔ)色 dark.C02；
light1主題下的顏色是一個基礎(chǔ)色 light.C03；
light2主題下的顏色是 #fff；

此刻,這種情況，便是比較極端情況，每個主題下，我們自定義的常量對應(yīng)四個主題有四種顏色并且顏色毫無規(guī)律可言，可能是基礎(chǔ)色，可能是任意色。
--color-codercao-fill01 ：['dark.C01','dark.C02','light.C03','#fff']

（2）只和深淺相關(guān)自定義常量多態(tài)，只和深淺基礎(chǔ)色有關(guān)的顏色

例如 系統(tǒng)主題有四種 [dark1,dark2,light1，light2] ，某個業(yè)務(wù)背景色，我們定義了一個常量 --color-codercao-fill02 它在：
dark1和dark2深色主題下的顏色是一個基礎(chǔ)色 #555；
light1和light2淺色主題下的顏色是一個基礎(chǔ)色 #fff；

此刻,這種情況，我們自定義的常量對應(yīng)四個主題有只有兩種顏色，這兩種可能是基礎(chǔ)色，可能是任意色。
--color-codercao-fill02 ：['#555','#fff']

    // 主題變量color.vue
    // （1）完全自定義常量多態(tài)，一種主題色對應(yīng)一種顏色
    "--color-codercao-test0": mergeColor(
      ["#444", "#666"],
      ["#444", "#666"],
      type,
      theme,
      tPrimaryList
    ),
    // （2）只和深淺相關(guān)自定義常量多態(tài)，只和深淺基礎(chǔ)色有關(guān)的顏色
    "--color-codercao-test1": mergeColor([dark.C01], [light.C02], type),
我們就需要根據(jù)主題切換的時候，動態(tài)去計算，于是我們就要設(shè)計一個計算顏色的方法，它拿到各個主題下的顏色，主題，主題列表，甚至主題類型去計算在當(dāng)前主題下這個變量的顏色具體用哪個顏色

/**
 * mergeColor 獲取在當(dāng)前主題下該變量（自定義）的顏色
 * @param darkList [必填]  自定義常量在不同主題下的 深色系顏色列表   array ['theme1','theme2']
 * @param lightList [必填]  自定義常量在不同主題下的 淺色系顏色列表   array ['theme1','theme2']
 * @param type 主題類型  深 - 淺
 * @param theme 主題色-名
 * @param tPrimaryList 主題列表
 * @returns {boolean}
 */

const mergeColor = (darkList, lightList, type, theme, tPrimaryList) => {
  let colorList = type == "dark" ? darkList : lightList;
  let color = colorList[0],
    index = 0;
  // 如果 type 有值說明 該自定義主題常量，只和深淺基礎(chǔ)色 （兩種）有關(guān)
  if (!theme) {
    color = type == "dark" ? darkList[0] : lightList[0];
  } else {
    // 否則認(rèn)為是 一種主題 一種色值
    index = getThemeIndex(theme, tPrimaryList);
    color = colorList[index];
  }
  return color;
};
另外還有一種極端情況，是可以把css變量自定義打在對應(yīng)的DOM上。

接下來我們就可以愉快的換膚玩耍了~


六、總結(jié)
本換膚方案基于css-vars-ponyfill插件用純JS編寫換膚核心功能，不依css賴預(yù)處理，主要是通過高度抽離基礎(chǔ)色，然后轉(zhuǎn)換為比較語義化的業(yè)務(wù)（功能）變量色，然后配合主題，對應(yīng)去改變具體的顏色，并預(yù)留自定義變量的功能，讓換膚更有靈魂。當(dāng)然你有更好的想法可以評論區(qū)一起探索和分享。

demo在線體驗地址： v-theme-colors[7]
源碼地址： v-theme-colors[8]（ps 大部分功能暫未同步發(fā)布）

codercao，https://juejin.cn/post/7106702604024938503，

同時收錄于小程序《互聯(lián)網(wǎng)小兵》，技術(shù)人小程序，收錄前端、后端、移動端、人工智能、算法等，同時也有面經(jīng)、招聘、科技資訊等分享！







作者：codercao

歡迎關(guān)注微信公眾號 ：前端晚間課

更多文章，收錄于小程序-互聯(lián)網(wǎng)小兵