这两天将网页CSS代码修改了一下，给网站增加了深色模式（Dark Mode），目前主流操作系统（iOS、Windows 10、macOS等）都可以支持深色模式，默认还是浅色模式。

本网站上一次改版的时候，使用的颜色系统是浅色模式，简单的说就是白底黑字，而深色模式简单的说就是黑底白字。

对于手机系统来说，深色模式比浅色模式发射更少的光，因此，深色模式可能会延长电池寿命。

在具有正常视力的人群中，浅色模式下的视觉表现往往会更好；对于一些视觉减退的人来说，深色模式的表现形式可能会更好。

网站修改的方法比较简单，先将网页颜色分类，主要分为三类，背景色、前景色、框架色，然后增加一个新的配色方案即可，深色模式配色方案我直接从微信公众号的深色模式提取出颜色，懒得自己配色了。

之后在CSS头部加入以下代码。

:root {
  --background-color: #F1F1F1;
  --box-color: #FFFFFF;
  --text-color:#000000;
}
@media (prefers-color-scheme: dark) {
:root{
  --background-color: #191919;
  --box-color: #202020;
  --text-color:#A3A3A3;
}
}

之后，使用CSS变量将CSS里相关颜色代码替换即可。

目前网站切换到深色模式后，文字还算正常，但是很多LOGO图片由于之前是基于浅色模式制作的，因此在深色模式下，图片边缘的颜色和背景不协调，不过，由于LOGO图片太多，全部重新修改工作量还挺大，还是以后再说吧。

关于深色模式的详细开发，可参见《手机网页自适应深色模式适配》一文。