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

小开

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

小开

Spec已经启动(见上文)，可用作媒体查询。某物已经登陆Safari，请参见在这里。所以理论上你可以在Safari/Webkit中这样做:

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

在MDN上，CSS媒体特性inverted-colors是提到。插一句:我写过关于黑暗模式在这里的博客。

小开

最佳答案

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

如果用户首选项是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，你可以通过以下方式激活:

发展比;实验特点及gt;CSS支持暗模式

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

编辑 (11 feb 2019): 苹果发布了新的Safari 12.1暗模式

编辑 (5 sep 2019): 目前世界上25%的地方可以使用暗模式CSS。来源:caniuse.com < / p >
即将到来的浏览器:

iOS 13(我猜它会在下周苹果的Keynote之后发布)

EdgeHTML 76(不确定何时发货)

编辑(2019年11月5日): 目前世界上74%的人可以使用暗模式CSS。来源:caniuse.com < / p >

编辑(2020年2月3日):Microsoft Edge 79支持暗模式。(2020年1月15日发布)

我的建议是:您应该考虑实现暗模式，因为大多数用户现在都可以使用它(针对您站点的夜间用户)。

所有主流浏览器现在都支持暗模式，除了:IE，边缘

编辑 (19 Nov 2020): 目前世界上88%的人可以使用暗模式CSS。来源:caniuse.com < / p >
CSS-framework 顺风CSS v2.0支持暗模式。(2020年11月18日发布)

编辑 (2 Dec 2020):

谷歌Chrome添加黑暗主题模拟开发工具。来源:developer.chrome.com

编辑(2022年5月2日):

目前世界上90%的CSS都可以使用暗模式。来源:caniuse.com

小开

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

小开

根据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; }