JavaScript 检测暗模式 - JavaScript

暗模式越来越受欢迎，许多网站都支持在用户界面中启用暗模式，但是对于开发人员来说，如何在网站中检测是否启用了暗模式呢？我们通过 JavaScript 来实现。

1. 检测暗模式

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

以上代码将返回一个布尔值，指示当前设备是否在暗模式下运行。该代码首先检测设备是否支持 window.matchMedia 方法，如果支持，则使用该方法检测窗口是否处于暗模式下。

2. 执行暗模式后续操作

现在我们已经能够检测到窗口是否处于暗模式下，接下来我们可以在网站中执行某些操作。例如，根据当前模式更改颜色主题或加载特定样式表。

if(isDarkMode) {
  // 在这里执行暗模式下的操作
} else {
  // 在这里执行亮模式下的操作
}

以上代码将根据是否处于暗模式下执行不同的操作。你可以在条件语句中添加自己需要执行的代码。

结论

通过 JavaScript 检测暗模式是一项极为简单的任务。现在你可以检测当前设备是否已启用暗模式，并相应地在网站中执行操作。这是许多现代网站都需要的关键功能。

参考资料

• MDN Web Docs: Media_Queries