JavaScript 中的系统颜色主题检查

几天前，我想知道如何使用 JavaScript 知道网络系统主题是深色还是浅色，然后我找到了一种检测方法。

在本文中，我将分享我用来检查系统主题的实现。

• matchMedia()我们将使用浏览器窗口界面提供的方法。

• matchMedia方法需要一个mediaQueryString作为参数并且它将返回一个MediaQueryList对象。

• MediaQueryList对象将具有一个名为matches布尔数据类型的属性。

代码

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // Dark Mode
}

prefers-color-scheme是用于检测系统颜色主题的 CSS 媒体功能。

如果用户在中间改变主题，我们也可以有一个监听器。

window
   .matchMedia("(prefers-color-scheme: dark)")
   .addEventListener("change", (event) => {
       const theme = event.matches ? "dark" : "light";
   });

如果您知道任何其他在网络上检测系统主题的方法，请在评论中告诉我。

最初发表于blog.bibekkakati.me

感谢您的阅读🙏

如果您喜欢这篇文章或觉得它有帮助，请点赞👍

欢迎随时联系👋

Twitter | Instagram | LinkedIn

如果你喜欢我的作品并想支持它，可以在这里留言。我会非常感激。