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

Question

类似于＆＃34; How to detect if OS X is in dark mode?＆＃34;仅适用于浏览器。

有没有人发现是否有办法检测用户的系统是否在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版本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

如果要从JS中检测到它，可以使用以下代码：

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Answer 4

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

Answer 5

根据Mozilla，这是自2019年9月起的首选方法

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