js检测浏览器夜晚/黑暗（dark）模式方法

如何检测浏览器的夜晚/黑暗模式

当用户在电脑或手机等浏览器中将主题从白天模式切换到黑夜模式时，浏览器会触发媒体查询 prefers-color-scheme。我们可以利用 JavaScript 检测媒体查询条件，推断出当前是白天还是黑夜模式。

检测浏览器是否支持 prefers-color-scheme 媒体查询

在使用 prefers-color-scheme 媒体查询之前，我们需要检查浏览器是否支持该功能。如果浏览器不支持该特性，那么我们需要使用其他方法来检测浏览器是否处于黑暗模式。下面是基于 Modernizr 库（一个很棒的现代浏览器特性检测的库）检测浏览器是否支持 prefers-color-scheme 媒体查询的代码：

if (Modernizr.prefers_color_scheme) {
  // 支持prefers-color-scheme媒体查询
} else {
  // 不支持prefers-color-scheme媒体查询
}

使用 prefers-color-scheme 媒体查询检测夜晚/黑暗模式

现在，让我们通过一个 JavaScript 函数来检测浏览器是否启用了夜晚/黑暗模式。

function checkDarkMode() {
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    return true;
  } else {
    return false;
  }
}

上面的代码首先检查了浏览器是否支持 matchMedia 方法，然后使用 '(prefers-color-scheme: dark)' 媒体查询字符串来检测当前是否启用了夜晚/黑暗模式。如果返回结果为 true 则代表夜晚/黑暗模式开启，否则代表未开启。

示例1：根据浏览器是否启用夜晚/黑暗模式对图片进行切换

下面是一个示例，如果浏览器启用了夜晚/黑暗模式，则页面上显示暗色主题图片，否则显示亮色主题图片。

<!-- 显示暗色主题图片 -->
<img src="dark.png" id="dark-img" style="display:none;">
<!-- 显示亮色主题图片 -->
<img src="light.png" id="light-img" style="display:none;">

<script>
  function checkDarkMode() {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return true;
    } else {
      return false;
    }
  }

  if (checkDarkMode()) {
    document.getElementById('dark-img').style.display = 'block';
  } else {
    document.getElementById('light-img').style.display = 'block';
  }
</script>

示例2：使用CSS根据是否启用黑暗模式来改变网页主题

下面的示例演示了如何根据夜晚/黑暗模式将页面的主题颜色切换为黑色背景、白色字体。

body {
  background-color: #fff;
  color: #111;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
    color: #fff;
  }
}

上述 CSS 代码首先设置了正常情况下的页面样式，然后使用媒体查询 (prefers-color-scheme: dark) 来自动调整页面样式以适应夜晚/黑暗模式。在夜晚/黑暗模式中，背景颜色为黑色，字体颜色为白色。