核心是路由驱动的主题状态管理：通过useRoute读取meta.theme，用ref存储并provide注入子树，结合CSS变量与动态class双机制，首次加载优先路由主题并持久化用户偏好，避免非响应式provide、watch遗漏initial和scoped样式隔离等陷阱。
核心是让主题状态与路由深度绑定，切换路由时自动读取并应用对应皮肤，同时保持响应式更新能力。
路由驱动的主题状态管理
不要在每个页面手动判断路径再改主题。应该在路由守卫或布局组件中统一处理：
- 用 useRoute() 获取当前路由对象，读取其 meta 字段（如
meta: { theme: 'dark' }） - 将主题值存入一个 ref，例如
const currentTheme = ref('light') - 监听
route.meta.theme变化，自动同步到currentTheme.value - 通过 provide 将该 ref 注入整个子树，确保所有依赖组件能响应变化
CSS 变量 + 动态 class 的双保险机制
仅靠 JS 切换 class 容易遗漏样式覆盖；仅靠 CSS 变量又缺乏结构控制。推荐组合使用：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 在根元素（如
或最外层布局容器）上动态绑定 class，例如:class="`theme-${currentTheme.value}`" - 同时在 CSS 中定义对应变量映射：
.theme-dark { --bg-color: #1e1e1e; --text-color: #f0f0f0; } - 所有组件样式优先使用
var(--bg-color)，保证换肤即时生效且不侵入业务逻辑
持久化与初始化衔接
用户刷新页面后主题不能丢失，但也不能覆盖路由指定的皮肤优先级：
- 首次加载时，先从 localStorage 读取用户偏好（如
userTheme） - 再检查当前路由是否声明了强制主题（
route.meta.theme），有则以路由为准，无则回退到用户偏好 - 后续路由跳转时，只响应
route.meta.theme，不再读 localStorage —— 避免“用户选了暗色，但进帮助页又变亮色”这类冲突
避免常见陷阱
很多项目卡在“换肤不生效”或“切换卡顿”，往往因为：
- 直接
provide('theme', 'dark')—— 普通字符串非响应式，子组件 inject 后无法 watch - 在 setup 中用
watch(route, ...)却没加immediate: true，导致首屏不触发 - CSS 变量写在组件 scoped style 里，被编译隔离，父级设置无效
- 未在
unmounted或路由离开时清理副作用，造成内存泄漏或状态错乱
