Pinia 管理暗黑模式的核心是统一维护主题标识、注入 CSS 变量、持久化至 localStorage；通过 theme.ts 定义状态与配置，initTheme() 优先读 localStorage 再 fallback 系统偏好，插件自动持久化 theme 字段，组件中调用 setTheme 即可同步更新。
Pinia State 管理暗黑模式切换并保持状态，核心是三件事：用 store 统一维护主题标识、通过 CSS 变量注入样式、借助插件把选择存进 localStorage。刷新不丢、跨组件同步、支持系统偏好自动 fallback，都能靠这个结构实现。
定义主题状态和可选主题配置
在 src/stores/theme.ts 中创建 store，state 里明确当前主题名（如 light / dark / auto），同时预置各主题对应的 CSS 变量映射：
- theme 字段作为主开关，决定全局应用哪套配色
- themes 对象按 key 区分配置，每个值是一组 --bg-color、--text-color 等变量键值对
- 支持 auto 模式时，store 内部需监听
window.matchMedia('(prefers-color-scheme: dark)')并响应更新
初始化时读取 localStorage 或系统偏好
store 的 initTheme() 方法应在应用启动时调用，顺序建议为：
- 先检查 localStorage 是否已有用户手动设置的主题（优先级最高）
- 若无，则读取
matchMedia结果，设为 auto 并同步应用对应主题 - 最后调用 applyTheme() 将变量写入 document.documentElement.style
持久化主题选择
安装 pinia-plugin-persistedstate 插件后，在 store 配置中声明需要缓存的字段：
- 只需持久化 theme 字符串，无需存整个 themes 对象
- 插件会自动把 theme 值写入 localStorage，并在页面重载时恢复它
- 避免手动操作 localStorage，防止与插件冲突或覆盖失效
组件中响应式使用和切换
在任意组件里，用 storeToRefs 解构 theme 和 availableThemes，确保响应式更新：
- 用 v-bind:class 或 :class 动态绑定 body 类名（如
dark-mode）辅助兼容旧样式 - 切换时只调用 store.setTheme('dark')，内部自动触发 CSS 变量更新和持久化
- 不需要在每个组件里重复判断或读取 localStorage，状态源头唯一
