如何检测我的网站上是否启用了暗模式？ [英] How can I detect if Dark Mode is enabled on my website?

问题描述

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

How can I detect if the user of my website is using macOS / Windows with Dark Mode enabled using JavaScript or CSS? Is this possible?

推荐答案

由于WebKit增加了对 prefers-color-scheme CSS媒体查询。您可以这样使用它：

This is now possible as WebKit has added support for the prefers-color-scheme CSS media query. You can use it like so:

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

或在JavaScript中：

Or in JavaScript:

function isDarkModeEnabled() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
}

详细了解 WebKit中的暗模式支持。该版本自Safari 12.1起可用，有关最新信息，请参见我可以使用... 浏览器支持信息。

Read more about Dark Mode Support in WebKit. This is available as of Safari 12.1, see Can I use... for the latest info on browser support.

这篇关于如何检测我的网站上是否启用了暗模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！