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

发布日期： 2024-10-24 阅读量： 作者： 网络

如何在 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;
    }
}

# css # 操作系统

上一篇: 微信小程序模拟cookie的实现

下一篇: JavaScript的面向对象基础知识

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

随便看看