可通过动态切换link标签href实现主题实时切换：HTML中预设带id的link标签，准备多个命名规范的主题CSS文件，JS修改href并处理加载状态，结合localStorage保存用户偏好。
通过动态切换 <link> 标签的 href 属性，可以实现不同主题 CSS 的实时加载与切换。核心思路是：预先在 HTML 中定义一个具有固定 id 的 <link> 标签，用 JavaScript 控制其 href 指向对应主题文件，浏览器会自动卸载旧样式、应用新样式。
HTML 中预留可替换的主题 link 标签
在 <head> 里放一个带唯一 ID 的 <link>，不设初始 href 或指向默认主题（如 theme-light.css），确保它只负责主题样式，避免与其他样式冲突：
<link id="theme-style" rel="stylesheet" href="css/theme-light.css">
准备多个主题 CSS 文件
每个主题单独成文件，命名清晰，例如：
-
theme-light.css（浅色主题） -
theme-dark.css（深色主题） -
theme-blue.css（蓝色强调主题）
确保各文件中定义的类名、CSS 变量或选择器逻辑一致，仅修改颜色、背景、间距等视觉属性，避免结构差异导致渲染异常。
立即学习“前端免费学习笔记（深入）”；
JS 动态切换 href 并处理加载状态
获取 link 元素，修改 href，可选监听 load 事件以确认加载完成，或添加简单错误提示：
function switchTheme(themeName) {
const link = document.getElementById('theme-style');
const themePath = `css/theme-${themeName}.css`;
// 可选：添加 loading 状态（如禁用按钮、显示 spinner）
link.href = themePath;
// 监听加载成功
link.onload = () => {
console.log(`主题 ${themeName} 加载完成`);
// 可触发自定义事件，通知其他模块更新
};
// 监听加载失败
link.onerror = () => {
console.error(`主题 ${themeName} 加载失败，请检查路径`);
};
}
// 使用示例
switchTheme('dark'); // 切换到深色主题
switchTheme('blue'); // 切换到蓝色主题
配合 localStorage 记住用户偏好
切换后保存选择，页面刷新仍生效：
// 切换时保存
function switchTheme(themeName) {
localStorage.setItem('preferred-theme', themeName);
document.getElementById('theme-style').href = `css/theme-${themeName}.css`;
}
// 页面加载时读取并应用
document.addEventListener('DOMContentLoaded', () => {
const saved = localStorage.getItem('preferred-theme');
if (saved) {
switchTheme(saved);
}
});
