浏览器不解析css文件中的变量语法，link引入的css必须是静态合法文本；动态主题切换应通过js切换link.href或直接用document.documentelement.style.setproperty修改变量值。
link引入的CSS里写变量，浏览器根本不认
浏览器加载外部 CSS 文件时，link 标签只是把文件内容当纯 CSS 解析——它不执行 JS、不展开模板、不处理环境变量。你在 theme-dark.css 里写 --bg-color: $COLOR_BG; 或 var(--primary) 嵌套引用，都会被当成非法语法静默忽略，控制台也不会报错。
常见错误现象：link 加载成功（Network 显示 200），但页面颜色没变；DevTools 的 Styles 面板里看不到变量声明；getComputedStyle(document.documentElement).getPropertyValue('--bg-color') 返回空字符串。
真正能用变量的地方只有两个：:root 声明块，和后续所有用 var(--xxx) 的规则。它们必须是静态、合法、已解析的 CSS 文本。
动态主题切换必须靠 JS 控制 link.href，不是靠“动态 CSS”
所谓“动态 CSS”，实际是多个预编译好的 CSS 文件（如 theme-light.css、theme-dark.css），每个都含完整、静态的 :root { --bg-color: #fff; } 声明。JS 不生成 CSS，只切换 link 的 href 指向哪个文件。
关键实操点：
-
link必须带rel="stylesheet"，漏写或拼错（如rel="style"）等于没加 - 切换前先移除旧 link：
oldLink.remove()，否则多个:root声明共存，后加载的会覆盖前一个，但顺序不可控 - 新
link插入document.head，插到body后可能触发 FOUC（闪白） - 监听
onload而非onreadystatechange或fetch，前者是唯一跨浏览器可靠的加载完成信号
document.documentElement.style.setProperty 是更轻量的替代方案
如果你只是改颜色、字体、间距等有限变量，没必要来回切整个 CSS 文件。直接用 JS 修改 :root 变量值，比换 link 更快、无网络请求、无 FOUC 风险。
但必须注意：
- 调用对象只能是
document.documentElement，document.body或其他节点调用无效 - 变量名必须带
--前缀，值必须是字符串（'#121212'，不能是#121212）且带单位（'8px'，不能是8） - CSS 中必须已声明该变量（
:root { --bg-color: #fff; }），否则var(--bg-color)无 fallback 时会退成透明或继承色 - 不要在内联
style里硬编码同名属性（如style="background: red"），它会盖过var(--bg-color)
localStorage 存主题标识符，别存整套变量值
刷新后保持主题，最稳做法是存一个字符串标识，比如 'dark'，而不是把 {'--bg-color': '#121212', '--text-color': '#eee'} 整个对象塞进 localStorage。
原因很实在：
- 对象序列化/反序列化易出错，JSON.parse 失败就丢主题
- 变量名拼写不一致（
--bgvs--bg-color）会导致部分值丢失 - 下次加载时要遍历对象调用
setProperty，顺序错或漏一项，主题就残缺 - 主题配置集中管理更安全：
const themes = { dark: { '--bg-color': '#121212' }, light: { '--bg-color': '#fff' } }
真正容易被忽略的是：CSS 变量生效 ≠ 页面立刻重绘。如果某个元素的样式被更高优先级规则锁定（比如 .btn.active { color: blue !important; }），哪怕 var(--text-color) 已更新，它也纹丝不动。调试时直接看 DevTools 的 Computed 面板，确认最终 color 值是否真来自 var() 解析结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
