新方法：如何给网站设置 dark 模式

去年给网站加了 暗黑模式，使用 js + css 的方式实现，不过当时有两个地方一直没搞清楚，导致存在以下两个问题：

1. 暗黑模式下在网络不畅的情况下会存在刷新出现短暂闪烁的问题（页面加载时先渲染 css，再执行 js）；
2. 系统切换到另一种模式时界面不能自动切换的（无法触发事件）。

如何设置

这次改用 css 实现，只需要两步，连 js 都用不到，在着手处理前有以下几个关键要素需要了解一下。

1. @media 关键字

   用于设置 css 规则。

2. prefers-color-scheme 特性

   用于检测用户是否有将系统的主题色设置为亮色或者暗色。

3. :root

   它是一个伪类，表示元素，与 html 选择器相同，但优先级更高，这里我们要用到它的高优先级特性。

4. css 的 var()函数

   用于动态设置 css 属性值。

第一步

先在样式文件 style.css 里先设置 dark 模式的 css 规则：prefers-color-scheme:dark 这里设置的是适用于暗黑模式的规则，定义了一个变量--background-main 设定暗黑模式下的背景颜色。

@media (prefers-color-scheme:dark) {
body{background: var(--background-main: #181819)}
}

第二步

在第一步的代码下追加下面这段样式：
:root{}用于指定在正常模式下的背景样式，并给变量--background-main 设置正常模式下的背景颜色；给 body{}定义属性 background-color，属性值就是刚刚设置的变量--background-main

:root {--background-main: #fff}
body {background-color: var(--background-main)}

这样就完成了，就这么简单。这种方式的优势是设置非常简单，不涉及 js 编程，局限性也很明显，只能实现跟随系统的设置，无法实现手动切换，对于一般的博客来说这已经足够了。

参考：prefers-color-scheme