EventListener 暗模式 - JavaScript

在现代 Web 开发中，暗模式已经成为了必不可少的功能之一。暗模式使得用户能够在光线较暗的环境下更加轻松地浏览网页，并且在一些情境下还能够有助于眼睛保护。随着越来越多的应用程序开始实现暗模式，开发人员也在积极地探索使得他们的应用程序更加适应这种模式。

在 JavaScript 中，可以使用 EventListener 来检测用户切换到暗模式. 下面是一个基本的代码片段展示如何通过监听 mediaQueryList 异常来检测暗模式：

const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');

mediaQueryList.addEventListener('change', (e) => {
  const isDarkModeEnabled = e.matches;
  
  // 执行一些暗模式相关的代码
});

在上面的代码中，我们首先使用 window.matchMedia() 方法来创建一个 mediaQueryList 对象，它将监听一个表示暗模式的查询字符串 (prefers-color-scheme: dark) 。然后我们使用 addEventListener() 方法来监听这个对象的状态变化，如果状态变化并且符合我们的查询，我们就知道切换到了暗模式。

当我们知道用户已经切换到暗模式时，我们可以执行一些与暗模式相关的代码。下面是一个示例代码来更改页面的颜色主题：

const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');

mediaQueryList.addEventListener('change', (e) => {
  const isDarkModeEnabled = e.matches;

  if (isDarkModeEnabled) {
    document.body.classList.add('dark-mode');
  } else {
    document.body.classList.remove('dark-mode');
  }
});

在上面的代码中，我们检查当前的 mediaQueryList 对象和检查用户是否切换到了暗模式。如果暗模式被启用，我们将页面的主题颜色更改为暗色，否则我们将页面的颜色更改回来。

总之，使用 EventListener 可以轻松地检测 Web 应用程序是否被切换到暗模式。一旦我们知道用户已经切换到暗模式，我们可以执行一些相关的代码来改变界面的颜色主题以适应这种模式。