preferreds-color-scheme：CSS媒体查询

我逐渐欣赏的一种设备和应用功能是能够在亮模式和暗模式之间切换的功能。如果您曾经做过深夜编码或阅读，那么您就会知道，黑暗的主题对于防止眼睛疲劳和由此引起的头痛有多么惊人。macOS最近实现了本机暗模式，但是该模式不会将网站转换为暗界面，因此无论本机主题如何，您仍然会获得明亮的网站。如果网站也会根据用户的系统偏好而变暗还是变亮，这会令人惊讶吗？

CSS工作组表示同意，这就是为什么他们创建了prefers-color-scheme媒体查询；媒体查询，该查询表明用户的主题首选项是什么，并允许您对网站进行编码以匹配该主题！

该prefers-color-scheme媒体查询有两种有效值，您可以指定： light与dark：

/* Light mode */ @media (prefers-color-scheme: light) {     html {         background: white;         color: black;     } } /* Dark mode */ @media (prefers-color-scheme: dark) {     html {         background: black;         color: white;     } }

结合默认站点设计，您可能会提供三种不同的设计：默认（no-preference），浅色修改和深色修改。

为了简化每种模式下的颜色管理，您只需在媒体查询中修改CSS变量即可：

/* Defaults */ :root {     --color-scheme-background: pink;     --color-scheme-text-color: red; } /* Light mode */ @media (prefers-color-scheme: light) {     :root {         --color-scheme-background: white;         --color-scheme-text-color: black;     } } /* Dark mode */ @media (prefers-color-scheme: dark) {     :root {         --color-scheme-background: black;         --color-scheme-text-color: white;     } } /* Usage */ html {     background: var(--color-scheme-background);     color: var(--color-scheme-text-color); }

如果您想使用JavaScript来了解用户喜欢哪种模式，则可以通过获取CSS变量值来轻松实现：

html {     content: ""; /* (ab)using the content property */ } /* Light mode */ @media (prefers-color-scheme: light) {     html {         content: "light"; /* (ab)using the content property */     } } /* Dark mode */ @media (prefers-color-scheme: dark) {     html {         content: "dark"; /* (ab)using the content property */     } } const mode = getComputedStyle(document.documentElement).getPropertyValue('content'); // mode: "dark"

我很高兴有官方媒体查询颜色/主题首选项。作为遭受轻微头痛，麻木偏头偏头痛的人，我的首选始终是黑暗主题，并且我感谢那些付出了额外努力才能为我带来无痛用户体验的应用程序。我们已经使用媒体查询来适应打印和不同的视口大小，因此让我们采取额外的步骤根据用户喜好提供颜色！