最稳定无fouc的方式是用disabled切换预置link标签：所有主题css提前写入html并初始禁用，切换时仅修改对应link的disabled布尔值，确保样式原子级切换且变量同步生效。
用 disabled 切换预置的 <link> 标签（适合固定主题数）
这是最稳定、无 FOUC 的方式，浏览器原生支持，样式切换是原子级的。前提是你知道所有主题名（比如 light/dark/blue），且能接受首屏多加载几个 CSS 文件。
- HTML 中提前写好所有主题
<link>，每个带唯一id和rel="stylesheet"，初始只启用一个：<link id="theme-light" rel="stylesheet" href="/css/light.css">，其余加disabled - JS 切换时只改
disabled布尔值：document.getElementById('theme-dark').disabled = false，其他全设为true - 别用字符串
"true"赋值——link.disabled = "true"会变成true（因为非空字符串转布尔为真），但语义错误；必须用false/true - 如果主题含
@import或依赖外部字体，它们会随主 CSS 一起生效，无需额外处理
动态创建 <link> 并替换（适合租户级或主题不可预知）
当主题由后端下发（如 tenantId=abc）、或主题包数量极大无法预载时，得现场生成 <link>。关键不是“插入”，而是“替换”：旧样式卸载前新样式必须就位。
- 先创建新
<link>，设rel="stylesheet"、type="text/css"（IE11 需要）、href拼好路径（如/css/tenant-${tenantId}.css） - 插入前检查是否已存在：
if (!document.querySelector(`link[href="${url}"]`))，避免重复加载 - 监听
load事件，触发后再移除旧<link>并把新节点append到；不要等onerror回滚——失败时保持当前主题更安全 - 别用
document.styleSheets查找旧 link——它不反映 DOM 真实状态，容易误删
直接改已有 <link> 的 href（轻量但需防坑）
如果只有一套主题切换（比如仅 dark/light），且你控制服务端部署（能保证路径稳定、缓存策略合理），改 href 是最轻量的方案。但它对加载时机敏感，稍不注意就闪屏或变量失效。
- 确保目标
<link>有id（如id="theme-css"），JS 用getElementById精准定位，别靠 class 或顺序 - 改完立刻监听
load事件，所有依赖新样式的逻辑（比如读getComputedStyle、触发动画）必须放里面，否则可能取到旧值 - 主题 CSS 里所有变量必须平铺在顶层
:root，不能写成.dark :root { --bg: #000; }——这种选择器根本不会匹配documentElement，变量压根不注册 - 避免在变量值里嵌套引用：
--color-btn: var(--color-primary);容易因加载顺序导致未定义；不同主题文件之间变量名必须完全一致，只变值
为什么不用 @import 或内联 <style></style>
这两类做法看似灵活，实际在多主题场景下会快速失控。
-
@import是 CSS 规则，不是 DOM 接口，JS 无法运行时增删或切换；它只在解析时起作用，且会阻塞渲染 - 动态插入
<style></style>要拼完整 CSS 字符串，维护成本高、无缓存、调试困难；更重要的是，它的优先级高于外部 CSS，容易意外覆盖布局规则，而你根本找不到来源 - 如果主题含媒体查询、伪类、
@keyframes，手动注入insertRule会全部失效——浏览器不认这些规则的动态拼接 -
prefers-color-scheme只能兜底系统偏好，没法响应用户点“紫色主题”这种明确操作；它不能替代 JS 对<link>的控制权
:root 声明不完整，或者变量被上一个主题残留影响——这需要你盯着每个主题文件的顶层声明，而不是只改 href。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
