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

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

是否有人能找到一种方法来检测用户的系统是否处于Safari / Chrome / Firefox中新的OS X暗模式下？

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

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

注意：当前仅在Safari Technology Preview版本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 Technology Preview版本71，则可以通过以下方式激活：

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

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

--

编辑（2019年2月11日）：苹果以新的Safari 12.1暗模式发布

--

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

即将推出的浏览器：

• iOS 13（我猜它将在苹果的Keynote之后下周发布）
• EdgeHTML 76（不确定何时发货）

--

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

--

编辑（2020年2月3日）：Microsoft Edge 79支持暗模式。（于2020年1月15日发行）

--

我的建议是：您应该考虑实现暗模式，因为大多数用户现在都可以使用它（特别是为了节省移动电话的电量）。

注意：除IE，Edge以外，所有主流浏览器现在都支持暗模式。

如果要从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";
});

当前（2018年9月）正在“ CSS Working Group Editor Drafts”中进行讨论。Spec已启动（请参见上文），可以作为媒体查询使用。某些东西已经在Safari中着陆了，另请参见此处。因此，从理论上讲，您可以在Safari / Webkit中执行以下操作：

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

但这似乎是私人的。在MDN inverted-colors上，提到了CSS媒体功能。塞：我在这里写了有关暗模式的博客。

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

根据Mozilla的说法，这是截至2019年9月的首选方法

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