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

Question

类似于“How to detect if OS X is in dark mode?”仅适用于浏览器。

有没有人发现是否有办法检测用户的系统是否在Safari / Chrome / Firefox的新OS X Dark模式下？

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

Answer 1

新标准在W3C in Media Queries Level 5上注册。

注意：目前仅适用于Safari Technology Preview Release 68

如果用户偏好是light：

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

如果用户偏好是dark：

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

如果用户没有偏好，还有no-preference选项。但我建议你只使用普通的CSS并正确地级联你的CSS。

编辑（2018年12月7日）：

在Safari Technology Preview Release 71，他们在Safari中宣布了一个切换开关，使测试更容易。我还制作了一个test page来查看浏览器的行为。

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

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

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

-

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

Answer 2

目前（2018年9月）being discussed in "CSS Working Group Editor Drafts"。 Spec已启动（见上文），可作为媒体查询使用。 Something已经登陆Safari，另见here。所以理论上你可以在Safari / Webkit中做到这一点：

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

但似乎这是private。 在MDN上，CSS媒体功能inverted-colors是mentioned。插头：我在博客上写了关于黑暗模式的here。

Answer 3

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