实现主题切换的核心思路是通过CSS变量配合data属性动态更新样式。首先在html标签设置data-theme，默认为light，CSS中定义对应的主题变量，JavaScript监听按钮点击事件，获取当前主题并切换data-theme的值，从而触发样式变化。该方法利用自定义属性实现全局样式响应，结构清晰、维护方便，适用于现代浏览器，是目前推荐的主流方案。
实现主题切换的核心思路是通过 CSS 配合 HTML 和 JavaScript 动态控制样式类或自定义属性，从而达到切换主题的效果。以下是几种常见且实用的实现方式。
1. 使用 data 属性控制主题类
在 html 标签上添加 data-theme 属性，通过 JavaScript 切换其值，CSS 根据不同值应用对应样式。
示例：
/* HTML */
/ CSS /
立即学习“前端免费学习笔记（深入）”；
[data-theme="light"] {
--bg-color: #ffffff;
--text-color: #333333;
}
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
/ JavaScript /
document.getElementById('theme-toggle').addEventListener('click', function() {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', newTheme);
});
2. 使用 CSS 类切换主题
为 body 或根元素定义不同的主题类，如 .theme-light 和 .theme-dark，JavaScript 动态切换类名。
CSS 示例：
.theme-light {
background: #fff;
color: #333;
}
.theme-dark {
background: #222;
color: #eee;
}
JavaScript 示例：
document.body.classList.toggle('theme-dark');
3. 动态引入外部 CSS 文件
通过 JavaScript 动态创建 link 标签并插入 head，加载不同主题的 CSS 文件。
例如有两个文件：
- light-theme.css
- dark-theme.css
JS 实现：
function loadTheme(theme) {
let link = document.getElementById('theme-style');
if (!link) {
link = document.createElement('link');
link.id = 'theme-style';
link.rel = 'stylesheet';
document.head.appendChild(link);
}
link.href = `${theme}-theme.css`;
}
// 调用
loadTheme('dark');
这种方式适合主题样式差异大、独立维护的场景。
4. 使用 CSS 自定义属性（推荐）
结合 :root 定义全局变量，通过切换类或属性来改变变量值，所有使用这些变量的样式自动更新。
:root {
--primary-color: #007bff;
--border-color: #ddd;
}
[data-theme="dark"] {
--primary-color: #0056b3;
--border-color: #444;
}
button {
border: 1px solid var(--border-color);
color: var(--primary-color);
}
这种方案结构清晰，维护方便，适合现代浏览器项目。
基本上就这些方法。选择哪种取决于项目复杂度和是否需要支持旧浏览器。使用 data 属性 + CSS 变量 是目前最灵活且易于维护的方式。
