CSS 如何在浏览器中检测操作系统是否处于暗模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50840168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect if the OS is in dark mode in browsers?
提问by funkju
Similar to "How to detect if OS X is in dark mode?" only for browsers.
类似于“如何检测 OS X 是否处于黑暗模式？”仅适用于浏览器。
Has anyone found if there is a way to detect if the user's system is in the new OS X Dark Mode in Safari/Chrome/Firefox?
有没有人发现是否有办法检测用户的系统是否在 Safari/Chrome/Firefox 中处于新的 OS X 暗模式？
We would like to change our site's design to be dark-mode friendly based on the current operating mode.
我们想根据当前的操作模式将我们网站的设计更改为暗模式友好。
回答by Davy de Vries
The new standard is registered on W3C in Media Queries Level 5.
新标准已在W3C 媒体查询级别 5 中注册。
NOTE:currently only available in Safari Technology Preview Release 68
注意：目前仅在Safari Technology Preview Release 68 中可用
In case user preference is light:
如果用户偏好是light：
/* Light mode */
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
In case user preference is dark:
如果用户偏好是dark：
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
There is also the option no-preferencein case a user has no preference. But I recommend you just to use normal CSS in that case and cascade your CSS correctly.
no-preference如果用户没有偏好，也可以选择。但我建议你在这种情况下只使用普通的 CSS 并正确地级联你的 CSS。
EDIT(7 dec 2018):
In Safari Technology Preview Release 71they announced a toggle switch in Safari to make testing easier. I also made a test pageto see the browser behaviour.
If you have Safari Technology Preview Release 71installed you can activate through:
Develop > Experimental Features > Dark Mode CSS Support
Then if you open the test pageand open the element inspector you have a new icon to toggle Dark/Light mode.
编辑（2018 年 12 月 7 日）：
在Safari Technology Preview Release 71 中，他们宣布了 Safari 中的切换开关，以使测试更容易。我还制作了一个测试页面来查看浏览器行为。
如果您安装了Safari Technology Preview Release 71，您可以通过以下方式激活：
开发 > 实验性功能 > 暗模式 CSS 支持
然后，如果您打开测试页面并打开元素检查器，您将有一个新图标来切换暗/亮模式。
-
——
EDIT(11 feb 2019): Apple ships in the new Safari 12.1dark mode
编辑（2019 年 2 月 11 日）：Apple 推出了新的Safari 12.1暗模式
-
——
EDIT(5 sep 2019): Currently 25% of the world can use dark mode CSS. Source: caniuse.com
Upcoming browsers:
- iOS 13 ( I guess it will be shipped next week after Apple's Keynote)
- EdgeHTML 76 (not sure when that will be shipped)
编辑（2019 年 9 月 5 日）：目前世界上 25% 的人可以使用暗模式 CSS。资料来源：caniuse.com
即将推出的浏览器：
- iOS 13（我猜它会在Apple的Keynote之后下周发货）
- EdgeHTML 76（不确定何时发货）
-
——
EDIT(5 nov 2019): Currently 74% of the world can use dark mode CSS. Source: caniuse.com
编辑（2019 年 11 月 5 日）：目前世界上 74% 的人可以使用暗模式 CSS。资料来源：caniuse.com
-
——
EDIT(3 Feb 2020): Microsoft Edge 79 supports dark mode. (released on 15 Jan 2020)
编辑（2020 年 2 月 3 日）：Microsoft Edge 79 支持暗模式。（2020 年 1 月 15 日发布）
-
——
My suggestion would be: that you should consider implementing dark mode because most of the users can use it now (especially for mobile aka battery saving).
Note:All major browsers are supporting dark mode now, except: IE,
Edge
我的建议是：您应该考虑实施暗模式，因为大多数用户现在都可以使用它（特别是对于移动设备又名省电）。
注意：现在所有主流浏览器都支持暗模式，除了：IE、
Edge
回答by Mark Szabo
If you want to detect it from JS, you can use this code:
如果你想从 JS 中检测它，你可以使用这个代码：
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode
}
To watch for changes:
观察变化：
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
const newColorScheme = e.matches ? "dark" : "light";
});
回答by Frank L?mmer
This is currently (September 2018) being discussed in "CSS Working Group Editor Drafts".Spec has launched (see above), available as a media query. Somethinghas already landed in Safari, see also here. So in theory you can do this in Safari/Webkit:
目前（2018 年 9 月）正在“CSS 工作组编辑器草案”中讨论。Spec 已启动（见上文），可用作媒体查询。某些东西已经登陆 Safari，另见此处。所以理论上你可以在 Safari/Webkit 中做到这一点：
@media (prefers-dark-interface) { color: white; background: black }
But it seems that this is private.On MDN a CSS media feature inverted-colorsis mentioned. Plug: I blogged about dark mode here.
但这似乎是私人的。在 MDNinverted-colors上提到了 CSS 媒体功能。Plug：我在这里写了关于黑暗模式的博客。
回答by toeffe3
I searched though Mozilla API, they don't seem to have any variables corresponding to the browser-windows color. Though i found a page that might help you: How to Use Operating System Styles in CSS. Despite the article-header the colors are different for Chrome and Firefox.
我通过 Mozilla API 进行了搜索，它们似乎没有与浏览器窗口颜色相对应的任何变量。虽然我找到了一个可能对您有所帮助的页面：如何在 CSS 中使用操作系统样式。尽管有文章标题，但 Chrome 和 Firefox 的颜色不同。
回答by Aslam
According to Mozilla, here is the preferred method as of September 2019
根据 Mozilla 的说法，这是截至 2019 年 9 月的首选方法
@media (prefers-color-scheme: dark) {
body {
background: #000;
}
}
@media (prefers-color-scheme: light) {
body {
background: #fff;
}
}
