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

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

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

注意:目前仅在Safari技术预览版68中可用

如果用户偏好较轻:

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

如果用户偏好较暗:

/* 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，你可以通过以下方式激活:

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

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

编辑(2019年2月11日): 苹果发布了新的Safari 12.1黑暗模式

编辑(2019年9月5日): 目前世界上25%的地方可以使用暗模式CSS。来源:caniuse.com 即将到来的浏览器: iOS 13(我猜它会在下周苹果的Keynote之后发布) EdgeHTML 76(不确定何时发货)

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

EDIT(2020年2月3日):Microsoft Edge 79支持黑暗模式。(2020年1月15日发布) 我的建议是:您应该考虑实现暗模式，因为大多数用户现在都可以使用它(针对您站点的夜间用户)。 注:除了IE、Edge，所有主流浏览器都支持暗模式

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

编辑(2020年12月2日) 谷歌Chrome添加黑暗主题模拟开发工具。来源:developer.chrome.com

编辑(2022年5月2日): 目前世界上90%的CSS都可以使用暗模式。来源:caniuse.com

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

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

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

在MDN上，我们提到了一种CSS媒体特性——反转颜色。插一句:我在这里写过关于黑暗模式的博客。

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