LocalStorage可持久化保存用户主题偏好，通过预设CSS类名、切换时写入key为'user-theme'的值、页面加载时读取并应用类名实现；支持动态色则存HEX值并注入CSS变量。
LocalStorage 可以轻松保存用户选择的主题颜色，刷新页面后依然生效，关键在于统一管理主题类名、及时写入存储、并在页面加载时读取并应用。
定义主题与对应 CSS 类名
先在 CSS 中预设几套主题样式，每套用一个独立类名控制，比如：
- .theme-light：默认浅色（白色背景、深灰文字）
- .theme-dark：深色模式（#1a1a1a 背景、#f0f0f0 文字）
- .theme-blue：蓝色主题（#e3f2fd 背景、#1565c0 文字）
确保这些类都作用于 body 或根容器，例如：body.theme-dark { background: #1a1a1a; color: #f0f0f0; }
切换主题时写入 LocalStorage
给每个主题按钮绑定点击事件，设置 body 类名的同时存入键值对：
立即学习“前端免费学习笔记（深入）”；
- 使用固定 key，如 'user-theme'
- 调用 localStorage.setItem('user-theme', 'theme-dark')
- 同时移除其他主题类，只保留当前类：
document.body.className = 'theme-dark';
避免重复添加类名，建议先清空再设新类，或用 classList.replace() 精准切换。
页面加载时自动恢复主题
在 JS 初始化阶段（如 DOMContentLoaded 后），读取存储并应用：
- 用 localStorage.getItem('user-theme') 获取值
- 若返回有效字符串（如 'theme-blue'），就给 body 添加该类：
document.body.classList.add(savedTheme) - 若无存储值，可回退到默认主题（如 theme-light）
注意：不要在 CSS 文件加载前操作 body 类，否则可能闪屏；推荐在 <script> 放在 </body> 前，或监听 DOMContentLoaded。
进阶：支持动态主题色（非预设类）
如果需要更灵活的颜色（如自定义主色），可存 HEX 值：
- 存：
localStorage.setItem('primary-color', '#4a90e2'); - 读取后通过 document.documentElement.style.setProperty('--primary', value) 注入 CSS 变量
- 对应 CSS 使用 color: var(--primary);
这样既能持久化，又保持样式表干净，适合中后台系统。
