按主题拆分CSS文件并使用自定义属性管理变量，通过JavaScript动态切换主题链接或类名，结合localStorage保存用户偏好，实现多主题切换。
在多主题网站中实现主题切换，关键是将样式逻辑分离、合理组织CSS文件，并通过动态加载或类名切换来实现外观变化。以下是具体做法和结构建议。
1. 按主题拆分CSS文件
将不同主题的样式写入独立的CSS文件，便于维护和按需加载。
推荐目录结构：
css/├── main.css // 公共样式（布局、字体、重置等）
├── theme-light.css // 浅色主题变量与覆盖样式
├── theme-dark.css // 深色主题
├── theme-blue.css // 蓝色主题
└── themes.css // 主题通用规则（可选）
每个主题文件只包含颜色、背景、边框等视觉属性，避免重复定义布局。
立即学习“前端免费学习笔记（深入）”；
2. 使用CSS自定义属性统一管理主题变量
在根级别定义变量，让主题切换更灵活。
例如，在 theme-light.css 中：
:root {--bg-primary: #fff;
--text-primary: #333;
--border-color: #ddd;
}
在 theme-dark.css 中：
:root {--bg-primary: #1a1a1a;
--text-primary: #f5f5f5;
--border-color: #444;
}
主样式文件 main.css 使用这些变量：
body {background: var(--bg-primary);
color: var(--text-primary);
}
.card {
border: 1px solid var(--border-color);
}
这样只需换载主题CSS，页面样式自动更新。
3. 实现主题切换功能
通过JavaScript动态切换link标签的href，或给html/body添加主题类名。
方法一：动态加载CSS文件
function setTheme(themeName) {const link = document.getElementById('theme-style');
link.href = `css/theme-${themeName}.css`;
}
HTML中预留link：
<link id="theme-style" rel="stylesheet" href="css/theme-light.css">方法二：使用类名控制（适合小项目）
html.light { --bg-primary: #fff; }html.dark { --bg-primary: #1a1a1a; }
JS切换：
document.documentElement.className = 'dark';推荐第一种方式，更清晰、易于扩展。
4. 记住用户选择并默认加载
用localStorage保存用户偏好，页面加载时恢复主题。
// 页面加载时const savedTheme = localStorage.getItem('theme') || 'light';
setTheme(savedTheme); // 切换时保存
function handleThemeChange(theme) {
setTheme(theme);
localStorage.setItem('theme', theme);
}
可结合按钮或下拉菜单提供选择入口。
基本上就这些。结构清晰、变量驱动、按需加载，就能高效支持多个主题。
