深色模式的一个简单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 ，与使用普通的编程语言没有什么不同。我定义了一些变量，这些变量的值根据一些逻辑而改变。而这些变量然后被用于进一步的操作。

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

编码愉快。