github 个人简历页的 js 主题切换按钮在首次访问时无法从亮色模式切回暗色模式，根本原因是 `classlist.replace()` 在目标类不存在时不生效，且初始状态未被正确纳入判断逻辑。本文提供完整可运行的修复方案。
在构建静态 GitHub Pages 简历网站时，许多非专业开发者会采用轻量级 JavaScript 实现深色/浅色主题切换。但一个常见却隐蔽的问题是：页面首次加载（无 localStorage 缓存或强制刷新后）时，切换按钮只能单向工作（如：亮→暗可行，暗→亮失败）。这并非浏览器兼容性问题，而是逻辑缺陷所致。
核心症结在于你对 Element.classList.replace(oldClass, newClass) 的误用。该方法仅在元素已包含 oldClass 时才执行替换；若不包含，则静默失败，不添加 newClass。而首次加载时，body 元素默认既无 light-mode 也无 dark-mode 类——此时 body.classList.contains('light-mode') 恒为 false，导致代码直接进入 else 分支，试图执行 replace('dark-mode', 'light-mode')。但由于 dark-mode 根本不存在，替换失败，light-mode 也未被添加，最终 body 仍无任何主题类，后续所有样式和状态判断均失效。
✅ 正确做法是：统一使用 remove() + add() 组合，而非依赖 replace()。它具备幂等性，无论原类是否存在，都能确保目标类准确生效：
// ✅ 安全的主题切换事件处理器
themeToggle.addEventListener('change', () => {
if (body.classList.contains('light-mode')) {
body.classList.remove('light-mode');
body.classList.add('dark-mode');
updateThemeLabel('dark-mode');
localStorage.setItem('theme', 'dark-mode');
} else {
body.classList.remove('dark-mode');
body.classList.add('light-mode');
updateThemeLabel('light-mode');
localStorage.setItem('theme', 'light-mode');
}
});同时，请确保初始化逻辑覆盖所有可能状态。你的现有初始化代码已基本正确，但建议增强鲁棒性：
// 初始化：优先读取 localStorage，其次检测系统偏好，最后 fallback 到 light-mode
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
const defaultTheme = savedTheme || (systemPrefersDark ? 'dark-mode' : 'light-mode');
body.classList.add(defaultTheme);
updateThemeLabel(defaultTheme);⚠️ 注意事项：
- 不要依赖 replace() 处理初始状态未知的切换逻辑；
- 初始化时务必显式添加主题类（add()），否则 contains() 判断永远为 false；
- localStorage 读写应在 DOM 加载完成后执行（推荐包裹在 DOMContentLoaded 事件中）；
- 若使用 <input type="checkbox"> 作为 toggle，记得同步其 checked 状态（例如：themeToggle.checked = (defaultTheme === 'dark-mode')）。
通过以上调整，主题切换将彻底摆脱“首次加载失灵”的困扰，在无缓存、新设备、隐私模式下均能稳定工作。
