用JavaScript切换<link>的href是最轻量的主题切换方式，需确保路径完整、加唯一id定位、监听onload/onerror、同步更新data-theme属性并持久化到localStorage。
如何用 JavaScript 切换 <link> 的 href 动态加载主题 CSS
直接改 <link rel="stylesheet"> 标签的 href 是最轻量、兼容性最好的动态主题切换方式，无需重写 CSS 规则或操作 DOM 样式表，浏览器会自动卸载旧样式、加载新样式。
关键点在于：必须确保新 href 指向的是完整路径（相对或绝对），且新 CSS 文件已部署就绪；否则会出现样式空白或 404。
- 推荐给
<link>加上唯一id（如id="theme-css"），方便精准定位 - 避免用
document.getElementsByTagName('link')[0]这类模糊索引，容易因 HTML 结构变动失效 - 切换前可先检查
link.sheet.cssRules是否存在，判断当前是否已加载成功（非必需，但利于调试）
切换时为什么页面会闪一下？如何缓解
因为浏览器需要下载新 CSS 并解析渲染，期间旧样式被移除、新样式未就绪，就会短暂无样式（FOUC）。这不是 bug，是正常行为。
- 确保两个主题 CSS 文件体积相近，避免一个极大一个极小导致加载时间差明显
- 在
<head>中预加载备用主题：<link rel="preload" href="dark.css" as="style">
- 切换前加一层半透明遮罩（
pointer-events: none），等link.onload触发后再移除 - 不依赖
onload的简单做法：切换后setTimeout(() => {}, 16)延迟一小帧再恢复交互（适合对体验要求不极致的场景）
link.onload 和 link.onerror 必须监听
主题 CSS 加载失败不会抛 JS 错误，但页面会彻底白屏或错乱，用户无感知。必须主动捕获并降级处理。
立即学习“前端免费学习笔记（深入）”；
-
onerror触发时，应立即回退到上一个可用主题（比如存一个lastValidTheme变量） -
onload不代表样式已应用完毕，只表示文件下载+解析完成；但绝大多数情况下，后续渲染已同步生效 - 注意 Safari 对
onload的触发时机略滞后，建议配合requestAnimationFrame做二次确认
const themeLink = document.getElementById('theme-css');
themeLink.onerror = () => {
console.warn('主题 CSS 加载失败，回退到 light');
themeLink.href = 'light.css';
};
themeLink.onload = () => {
document.documentElement.setAttribute('data-theme', 'dark');
};主题切换后 class 或 data-* 属性要不要同步更新
要。仅换 CSS 不改 HTML 属性，会导致依赖 [data-theme="dark"] 的内联样式、JS 逻辑（比如颜色拾取、图标切换）失效。
- 统一用
document.documentElement.setAttribute('data-theme', 'dark')，比操作<body>更可靠（CSS 选择器权重更高、SSR 友好） - 如果项目用了 CSS-in-JS 或主题上下文（如 React Context），这里就是触发重新渲染的信号点
- 别忘了 localStorage 持久化：
localStorage.setItem('preferred-theme', 'dark')，刷新后读取并提前设置href
主题切换本身不复杂，真正难的是边界情况：网络中断、缓存污染、CDN 回源失败、Safari 的 onload 延迟、以及开发者忘了清空旧主题里用 !important 写死的规则——这些都会让“换了个主题”变成“换了个 bug”。
