一个简单的 CSS 暗黑模式技巧

您可能已经熟悉媒体查询。它们被广泛用于使网站具有响应性。 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 与使用常规编程语言没有什么不同。 我定义变量，它们的值会根据一些逻辑而变化。 这些变量然后用于进一步的操作。

让您的网站能够根据用户的选择调整主题是一个很棒的辅助功能。 它进一步模糊了桌面和 Web 之间的界限，从而有益于用户。 最新的浏览器版本 支持 prefers-color-scheme，因此您可以立即开始试验。

编码愉快。

本文最初出现在 作者的网站 上，并经许可重新发布。