这个深色模式有什么用

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

您可能已经熟悉媒体查询媒体查询。它们被广泛用于提高网站的响应性。宽度和高度属性包含视口的大小。然后，你可以用CSS以不同的大小呈现不同的布局。

preferences-color-scheme媒体查询以同样的方式工作。用户可以配置他们的操作系统使用浅色或深色主题。Preferences-color-scheme包含此值。该值为亮或暗，尽管W3C规范表明它可能支持将来的值，如棕褐色。我为这两种模式指定了不同的CSS变量值，让用户的操作系统来决定。

首选项-配色方案媒体查询首选项-配色方案媒体查询有两种变体:

/*灯光模式*/@ media(preferred-color-scheme:Light){:root {-body-BG:# FFFFFF；-车身颜色:# 000000；}}/*黑暗模式*/@ media(preferred-color-scheme:Dark){:root {-body-BG:# 000000；-车身颜色:# FFFFFF}}在上面的CSS中，- body-bg和- body-color是CSS变量。如您所见，这两种模式包含不同的值。在浅色主题中，我设置了白色背景和黑色文本。在深色主题中，我设置了黑色背景和白色文字。

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

/*灯光模式*/:root {-body-BG:# FFFFFF；-车身颜色:# 000000；}/*深色模式*/@ media(preferred-color-scheme:Dark){:root {-body-BG:# 000000；-车身颜色:# FFFFFF}}在上面的代码中，我默认定义了一个浅色主题，如果媒体查询是深色的，就转换成深色主题。这样，将来添加到媒体查询中的任何值都将被默认设置为轻主题。

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

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

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

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

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

结论请注意，使用preferences-color-scheme与使用普通编程语言没有区别。我定义了一些变量，它们的值按照某种逻辑变化。然后这些变量被用于进一步的操作。

能够让你的网站根据用户选择的主题进行调整是一个很棒的辅助功能。而且为了用户的利益，进一步模糊了桌面和网络的界限。最新版本的浏览器支持首选项-配色方案，因此您可以立即开始试验。

快乐编码。

本文最初发表在作者的网站上，经允许后转载。

通过:

作者:Ayush Sharma主题:lujun9972译者:geekpi校对:wxy

本文最初由LCTT编辑，Linux中国很荣幸地发布了它。