让您的网站适应用户选择的主题的能力是一个很好的辅助功能。您可能已经熟悉媒体查询。它们被广泛用于使网站响应。width和height属性包含视口的尺寸。然后，您可以使用CSS以不同的尺寸呈现不同的布局。prefers-color-scheme媒体查询的工作方式相同。用户可以将他们的操作系统配置为使用浅色或深色主题。prefers-color-scheme包含此值。该值有浅色或深色，尽管W3C规范声明它可能会支持棕褐色等未来值。我为两种模式指定不同的CSS变量值，让用户的OS来决定。prefers-color-scheme媒体查询prefers-color-scheme媒体查询的两个变体是：/*Lightmode*/@media(prefers-color-scheme:light){:root{--body-bg:#FFFFFF;--身体颜色：#000000；}}/*深色模式*/@media(prefers-color-scheme:dark){:root{--body-bg:#000000;--身体颜色：#FFFFFF；}}在上面的CSS中，--body-bg和--body-color是CSS变量。如您所见，它们包含两种模式的不同值。在浅色主题中，我设置了白色背景和黑色文字。在深色主题中，我设置了黑色背景和白色文本。由于规范说W3C可能会引入未来的值，因此将此CSS转换为默认值是有意义的。/*光照模式*/:root{--body-bg:#FFFFFF;--body-color:#000000;}/*深色模式*/@media(prefers-color-scheme:dark){:root{--body-bg:#000000;--身体颜色：#FFFFFF；}}在上面的代码中，我默认定义了一个浅色主题，如果媒体查询是深色的，就会转换为深色主题。这样，添加到媒体查询的任何未来值都将默认为浅色主题。使用CSS变量现在我已经为不同的主题设置了不同的值，我需要实际使用它们来设计页面。主体{背景：var(--body-bg);color:var(--body-color);}var()语法是CSS处理变量的方式。在上面的代码中，我的意思是将背景设置为--body-bg的值，将颜色设置为--body-color的值。注意这些变量的值来自于媒体查询。这意味着背景和前景色根据操作系统设置而改变！这就是媒体查询的真正威力。提供从操作系统到Web的一致用户体验。如果您访问findmymastodon.com，并为您的操作系统切换主题，您将看到从一个主题到另一个主题的转换。CSS工作组站点也使用相同的媒体查询。更改您的操作系统主题，网站将切换主题进行调整。结论请注意，使用prefers-color-scheme与使用普通编程语言没有什么不同。我已经定义了一些变量，它们的值会根据某种逻辑发生变化。然后将这些变量用于进一步的操作。使您的站点适应用户选择的主题的能力是一个很好的辅助功能。而且，为了用户的利益，它进一步模糊了桌面和网络之间的界限。最新的浏览器版本支持prefers-color-scheme，因此您可以立即开始试验。
