如何为网站添加暗黑模式(dark mode)

dark mode 应该是近些年兴起来的，经常在手机应用上听说这个功能。dark mode 的最大特点就是暗中透着亮，不刺眼，但同时又能让你看到文字。

个人认为，dark mode 下只有黑白两种颜色就够了，当然也可以适当加入一些其他颜色，但不可过于花哨。说得更直白一点就是黑色背景加白色文字。也可以认为是饱和度比较小的色彩，这样的颜色看起来更柔和一点。

如何实现

使用 css 变量

复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，--main-text-color 会比 #00ff00 更易理解。

更详细的内容可以参考 MDN 的使用CSS变量一文。

举个例子：

看一下这个样式表

:root {/** 定义了两个变量，一个用于前景色，一个用于背景色 **/
    --geist-foreground: #000;
    --geist-background: #fff;
}
.dark-theme{/** 同样定义了两个变量，但这两个变量只在 class 属性为 design-dark-theme 的元素中有效，一个用于前景色，一个用于背景色 **/
    --geist-foreground: #fff;
    --geist-background: #000;
}

html, body {
    background-color: var(--geist-background);/** 背景使用背景色 **/
    color: var(--geist-foreground);/** 内容使用前景色 **/
}

在通常情况下，网站将使用默认变量，即背景色为白色，前景为黑色。而如果有一个元素例如（body）的class属性包含了 dark-theme，那么该元素将会使用白色作为前景色，黑色为背景色。即我们想要的 dark mode。

<html><body><p>普通模式</p></body></html>

<html><body class="dark-theme"><p>暗黑模式</p></body></html>

使用 important 关键字

那么如果不定义 css 变量能实现暗黑模式吗？

css 中文名叫层叠样式表，是分层的，高级层的优先级要大于低级层，而 important 是其中的一个关键字，它可以强制指定某元素使用低层的样式。

所以可以这样做

html, body {
    background-color: #fff;
    color: #000;
}
.dark-theme{
    background-color: #000 !important;;
    color: #fff !important;;
}

使用 important 就是为了强制使用这里定义的样式。

虽然这样也可以使用，但和前者相比，不够灵活，尤其是遇到某些高层次的属性也有important关键字时，一般情况下还是建议使用前者。

如何使用

使用 js 更改类属性

前面两种方法都是基于 css 选择器的，即根据元素的 class 属性是否包含 dark-theme。决定的，所以如果需要打开或者关闭暗黑模式，只需要添加或删除 dark-theme 属性就可以了。

可以通过 js 实现，例如

document.body.classList.add('dark-theme');//打开
document.body.classList.remove('dark-theme');//关闭

根据浏览器信息自动判断

我们可以根据浏览器的 prefers-color-scheme 属性判断是否需要使用 dark mode，只需要将样式表添加到 @media中就可以了。

@media (prefers-color-scheme: dark) {
    --geist-foreground: #fff;
    --geist-background: #000;
}

@media (prefers-color-scheme: dark) {
    background-color: #000;
    color: #fff;
}

举个具体例子

以本站为例，可以这样改。

body.dark-mode *,
body.dark-mode a:not(:hover){
    color:#fff !important;
}
body.dark-mode a:hover{
    color:#f00 !important;
}
body.dark-mode,
body.dark-mode #header,
body.dark-mode code,
body.dark-mode .related-post-lists,
body.dark-mode .related-post-lists .post-list-item-container .item-label ,
body.dark-mode .comment-container,
body.dark-mode .comment-form,
body.dark-mode .comment-form textarea.form-control,
body.dark-mode .comment-form .submit,
body.dark-mode .footer,
body.dark-mode .comment-form .input-control,
body.dark-mode .post-bottom-bar{
    background-color:#000 !important;
}
body.dark-mode .comment-form{
    border: 1px solid #f7f7f7; 
    border-radius: 30px;
}

修改不是一下子就能成功的，可以先整体上设置一下 color:#fff !important; 和 background-color:#000 !important; 然后对显示不正确的部分具体调整，把它们添加到样式表中就可以了。