核心是动态修改body或根元素class并配合css变量实现视觉切换，需通过localstorage持久化用户偏好、用prefers-color-scheme适配系统偏好，css中定义两套变量并通过class切换生效，确保过渡动画与样式解耦。
在 JavaScript 中用 DOM 操作实现暗黑模式切换，核心是动态修改 或根元素的 class，并配合 CSS 变量或预设样式完成视觉切换。不需要框架，纯原生即可完成，关键是状态持久化和样式解耦。
1. HTML 结构与触发按钮
在页面中加一个切换开关（比如按钮或 checkbox），用于用户手动触发：
<button id="theme-toggle">? 切换暗黑模式</button>
确保 body 有初始 class（如 theme-light），方便后续 JS 控制：
...
2. JavaScript 控制主题切换
监听按钮点击，读取当前主题、切换 class，并保存到 localStorage 以维持用户偏好：
const toggleBtn = document.getElementById('theme-toggle');
const body = document.body;
// 从 localStorage 读取上次选择，或默认 light
const savedTheme = localStorage.getItem('theme') || 'light';
body.className = `theme-${savedTheme}`;
toggleBtn.addEventListener('click', () => {
const currentTheme = body.classList.contains('theme-dark') ? 'dark' : 'light';
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
body.className = `theme-${newTheme}`;
localStorage.setItem('theme', newTheme);
// 可选：更新按钮文字或图标
toggleBtn.textContent = newTheme === 'dark'
? '☀️ 切换亮色模式'
: '? 切换暗黑模式';
});
3. CSS 配合实现视觉变化
用 CSS class 分别定义亮色/暗色样式，推荐使用 CSS 自定义属性（变量）提升可维护性：
:root {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #e0e0e0;
}
.theme-dark {
--bg-color: #121212;
--text-color: #e0e0e0;
--border-color: #333333;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
hr, input, textarea, button {
border-color: var(--border-color);
}
这样只需改 class，所有依赖 CSS 变量的元素自动响应。
4. 进阶建议：适配系统偏好 + 自动检测
可结合 prefers-color-scheme 媒体查询，首次访问时自动匹配系统设置（但以用户手动选择为最终优先级）：
- 检查
localStorage是否已有设置，有则直接应用 - 没有则用
window.matchMedia('(prefers-color-scheme: dark)').matches获取系统偏好 - 避免 JS 设置后又被 CSS 媒体查询覆盖：确保自定义 class 的 CSS 优先级高于媒体查询规则（例如把 theme class 写在后面，或提高选择器权重）
不复杂但容易忽略细节：class 切换要彻底（避免残留多个 theme 类）、CSS 变量需在 :root 和对应 class 中都定义、transition 要加在 body 或通用元素上才能平滑过渡。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
