css变量无法被vue响应式api监听，因其属样式层快照值；应改用ref管理主题状态，watcheffect监听后调用setproperty同步到:root，并注意挂载时机、变量覆盖及transition写法。
CSS 变量本身无法被监听——watchEffect、watch 或任何 Vue 响应式 API 都不能直接追踪 --theme-color 这类 CSS 自定义属性的变化，因为它们只是字符串值，不参与 Vue 的响应式系统。
为什么不能直接 watch CSS 变量？
CSS 变量是纯样式层的声明，浏览器不会将其暴露为可读写的响应式对象。即使你用 getComputedStyle(document.documentElement).getPropertyValue('--bg-color') 读到值，它也只是快照，Vue 不会自动收集依赖或触发更新。
- 试图写
watch(() => getComputedStyle(...).getPropertyValue('--bg-color'), ...)会导致无限循环或完全不触发（无响应式源头） -
watchEffect内部若只读取 CSS 变量，不会形成依赖链，变化时不会重跑 - DOM 层面的 style 修改（如
element.style.setProperty）不触发 Vue 更新钩子
正确做法：用 ref 管理主题状态，watchEffect 同步写入
把主题逻辑收口到 Vue 响应式数据上，让 watchEffect 监听它，再手动调用 document.documentElement.style.setProperty 同步到 CSS 变量。
- 定义一个
const theme = ref('dark')或更结构化的const themeConfig = ref({ bg: '#1a1a1a', text: '#f0f0f0' }) - 在
setup()中使用watchEffect，每次theme.value改变就批量写入:root - 确保 CSS 中所有用到的地方都写
var(--bg-color)，并带 fallback：var(--bg-color, #ffffff) - 避免在
watchEffect里混用localStorage读写——应单独抽成初始化逻辑或组合式函数
容易踩的坑：变量覆盖与 class 切换混用
如果同时用了 :root.dark { --bg-color: #1a1a1a } 和 document.documentElement.style.setProperty('--bg-color', ...)，后者优先级更高，会覆盖 class 定义的整套主题，导致切换失效或样式错乱。
- 选一种模式到底：要么全靠 JS
setProperty动态写入，要么全靠data-theme或 class 切换 + CSS 层级覆盖 - 用
setProperty时，别漏掉removeProperty清理旧值（尤其多主题场景下变量名不完全一致时） -
transition必须加在具体属性上（如background-color），而不是变量名本身——transition: --bg-color完全无效
最常被忽略的一点：watchEffect 启动时机必须在 DOM 已挂载之后（比如放在 onMounted 里），否则 document.documentElement 可能尚未就绪，首次写入失败且无报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
