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

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