如何检测我网站上的macOS Mojave中是否启用了暗模式？

Question

如何检测我的网站用户是否使用使用JavaScript或CSS启用暗模式的macOS Mojave？这可能吗？苹果浏览器？

Answer 1

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

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

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

Answer 2

由于WebKit增加了对prefers-color-schemeCSS媒体查询的支持，现在这是可能的。您可以这样使用它：

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

Safari 12.1附带了此功能，您可以在此处阅读有关WebKit中的暗模式支持的更多信息。

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