动态切换多主题样式需通过JavaScript精准替换id="theme-css"的link标签href属性，预加载CSS避免闪动，监听onload/onerror处理加载状态，并用localStorage保存用户偏好实现自动应用。
动态切换多主题样式，核心是通过 JavaScript 替换页面中 标签的 href 属性，指向不同的 CSS 文件。关键在于准确获取目标 link 元素、安全替换路径，并确保样式立即生效。
定位用于主题切换的 link 标签
推荐为该 link 添加唯一标识（如 id="theme-css" 或 class="theme-link"），避免误操作其他样式表：
这样可通过 document.getElementById('theme-css') 精准控制，比用 getElementsByTagName('link')[0] 更可靠。
预加载主题 CSS 文件（可选但推荐）
直接切换 href 时，浏览器会重新请求并解析新 CSS，可能造成短暂闪动或延迟。可在页面加载时预加载常用主题：
立即学习“前端免费学习笔记（深入）”；
- 用
提前触发下载（不应用） - 或用
new CSSStyleSheet()+fetch()预加载并缓存 CSS 文本（现代浏览器支持）
预加载后切换仅需注入已加载内容，响应更快、无网络等待。
执行切换并处理加载状态
切换时建议添加简单状态反馈，避免用户重复点击：
- 切换前设
link.disabled = true，防止多次触发 - 更新
href后监听link.onload和link.onerror，失败时回退或提示 - 示例代码片段：
const themeLink = document.getElementById('theme-css');
themeLink.disabled = true;
themeLink.href = 'css/dark.css';
themeLink.onload = () => themeLink.disabled = false;
themeLink.onerror = () => {
alert('主题加载失败');
themeLink.href = 'css/light.css';
themeLink.disabled = false;
};
配合 localStorage 记住用户偏好
用户切换后保存选择，下次访问自动应用：
- 切换成功后执行
localStorage.setItem('preferred-theme', 'dark') - 页面初始化时读取：
const saved = localStorage.getItem('preferred-theme');，再设置对应 href - 注意：首次访问无记录时，可按系统偏好（
window.matchMedia('(prefers-color-scheme: dark)')） fallback
不复杂但容易忽略细节，关键是精准控制 link、兼顾加载体验和用户状态延续。
