最稳方式是直接修改有唯一id（如id="theme-css"）的link标签href属性，浏览器自动重载CSS且不闪屏；禁用document.styleSheets操作，因其跨域受限、无法加载新资源且索引不可靠。
如何用 JavaScript 动态切换 <link> 标签的 href 实现换肤
核心就一条：别去删 DOM 或反复创建 <link>，直接改现有标签的 href 属性最稳。浏览器会自动触发 CSS 重载，且不会引发 FOUC（闪白）或资源重复加载。
常见错误是用 document.getElementById('theme-css').remove() 再 appendChild 新 link —— 这容易导致样式抖动、媒体查询失效，甚至在 Safari 中触发两次重排。
- 确保页面中只有一个用于主题切换的
<link>，并打上明确的id（如id="theme-css"）或data-theme属性 - 所有主题 CSS 文件必须使用相同的 CSS 架构（同名类、同级变量、无依赖顺序差异），否则切换后布局可能错乱
- 路径尽量用绝对路径或根相对路径（如
/css/themes/dark.css），避免相对路径因当前 URL 变化而 404
为什么不能只靠 document.styleSheets 操作
很多人想用 document.styleSheets[n].disabled = true 控制，但这条路走不通：动态插入的 <link> 在大多数浏览器里无法通过 styleSheets 安全访问（跨域、CSP、preload 等限制下常为 null 或只读）；而且禁用/启用样式表不等于切换主题，它只是开关，无法替换内容。
更关键的是：styleSheets 列表顺序不稳定，索引不可靠，title 属性又常为空，没法精准定位主题 sheet。
- ✅ 正确做法：只操作一个有明确标识的
<link>元素 - ❌ 避免：遍历
document.styleSheets找href包含theme的项 - ⚠️ 注意：
link.disabled = true不会卸载样式，只是跳过解析，对换肤无实际帮助
fetch() 预加载 CSS 文件再切换是否必要
没必要。现代浏览器对 <link rel="stylesheet"> 的 href 修改有原生优化：只要新 URL 和旧 URL 域名、协议一致，浏览器会复用连接、缓存 DNS 和 TLS，加载极快。强行用 fetch() + Blob URL 反而绕过浏览器缓存机制，还增加内存开销和兼容性风险（比如 IE 完全不支持 Blob URL 作为 href）。
- ✅ 直接赋值：
linkEl.href = '/css/themes/blue.css' - ❌ 不推荐：
fetch('/css/themes/blue.css').then(r => r.text()).then(css => { ... new CSSStyleSheet() ... }) - ? 小技巧：可在
预埋所有主题的<link rel="preload" as="style" href="...">，提升首次切换速度
如何保存用户偏好并在页面加载时自动应用
用 localStorage 记录当前主题名（如 'dark'），在 的 script 中尽早读取并设置 —— 最好放在所有 <link> 之后、但 之前执行，避免渲染阻塞。
注意：不要等 DOMContentLoaded，那时 HTML 已解析完毕，用户可能看到默认主题闪一下才切到偏好主题。
- 写入：
localStorage.setItem('preferred-theme', 'green') - 读取并应用（放在
内的 inline script）：const saved = localStorage.getItem('preferred-theme'); if (saved && document.getElementById('theme-css')) { document.getElementById('theme-css').href = `/css/themes/${saved}.css`; } - ⚠️ 关键细节：CSS 文件名必须和服务端真实路径严格一致，大小写敏感，尤其在 Linux 服务器上
--bg-color），且各主题文件之间不能有选择器优先级冲突。动态换 <link> 只是“最后一公里”，前面没铺好路，换完也是半残。 
