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 大部分性能暂未同步公布）