动态切换主题CSS应通过控制link元素的disabled属性实现，而非增删DOM；需为各主题link设唯一ID，初始仅启用一个，切换时遍历并设置目标disabled=false、其余为true，配合localStorage持久化并在DOMContentLoaded时同步状态。
怎么用 link 标签动态切换主题CSS文件
核心是控制 <link rel="stylesheet"> 的 disabled 属性，而不是反复删增 DOM 节点。浏览器对 disabled 切换响应快，且不会触发重请求。
常见错误是用 document.getElementById().remove() 再 appendChild() 新的 link，这会导致样式闪动、FOUC（Flash of Unstyled Content），甚至在某些浏览器中重复加载 CSS。
- 给每套主题的
<link>加唯一id，比如theme-dark、theme-blue - 初始 HTML 中只启用一个（
disabled="false"或不设），其余设为disabled="true" - 切换时遍历所有主题
link，把目标设为disabled = false，其余全设为true
示例：
<link id="theme-light" rel="stylesheet" href="/css/light.css"> <link id="theme-dark" rel="stylesheet" href="/css/dark.css" disabled> <link id="theme-blue" rel="stylesheet" href="/css/blue.css" disabled>
为什么不能用 @import 或内联 style 实现多主题
@import 在 CSS 文件里写，无法运行时切换；它只是加载依赖，不提供运行时控制入口。而内联 <style> 动态插入虽然可行，但维护成本高、无缓存、无法利用浏览器对 CSS 文件的并行加载和预解析优化。
更关键的是：内联样式优先级高于外部 CSS，容易意外覆盖你原本想保留的布局规则，调试时极难追踪来源。
立即学习“前端免费学习笔记（深入）”；
-
@import是 CSS 语法，不是 JS 可操作的 DOM 接口 - 内联
<style>每次切换都要生成完整 CSS 字符串，易出错、难复用 - 外部 CSS 文件可被浏览器缓存，多主题间共享基础样式（如重置、布局）也更自然
media 查询 + prefers-color-scheme 能替代手动切换吗
不能完全替代，但可以作为默认兜底。用户系统设为深色模式时，prefers-color-scheme: dark 确实能自动生效，但它只响应系统偏好，不响应用户主动点击“切到蓝色主题”这类自定义选择。
而且，prefers-color-scheme 只有两个值（light/dark），没法表达“蓝/绿/紫/高对比度”等多维主题需求。强行塞进 media 查询里，会把逻辑耦合进 CSS，JS 失去控制权，后续加主题开关、持久化用户选择都会变麻烦。
- 用
prefers-color-scheme做初始加载判断（比如首次访问时自动选 dark）可以 - 但用户点了“蓝色主题”按钮后，必须靠 JS 控制
link.disabled，否则 CSS 规则不会生效 - 别在 media 查询里写
color-scheme: blue—— 这个属性根本不存在
切换主题后如何持久化用户选择
最轻量可靠的方式是存 localStorage，键名建议用 ui-theme 这类明确前缀，避免和其他脚本冲突。读取时机必须在 DOM ready 后、样式应用前，否则页面会先闪一下默认主题。
注意：不要在 <head> 里就执行 JS 读取 localStorage，此时 DOM 可能未就绪；也不要等 window.onload，它等图片资源，太晚。
- 推荐在
DOMContentLoaded回调里读取localStorage.getItem('ui-theme') - 找到对应
link#id，设disabled = false，其他设true - 每次切换后立刻
localStorage.setItem('ui-theme', 'blue')，别延迟 - 如果服务端渲染（SSR），需在客户端首次 hydration 时同步状态，否则首屏仍是服务端选的主题
事情说清了就结束。真正麻烦的不是切换动作本身，而是确保它发生在样式计算之前、不打断渲染流水线、且和 SSR / 缓存策略不打架。
