Canvas不解析CSS变量，ctx.fillStyle="var(--primary-color)"会静默失效并回退为黑色；必须用getComputedStyle().getPropertyValue().trim()获取计算值，且主题切换后需手动重绘。
ctx.fillStyle = "var(--primary-color)" 会静默失效，图形变黑或透明——这不是 bug，是 Canvas 2D 上下文根本不解析 CSS 语法。
Canvas 是位图绘制层，不读样式表、不执行 CSS 函数、也不继承任何 CSS 变量。它只接受最终计算出的、格式合法的颜色字符串："#3b82f6"、"rgb(59, 130, 246)"、"LightGreen"（注意大小写）这类值。写 "var(--primary-color)" 就像对打印机说“打印我刚想到的那个字”，它听不懂，只能 fallback 到默认黑色 #000。
getComputedStyle 是唯一能拿到真实颜色的入口
Canvas 不可能绕过 DOM 直接读变量，必须靠浏览器先把 CSS 变量算出来，再由 JS 拿到结果。
- 必须传入已挂载且样式已生效的元素，比如
document.documentElement（读根变量）或某个带style="--color: red"的容器节点 - 必须用
.getPropertyValue('--primary-color')，不是.--primary-color（语法错误），也不是.style.getPropertyValue()（只读内联样式） - 返回值永远是字符串，但可能带前导空格，
.trim()不是可选操作，是必须步骤；Safari 旧版本不.trim()就直接失效 - 如果变量未定义或写错（比如
--primary: var(--accent)但--accent不存在），getPropertyValue()返回空字符串""，不是null或undefined，别用== null判断
哪些颜色格式 Canvas 能直接用，哪些会静默失败
Canvas 对输入极其挑剔，不报错、只沉默 fallback：
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持：
"#3b82f6"、"rgb(59, 130, 246)"、"rgba(59, 130, 246, 0.8)"、"LightGreen"（W3C 标准名，大小写敏感） - ❌ 不支持：
"var(--primary)"、"hsl(210, 75%, 50%)"、"dark blue"（空格分隔）、"rgba(59 130 246 / 0.8)"（新式空格语法，Safari 15.6 以下不认）、"CanvasText"（系统色跨平台不一致，且不响应主题切换） - alpha 必须是小数：写
"rgba(0,0,0,50%)"会失效，变成黑色
主题切换后颜色没变，真正麻烦的不是读值，而是重绘
CSS 变量变了，Canvas 不知道，也不会自动 redraw。你改了 :root { --primary-color: #ef4444; }，Canvas 还画着上一次的 #3b82f6，除非你：
- 显式监听变化：比如
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", updateCanvas) - 在回调里重新读变量（记得缓存，别在动画帧里反复调
getComputedStyle） - 然后必须手动清空画布：
ctx.clearRect(0, 0, canvas.width, canvas.height) - 最后再调用你的完整绘制逻辑——漏掉任一环，颜色都刷不上
最常被忽略的一点：很多人只改了 CSS 变量，却忘了 clearRect 和重绘，结果图形卡在旧状态，连颜色是否更新都看不出来。
