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

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《浏览器中如何检测操作系统的暗模式设置？》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

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

近年来，随着用户对夜间浏览体验的偏好不断提高，操作系统已开始引入暗模式功能。作为一名 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 查询，您可以轻松地检测用户的暗模式首选项并相应地调整您网站的样式。这将为您的用户提供更舒适和身临其境的用户体验。

本篇关于《浏览器中如何检测操作系统的暗模式设置？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！