demo線上體驗地址： v-theme-colors
原始碼地址： v-theme-colors（ps 大部分功能暫未同步釋出）
一、換膚
網站或者應用一鍵切換主題（簡稱：換膚）功能，對每個前端開發者來說已經非常常見了，通常是一深一淺，或自由組合衍生出眾多主題，或任意主題，這時候，設計一個工程化主題切換功能，並梳理現代前端樣式的解決方案顯得尤為重要。
二、換膚調研
很久以前，通常的做法是每個顏色主題塊編寫樣式表，切換的時候對應去切換。現代前端主題切換——目前主流的方案往往通過 CSS 變數（CSS 自定義屬性）來實現，將主題有關的顏色，通過業務和語義化的方式命名。接下來我們看看前端圈比較知名的UI他們是怎麼做的：
（1）ElementUI
我們可以看到 element-plus 官網，主題切換主題，是在html標籤加里 class="dark"
涉及到主題的變數，基於html.dark,和：root配合改變。當然我們也可通過原始碼看到element-plus是用的是scss。
（2）ant.design
我們可以看到 ant.design 官網，主題切換主題，是在html標籤加里 color-scheme 和在body裡新增自定義標籤 data-theme="dark" ,和：root配合改變。 CSS 屬性允許元素指示它可以輕鬆呈現的配色方案,作業系統配色方案的常見選擇是“亮”和“暗”，或者是“白天模式”和“夜間模式”。當使用者選擇其中一種配色方案時，作業系統會對使用者介面進行調整。這包括表單控制元件、滾動條和 CSS 系統顏色的使用值。通過原始碼，我們也可以看到ant用的是less。
三、換膚痛點和思考
(1) 正如上文ElementUI和ant，都分別藉助不同的CSS前處理器（sass和less）來組織程式碼，再微前端盛行的時代，怎麼設計一套通用的多團隊可用，並且去css預處理的換膚CSS 自定義屬性？
(2) 誰來維護不同主題色，研發和設計之間，如何保持不同主題色值的同步溝通？
(3) 如何最小化前端工程師的開發量，不需要做多份主題色？
(4) ...
基於以上考慮，舉個例子，我們希望做到在開發時，編寫：
.text {
color: var(--c-color)
}這樣就可以一勞永逸——直接支援兩套或者多套主題模式。
但是業務往往是千變萬化的，正如我司：
（1）換膚的需求是，有一個色調（深淺），然後，根據深淺，衍生出很多 主題色，比如深藍、深黃、深紅、淺藍、淺黃、淺紅...
（2）對於深淺來說，有定於出一些基礎色，對於元件顏色來說，通常用一組基礎色即可滿足，但是業務頁面中可能涉及到千變萬化的顏色...
四、換膚架構
正如上圖，我們可以把換膚提升到一個平臺或中臺來：
（1）對於UED同學，他們可以自己去配置換膚相關的系統色系，衍生的主題色，系統色系色系基礎色
（2）對於各個前端團隊來說，可以通過主題色，色系基礎色，任意自定義和配置 自己業務需要顏色的變數
五、換膚技術選型和實現
筆者這裡是用基於css-vars-ponyfill的換膚方案，至於它的優勢正如它們官方所描述，在傳統和現代瀏覽器為css自定義屬性 提供客戶端支援的 pnyfill。
【1】該方案的亮點和規則
（1）純JS實現，對外暴露initThemes初始化方法，不依賴CSS前處理器（sass和less），相容ie9
（2）抽離深淺色系基礎色（統一治理輸出），以及主題色，混合顏色（黑白色）都可以動態介面獲得
（3）統一規範業務色常量命名，JS定義自定義函式方法 1、 Mix函式實現媲美sass的顏色混合機制，2、十六進位制和RGB（rgba）互相轉換函式
（4）技術路線不抖，直接用var()函式使用，後期封裝成JS庫 ，皮膚配置中臺，可以提供給各個團隊使用
（5）關於業務自定義變數，設計有兩個治理方案：（1）全域性變數， 全域性單獨維護（2）區域性業務變數，區域性單獨維護
【2】核心原理
（1）在應用端觸發換膚操作的時候，配合 JavaScript 狀態管理，同步主題切換的訊號，對應對應觸發initThemes 方法
// 測試新主題
let varList = {
...colorColor
}
let tPrimaryList = themePrimaryList
initThemes('', tPrimaryList, varList, '')（2）切換該主題色甚至該業務下的變數對應的值，通過css-vars-ponyfill，把自定義常量打到對應的DOM節點（通常是html或者body下），從而實現切換主題
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 區分改的是主題型別，還是主題色 [ 預留欄位 ]....
* @returns {boolean}
*/
export const initThemes = (theme, tPrimaryList, varList, themeType) => {
let variables = getVariables(
theme || "lightBlue",
tPrimaryList,
varList,
themeType
);
cssVars({
watch: true, // 當新增，刪除或修改其或元素的禁用或href屬性時，ponyfill將自行呼叫
variables: variables, // variables 自定義屬性名/值對的集合
onlyLegacy: false, // false 預設將css變數編譯為瀏覽器識別的css樣式 true 當瀏覽器不支援css變數的時候將css變數編譯為識別的css
});
};themeList.js 這裡存放一些假設我們在應用端設定的一些主題和色系（深淺）基礎色
import { light } from './com/light'
import { dark } from './com/dark'
// 主題 - 主題色
export const themePrimaryList = {
dark: [
{
color: '#FFAA0E',
name: '深黃',
theme: 'darkYellow'
},
{
color: '#FFAA0E',
name: '深藍',
theme: 'darkBlue'
},
],
light: [
{
color: '#FFAA0E',
name: '深黃',
theme: 'lightYellow'
},
{
color: '#256DFF',
name: '淺藍',
theme: 'lightBlue'
}
]
}
export const themeTypeList = {
dark: dark,
light: light,
}【3】色組 & 色值平臺設計
對於前端使用者來說，我們只需要關注 具體有哪些常量，和怎麼去定於常量。例如我司，我們基於業務的定義了一些常用的語義化的一些業務常量，例如
// 功能色
"--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, // 標題
"--c-text-subtitle": hex2rgb(color.C02, 0.65), // 次要 - 副標題
"--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, // 元件預設背景顏色
"--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), // 禁用邊框
// 圖示色
"--c-icon": hex2rgb(color.C02, 0.65),
"--c-icon-hover": color.C09,
"--c-icon-active": color.C01,
"--c-icon-down": color.C10,
// 標籤色
// ...getTabColor(color),
// 業務自定義- 寫在業務方變數
//由主題切換的時候，動態傳入入的 自定義變數列表 varList
...getBusinessVars(theme, type, varList, tPrimaryList),
使用的時候只需要熟悉這些語義化的常量即可，當然我們也設計了一個視覺化頁面，可以看到全量的自定義變數，對應的顏色，這樣更為方便全域性檢視。
當然至於上面的混合程式碼，可能各位看著有些奇怪，這是我們這邊UED同學為了減少顏色設計了一套顏色規範（例如 懸浮色，根據8.8成預設色和1.2成白色混合計算得出；按下色根據8.8成預設色和1.2成黑色混合計算得出 ），例如混合Mix函式（顏色混合 規則符合 scss - mix），剩餘的就是RGB和十六進位制顏色互相轉換 這類的函式
【4】獲取在當前主題自定義變數顏色
自定義變數顏色：對於業務來說，可能基礎色並不能滿足所有業務的顏色覆蓋，或者每種主題下基礎色並不能一一對應，此時自定義變數顏色，這個功能變得必不可少。主要原理也是根據每種主題可以自己填寫對應的業務需要的顏色（極端情況），這邊也分以下兩種情景：
（1）完全自定義常量多型，即一種主題色自定義常量都有對應一種顏色
例如 系統主題有四種 [dark1,dark2,light1，light2] ，某個業務背景色，我們定義了一個常量 --color-codercao-fill01 它在：
dark1主題下的顏色是一個基礎色 dark.C01； dark2主題下的顏色是一個基礎色 dark.C02；
light1主題下的顏色是一個基礎色 light.C03；
light2主題下的顏色是 #fff；
此刻,這種情況，便是比較極端情況，每個主題下，我們自定義的常量對應四個主題有四種顏色並且顏色毫無規律可言，可能是基礎色，可能是任意色。 --color-codercao-fill01 ：['dark.C01','dark.C02','light.C03','#fff']
（2）只和深淺相關自定義常量多型，只和深淺基礎色有關的顏色
例如 系統主題有四種 [dark1,dark2,light1，light2] ，某個業務背景色，我們定義了一個常量 --color-codercao-fill02 它在：
dark1和dark2深色主題下的顏色是一個基礎色 #555；
light1和light2淺色主題下的顏色是一個基礎色 #fff；
此刻,這種情況，我們自定義的常量對應四個主題有隻有兩種顏色，這兩種可能是基礎色，可能是任意色。 --color-codercao-fill02 ：['#555','#fff']
// 主題變數color.vue
// （1）完全自定義常量多型，一種主題色對應一種顏色
"--color-codercao-test0": mergeColor(
["#444", "#666"],
["#444", "#666"],
type,
theme,
tPrimaryList
),
// （2）只和深淺相關自定義常量多型，只和深淺基礎色有關的顏色
"--color-codercao-test1": mergeColor([dark.C01], [light.C02], type),
我們就需要根據主題切換的時候，動態去計算，於是我們就要設計一個計算顏色的方法，它拿到各個主題下的顏色，主題，主題列表，甚至主題型別去計算在當前主題下這個變數的顏色具體用哪個顏色
/**
* mergeColor 獲取在當前主題下該變數（自定義）的顏色
* @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 有值說明 該自定義主題常量，只和深淺基礎色 （兩種）有關
if (!theme) {
color = type == "dark" ? darkList[0] : lightList[0];
} else {
// 否則認為是 一種主題 一種色值
index = getThemeIndex(theme, tPrimaryList);
color = colorList[index];
}
return color;
};另外還有一種極端情況，是可以把css變數自定義打在對應的DOM上。
接下來我們就可以愉快的換膚玩耍了~
六、總結
本換膚方案基於css-vars-ponyfill外掛用純JS編寫換膚核心功能，不依css賴預處理，主要是通過高度抽離基礎色，然後轉換為比較語義化的業務（功能）變數色，然後配合主題，對應去改變具體的顏色，並預留自定義變數的功能，讓換膚更有靈魂。當然你有更好的想法可以評論區一起探索和分享。
demo線上體驗地址： v-theme-colors
原始碼地址： v-theme-colors（ps 大部分功能暫未同步釋出）