下面给你整理一个 纯 HTML + JavaScript + CSS 实现亮色（Light Mode）和暗色（Dark Mode）切换功能的完整示例，包含最佳实践、localStorage 保存用户偏好，以及动画过渡效果。
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>
<header>
<h1>亮暗模式切换示例</h1>
<button id="toggle-theme">切换模式</button>
</header>
<main>
<p>这是一个示例文本，体验亮色和暗色模式的切换效果。</p>
</main>
<script src="script.js"></script>
</body>
</html>
2️⃣ CSS 样式（亮色 & 暗色）
/* style.css */
/* 默认亮色模式 */
:root {
--bg-color: #ffffff;
--text-color: #000000;
--header-bg: #f0f0f0;
--btn-bg: #000000;
--btn-color: #ffffff;
--transition-time: 0.3s;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
transition: background-color var(--transition-time), color var(--transition-time);
}
header {
background-color: var(--header-bg);
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color var(--transition-time);
}
button {
background-color: var(--btn-bg);
color: var(--btn-color);
border: none;
padding: 0.5rem 1rem;
cursor: pointer;
border-radius: 4px;
transition: background-color var(--transition-time), color var(--transition-time);
}
/* 暗色模式 */
body.dark-mode {
--bg-color: #121212;
--text-color: #e0e0e0;
--header-bg: #1f1f1f;
--btn-bg: #e0e0e0;
--btn-color: #121212;
}
✅ 特点：
- 使用 CSS 变量（
--bg-color、--text-color等）轻松切换主题 - 使用
transition实现平滑动画 body.dark-mode控制暗色模式
3️⃣ JavaScript 功能实现
// script.js
const toggleBtn = document.getElementById('toggle-theme');
const body = document.body;
// 初始化：读取 localStorage
const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark') {
body.classList.add('dark-mode');
}
// 切换模式
toggleBtn.addEventListener('click', () => {
body.classList.toggle('dark-mode');
// 保存用户偏好
if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
✅ 功能点：
- 点击按钮切换亮暗模式
- 使用
classList.toggle切换dark-mode - 使用 localStorage 保存用户选择，下次访问页面自动加载偏好
- CSS 变量和
transition实现平滑切换
4️⃣ 可选扩展功能
- 自动跟随系统主题
if (!localStorage.getItem('theme')) {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) body.classList.add('dark-mode');
}
- 切换按钮图标
<button id="toggle-theme">🌙</button>
toggleBtn.addEventListener('click', () => {
body.classList.toggle('dark-mode');
toggleBtn.textContent = body.classList.contains('dark-mode') ? '☀️' : '🌙';
});
- 更多主题
- 可以定义更多 CSS 变量，如
--link-color、--card-bg - 通过
body.classList切换不同主题
5️⃣ 最终效果
- 初始页面为亮色（白底黑字）
- 点击按钮平滑切换暗色（深色背景，浅色文字）
- 用户刷新页面后仍保持选择模式
- 可扩展为多种主题、系统自动匹配