最可靠方式是直接修改已有link标签的href属性。需确保link有唯一id，新CSS路径正确且支持CORS；切换后监听load/error事件确保样式生效；初始化时结合prefers-color-scheme匹配系统偏好；避免使用preload干扰切换。
直接替换 <link> 的 href 属性最可靠
浏览器对动态切换 CSS 主题最兼容、最可控的方式，就是操作 DOM 中已有的 <link rel="stylesheet"> 标签，修改它的 href 属性值。这种方式不依赖 CSSOM 注入或 @import，避免了加载阻塞、样式闪烁、跨域限制等问题。
关键点：
- 必须确保目标
<link>有唯一id（比如id="theme-css"），方便 JS 精准定位 - 新 CSS 文件需提前部署好，路径要正确，且服务端需支持 CORS（如果跨域）
- 切换后浏览器会自动下载并应用新样式，旧样式立即失效，无需手动清理
- 不要用
document.write或反复appendChild/removeChild，容易引发重排和竞态
const themeLink = document.getElementById('theme-css');
themeLink.href = '/css/theme-dark.css'; // 切换到深色主题
// 或
themeLink.href = '/css/theme-light.css'; // 切回浅色主题
监听 load 事件避免样式未就绪就交互
单纯改 href 后立即操作 DOM（比如读取 getComputedStyle 或触发动画），可能拿到旧样式值——因为新 CSS 还在加载中。必须等 load 事件触发才算真正生效。
常见错误现象：切换主题后调用 getComputedStyle(document.body).backgroundColor 仍返回旧值，或过渡动画没起效。
立即学习“前端免费学习笔记（深入）”；
-
load事件只在成功加载时触发；失败会触发error，需捕获处理 - 不能依赖
setTimeout模拟等待，网络波动下不可靠 - 如果主题 CSS 包含大量字体或图片，
load只表示 CSS 文件加载完成，不保证所有资源渲染就绪
themeLink.addEventListener('load', () => {
console.log('主题 CSS 已加载并应用');
// 此处可安全执行依赖新样式的逻辑，如更新 localStorage 记录当前主题
});
themeLink.addEventListener('error', () => {
console.error('主题 CSS 加载失败，请检查路径或网络');
});
配合 prefers-color-scheme 做初始化更自然
用户首次访问时，不应强制显示默认主题，而应尊重系统偏好。用 window.matchMedia('(prefers-color-scheme: dark)') 获取初始状态，并据此设置 href，再绑定监听器响应后续系统切换。
注意：matchMedia 返回的是媒体查询对象，不是布尔值；且它不会自动触发一次回调，需手动调用一次判断。
- 仅靠 CSS 的
@media (prefers-color-scheme: dark)无法覆盖全部自定义主题逻辑（比如按钮颜色、图标 SVG fill） - JS 初始化必须在
<link id="theme-css">存在之后执行，否则找不到元素 - 不要在
DOMContentLoaded外提前执行，避免 DOM 未就绪
const themeLink = document.getElementById('theme-css');
const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)');
function setTheme(href) {
themeLink.href = href;
}
// 初始化
if (darkModeMedia.matches) {
setTheme('/css/theme-dark.css');
} else {
setTheme('/css/theme-light.css');
}
// 监听系统主题变化
darkModeMedia.addEventListener('change', e => {
setTheme(e.matches ? '/css/theme-dark.css' : '/css/theme-light.css');
});
避免 rel="preload" 或 rel="prefetch" 干扰主题切换
有些项目为优化性能，会用 <link rel="preload" as="style"> 提前加载备用主题 CSS。这反而会导致问题：预加载的 CSS 不会自动应用，且可能与主 <link rel="stylesheet"> 冲突，造成样式错乱或重复解析。
真实影响：
- 预加载的 CSS 被浏览器缓存，但不会注入文档流，切换时仍需重新 fetch（除非复用同一 URL）
- 若两个
<link>同时存在（一个 preload，一个 stylesheet），可能导致部分规则被意外覆盖 - 移动端 WebView（如 iOS WKWebView）对 preload + dynamic href 切换的支持不稳定
建议：主题 CSS 文件体积通常不大（几十 KB），直接按需加载即可，不必预加载。如真需优化，可在用户操作前（如悬停主题按钮时）用 fetch() 触发缓存，而非插入 <link>。
