html怎么切换黑夜模式

黑夜模式，又称暗色主题或深色模式，是一种在网页和应用程序中常见的界面设计，它通过使用深色背景和浅色文字，为用户提供更舒适的阅读体验，尤其是在低光环境下，在HTML中，实现黑夜模式的方法有很多，下面将详细介绍几种常用的方法。

1、使用CSS媒体查询

CSS媒体查询是一种响应式设计技术，可以根据用户的设备特性（如屏幕分辨率、颜色、亮度等）来应用不同的样式规则，要实现黑夜模式，你可以使用媒体查询来检测用户的屏幕亮度，然后根据需要切换到暗色主题。

/* 默认白天模式样式 */
body {
  background-color: #ffffff;
  color: #000000;
}
/* 黑夜模式样式 */
body.dark-mode {
  background-color: #333333;
  color: #ffffff;
}
/* 媒体查询，当屏幕亮度低于某个阈值时，应用黑夜模式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333333;
    color: #ffffff;
  }
}

2、使用JavaScript切换主题

除了使用CSS媒体查询，你还可以通过JavaScript来动态切换主题，这种方法允许用户根据自己的喜好手动切换模式，以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>黑夜模式切换示例</title>
  <style>
    body {
      background-color: #ffffff;
      color: #000000;
      transition: background-color 0.3s, color 0.3s;
    }
  </style>
</head>
<body>
  <button onclick="toggleDarkMode()">切换黑夜模式</button>
  <script>
    function toggleDarkMode() {
      const body = document.body;
      body.classList.toggle('dark-mode');
    }
  </script>
</body>
</html>

在这个示例中，我们定义了一个toggleDarkMode函数，当用户点击按钮时，会切换body元素的class属性，我们还在CSS中定义了.dark-mode类，用于设置黑夜模式的样式。

3、利用浏览器的系统主题

一些现代浏览器（如Chrome 74+和Safari 12.1+）支持系统主题切换，当用户在浏览器设置中启用暗色模式时，网站会自动切换到暗色主题，要使网站支持系统主题，你可以在CSS中使用prefers-color-scheme媒体查询：

/* 默认白天模式样式 */
body {
  background-color: #ffffff;
  color: #000000;
}
/* 系统主题为暗色时，应用黑夜模式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333333;
    color: #ffffff;
  }
}

实现HTML黑夜模式的方法有很多，可以根据项目需求和用户喜好选择适合的方法，使用CSS媒体查询和JavaScript切换主题是两种常用的方法，同时也可以利用浏览器的系统主题来实现自动切换，无论选择哪种方法，重要的是为用户提供舒适的阅读体验，同时保持网站内容的可读性和美观性。

谷歌浏览器

谷歌浏览器

谷歌浏览器