[英]How can I detect if Dark Mode is enabled on my website?
How can I detect if the user of my website is using macOS / Windows with Dark Mode enabled using JavaScript or CSS?如何检测我网站的用户是否使用 macOS/Windows 并使用 JavaScript 或 CSS 启用了暗模式? Is this possible?这可能吗?
This is now possible as WebKit has added support for the prefers-color-scheme
CSS media query.由于 WebKit 添加了对prefers-color-scheme
CSS 媒体查询的支持,因此现在可以实现。 You can use it like so:你可以像这样使用它:
@media (prefers-color-scheme: dark) {
body { background: black; }
}
Or in JavaScript:或者在 JavaScript 中:
function isDarkModeEnabled() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
}
Read more about Dark Mode Support in WebKit .阅读有关WebKit 中暗模式支持的更多信息。 This is available as of Safari 12.1, see Can I use... for the latest info on browser support.这从 Safari 12.1 开始可用,有关浏览器支持的最新信息,请参阅我可以使用...。
If you want to detect if a user prefers dark mode via JavaScript you can use matchMedia
:如果您想通过 JavaScript 检测用户是否更喜欢暗模式,您可以使用matchMedia
:
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
Browser support: https://caniuse.com/#feat=prefers-color-scheme浏览器支持: https : //caniuse.com/#feat=prefers-color-scheme
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.