关于前端主题切换的思考和现代前端样式的解决方案落地

demo在线体验地址: v-theme-colors[1]
源码地址: v-theme-colors[2](ps 大部分功能暂未同步发布)


一、换肤

网站或者应用一键切换主题(简称:换肤)功能,对每个前端开发者来说已经非常常见了,通常是一深一浅,或自由组合衍生出众多主题,或任意主题,这时候,设计一个工程化主题切换功能,并梳理现代前端样式的解决方案显得尤为重要。

二、换肤调研

很久以前,通常的做法是每个颜色主题块编写样式表,切换的时候对应去切换。现代前端主题切换——目前主流的方案往往通过 CSS 变量(CSS 自定义属性)[3]来实现,将主题有关的颜色,通过业务和语义化的方式命名。接下来我们看看前端圈比较知名的UI他们是怎么做的:

(1)ElementUI[4]

关于前端主题切换的思考和现代前端样式的解决方案落地 我们可以看到 element-plus 官网,主题切换主题,是在html标签加里 class=”dark” 涉及到主题的变量,基于html.dark,和:root配合改变。当然我们也可通过源码看到element-plus是用的是scss。

关于前端主题切换的思考和现代前端样式的解决方案落地
image.png

(2)ant.design[5]

我们可以看到 ant.design 官网,主题切换主题,是在html标签加里 color-scheme 和在body里添加自定义标签data-theme="dark",和:root配合改变。CSS 属性允许元素指示它可以轻松呈现的配色方案,操作系统配色方案的常见选择是“亮”和“暗”,或者是“白天模式”和“夜间模式”。当用户选择其中一种配色方案时,操作系统会对用户界面进行调整。这包括表单控件、滚动条和 CSS 系统颜色的使用值。通过源码,我们也可以看到ant用的是less。

关于前端主题切换的思考和现代前端样式的解决方案落地
image.png

三、换肤痛点和思考

(1) 正如上文ElementUI和ant,都分别借助不同的CSS预处理器(sass和less)来组织代码,再微前端盛行的时代,怎么设计一套通用的多团队可用,并且去css预处理的换肤CSS 自定义属性?

(2) 谁来维护不同主题色,研发和设计之间,如何保持不同主题色值的同步沟通?

(3) 如何最小化前端工程师的开发量,不需要做多份主题色?
(4) …

基于以上考虑,举个例子,我们希望做到在开发时,编写:

/**
 * 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上。

接下来我们就可以愉快的换肤玩耍了~

关于前端主题切换的思考和现代前端样式的解决方案落地
color.gif

六、总结

本换肤方案基于css-vars-ponyfill插件用纯JS编写换肤核心功能,不依css赖预处理,主要是通过高度抽离基础色,然后转换为比较语义化的业务(功能)变量色,然后配合主题,对应去改变具体的颜色,并预留自定义变量的功能,让换肤更有灵魂。当然你有更好的想法可以评论区一起探索和分享。

demo在线体验地址: v-theme-colors[7]
源码地址: v-theme-colors[8](ps 大部分功能暂未同步发布)

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

  1. —  —

    关注公众号后,回复下面关键词获取

    关于前端主题切换的思考和现代前端样式的解决方案落地

    回复 面试,获取最新大厂面试资料。
    回复 简历,获取 3200 套 简历模板。
    回复 TypeScript,获取 TypeScript 精讲课程。
    回复 uniapp,获取 uniapp 精讲课程。
    回复 Node,获取 Nodejs+koa2 实战教程。
    回复 架构师,获取 架构师学习资源教程。
    更多教程资源应用尽有,欢迎 关注获取
  2. “在看和转发”就是最大的支持


本篇文章来源于微信公众号:程序IT圈

原创文章,作者:software,如若转载,请注明出处:https://www.sldh123.com/4287.html

(0)
上一篇 9月 15, 2022 2:19 下午
下一篇 9月 15, 2022 2:20 下午

相关推荐

发表回复

您的电子邮箱地址不会被公开。