动态替换 的 href 是最轻量兼容的多主题切换方式，需用 js 提前加载新 css 并延迟激活以避免 fouc，所有变量必须平铺在 :root 中且结构一致，主题状态仅存 localstorage 字符串即可。
如何动态替换 <link> 加载的 CSS 主题文件
直接换 <link> 的 href 属性是最轻量、最兼容的多主题切换方式，不需要 JS 处理变量计算或重写样式规则，浏览器原生支持，且能规避 CSS 变量继承链污染问题。
常见错误是试图用 JS 修改 :root 中的 --color-primary 等变量来“切换主题”，结果发现深色模式下按钮文字看不清、组件状态样式错乱——这是因为变量一旦被子元素继承并参与 calc 或 color 混合，就无法靠简单覆盖还原。
- 只在
中保留一个带id="theme-link"的<link>标签，其他主题文件不预加载 - 主题 CSS 文件里不要写
@media (prefers-color-scheme)，让 JS 完全掌控切换时机 - 确保所有主题文件都定义了同一套变量名（如
--bg-base、--text-emphasis），否则运行时会 fallback 到初始值 - 切换时用
linkEl.href = '/css/theme-dark.css'，别用setAttribute，避免触发两次加载
CSS 变量主题包必须用 :root 声明，且不能嵌套
变量必须写在 :root 作用域，否则 JS 通过 getComputedStyle(document.documentElement) 读不到，也无法被后代元素稳定继承。任何试图在 .dark-mode 类里重写 :root 变量的做法都会失败——CSS 里没有“条件式 :root”。
典型翻车场景：把主题变量写在 .theme-dark :root 里，以为能局部生效。实际浏览器只认顶层 :root，这个选择器根本不会匹配到 document 元素，变量压根没注册。
- 所有变量声明必须平铺在
:root { --color-bg: #1e1e1e; }，不加前缀、不套类、不嵌套 - 不同主题文件之间仅变量值不同，结构完全一致，方便 diff 和维护
- 避免在变量值里用
var(--other-var)做间接引用，切换时容易因加载顺序导致未定义
切换时如何避免 FOUC（闪白）和样式抖动
直接改 href 会导致浏览器卸载旧样式、加载新样式，在网络慢或文件大时出现短暂空白或布局跳动。关键不是阻止加载，而是让新样式就位后再激活。
错误做法是监听 link.onload 再改 disabled 或 class；正确做法是提前加载、延迟激活。
- 先创建新
<link>节点，设rel="stylesheet"和href，但不插入 DOM - 监听其
load事件，触发后移除旧<link>，再把新节点 append 到 - 不要依赖
onerror回滚主题——出错时保持当前主题比强行切回更安全 - 如果主题文件超过 50KB，考虑用
rel="preload"提前 fetch，但注意 preload 不会执行 CSS 解析
为什么不用 localStorage 存主题名就够了
主题切换本质是状态同步，不是数据持久化。存 theme: 'dark' 这种字符串足够，没必要存整套变量值或序列化 CSS 规则。
有人试图把变量值 JSON 化存在 localStorage 里，再用 JS 注入 style 标签，结果发现 SSR 不兼容、DevTools 里看不到真实 CSS、@keyframes 动画失效——因为内联 style 标签不支持 @import 和 @font-face。
- 页面初始化时读
localStorage.getItem('theme')，决定加载哪个<link> - 切换时只更新 storage 和 link，不碰 DOM 其他部分
- 服务端渲染（如 Next.js）需在 hydration 前同步设置
document.documentElement.classList，否则首屏仍可能闪回默认主题
真正麻烦的是变量作用域交叉和媒体查询劫持——比如某个组件同时依赖 prefers-color-scheme 和手动切换的主题，这时候得用 class 强制覆盖，而不是指望变量自动适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
