动态切换多主题样式需通过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、兼顾加载体验和用户状态延续。