支持暗色模式

解决方案：用 CSS 变量来设置正常和暗色模式下的颜色值。

.button {
  background-color: var(--color-bg-0);
  color: var(--color-bg-1);
}
body { /* 正常模式 */
  --color-bg-0: #fff;
  --color-bg-1: #333;
}
body[theme-mode=dark] { /* 暗色模式 */
  --color-bg-0: #000;
  --color-bg-1: #fff;
}

对已有的项目，快速实现暗色模式的方式：做个工具，将样式表中的正常和暗色模式下颜色值不同的颜色值替换成变量值。如:

• white, #fff, rgb(245, 256, 256) => —color-white
• black => —color-black

可以将相似度比较近的颜色，认为是一种颜色，一并做替换。

颜色值替换方案

可以用 PostCSS 来实现。PostCSS 将 CSS 解析为 抽象语法树(AST)。然后修改语法树中的颜色值，生成新的文件。通过引入插件，PostCSS 可以解析任何形式的样式代码，比如 Sass, Less, Stylus以及 JSX 中的样式代码。

识别颜色值，可以用chorma-js。chorma-js 可以实现任意颜色格式之间的转换以及计算颜色之间的相似度。

工具

• AST 浏览器

参考

• 前端站点如何优雅支持暗色模式