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></script> 放在

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！