最稳方案是预加载所有主题link并用disabled属性切换，而非修改href；因href更新会触发FOUC、CSSOM重建及第三方变量失效。需配合localStorage持久化与DOMContentLoaded时机控制。
切换的href会导致FOUC，必须避免
直接执行 document.getElementById('theme-css').href = '/css/dark.css' 看似最直觉，但实际会触发浏览器丢弃旧样式表、重新发起请求、等待下载解析——这中间 DOM 渲染无样式支撑，出现白屏或错位（即 FOUC）。即使 CSS 文件已缓存，仍需重建 CSSOM，过渡动画也会中断。这不是偶发问题，而是所有主流浏览器的统一行为。
- 错误现象：点击切换后页面“闪一下”，
getComputedStyle读到的仍是旧值 - 根本原因：浏览器不保证 href 更新后样式立即生效；
load事件只表示文件加载完成，不等于样式已应用到渲染树 - 更糟的是：第三方 UI 库（如 Ant Design）依赖的 CSS 变量不会自动继承新文件中的
:root声明，导致组件样式残缺
用disabled属性预加载所有主题CSS更可靠
把所有主题的 都写进 HTML，初始只启用一个，其余设 disabled="true"。切换时只改 disabled 属性，不触碰 href 或 DOM 结构。这样所有样式已解析就绪，切换是原子性的，无网络延迟、无 FOUC。
- HTML 中写法示例：
+ - JS 切换逻辑：
document.getElementById('theme-light').disabled = true，document.getElementById('theme-dark').disabled = false - 注意：必须在
DOMContentLoaded后操作，否则元素可能未就绪 - 优势：兼容 IE11，无需检测 CSS 变量支持，第三方库样式能完整保留
为什么不能用@import或动态插入
@import 是 CSS 语法，运行时不可控；动态插入 虽然能切，但会破坏浏览器对 CSS 文件的预解析、并行加载和缓存复用能力。
-
@import写在 CSS 里，JS 没法在运行时修改它，也无法监听加载状态 - 每次切换都生成大段 CSS 字符串注入
，易出错、难调试、违反 CSP 策略 - 内联样式优先级高于外部 CSS，容易意外覆盖布局规则，
!important泛滥后几乎无法维护 - 字体、图标等资源无法被浏览器提前发现并预加载，首屏渲染延迟更明显
初始化时必须同步 localStorage 和系统偏好
用户点了“深色主题”，刷新后变回浅色，这是最常被忽略的一环。单纯切换 disabled 不够，必须持久化选择，并在页面加载时还原。
- 切换时立刻写入：
localStorage.setItem('ui-theme', 'theme-dark') - 初始化时按优先级读取：
localStorage.getItem('ui-theme')→ fallback 到window.matchMedia('(prefers-color-scheme: dark)').matches→ 最后用默认值 - 别在
<script></script>标签里直接操作 DOM，确保脚本在DOMContentLoaded后执行 - 如果项目用到了 Web Components 或 Shadow DOM，记得检查
disabled属性是否穿透生效
真正麻烦的不是切换动作本身，而是主题 CSS 与第三方库、字体子集、图片暗色适配之间的耦合。这些不会随 disabled 切换自动对齐，得靠构建时提取变量、运行时注入 data 属性或服务端配合才能闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
