CSS变量不能当“值容器”用，因其是运行时解析的自定义属性，非JS变量；必须在:root中声明才具全局作用域，且需JS桥接localStorage存取颜色值并动态注入，配合默认值与校验确保稳定。
为什么不能直接把 CSS 变量当“值容器”用
CSS 变量（--primary-color）本质是运行时解析的自定义属性，不是 JS 中的变量。它不存储“变量名”，只在计算 var(--primary-color) 时取值。所以你没法用 localStorage.setItem('--primary-color', '#4a90e2') 存一个带 -- 前缀的字符串——LocalStoage 只认字符串内容，浏览器不会自动把它挂进 :root 的样式系统里。
必须在 :root 下声明，否则作用域受限
所有主题色变量必须统一写在 :root 里，才能被全站任意选择器读取。写在 .card 或 body 里会导致子元素无法继承，或需要重复声明。
-
:root是伪类，代表文档根节点（等价于html），优先级最高、作用域最广 - 别在组件级 CSS 文件里零散定义
--color-bg，后期换主题要全局搜索替换 - 推荐新建
design-tokens.css集中管理，比如：:root { --primary-color: #2980b9; --background-color: #2c3e50; --text-color: #ffffff; }
JS 动态改色时，别漏掉默认值和容错
用 JavaScript 修改变量前，得先确保变量已存在且格式合法，否则 var(--missing-color, #000) 里的 fallback 会失效，页面可能白屏或失色。
- 读取 localStorage 时加
try/catch，避免 JSON 解析失败或空值导致setProperty报错 - 设置前校验颜色值是否合法：用正则
/^#([0-9A-F]{3}){1,2}$/i或rgb\(|hsl\(|rgba\(|hsla\(/判断 - 始终在
:root上设值，不要写document.body.style.setProperty—— body 不是根，子元素拿不到 - 示例：
const color = localStorage.getItem('theme-primary') || '#2980b9'; if (/^#([0-9A-F]{3}){1,2}$/i.test(color)) { document.documentElement.style.setProperty('--primary-color', color); }
命名要语义化，别用 color1 这类无意义键名
变量名不是越短越好，而是要让人一眼看懂用途。命名混乱会导致换主题时改错值、调试时绕晕自己。
立即学习“前端免费学习笔记（深入）”；
- 用连字符分隔单词：
--primary-color✅，--primaryColor❌（CSS 变量区分大小写，且部分构建工具会转义） - 避免命名色（
blue、red）——JS 无法解析成数值，也不利于后续做明暗度计算 - 按设计系统层级组织：主色、辅助色、背景、文本、边框、状态色（
--success-color、--warning-color） - 如果用 Sass 预处理，Map 键名也要保持小写+短横线，如
"primary": #007bff，否则map-get($colors, primary)会报错
:root 变量声明**。哪怕用户第一次访问、localStorage 为空、JS 还没执行，页面也得能正常渲染。否则白屏几秒再闪一下主题色，体验就断了。 
