无法直接用 watchEffect 监听 CSS 变量，需将变量转为 ref 响应式状态，再通过 watchEffect 同步写入 document.documentElement.style 实现响应式驱动；可配合 localStorage 持久化与 prefers-color-scheme 自动适配。
直接用 watchEffect 监听 CSS 变量本身是做不到的，因为 CSS 变量不是响应式数据，Vue 无法自动追踪它的变化。但我们可以“曲线救国”：把主题色等关键变量抽成 Vue 响应式状态（比如 ref），在 watchEffect 中读取它，并同步写入到 :root 或目标元素的 style 上 —— 这样就实现了「响应式驱动 CSS 变量」，换肤逻辑清晰、可预测、易维护。
1. 定义响应式主题状态
把你想动态控制的 CSS 变量（如主色、背景色、文字色）封装成 ref，作为主题系统的单一数据源：
import { ref, watchEffect } from 'vue'
const themeColor = ref('#42b883')
const bgColor = ref('#ffffff')
const textColor = ref('#333333')
// 可扩展为对象，便于管理多套主题
const currentTheme = ref({
primary: '#42b883',
bg: '#ffffff',
text: '#333333'
})
2. 用 watchEffect 同步写入 CSS 变量
在 setup 或 onMounted 中调用 watchEffect，每次响应式状态变化时，批量更新 document.documentElement.style：
watchEffect(() => {
document.documentElement.style.setProperty('--primary-color', currentTheme.value.primary)
document.documentElement.style.setProperty('--bg-color', currentTheme.value.bg)
document.documentElement.style.setProperty('--text-color', currentTheme.value.text)
})
✅ 注意点：
立即学习“前端免费学习笔记（深入）”；
- CSS 变量名要和样式中使用的完全一致（比如
--primary-color对应color: var(--primary-color)） - 推荐统一挂载到
:root（即document.documentElement），全局生效且无需重复设置 - 如果只针对某个组件局部换肤，可换成该组件根元素的
ref并操作其style
3. 主题切换函数 + 持久化（可选）
封装一个切换方法，支持一键切换并存入 localStorage，刷新不丢失：
function setTheme(theme) {
currentTheme.value = theme
// 自动保存到本地
localStorage.setItem('ui-theme', JSON.stringify(theme))
}
// 初始化时读取
onMounted(() => {
const saved = localStorage.getItem('ui-theme')
if (saved) {
currentTheme.value = JSON.parse(saved)
}
})
// 示例：切换深色模式
function toggleDarkMode() {
const isDark = currentTheme.value.bg === '#121212'
setTheme(isDark
? { primary: '#42b883', bg: '#ffffff', text: '#333333' }
: { primary: '#4caf50', bg: '#121212', text: '#ffffff' }
)
}
4. CSS 中直接使用变量
样式里只需按标准语法引用，无需额外处理：
:root {
--primary-color: #42b883;
--bg-color: #ffffff;
--text-color: #333333;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
.btn-primary {
background-color: var(--primary-color);
}
? 小技巧：可以用 CSS 的 prefers-color-scheme 做初始值判断，再交由 Vue 控制最终状态，兼顾系统偏好与用户主动选择。
