类似于“How to detect if OS X is in dark mode?”，仅适用于浏览器。
有没有人发现是否有一种方法可以检测用户的系统是否处于 Safari/Chrome/Firefox 中的新 OS X 暗模式？
我们希望根据当前的操作模式将网站的设计更改为对暗模式友好。
【问题讨论】：
标签： css macos safari media-queries darkmode
新标准在W3C in 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 中的切换开关，以简化测试。我还发了一个test page 来查看浏览器的行为。
如果您安装了 Safari Technology Preview Release 71，您可以通过以下方式激活：
开发 > 实验性功能 > 暗模式 CSS 支持
然后，如果您打开 test page 并打开元素检查器，您就会有一个新图标来切换暗/亮模式。
编辑（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
【讨论】：
window.matchMedia("(prefers-color-scheme: dark)").matches 如果我有空闲时间，我会在我的答案中添加一个完整的 javascript 解决方案。
根据 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; }
【讨论】：
如果你想从 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";
});
【讨论】：
matchMedia，然后会尝试匹配prefers-color-scheme: dark 字符串。如果匹配，我们就处于暗模式。
if (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
addListener 那样跨平台兼容，请参见此处：developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/… 所以应该是：window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { this.darkMode = e.matches; });
目前（2018 年 9 月）being discussed in "CSS Working Group Editor Drafts"。 规范已发布（见上文），可作为媒体查询使用。 Something 已经登陆 Safari，另见 here。所以理论上你可以在 Safari/Webkit 中做到这一点：
@media (prefers-dark-interface) { color: white; background: black }
但这似乎是 private。 在 MDN 上，CSS 媒体功能 inverted-colors 是 mentioned。 Plug：我在博客上写过暗模式 here。
【讨论】：
inverted-colors 来检测暗模式。 首先，它不起作用。其次，它用于可访问性，而不是美学。一些用户使用倒置模式来增强屏幕的对比度，如果他们有视力障碍，这是典型的。请不要根据inverted-colors 更改您网站的外观，因为它充其量不会按照您的意愿运行，最坏的情况是会让这些用户感到沮丧。
我搜索了 Mozilla API，它们似乎没有任何与浏览器窗口颜色对应的变量。虽然我找到了一个可能对您有所帮助的页面：How to Use Operating System Styles in CSS。尽管有文章标题，但 Chrome 和 Firefox 的颜色不同。
【讨论】：