localstorage可持久化保存用户主题偏好，页面加载时读取'sttheme'值并应用对应class（如dark/light），配合css变量实现样式切换，支持系统偏好回退且无需后端。

LocalStorage 可以把用户选择的主题（比如 dark 或 light）存下来，页面刷新或再次打开时读取并应用，实现暗黑模式的持久化。

1. 保存主题到 LocalStorage

当用户切换主题（例如点击“切换暗黑模式”按钮），把当前主题值写入 LocalStorage：

• 使用 localStorage.setItem('theme', 'dark') 存储暗黑模式
• 用 localStorage.setItem('theme', 'light') 存储亮色模式
• 推荐统一用小写字符串，避免大小写判断出错

2. 页面加载时读取并应用主题

在页面初始化阶段（如 DOMContentLoaded 或组件挂载时）执行：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

• 用 const savedTheme = localStorage.getItem('theme') 获取存储值
• 如果值是 'dark'，给 或 添加 class="dark"
• 如果值是 'light' 或为空，移除 dark 类（恢复默认）
• 同时可同步更新切换按钮的状态（如图标、文字）

3. 配合 CSS 实现样式切换

不需要重复写两套完全独立的样式，推荐用 CSS 自定义属性（CSS Variables）配合 .dark 类：

• 在 :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 中无值时，以此为初始主题
• 注意：不要覆盖用户手动选择——只在首次访问时生效

整个过程不依赖后端，纯前端完成，简单可靠，适合大多数网站和单页应用。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南