一个深色模式的简单 CSS 技巧

Question

让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。

你可能已经熟悉媒体查询media query了。它们被广泛地用于使网站具有响应性。 width 和 height 属性包含视区的尺寸。然后，你可以使用 CSS 在不同的尺寸下呈现不同的布局。

prefers-color-scheme 媒体查询 的工作方式与此相同。用户可以将他们的操作系统配置为使用浅色或深色主题。 prefers-color-scheme 包含这个值。该值是 light 或 dark ，尽管 W3C 规范指出它可能支持未来的值，如 sepia 。我为这两种模式指定不同的 CSS 变量值，让用户的操作系统来决定。

prefers-color-scheme 媒体查询

prefers-color-scheme 媒体查询的两种变化是:

/* Light mode */
@media (prefers-color-scheme: light) {
   :root {
       --body-bg: #FFFFFF;
       --body-color: #000000;
   }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

在上面的 CSS 中， --body-bg 和 --body-color 是 CSS 变量 。正如你所看到的，它们对两种模式都包含不同的值。在浅色主题中，我设置了一个白色背景和黑色文本。在深色主题中，我设置了黑色背景和白色文本。

因为 规范 说 W3C 可能会引入未来的值，所以把这个 CSS 转换为默认值是有意义的。

/* Light mode */
:root {
   --body-bg: #FFFFFF;
   --body-color: #000000;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

在上面的代码中，我默认定义了一个浅色主题，如果媒体查询是 dark ，则将其转换为深色主题。这样一来，以后任何添加到媒体查询的值都会默认设置为浅色主题。

使用 CSS 变量

现在我为不同的主题设置了不同的值，我需要实际使用它们来设计页面。

body {
   background: var(--body-bg);
   color: var(--body-color);
}

var() 语法 是 CSS 使用变量的方式。在上面的代码中，我是说把 background 设置为 --body-bg 的值，把 color 设置为 --body-color 的值。注意，这些变量的值来自媒体查询。这意味着背景和前景的颜色是根据操作系统的设置而改变的！

这就是媒体查询的真正能力。提供一个从操作系统到网页的一致的用户体验。

如果你进入 findmymastodon.com ，并切换你的操作系统的主题，你会看到从一个主题到另一个主题的过渡。

CSS 工作组 网站也使用同样的媒体查询。改变你的操作系统主题，网站就会切换主题来进行调整。

结论

请注意，使用 prefers-color-scheme 与使用普通的编程语言没有什么不同。我定义了一些变量，这些变量的值根据一些逻辑而改变。而这些变量然后被用于进一步的操作。

让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。而且，为了用户的利益，它进一步模糊了桌面和网络之间的界限。最新的浏览器版本 支持 prefers-color-scheme ，所以你今天就可以开始实验了。