本教程详细介绍了如何使用纯JavaScript实现一个暗黑模式切换功能。通过一个简单的切换按钮，用户可以轻松地在亮/暗模式之间切换，并且系统会利用 `localStorage` 记住用户的选择，确保在页面重新加载后依然保持用户偏好，无需依赖任何第三方库。
在现代
网页设计
中，为用户提供暗黑模式（Dark Mode）选项已成为一种趋势，它不仅能改善用户体验，尤其是在低光环境下，还能减少眼睛疲劳。本教程将指导您如何使用纯JavaScript，不依赖任何库，实现一个功能完善的暗黑模式切换器，并利用 localStorage 持久化用户的选择。
核心技术概览
实现这一功能主要依赖以下Web技术：
HTML:
提供一个简单的按钮作为切换开关。
CSS:
定义亮/暗模式下的基本样式，特别是通过一个特定的CSS类来封装暗黑模式的样式。
JavaScript:
DOM操作:
获取并操作HTML元素。
事件监听:
响应用户的
点击事件
。
classList API:
方便地添加、移除或切换元素的CSS类。
localStorage API:
在
浏览器
端存储用户偏好，实现数据持久化。
实现步骤
我们将分三部分构建这个功能：HTML结构、CSS样式和JavaScript逻辑。
立即学习
“
Java免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
1. HTML 结构
首先，我们需要一个按钮来触发模式切换。为了简化操作和逻辑，我们只使用一个按钮，其文本会根据当前模式进行切换。
这里我们创建了一个ID为 toggleBtn 的按钮，并预设其初始文本为“暗黑模式已开启”。请注意，script.
js
文件在 body 结束标签前引入，以确保DOM元素在脚本执行时已加载。
2. CSS 样式
接下来，定义两种模式下的基本样式。我们将为 body 元素定义一个默认的亮模式样式，并通过 .dark-mode 类来定义暗黑模式的样式。
暗黑模式切换示例
这是一段示例文本，用于演示亮/暗模式下的字体颜色变化。
点击上方按钮即可切换页面主题。
/* style.css */
body {
margin: 0;
height: 100vh; /* 确保body占据整个视口高度 */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
transition: background-color 0.3s ease, color 0.3s ease; /* 添加平滑过渡效果 */
background-color: #FFFFFF; /* 默认亮模式背景 */
color: #101010; /* 默认亮模式字体颜色 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 暗黑模式样式 */
body.dark-mode {
background-color: #101010;
color: #FFFFFF;
}
/* 按钮基础样式 (可选) */
#toggleBtn {
padding: 12px 25px;
margin-bottom: 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 8px;
background-color: #007bff;
color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: background-color 0.2s ease, transform 0.1s ease;
}
#toggleBtn:hover {
background-color: #0056b3;
transform: translateY(-1px);
}
#toggleBtn:active {
transform: translateY(1px);
}