var|动态调整web系统主题? 看这一篇就够了 var

动态调整web系统主题? 看这一篇就够了

一种构建灵活的系统页面主题方案

前置技术点
阅读此篇文章前，最好有下列知识

css 基础知识
dart-sass 预处理器编程
webpack 以及 postcss
tailwindcss 含有 jit 的 v2/v3

前言
我们在日常生活中，不论是访问网站，手机App ，还是小程序，时常会用到切换主题这个功能。它能够为用户提供一定的自定义显示界面的能力，同时手机系统级别的主题也能够更换，比如 light(明亮模式) 和 dark(黑暗模式) 。
那么如何让我们编写的应用，在改动不大的情况下，能够快速的适配多个主题呢？
这就需要设计一个方案了。
方案设计
方案参考
这里我们以程序员们最熟悉的 Github 为例，它的主题切换是这样做的:
它在根元素那预设了几套 css 变量值然后通过 js 去动态修改 html 根元素上的 data-color-mode 和 data-dark-theme 这些属性的值，从而让不同的 css 选择器选中这个根元素，并以此来动态的切换 :root 中的 css 变量的值。
同时这些变量都被广泛的使用在各种的原子化的 class 和 @apply 中，一旦变量一换，所有使用到这些class的控件和布局都收到影响，自然整个主题就改变了。
1. 提炼css变量
首先我们第一步要做的就是提炼css变量，这些主要由设计师提供。
这里以颜色为例，主要包含同个颜色的多态，控件各个状态的颜色，提示警告错误，字体中，标题，副标题，正文，提示的颜色等等。当然像字体大小，阴影这类也是同样的。
这方面就不细说了，在提取到变量之后我们就可以开始进行命名工作:
// constants.scss // 这是一个 scss 的 map数据结构，保存默认的初始值 $root-vars:(   --color-fg-default: #adbac7   --color-fg-muted: #768390   --color-fg-subtle: #545d68   --color-fg-on-emphasis: #cdd9e5   --color-scale-gray-0: #cdd9e5   --color-scale-gray-1: #adbac7   --color-scale-gray-2: #909dab   --color-scale-gray-3: #768390   // ... )
可以注意到，在维护的变量中，颜色占了绝大部分，而且我们保存的都是颜色的hex格式，并没有按照rgba的格式，把透明度(opacity)保存下来，这是为什么? 答案会在后面揭晓。
接着，维护完这个sass:map ，我们编写一个工具类 util.scss 来把颜色变量转化为字符串:
// util.scss @use 'sass:color'; @use 'sass:meta'; @function getRgbString($color) {   @if (meta.type-of($color) == color) {     @return color.red($color) color.green($color) color.blue($color);    @else {     @return $color;
然后在全局样式 global.scss 中添加:
// global.scss @use './constants.scss' as C; @use './util.scss' as Util; :root {   @each $var $color in C.$root-vars {     #{$var: Util.getRgbaString($color);