如何在 Web 开发中检测浏览器中的操作系统暗模式？

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《如何在 Web 开发中检测浏览器中的操作系统暗模式？》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

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

在 web 开发中，用户界面适应操作系统（os）的暗模式设置变得越来越重要。本文将重点介绍检测浏览器中 os 暗模式的方法，从而使网站能够针对不同模式调整其设计。

w3c media queries level 5

最新的 web 标准引入了 prefers-color-scheme 媒体查询，用于检测用户的首选颜色方案。这允许网站根据操作系统偏好设置，通过 css 来应用不同的样式。

实现

以下代码段演示了如何使用 prefers-color-scheme 媒体查询在 safari/chrome/firefox 中检测暗模式：

/* 明亮模式 */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

/* 暗模式 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

safari technology preview

在 safari technology preview 中，有一个专门的切换开关可以方便地测试暗/亮模式。可以在 "开发" 菜单下的 "实验功能" 中启用此功能。

支持情况

尽管 prefers-color-scheme 媒体查询已成为 w3c 的官方标准，但其支持情况仍存在差异。目前，safari、chrome 和 firefox 等主流浏览器支持此功能。

根据 [caniuse.com](https://caniuse.com/css-color-scheme) 的数据，截至 2022 年 5 月，全球 90% 的互联网用户可以使用暗模式 css，表明它已成为 web 开发中的一个重要考虑因素。

理论要掌握，实操不能落！以上关于《如何在 Web 开发中检测浏览器中的操作系统暗模式？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！