JS主题切换按钮首次加载时无法切换回深色模式

问题现象 #

搭建简历用的GitHub Page时遇到主题切换BUG：首次访问或清除缓存Cookie后，能切换到浅色模式，但无法切回默认的深色模式，刷新页面后一切恢复正常。使用的主题切换JS代码如下：

// Check the user's theme preference from local storage
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
  body.classList.add(currentTheme);
  updateThemeLabel(currentTheme); 
}

themeToggle.addEventListener('change', () => {
  
  if (body.classList.contains('light-mode')) {
    // If the current theme is light, switch to dark
    body.classList.replace('light-mode', 'dark-mode');
    updateThemeLabel('dark-mode'); // Update the theme label text and color
    localStorage.setItem('theme', 'dark-mode');
  } else {
    // If the current theme is dark, switch to light
    body.classList.replace('dark-mode', 'light-mode');
    updateThemeLabel('light-mode'); // Update the theme label text and color
    localStorage.setItem('theme', 'light-mode');
  }
});

function updateThemeLabel(theme) {
  if (theme === 'dark-mode') {
    themeLabel.textContent = 'Burn your eyes';
    themeLabel.style.color = '#fff'; 
    footer.style.color = '#fff'; 
    footer.style.backgroundColor = '#333'; 
    body.style.backgroundColor = '#333'; 
    body.style.color = '#fff';
    socialIconTwitter.style.color = '#fff';
    socialIconLinkedin.style.color = '#fff';
  } else {
    themeLabel.textContent = 'Quickly back!';
    themeLabel.style.color = '#000'; 
    footer.style.color = '#000'; 
    footer.style.backgroundColor = '#fff'; 
    body.style.backgroundColor = '#fff';
    body.style.color = '#000';
    socialIconTwitter.style.color = '#000';
    socialIconLinkedin.style.color = '#000';
  }
}

问题根源 #

1. 初始状态无类标记：首次加载时localStorage为空，代码不会给body添加dark-mode类，但网站默认是深色模式（依赖CSS默认样式）。此时切换按钮触发时，判断body.classList.contains('light-mode')为false，会执行replace('dark-mode', 'light-mode')，但body没有dark-mode类，replace操作无效，导致后续切换逻辑混乱。
2. 行内样式覆盖CSS：updateThemeLabel直接设置行内样式，会覆盖CSS默认样式，即使后续添加了类，行内样式优先级更高，状态无法正确同步。

修复方案 #

1. 初始化时确保主题类存在 #

修改初始化逻辑，当localStorage无值时，默认添加dark-mode类，让初始状态有明确的类标记：

const currentTheme = localStorage.getItem('theme') || 'dark-mode';
body.classList.add(currentTheme);
updateThemeLabel(currentTheme);

2. 替换操作改为移除+添加，避免无效操作 #

classList.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');
  }
});

3. 用CSS类控制样式，取消行内样式操作 #

把主题样式写在CSS类里，通过body的类来控制所有元素样式，JS只负责切换类和更新文本，避免行内样式冲突：

/* 主题样式示例 */
body.dark-mode {
  background-color: #333;
  color: #fff;
}
body.light-mode {
  background-color: #fff;
  color: #000;
}

footer {
  transition: all 0.3s;
}
body.dark-mode footer {
  background-color: #333;
  color: #fff;
}
body.light-mode footer {
  background-color: #fff;
  color: #000;
}

.social-icon {
  transition: all 0.3s;
}
body.dark-mode .social-icon {
  color: #fff;
}
body.light-mode .social-icon {
  color: #000;
}

然后简化updateThemeLabel函数，只负责更新按钮文本：

function updateThemeLabel(theme) {
  themeLabel.textContent = theme === 'dark-mode' ? 'Burn your eyes' : 'Quickly back!';
}

内容的提问来源于stack exchange，提问作者Michal Palko