前端站点一键支持暗色模式 [复制链接]

作者：冯伟尧石嘉刘大畅

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

.button{background-color:var(--color-bg-0);}body{--color-bg-0fff;}body[theme-mode=dark]{--color-bg-0;}

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

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

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

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

主要