Vue 3 的 reactive 不能直接修改 CSS 或 Less 变量，但可通过管理主题配置对象并手动同步到 CSS 自定义属性实现动态主题切换，配合 watch 更新 document.documentElement.style 并持久化至 localStorage。
Vue 3 的 `reactive` 本身**不能直接修改 CSS 变量或 Less 变量**，它只负责让 JavaScript 对象具备响应式能力。但你可以用它来**管理主题配置数据**，再配合 CSS 自定义属性（CSS Variables）和动态 `
- 定义一个主题状态对象，比如：themeConfig = reactive({ primary: '#409eff', bg: '#ffffff', text: '#333' })
- 这个对象在组件中可读可写，任何改动都会触发依赖它的逻辑（比如更新 CSS 变量）
- 支持嵌套结构，例如：themeConfig = reactive({ light: { primary: '#409eff' }, dark: { primary: '#64b5f6' } })
把 reactive 数据同步到 CSS 变量
仅靠 reactive 不会自动改样式，你需要手动将它的值写入 document.documentElement.style：
- 监听 themeConfig 变化（用 watch），每次更新时批量设置 CSS 变量：document.documentElement.style.setProperty('--primary-color', themeConfig.primary)
- 推荐封装一个函数，比如 updateCssVars()，统一处理所有变量映射
- 注意：CSS 变量名必须是合法字符串（如 --bg-color），且要与样式表中使用的名称一致
在样式中使用 CSS 变量
你的全局或组件样式需基于 CSS 变量编写，才能响应变化：
Reactivation Specialist · 流失召回
下载
适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p
- 例如：.btn { background-color: var(--primary-color); color: var(--text-color); }
- 不要在 Less/Sass 中直接引用 reactive 对象——它们编译时就固定了，无法运行时更新
- 如果项目仍用 Less，建议把 Less 编译为多套静态主题 CSS 文件，再通过切换 class 控制；而 reactive 更适合驱动 CSS 变量方案
持久化与初始化
让用户切换后不丢失选择：
- 页面加载时从 localStorage 读取上次主题，赋值给 reactive 对象
- watch themeConfig，变化时存回 localStorage
- 可结合 window.matchMedia('(prefers-color-scheme: dark)') 自动适配系统偏好
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
