Vue主题换肤核心是将主题状态设为响应式ref，通过watchEffect同步更新CSS变量和localStorage，并在App端调用原生API同步样式；初始化需读取存储，切换时立即写入，避免硬编码和class操作。
Vue 主题换肤的本地存储与样式同步，关键不是“监听 CSS 变量”，而是把主题状态变成响应式数据，再让这个状态驱动 DOM 样式 + 存储更新。整个流程要闭环：用户切换 → 更新响应式状态 → 同步写入 document.documentElement.style 和 localStorage → 组件自动重渲染。
用 ref 管理主题状态，避免硬编码
把主题色、背景、文字等核心变量抽成 ref，作为唯一数据源。不推荐在组件里写 v-if="theme === 'dark'"，而是统一通过 CSS 变量注入控制样式：
-
定义主题 ref：比如
const primaryColor = ref('#42b883')或const currentTheme = ref('light') -
组合式主题对象更易扩展：如
const theme = ref({ primary: '#42b883', bg: '#fff', text: '#333' }) - 避免直接操作 class 或 link 标签：除非你用的是多套独立 CSS 文件（见下文），否则优先走 CSS 变量路线，更轻量、更可控
watchEffect 驱动样式同步，而非监听变量本身
CSS 变量本身不可响应，但你可以用 watchEffect 监听 ref 的变化，并主动写入 document.documentElement.style：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 每次 ref 改变，
watchEffect就执行一次，把新值赋给style.setProperty('--primary-color', theme.value.primary) - 这样所有用了
var(--primary-color)的地方会自动生效，无需手动触发重绘 - 注意：要提前在 :root 中声明默认变量（哪怕只是占位），否则首次渲染可能失效
localStorage 持久化要和状态更新联动
不能只存不读，也不能只读不存。必须保证页面加载时从存储恢复，切换时立即写入：
立即学习“前端免费学习笔记（深入）”；
-
初始化时读取：组件挂载前，先从 localStorage 取值，赋给 ref（例如
theme.value = JSON.parse(localStorage.getItem('theme') || '"light"')） -
状态变更时写入：在
watchEffect内部或主题切换函数中调用localStorage.setItem('theme', JSON.stringify(theme.value)) - 不要用 sessionStorage：它只在当前标签页有效，关闭即丢，不符合“下次打开还是上次主题”的基本需求
App 端需额外同步原生样式层
uni-app 或 Vue 原生 App（非 H5）不能仅靠 CSS 变量生效，导航栏、tabBar 等是原生控件，必须显式调用 API：
- 切换主题后，立刻调用
uni.setNavigationBarColor({ backgroundColor: theme.value.bg }) - 同时更新 tabBar 样式：
uni.setTabBarStyle({ backgroundColor: theme.value.bg }) - 自定义导航栏组件内，用
:style="{ backgroundColor: theme.value.bg }"绑定 - App 端 watch 失效率高，建议改用事件总线或 onShow 时重新读取并应用主题
