228

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

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

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

4

5 回答 5

292

新标准在W3C 的 Media Queries Level 5中注册。

注意：目前仅在Safari Technology Preview Release 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 Technology Preview Release 71中，他们宣布了 Safari 中的切换开关，以使测试更容易。我还制作了一个测试页面来查看浏览器的行为。

如果您安装了Safari Technology Preview Release 71，您可以通过以下方式激活：

开发 > 实验功能 > 暗模式 CSS 支持

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

切换暗/亮模式

编辑（2019 年 2 月 11 日）：Apple 在新的Safari 12.1暗模式下发货

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

即将推出的浏览器：

  • iOS 13（我猜它会在 Apple 的 Keynote 之后下周发货）
  • 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 框架Tailwind CSS v2.0支持暗模式。（2020 年 11 月 18 日发布）

编辑（2020 年 12 月 2 日）：

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

于 2018-10-25T10:01:55.210 回答
162

如果你想从 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";
});
于 2019-09-04T20:54:31.753 回答
23

目前（2018 年 9 月）正在“CSS 工作组编辑草稿”中讨论。Spec 已启动（见上文），可作为媒体查询使用。有些东西已经登陆 Safari，另请参见此处。所以理论上你可以在 Safari/Webkit 中做到这一点：

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

但似乎这是私人的。在 MDNinverted-colors上提到了 CSS 媒体功能。插头：我在这里写了关于暗模式的博客。

于 2018-08-11T12:06:20.970 回答
8

根据 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; }
于 2019-09-30T07:09:21.620 回答
5

我通过 Mozilla API 进行了搜索，它们似乎没有任何与浏览器窗口颜色相对应的变量。虽然我找到了一个可能对您有所帮助的页面：如何在 CSS 中使用操作系统样式。尽管有文章标题，但 Chrome 和 Firefox 的颜色不同。

于 2018-06-13T18:30:25.550 回答