通过CSS文件切换主题颜色需创建多个主题文件，如theme-light.css和theme-dark.css，定义对应的自定义属性；在HTML中使用带id的link标签引入默认主题样式；通过JavaScript动态修改link的href属性实现切换；结合localStorage保存用户偏好，确保刷新后主题不变。关键在于利用CSS变量与外部样式表的灵活加载机制。
在网页开发中，通过CSS文件切换主题颜色是一种常见且高效的实现方式。利用 标签引入不同的样式表，可以轻松实现亮色、暗色或其他自定义主题的切换。下面介绍具体实现方法。
1. 创建多个主题CSS文件
将不同主题的颜色定义写入独立的CSS文件中，便于管理和切换。
例如：
- theme-light.css（浅色主题）
:root {
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #007bff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px;
}
- theme-dark.css（深色主题）
:root {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--primary-color: #00d8ff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px;
}
2. 在HTML中使用 link 引入默认主题
在页面头部通过 标签引入一个默认的主题样式文件，并设置 id 以便后续JavaScript操作。
立即学习“前端免费学习笔记（深入）”；
3. 使用JavaScript动态切换主题
通过JavaScript修改 标签的 href 属性，实现主题切换。
function switchTheme(theme) {
const themeLink = document.getElementById('theme-style');
if (theme === 'dark') {
themeLink.href = 'theme-dark.css';
} else {
themeLink.href = 'theme-light.css';
}
}
在页面中添加切换按钮：
4. 可选：记住用户偏好
结合 localStorage 保存用户选择的主题，刷新后仍保持。
// 页面加载时恢复主题
window.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme') || 'light';
switchTheme(savedTheme);
});
// 切换时保存
function switchTheme(theme) {
const themeLink = document.getElementById('theme-style');
themeLink.href = `theme-${theme}.css`;
localStorage.setItem('theme', theme);
}
基本上就这些。通过分离主题样式、使用 link 动态加载和简单的脚本控制，就能实现流畅的主题切换体验。关键是利用CSS自定义属性和外部样式表的灵活性。不复杂但容易忽略细节，比如确保路径正确和初始状态一致。
