网页自动适配 Mac 的 Dark Mode

prefers-color-scheme 可以检测到用户是否已请求操作系统使用浅色或深色主题，其有三个可选的选项：

• no-preference：未能检测到用户的选择
• light：用户倾向于使用浅色的主题
• dark：用户倾向于使用深色的主题，例如用户开启了 Mac 中的深色模式

所以，在这里我们可以使用 prefers-color-scheme: dark 来检测用户是否开启了 Dark Mode。

 

使用：

/* 操作系统及浏览器未支持或用户未开启 Dark Mode */
body {
    background-color: white;
    color: black;
}

@media (prefers-color-scheme: dark) {
    /* 操作系统及浏览器支持且用户开启了 Dark Mode */
    body {
        background-color: black;
        color: white;
    }
}

这样，用户在平时看到的是白色背景，而开启了深色模式后，页面就会自动变为黑色背景。当然，夜间模式的适配需要做的工作还很多，需要你慢慢调整各元素的颜色等。