需求 & 现状

作为近两年的「新时尚」，暗色/深色模式已经几乎成为了各家系统、应用以及 Web 站点的标配功能。想要支持暗色模式，本质是判断在暗色模式下，更改生效的颜色值。在 Web 站点中，一种简单的做法是通过 CSS 变量来实现：

.button {
    background-color: var(--color-bg-0);
}
body {
    --color-bg-0: #fff;
}
body[theme-mode=dark] {
    --color-bg-0: #000;
}
复制代码

CSS 变量就是一些自定义的属性，遵循正常的的样式覆盖原则。如上所示，button的背景颜色由 --color-bg-0 CSS 变量决定，当给 body 设置 ... 时， --color-bg-0: #000 会覆盖 --color-bg-0: #fff，此时 button 背景色为黑色。

以上即是 Semi Design 实现暗色模式的大致原理。如果你想让自己的站点支持暗色模式，一个关键点是，CSS 样式中所有的颜色值必须使用 Semi Design 颜色变量（比如前面的--color-bg-0)。

现在的问题是，对于已有项目，为了支持暗色模式，必须将项目中所有颜色值手动替换为 Semi 颜色变量，这个过程非常繁琐且工作量巨大。因此本文将介绍 Semi 团队在内部项目中如何通过自动化的方式来解决这个问题。

为了避免理解歧义，这里统一名词概念：

颜色字面量：指样式文件中确定的颜色值，如 white, #FFF, rgb(23,45,0) 等；
颜色变量：指与颜色相关的 CSS 变量，这里特指 Semi 颜色变量，如 --color-primary；

解决思路

主要关注两点：

关注点一：如何解析识别 css/scss/stylus 等样式文件中的【颜色字面量】，如：background: white 中的 white。

关注点二：计算识别的【颜色字面量】是否可以替换为 Semi 主题包中提供的【颜色变量】如：var(–color-bg-0)。如果【颜色字面量】与【颜色变量】对应的颜色值相同或相近则认为可以替换。

对于第二点，计算是否有对应的颜色变量，可以使用 chorma-js。chorma-js 可以实现任意颜色格式之间的转换以及计算颜色之间的相似度，比如：chroma.distance(color1, color2)。

更重要的是第一点，如何解析识别【颜色字面量】，此时首先想到的是 PostCSS。

PostCSS

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

PostCSS 与 CSS 的关系，就相当于 Babel 与 JavaScript。PostCSS 可以将 CSS 解析为抽象语法树 (AST)，并提供了 API 允许分析和转换 CSS 文件的内容。

如下图所示，左边为一段 CSS 代码，右边为使用 PostCSS 解析后的结果（可访问 AST explorer 站点体验）：

不仅仅是 CSS，通过引入插件，PostCSS 可以解析任何形式的样式代码，比如 Sass, Less, Stylus以及 JSX 中的样式代码。

如何识别颜色值

CSS 中指定颜色值的方式有三类，分别为：

颜色关键字，如：white, blue 等等;
RGB 16 进制形式，如：#FFF;
函数形式，如：rgb(255, 255, 0) 或者 rgba(255, 0, 255, 0.5)，hsl(0deg, 0%, 13%) 或者 hsla(0deg, 0%, 13%, 1) 或者 hwb(...) gray(...);

因此借助 PostCSS 解析后的结果，针对以上三种形式的颜色值，识别算法为：

CSS 属性值中是否包含穷举的 颜色关键字；
CSS 属性值以 ‘#’ 开头则认为是 RGB 16 进制形式；
CSS 属性值为函数形式且名称为 rgb, rgba,hsl,hsla 等则认为是函数形式。

由此，基于 PostCSS 我们可以完成样式的解析以及颜色的识别。如果要达到自动完成项目中样式文件的颜色值替换工作，只需要添加收集项目中的样式文件的逻辑，并封装为 CLI 工具方便使用即可。

PostCSS 已经能够满足我们的需求，然而，还有另一种实现方式，Stylelint。

Stylelint

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

Stylelint 与 CSS 的关系，就相当于 ESLint 与 JavaScript 的关系。Stylelint 是针对样式文件的代码审查工具。Stylelint 底层基于 PostCSS，对样式文件进行解析分析，可以对 CSS/Sass/Stylus/Less 等样式文件进行审查。

比如 Stylelint 其中一个规则，color-named，不允许使用颜色关键字，效果如下：

当我们在代码中使用了类似 white 颜色关键字，Stylelint 会给出提示，借助编辑器插件，我们能够在编码过程中获得实时提示，非常方便。

每个规则在 Stylelint 中都是一个插件，插件的输入是样式文件通过 PostCSS 解析后的抽象语法树，插件可以基于 PostCSS API 遍历语法树，分析/修改样式代码。因此类似规则 color-named，我们也可以实现一个 Stylelint 插件，分析并识别样式文件中的【颜色字面量】，并给出提示，针对有对应的 semi 颜色变量的，支持自动替换（autofix）。具体可以查看官方的插件开发文档。

相比 PostCSS，使用 Stylelint 的好处是：

不需要关心样式文件的解析，只需要关注拿到解析结果后如何分析
不需要关心根据不同的样式语言，引入不同的 PostCSS 解析插件
StyleLint 有完善的 CLI 工具以及 VS Code 插件，可以直接复用

综上我们最终基于 Stylelint 来实现需求。

最终的能力 & 使用方式

配合 Stylelint 可以达到如下效果。

通过 StyleLint CLI 命令行工具一键【查找 & 替换】所有颜色变量;
通过 Stylelint 编辑器插件，写码过程中提示哪些【颜色字面量】没有使用 Semi 【颜色变量】，可设置保存时自动替换;

Step 1: 安装 npm 包

$ npm i -D stylelint @ies/stylelint-semi
复制代码

Step 2: 添加/更改配置文件

根目录下添加 .stylelintrc.json 文件，配置 @ies/stylelint-semi 插件与 semi/color-no-literal 规则：

{
  "plugins": ["@ies/stylelint-semi"],
  "rules": {
    "semi/color-no-literal": [true, { "severity": "warning", "fixExact": false }]
  }
}
复制代码

Step 3: 执行 CLI 命令

$ npx stylelint "**/*.scss"
复制代码

执行后，会检测项目下所有 .scss 文件，以下写法将会得到提示：

.banner {
    color: white;
    background: #eee;
    border: 1px solid rgb(0, 0, 0);
}
复制代码

如果要替换为 Semi 颜色变量，可以使用：

$ npx stylelint "**/*.scss" --fix
复制代码

替换后的结果为：

.banner {
    color: var(--color-white);
    background: var(--color-tertiary-light-hover);
    border: 1px solid var(--color-black);
}
复制代码

Step 4: 编辑器提示

VS Code 中安装 Stylelint 插件。此时鼠标 hover 到颜色值会有以下提示：

实际效果展示

支持暗色模式前后的效果：

浅色版

深色版

参考资源

Postcss plugin 开发文档

Stylelint rule 开发

AST 调试工具

作者：字节前端
链接：https://juejin.cn/post/6965716682681614350
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

ITPub博客

前端站点一键支持暗色模式