本教程详细介绍了如何使用纯JavaScript实现一个暗黑模式切换功能。通过一个简单的切换按钮，用户可以轻松地在亮/暗模式之间切换，并且系统会利用 `localStorage` 记住用户的选择，确保在页面重新加载后依然保持用户偏好，无需依赖任何第三方库。
在现代网页设计中，为用户提供暗黑模式（Dark Mode）选项已成为一种趋势，它不仅能改善用户体验，尤其是在低光环境下，还能减少眼睛疲劳。本教程将指导您如何使用纯JavaScript，不依赖任何库，实现一个功能完善的暗黑模式切换器，并利用 localStorage 持久化用户的选择。
核心技术概览
实现这一功能主要依赖以下Web技术：
- HTML: 提供一个简单的按钮作为切换开关。
- CSS: 定义亮/暗模式下的基本样式，特别是通过一个特定的CSS类来封装暗黑模式的样式。
- JavaScript:
实现步骤
我们将分三部分构建这个功能：HTML结构、CSS样式和JavaScript逻辑。
立即学习“Java免费学习笔记（深入）”；
1. HTML 结构
首先，我们需要一个按钮来触发模式切换。为了简化操作和逻辑，我们只使用一个按钮，其文本会根据当前模式进行切换。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>暗黑模式切换示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="toggleBtn">暗黑模式已开启</button>
<p>这是一段示例文本，用于演示亮/暗模式下的字体颜色变化。</p>
<p>点击上方按钮即可切换页面主题。</p>
<script src="script.js"></script>
</body>
</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);
} 
