直接改link标签href会触发CSS重载但易导致FOUC；推荐用两个预置link标签通过disabled属性原子切换，避免白屏闪动，并结合localStorage与prefers-color-scheme优先级控制确保用户选择不被覆盖。
直接改 link 标签的 href 会触发 CSS 重载，但有坑
原生 JS 切换主题最常用方式就是切换外部 CSS 文件，比如 light.css 和 dark.css。直接操作 link 元素的 href 属性确实可行，但浏览器不会等新样式加载完再应用——旧样式可能闪退、新样式可能延迟生效，导致页面短暂白屏或错位。
关键不是“能不能改”，而是“怎么改才不卡顿、不闪烁”：
- 必须先预加载目标 CSS 文件（用
rel="preload"或fetch()），否则首次切换会明显卡顿 - 切换
href前，建议给link加个临时disabled，避免样式冲突 - 不要依赖
onload事件——它在某些浏览器（如 Safari）对link不可靠；改用document.styleSheets检查规则是否就绪更稳妥
link 的 disabled 属性比 href 切换更可控
比起反复改 href，更推荐准备两个 link 标签（一个 light，一个 dark），共用 rel="stylesheet"，通过控制 disabled 属性来启停：
<link id="theme-light" rel="stylesheet" href="light.css"> <link id="theme-dark" rel="stylesheet" href="dark.css" disabled>
切换时只需：
立即学习“前端免费学习笔记（深入）”；
document.getElementById('theme-light').disabled = truedocument.getElementById('theme-dark').disabled = false
这样浏览器不用重新解析和加载 CSS，样式切换是原子性的，无白屏、无 FOUC。注意：disabled 对 rel="preload" 无效，所以两个 link 都得是 rel="stylesheet"。
如何安全判断主题 CSS 是否已加载完成
如果必须动态加载（比如主题 CSS 存放在 CDN 或按需拉取），不能只靠 link.onload。实际中应结合以下检查：
- 监听
link的load事件（兼容性尚可，但 Safari 有时不触发） - 用
setTimeout延迟 1–2 帧（requestAnimationFrame后），再检查document.styleSheets中对应 CSSRule 数量是否 > 0 - 简单粗暴但有效：检查某个主题专属的 CSS 变量是否已生效，例如
getComputedStyle(document.documentElement).getPropertyValue('--bg-color')
示例逻辑：
const link = document.getElementById('theme-link');
link.href = 'dark.css';
link.onload = () => {
// 确保变量已注入
if (getComputedStyle(document.documentElement).getPropertyValue('--bg-color')) {
document.documentElement.setAttribute('data-theme', 'dark');
}
};
别忽略 prefers-color-scheme 与手动切换的优先级冲突
用户手动点按钮切主题，和系统级暗色偏好（prefers-color-scheme: dark）可能打架。常见错误是每次页面加载都无条件读取媒体查询并覆盖用户选择。
正确做法：
- 首次加载时，用
window.matchMedia('(prefers-color-scheme: dark)').matches设置默认主题 - 一旦用户手动切换，就存到
localStorage，后续优先读取本地值，而不是媒体查询 - 监听
matchMedia变化，但仅当 localStorage 里没记录时才响应——避免“用户刚切完深色，系统夜间模式一开又切回浅色”
这个逻辑漏掉，主题就会“自己跳变”，尤其在 macOS/iOS 夜间自动切换时段最明显。
