html使用JavaScript + CSS实现亮色和暗色切换

✅ 实现思路

  1. 使用 CSS 定义两种主题样式（亮色和暗色）。
  2. 通过 JavaScript 动态切换 HTML 元素的 class 或 data-theme 属性。
  3. 使用 localStorage 保存用户选择的主题偏好。

 示例代码

🔹 HTML 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>黑暗模式切换</title>
  <link rel="stylesheet" href="styles.css" rel="external nofollow"  />
</head>
<body>
  欢迎来到我的网站
  <p>这是一个可以切换黑暗模式的页面。</p>
  <button id="toggleThemeBtn">切换到暗色模式</button>
 
  <script src="script.js"></script>
</body>
</html>

🔹 CSS 部分 (styles.css)

1
2
3
4
5
6
7
8
9
10
11
12
/* 默认亮色主题 */
body {
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.3s, color 0.3s;
}
 
/* 暗色主题样式 */
.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

🔹 JavaScript 部分 (script.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const toggleButton = document.getElementById("toggleThemeBtn");
 
// 页面加载时检查 localStorage 中是否有之前保存的主题
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
  toggleButton.textContent = "切换到亮色模式";
}
 
// 切换主题函数
toggleButton.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");
 
  // 修改按钮文字@www.xuepai.net
  if (document.body.classList.contains("dark-mode")) {
    toggleButton.textContent = "切换到亮色模式";
    localStorage.setItem("theme", "dark");
  } else {
    toggleButton.textContent = "切换到暗色模式";
    localStorage.setItem("theme", "light");
  }
});

🌟 进阶优化建议

  • 使用 prefers-color-scheme: dark 媒体查询来自动匹配系统设置：

    1
    2
    3
    4
    5
    6
    @media (prefers-color-scheme: dark) {
      body:not(.dark-mode) {
        background-color: #121212;
        color: #ffffff;
      }
    }

  • 使用 data-theme="dark" 而不是 class，更语义化地控制主题。

  • 可以封装为可复用组件或 React/Vue 插件。

  • 添加动画过渡效果提升用户体验。

完整示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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;
}
 
/* 暗色主题样式 */
.dark-mode {
  background-color: #121212;
  color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  body:not(.dark-mode) {
    background-color: #121212;
    color: #ffffff;
  }
}
</style>
</head>
<body>
  欢迎来到我的网站
  <p>这是一个可以切换黑暗模式的页面。</p>
  <button id="toggleThemeBtn">切换到暗色模式</button>
 
<script>
const toggleButton = document.getElementById("toggleThemeBtn");
 
// @www.haoshilao.net页面加载时检查 localStorage 中是否有之前保存的主题
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
  toggleButton.textContent = "切换到亮色模式";
}
 
// 切换主题函数
toggleButton.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");
 
  // 修改按钮文字
  if (document.body.classList.contains("dark-mode")) {
    toggleButton.textContent = "好问提示切换到亮色模式";
    localStorage.setItem("theme", "dark");
  } else {
    toggleButton.textContent = "切换到暗色模式";
    localStorage.setItem("theme", "light");
  }
});
</script>
</body>
</html>

✅ 总结

你现在已经掌握了一个基础但实用的黑暗模式切换功能实现方式：

  • 用 CSS 定义样式；
  • 用 JS 控制类名切换；
  • 用 localStorage 保存用户偏好；
  • 用户体验友好，兼容性好。
posted @ 2026-01-04 20:21  zxcva  阅读(32)  评论(0)    收藏  举报