作者：冯伟尧石嘉刘大畅
需求现状作为近两年的「新时尚」，暗色/深色模式已经几乎成为了各家系统、应用以及Web站点的标配功能。想要支持暗色模式，本质是判断在暗色模式下，更改生效的颜色值。在Web站点中，一种简单的做法是通过CSS变量[1]来实现：
.button{background-color:var(--color-bg-0);}body{--color-bg-0:#fff;}body[theme-mode=dark]{--color-bg-0:#;}
CSS变量就是一些自定义的属性，遵循正常的的样式覆盖原则。如上所示，button的背景颜色由--color-bg-0CSS变量决定，当给body设置bodytheme-mode="dark".../body时，--color-bg-0:#会覆盖--color-bg-0:#fff，此时button背景色为黑色。
以上即是SemiDesign实现暗色模式的大致原理。如果你想让自己的站点支持暗色模式，一个关键点是，CSS样式中所有的颜色值必须使用SemiDesign颜色变量（比如前面的--color-bg-0)。
现在的问题是，对于已有项目，为了支持暗色模式，必须将项目中所有颜色值手动替换为Semi颜色变量，这个过程非常繁琐且工作量巨大。因此本文将介绍Semi团队在内部项目中如何通过自动化的方式来解决这个问题。
为了避免理解歧义，这里统一名词概念：
颜色字面量：指样式文件中确定的颜色值，如white,#FFF,rgb(23,45,0)等；颜色变量：指与颜色相关的CSS变量，这里特指Semi颜色变量，如--color-primary；解决思路主要