prefers-color-scheme:CSS媒体查询
我欣赏的一个设备和应用程序功能是能够在亮模式和暗模式之间切换。如果你曾经深夜编码或阅读，你就会知道黑色主题对于防止眼睛疲劳和由此引起的头痛有多么神奇。macOS最近实现了本机暗模式，但该模式不会将网站转换为暗界面，因此无论本机主题如何，您仍然可以获得明亮的网站。如果网站也会根据用户的系统偏好变暗或变亮，这不是很令人惊讶吗？
CSS工作组同意，这就是为什么他们创建了首选颜色方案媒体查询; 一个媒体查询，显示用户的主题偏好，并允许您对站点进行编码以匹配该偏好！
这个首选颜色方案媒体查询有两个有效值，您可以指定：光和黑暗的:
/*灯光模式*/@媒体（首选颜色模式：浅色）{html格式{背景：白色；颜色：黑色；}}/*黑暗模式*/@媒体（首选颜色模式：深色）{html格式{背景：黑色；颜色：白色；}}
结合默认站点设计，您可以提供三种不同的设计：默认(无参考)、浅色修改和深色修改。
为了更容易管理每种模式下的颜色，您可以简单地修改媒体查询中的CSS变量：
/*默认值*/：root{--背景色：粉红色；--color-scheme-text-color：红色；}/*灯光模式*/@媒体（首选颜色模式：浅色）{：root{--彩色背景：白色；--color-scheme-text-color：黑色；}}/*黑暗模式*/@媒体（首选颜色模式：深色）{：root{--配色方案背景：黑色；--color-scheme-text-color：白色；}}/*用法*/html格式{背景：var（--color-scheme-background）；color:var（--配色方案文本颜色）；}
如果您想使用JavaScript了解用户喜欢哪种模式，可以通过以下方式轻松实现获取CSS变量值:
html格式{内容：“”；/*（ab）使用content属性*/}/*灯光模式*/@媒体（首选颜色模式：浅色）{html格式{内容：“轻”；/*（ab）使用内容属性*/}}/*黑暗模式*/@媒体（首选颜色模式：深色）{html格式{内容：“深色”；/*（ab）使用content属性*/}}
const模式=getComputedStyle（document.documentElement）.getPropertyValue（'content'）；//模式：“暗”
我很高兴有官方媒体查询颜色/主题偏好。作为一个患有轻微头痛和头骨麻木偏头痛的人，我的偏好总是一个黑暗的主题，我很欣赏那些为我提供无痛用户体验而付出额外努力的应用程序。我们已经使用媒体查询来适应打印和不同的视口大小，所以让我们采取额外的步骤，根据用户的偏好提供颜色！
注意：在发布时，只有Safari Preview 68实现了此媒体查询。跟随Bugzilla错误1494034了解Firefox的支持状态。
