答案：通过动态修改link标签的href属性实现主题切换。准备多个CSS文件定义不同主题，HTML中预留带id的link标签，JavaScript更改其href值加载对应样式，并可结合localStorage保存用户偏好，实现页面主题灵活切换。
通过CSS link实现不同主题切换，核心思路是动态改变页面中引用的CSS文件。这种方式适合管理多个独立的主题样式，比如“白天模式”和“夜间模式”，或者企业级应用中的多品牌主题。
1. 准备多个主题CSS文件
为每个主题创建单独的CSS文件，将颜色、字体、背景等样式定义在各自的文件中。
例如：- theme-light.css（浅色主题）
- theme-dark.css（深色主题）
- theme-blue.css（蓝色主题）
每个文件只包含与主题相关的样式规则：
theme-light.css 示例：
:root {
--bg-color: #ffffff;
--text-color: #333333;
--header-bg: #f0f0f0;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
theme-dark.css 示例：
:root {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
--header-bg: #333333;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
2. 在HTML中使用可替换的link标签
在页面的 <head> 中预留一个带有id的 <link> 标签，用于动态加载主题CSS。
立即学习“前端免费学习笔记（深入）”；
示例代码：<link id="theme-link" rel="stylesheet" type="text/css" href="theme-light.css">
这个link的href将被JavaScript动态修改，从而切换主题。
3. 使用JavaScript切换主题
通过JS修改link标签的href属性，加载不同的CSS文件。
示例函数：
function changeTheme(themeName) {
const themeLink = document.getElementById('theme-link');
themeLink.href = `${themeName}.css`;
}
调用方式：
changeTheme('theme-dark')changeTheme('theme-light')
你也可以绑定到按钮点击事件：
<button onclick="changeTheme('theme-dark')">深色主题</button>
<button onclick="changeTheme('theme-light')">浅色主题</button>
4. 可选：保存用户偏好
结合localStorage记住用户选择的主题，下次访问时自动加载。
示例逻辑：
// 页面加载时检查上次选择
window.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme') || 'theme-light';
document.getElementById('theme-link').href = savedTheme + '.css';
});
// 切换主题时保存
function changeTheme(themeName) {
const themeLink = document.getElementById('theme-link');
themeLink.href = `${themeName}.css`;
localStorage.setItem('theme', themeName);
}
基本上就这些。这种方法简单直接，适合中小型项目。关键是把主题样式拆分清楚，通过JS控制link的href来实现即时切换。不复杂但容易忽略的是确保CSS文件路径正确，并考虑首次加载的默认主题。
