使用link标签引入多个CSS文件并设置disabled属性控制初始状态，通过JavaScript动态切换主题；2. 利用localStorage保存用户偏好，实现刷新后仍保留主题选择，提升用户体验。
在HTML中使用 标签引入多个CSS主题文件，并通过JavaScript动态切换主题，是一种常见且高效的前端实现方式。这种方式可以让用户根据偏好（如暗黑模式、亮色模式）即时更换页面外观，而无需刷新页面。
1. 在HTML中引入多个主题CSS文件
将不同的主题样式表以 标签引入，通过设置 rel="stylesheet" 和 disabled 属性控制初始加载状态。只让一个主题生效，其余设为禁用。
示例代码：
css" />这里默认加载亮色主题，暗色主题被禁用。通过JavaScript可以切换启用状态。
立即学习“前端免费学习笔记（深入）”；
2. 使用JavaScript动态切换主题
通过操作 标签的 disabled 属性，可以动态启用或禁用某个主题样式表。
示例脚本：
const lightTheme = document.getElementById('theme-light');
const darkTheme = document.getElementById('theme-dark');
if (theme === 'dark') {
darkTheme.disabled = false;
lightTheme.disabled = true;
} else {
lightTheme.disabled = false;
darkTheme.disabled = true;
}
}
调用 switchTheme('dark') 即可切换到暗色主题。
3. 添加用户交互控件
添加按钮或下拉菜单，让用户手动切换主题。
点击按钮即可触发切换函数，实现即时换肤效果。
4. 保存用户偏好（可选）
使用 localStorage 记住用户选择的主题，下次访问时自动应用。
window.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme') || 'light';
switchTheme(savedTheme);
});
// 切换时保存
function switchTheme(theme) {
// ... 切换逻辑
localStorage.setItem('theme', theme);
}
基本上就这些。通过合理使用 标签和简单的JS控制，就能实现灵活的主题切换功能，提升用户体验。关键是管理好样式表的启用状态，避免冲突。
