真正“按需加载”主题变量是指仅加载当前所需主题的CSS变量文件，而非运行时覆盖：将各主题变量抽离为独立CSS文件，通过动态设置<link>的href加载，并监听load/error事件确保变量就绪与容错。
直接改 :root 里的 CSS 变量不叫“按需加载”
很多人以为在 JS 里执行 document.documentElement.style.setProperty('--bg-color', '#1a1a1a') 就是按需加载主题，其实这只是运行时覆盖变量值，所有主题的变量定义仍硬编码在主样式表里，没解决体积和首屏问题。真正“按需加载”，指的是：只让浏览器下载并解析当前用户需要的那一套变量定义（比如深色主题），其他主题的变量 CSS 文件压根不请求。
用 link[rel="stylesheet"] 动态加载变量文件最可控
把每套主题的 CSS 变量单独抽成一个文件（如 theme-dark.css、theme-blue.css），HTML 中只留一个带 id 的占位 <link>：
<link id="theme-vars" rel="stylesheet" href="">
切换时直接改 href，浏览器会异步加载新文件并注入变量作用域：
const themeLink = document.getElementById('theme-vars');
themeLink.href = '/css/theme-dark.css';- 必须确保这些变量文件只包含
:root { --x: y; }声明，不带任何选择器或规则，避免污染全局样式 - 不要用
disabled方式预加载全部变量文件——那等于放弃“按需”，只是换种方式加载冗余资源 - 如果变量文件里用了
@import引入基础颜色库，注意构建工具是否保留了该语法（Vite 默认不处理 CSS 中的@import）
路径写错或加载失败时，getComputedStyle 会返回空字符串
改完 href 后立刻读取 getComputedStyle(document.documentElement).getPropertyValue('--bg-color')，大概率拿到空值或旧值。这不是 JS 执行慢，而是 CSS 变量定义还没被浏览器解析生效。
立即学习“前端免费学习笔记（深入）”；
- 必须监听
load事件才能确认变量已就绪：themeLink.addEventListener('load', () => { /* 此时可安全读取变量 */ }) -
error事件不能忽略：路径 404、CORS 拒绝、MIME 类型错误都会触发它，此时应 fallback 到默认变量值或提示用户 - 别用
setTimeout等固定毫秒数——弱网下变量文件加载可能耗时几百毫秒以上
构建时加哈希但别用 Date.now()
变量 CSS 文件内容稳定后，应在构建阶段生成内容哈希（如 theme-dark.abc123.css），而不是在 JS 里拼 ?v=+Date.now()。
- 用
Date.now()会导致每次页面加载都发起新请求，CDN 和浏览器缓存全失效 - 哈希应来自文件内容本身，这样相同主题变量文件只要内容不变，URL 就不变，缓存长期有效
- 路径映射建议用对象管理：
{ dark: '/css/theme-dark.abc123.css', blue: '/css/theme-blue.def456.css' }，JS 只查表，不拼串
变量定义本身不参与渲染，但它是后续所有主题样式的基石；加载失败不会让页面白屏，但会让所有依赖它的颜色、间距等表现异常——这点比普通样式表更隐蔽，也更值得加 error 处理。
