Pinia 动态切换主题色的核心是将结构化主题配置存入 store，通过 style.setProperty() 注入 CSS 变量实现响应式更新；需支持多维状态、批量应用、持久化闭环及与 UI 框架协同。
Pinia 处理主题色动态切换，核心是把主题配置存进 store，再通过操作 DOM 的 style.setProperty() 注入 CSS 变量，让整个页面响应式更新。它不直接改样式，而是“通知浏览器用哪套变量”，所以高效、干净、可维护。
主题状态定义要结构化
state 里别只存一个字符串如 'dark'，建议用对象结构管理多维信息：
-
当前主题标识：比如
theme: 'blue'，用于判断和切换 -
主题配置表：纯数据对象，键为 CSS 变量名（如
'--primary-color'），值为颜色值，支持 light/dark/custom 等多个预设 -
是否启用自动跟随系统：配合
window.matchMedia('(prefers-color-scheme: dark)')使用
切换动作要能批量写入 CSS 变量
在 actions 中写一个 applyTheme(themeKey) 方法，它做三件事：
- 校验
themeKey是否存在于配置表中 - 更新 state 中的
theme值 - 遍历对应主题的变量对象，逐个调用
document.documentElement.style.setProperty(key, value)
这样所有使用 var(--primary-color) 的地方会立刻重绘，无需刷新、不依赖组件重渲染。
持久化与初始化必须闭环
用户换完主题一刷新就回退？那体验就断了。得靠两步补全：
-
初始化时读取：store 创建后立即从
localStorage或uni.getStorageSync（uni-app）取上次保存的主题名，并调用applyTheme -
切换时写入：在
applyTheme最后加一行存储逻辑，比如localStorage.setItem('app-theme', themeKey)
注意：uni-app 等跨端项目必须用 pinia-plugin-unistorage 替代 pinia-plugin-persistedstate，否则小程序里会报错。
搭配 UI 框架更省事
如果用了 Naive UI、Element Plus 这类支持主题注入的组件库，别重复造轮子。例如 Naive UI 的 NConfigProvider 可直接受一个 theme 对象，你只需把 Pinia store 里的 theme getter 传进去，组件内部会自动接管变量映射和响应更新。
这样业务层只管状态，UI 层专注渲染，职责清晰，也不用手动操作 document.documentElement。
