共计 7453 个字符,预计需要花费 19 分钟才能阅读完成。
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 大部分性能暂未同步公布)