应将主题色定义为 Vue 响应式 ref，用 watch 监听其变化并重绘 Canvas；同时同步更新 CSS 变量以保持 UI 一致性，并通过 localStorage 持久化及首次渲染确保颜色即时生效。
不能直接用 watch 监听 CSS 变量本身来更新 Canvas，因为 CSS 变量不是响应式数据。正确做法是：把主题色抽成 Vue 响应式状态（如 ref），用 watch 监听它，在回调里重绘 Canvas。
定义可响应的主题色状态
在 setup 中声明一个 ref 作为主题色的唯一数据源，支持初始化自 localStorage 或默认值：
const themeColor = ref('#42b883')- 可从本地缓存读取：
themeColor.value = localStorage.getItem('themeColor') || '#42b883' - 若需多套预设，可用对象映射：
const themes = { blue: '#3b82f6', green: '#10b981' }，再通过 key 切换
监听变化并触发 Canvas 重绘
使用 watch 监听 themeColor，在回调中获取 Canvas 上下文并更新绘制逻辑：
- 确保 Canvas 元素已挂载，推荐在
onMounted中获取getContext('2d') - watch 回调内调用重绘函数，例如：
ctx.fillStyle = themeColor.value; ctx.fillRect(0, 0, width, height) - 若 Canvas 内容复杂，建议封装
renderCanvas()，只在主题变化时调用一次，避免重复计算
配合 CSS 变量保持样式一致性
Canvas 渲染颜色和页面其他元素应统一来源，可同步写入 CSS 变量增强一致性：
- 在 watch 回调末尾添加：
document.documentElement.style.setProperty('--primary-color', themeColor.value) - 这样按钮、文字等用
var(--primary-color)的地方会自动同步，Canvas 和 UI 颜色就真正联动了 - 注意：CSS 变量仅用于样式层，Canvas 绘制必须显式读取 JS 状态，不能靠
getComputedStyle取变量值（非实时、不可靠）
处理持久化与初始渲染
用户刷新页面后要保留上次选择的主题色，并立即生效到 Canvas：
- 设置 themeColor 后，立刻执行一次
renderCanvas()，保证首屏正确 - 每次变更时存入 localStorage：
localStorage.setItem('themeColor', themeColor.value) - 若使用暗色模式等复合主题，可监听
ref({ color, mode })对象，配合{ deep: true }深度监听
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
