使用 watcheffect 监听响应式主题状态 themecolor，自动将映射的颜色值写入 :root 的 css 变量，实现主题色切换与全局样式同步，并持久化到 localstorage。
直接用 watchEffect 监听一个响应式主题状态（比如 themeColor），在副作用函数里调用 document.documentElement.style.setProperty 设置 CSS 变量，就能实现颜色变更自动同步到全局样式。
核心逻辑很简单：不监听 DOM 或样式本身，而是监听 JS 状态；状态一变，立刻写入变量。
1. 定义响应式主题色
在 setup 中声明一个 ref，代表当前选中的主题关键词（如 'blue'、'dark'）：
import { ref, watchEffect } from 'vue'
const themeColor = ref('blue')
// 可从 localStorage 初始化，保证刷新后不丢失
if (typeof localStorage !== 'undefined') {
const saved = localStorage.getItem('theme-color')
if (saved) themeColor.value = saved
}
2. 用 watchEffect 同步写入 CSS 变量
watchEffect 会自动追踪 themeColor.value 的读取，并在其变化时重新执行：
watchEffect(() => {
// 映射主题关键词到具体颜色值（可抽成函数）
const colorMap = {
blue: '#3b82f6',
green: '#10b981',
purple: '#8b5cf6',
dark: '#1e293b'
}
const primary = colorMap[themeColor.value] || colorMap.blue
// 批量设置 CSS 变量（全部挂载到 :root）
document.documentElement.style.setProperty('--primary-color', primary)
document.documentElement.style.setProperty('--primary-hover', primary + 'cc')
document.documentElement.style.setProperty('--bg-base', themeColor.value === 'dark' ? '#0f172a' : '#ffffff')
})
3. 绑定 UI 控件触发切换
按钮、下拉菜单等只需修改 themeColor.value，watchEffect 就会自动响应：
<button>绿色主题</button> <button>深色模式</button>
同时建议保存到 localStorage：
watchEffect(() => {
if (typeof localStorage !== 'undefined') {
localStorage.setItem('theme-color', themeColor.value)
}
})
4. CSS 中使用变量并设回退值
在全局 CSS（如 main.css 或 theme.css）中定义和引用：
:root {
--primary-color: #3b82f6;
--bg-base: #ffffff;
}
body {
background-color: var(--bg-base, #ffffff);
color: var(--primary-color, #3b82f6);
}
注意：var(--xxx, #fallback) 的逗号后是回退值，确保变量未设置时页面仍可正常渲染。
不复杂但容易忽略的是：CSS 变量必须作用在 :root（即 document.documentElement）上，子元素才能通过 var() 继承；组件内样式要显式写 var(--primary-color) 才生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
