本文详解如何正确实现基于 CSS 自定义属性（CSS Variables）的深色/浅色主题切换功能，重点解决因 data-theme 值与 CSS 选择器不一致导致的切换失效问题，并提供可直接运行的完整代码方案。
本文详解如何正确实现基于 css 自定义属性（css variables）的深色/浅色主题切换功能，重点解决因 `data-theme` 值与 css 选择器不一致导致的切换失效问题，并提供可直接运行的完整代码方案。
在使用 CSS 变量构建主题系统时，一个常见但极易被忽视的错误是：JavaScript 设置的 data-theme 属性值与 CSS 中实际声明的主题选择器不匹配。在您提供的代码中，CSS 定义了暗色主题规则：
[data-theme="theme-dark"] {
--text: #f1f8ef;
--background: #020401;
/* 其他变量... */
}然而，原始 JavaScript 却将 data-theme 设置为 "dark"：
// ❌ 错误写法（导致 CSS 规则不生效）
document.documentElement.setAttribute('data-theme', 'dark');由于 CSS 选择器明确要求 [data-theme="theme-dark"]，而 DOM 中实际设置的是 data-theme="dark"，浏览器无法匹配该规则，因此样式不会应用——这就是点击开关无反应的根本原因。
✅ 正确做法是确保 JavaScript 设置的值与 CSS 选择器完全一致：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'theme-dark'); // ✅ 匹配 CSS 选择器
localStorage.setItem('theme', 'theme-dark');
} else {
document.documentElement.setAttribute('data-theme', 'light'); // ✅ 默认 light 对应 :root
localStorage.setItem('theme', 'light');
}
}同时，需确保页面加载时也使用相同逻辑读取并应用主题：
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
toggleSwitch.checked = savedTheme === 'theme-dark';
} else {
// 若无本地存储，则默认 light（由 :root 定义）
document.documentElement.setAttribute('data-theme', 'light');
}? 调试提示：可在浏览器开发者工具的 Elements 面板中检查 <html> 元素是否确实拥有 data-theme="theme-dark" 属性，并确认对应 CSS 变量值是否已更新（在 Styles 面板中查看计算后的 var(--background) 等值）。
此外，建议将主题切换逻辑封装为独立模块，避免与其他脚本（如菜单高亮、轮播动画等）耦合。原代码中存在多处未闭合的函数（如 verifAge 缺少右括号）、重复的注释块及潜在语法错误，强烈建议分步调试：先移除所有非核心 JS，仅保留主题切换逻辑验证功能，再逐步集成其他特性。
最终，一个健壮的主题切换器应具备以下特性：
- ✅ 基于 localStorage 持久化用户偏好；
- ✅ 页面加载时自动恢复上次选择；
- ✅ 开关状态与 DOM 属性严格同步；
- ✅ CSS 选择器与 JS 设置值完全一致；
- ✅ 无障碍支持（如为 <input type="checkbox"> 添加 aria-label）。
遵循以上原则，即可实现稳定、可维护且用户体验良好的主题切换功能。
