如何用JavaScript检测浏览器是否开启了夜晚黑暗模式？

本文共计427个文字，预计阅读时间需要2分钟。

使用CSS，我们可以通过`prefers-color-scheme`媒体查询来检测暗模式。但如果必须使用JavaScript，可以这样做：

javascriptfunction detectDarkMode() { var isDarkMode=window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; return isDarkMode;}

// 使用示例var isDark=detectDarkMode();if (isDark) { // 应用暗模式样式}

使用CSS，我们可以使用preferreds-color-scheme媒体查询来检测暗模式。

但是..如果我们必须使用JavaScript怎么办？ 我最近偶然发现了这个问题，因为我有一些JavaScript代码向页面添加了图像，但是我想基于明暗模式显示不同的图像。

这是俺的解决办法。

首先，检测matchMedia对象是否存在（否则浏览器不支持夜晚模式（dark mode），您可以退回到白天模式（light mode））。

使用以下命令检查其是否为夜晚模式（dark mode）：

window.matchMedia('(prefers-color-scheme: dark)').matches

如果启用了暗模式，则将返回true。