如何在我的网站上检测暗模式？

Question

如何检测我的网站用户是否使用使用JavaScript或CSS启用暗模式的macOS / Windows？这可能吗？

Answer 1

现在这可以，因为WebKit已经添加了对prefers-color-scheme CSS媒体查询的支持。您可以像这样使用它：

@media (prefers-color-scheme: dark) { 
    body { background: black; }
}

这在Safari 12.1中提供，您可以在这里阅读更多关于Dark Mode Support in WebKit的信息。

目前，没有其他主流浏览器支持此API，但大多数应该最终支持。

Answer 2

如果你想通过JavaScript检测用户是否更喜欢黑暗模式，你可以使用matchMedia：

const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

浏览器支持：https://caniuse.com/#feat=prefers-color-scheme