LocalStorage可持久化保存用户主题偏好，页面加载时读取'sttheme'值并应用对应class（如dark/light），配合CSS变量实现样式切换，支持系统偏好回退且无需后端。
LocalStorage 可以把用户选择的主题（比如 dark 或 light）存下来，页面刷新或再次打开时读取并应用，实现暗黑模式的持久化。
1. 保存主题到 LocalStorage
当用户切换主题（例如点击“切换暗黑模式”按钮），把当前主题值写入 LocalStorage：
- 使用 localStorage.setItem('theme', 'dark') 存储暗黑模式
- 用 localStorage.setItem('theme', 'light') 存储亮色模式
- 推荐统一用小写字符串，避免大小写判断出错
2. 页面加载时读取并应用主题
在页面初始化阶段（如 DOMContentLoaded 或组件挂载时）执行：
- 用 const savedTheme = localStorage.getItem('theme') 获取存储值
- 如果值是 'dark'，给 <html> 或 <body> 添加 class="dark"
- 如果值是 'light' 或为空，移除 dark 类（恢复默认）
- 同时可同步更新切换按钮的状态（如图标、文字）
3. 配合 CSS 实现样式切换
不需要重复写两套完全独立的样式，推荐用 CSS 自定义属性（CSS Variables）配合 .dark 类：
立即学习“Java免费学习笔记（深入）”；
- 在 :root 中定义亮色主题变量，如 --bg-color: #fff
- 在 .dark 下重写变量，如 .dark { --bg-color: #1e1e1e }
- 所有元素用 background-color: var(--bg-color) 等方式引用
- 这样只需切换 class，样式自动响应，逻辑更清晰
4. 可选：监听系统偏好并作为默认回退
如果用户没手动设置过主题，可以按系统偏好（prefers-color-scheme）自动启用：
- 用 window.matchMedia('(prefers-color-scheme: dark)').matches 判断
- 仅当 localStorage 中无值时，以此为初始主题
- 注意：不要覆盖用户手动选择——只在首次访问时生效
