HTML5 WebStorage实现主题持久化需三步：预设CSS类名（如theme-dark）、切换时用localStorage.setItem()存值并同步更新body类名、页面加载时getItem()读取并应用，无服务器依赖。
用 HTML5 WebStorage 实现用户个性化主题的持久存储，关键是把用户选的主题“记下来”，页面一打开就自动还原，整个过程不依赖服务器、不发请求，纯前端完成。
预设主题样式并统一管理类名
先在 CSS 里定义几套主题样式，每套对应一个明确的 class 名，比如：
.theme-light（浅色）、.theme-dark（深色）、.theme-blue（蓝色）。
这些 class 都作用于 body 或 html 元素，确保样式能全局生效。例如：
body.theme-dark { background: #1a1a1a; color: #f0f0f0; }
避免为每个颜色属性单独写内联样式，保持结构清晰、维护方便。
切换时存入 localStorage 并立即更新界面
用户点按钮切换主题，不能只改 DOM，还要立刻存进存储，并同步视觉效果：
- 调用 localStorage.setItem('user-theme', 'theme-dark') 写入字符串值
- 用 document.body.className = 'theme-dark' 或 classList.replace() 精准替换类名，防止重复或残留
- 不要等页面重载再生效——用户点击后界面必须“秒变”，否则有明显延迟感
页面加载时读取并应用，加兜底逻辑
在 DOMContentLoaded 后执行初始化逻辑：
立即学习“前端免费学习笔记（深入）”；
- 用 localStorage.getItem('user-theme') 获取保存的值
- 如果返回有效字符串（如 'theme-blue'），就给 body 添加该类
- 如果没值或解析失败，回退到系统偏好：window.matchMedia('(prefers-color-scheme: dark)') 检测用户系统设置，再 fallback 到默认浅色
- 注意脚本位置：把 JS 放在 </body> 前，或明确监听 DOM 加载完成，避免样式闪动（FOUC）
支持动态色值时存 HEX 并注入 CSS 变量
如果主题不局限于预设几套，而是允许用户自选主色：
- 存颜色值：例如 localStorage.setItem('primary-color', '#4a90e2')
- 读取后注入根变量：document.documentElement.style.setProperty('--primary', value)
- CSS 中统一使用 color: var(--primary)，既灵活又干净
- 这种方案适合中后台系统或设计工具，兼顾可配置性与样式解耦
