如何通过css link实现不同主题切换

答案：通过动态修改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标签

在页面的 中预留一个带有id的 标签，用于动态加载主题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')

你也可以绑定到按钮点击事件：

深色主题
浅色主题

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文件路径正确，并考虑首次加载的默认主题。