如何在浏览器中检测操作系统是否处于深色模式？

Question

类似于“如何检测 OS X 是否处于深色模式？”仅适用于浏览器。

有没有人发现有没有办法检测用户的系统在 Safari/Chrome/Firefox 中是否处于新的 OS X 深色模式？

我们希望根据当前的操作模式将网站的设计更改为暗模式友好。

Answer 1

新标准已在 W3C 媒体查询级别 5 上注册。

注意：目前仅在 Safari 技术预览版 68 中可用

如果用户偏好是

light

:

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

如果用户偏好是

dark

:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

如果用户没有偏好，还有选项

no-preference

。但我建议你在这种情况下使用普通的 CSS 并正确层叠你的 CSS。

编辑（2018 年 12 月 7 日）：

在 Safari 技术预览版本 71 中，他们宣布了 Safari 中的切换开关，以使测试更容易。我还制作了一个测试页面来查看浏览器行为。

如果您安装了 Safari 技术预览版 71，您可以通过以下方式激活：

开发 > 实验性功能 > 深色模式 CSS 支持

然后，如果您打开测试页面并打开元素检查器，您将看到一个新图标来切换暗/亮模式。

---

编辑（2019 年 2 月 11 日）： Apple 推出新的 Safari 12.1 深色模式

---

编辑（2019 年 9 月 5 日）： 目前全球 25% 的人可以使用深色模式 CSS。来源：caniuse.com

即将推出的浏览器：

• iOS 13（我猜它将在苹果主题演讲后下周发布）
• EdgeHTML 76（不确定何时发货）

---

编辑（2019 年 11 月 5 日）： 目前全球 74% 的人可以使用深色模式 CSS。来源：caniuse.com

---

编辑（2020 年 2 月 3 日）：Microsoft Edge 79 支持深色模式。 （2020年1月15日发布）

我的建议是：您应该考虑实施深色模式，因为大多数用户现在都可以使用它（对于您网站的夜间用户）。

注意： 现在所有主流浏览器都支持深色模式，除了：IE、Edge

---

编辑（2020 年 11 月 19 日）： 目前全球 88% 的人可以使用深色模式 CSS。来源：caniuse.com

CSS-framework Tailwind CSS v2.0 支持暗模式。 （2020年11月18日发布）

---

编辑（2020 年 12 月 2 日）：

Google Chrome 在开发工具中添加了深色主题模拟。来源：developer.chrome.com

---

编辑（2022 年 5 月 2 日）：

目前世界上90%的人都可以使用深色模式CSS。来源：caniuse.com

---

编辑（2024 年 1 月 23 日）：

目前全球 96.5% 的人都可以使用深色模式 CSS。来源：caniuse.com

Answer 2

如果你想从JS中检测它，可以使用以下代码：

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

观察变化：

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

Answer 3

Spec 已启动（见上文），可作为媒体查询使用。 Something 已登陆 Safari，另请参阅此处。所以理论上你可以在 Safari/Webkit 中做到这一点：

@media (prefers-dark-interface) { color: white; background: black }

在 MDN 上，

inverted-colors

提到 CSS 媒体功能。插头：我在博客上介绍了深色模式这里。

Answer 4

根据 Mozilla 的说法，这是截至 2020 年的首选方法

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}

对于 Safari/Webkit，您可以使用

@media (prefers-dark-interface) { background: #000; }

Answer 5

我搜索了 Mozilla API，他们似乎没有任何与浏览器窗口颜色相对应的变量。虽然我找到了一个可能对您有帮助的页面：How to Use Operating System Styles in CSS。尽管有文章标题，但 Chrome 和 Firefox 的颜色是不同的。

Answer 6

使用 BootStrap 5.3.0-alpha1 并根据 Mark Szabo 的回答，我使用了这个（我使用的是 TypeScript）：

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
        switchColorScheme();
    });

    function switchColorScheme() {
        document.querySelector('html')!.dataset.bsTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
            ? "dark"
            : "light";
    }

    switchColorScheme();

在页面加载之前，它已经检测到浏览器当前的浅色或深色模式，并相应地设置元素上的 bootstrap 属性。

Answer 7

尚未正式，但您可以使用：

背景颜色：画布 颜色：canvasText

当前官方：https://www.w3.org/TR/css-color-3/ 建议草案：https://www.w3.org/TR/css-color-4/

（不要因为我发布这个而批评我。我不是在宣传它，我只是说它有效。）