浏览器中如何检测操作系统的暗模式设置？

浏览器中的操作系统暗模式检测

近年来，随着用户对夜间浏览体验的偏好不断提高，操作系统已开始引入暗模式功能。作为一名 web 开发人员，您可能想知道如何检测浏览器中操作系统的暗模式状态，以相应地调整您网站的设计。

新 media queries 水平

w3c 的 media queries level 5 引入了新的查询类型，可让您检测用户的暗模式首选项：prefers-color-scheme。

规则语法：

@media (prefers-color-scheme: light) { /* 浅色模式 */ }
@media (prefers-color-scheme: dark) { /* 深色模式 */ }
@media (prefers-color-scheme: no-preference) { /* 没有偏好 */ }

safari technology preview 支持

目前，此功能仅在 safari technology preview release 68 中可用。如果您安装了它，可以使用一个切换开关来激活对暗模式 css 支持。

其他浏览器支持

其他浏览器正在逐步支持 prefers-color-scheme 查询。要查看当前支持状况，请参阅 caniuse.com。

兼容性注意事项：

对于不支持 prefers-color-scheme 查询的浏览器，您可以使用以下回退方法：

@media (prefers-color-scheme: light) {}
@media not (prefers-color-scheme: light) {}

流行度统计

根据 caniuse.com，目前世界范围内约 90% 的用户可以使用 prefers-color-scheme css。这意味着实施暗模式功能对于为您的用户提供最佳浏览体验至关重要。

通过使用 prefers-color-scheme 查询，您可以轻松地检测用户的暗模式首选项并相应地调整您网站的样式。这将为您的用户提供更舒适和身临其境的用户体验。

以上就是浏览器中如何检测操作系统的暗模式设置？的详细内容，更多请关注其它相关文章！