网站暗色模式切换异常：body类名未正确替换问题排查修复

你的核心问题出在JavaScript的主题切换逻辑上：document.body.classList.toggle('dark-theme') 只会添加/移除dark-theme类，不会自动替换掉初始的light-theme类。这就导致第一次点击按钮时，body元素同时拥有light-theme和dark-theme两个类，不符合你“二选一切换主题”的需求，进而引发样式异常。

你可以通过两种方式修复这个问题：

方法1：同时切换两个主题类 #

利用classList.toggle()同时操作light-theme和dark-theme，确保每次点击后body只保留其中一个类：

'use strict';
const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function () {
  // 同时切换两个主题类，实现互斥切换
  document.body.classList.toggle('light-theme');
  document.body.classList.toggle('dark-theme');

  const className = document.body.className;
  if(className === "light-theme") {
    this.textContent = "Dark";
  } else {
    this.textContent = "Light";
  }
  console.log('current class name: ' + className);
});

方法2：使用类替换逻辑 #

通过检查当前存在的主题类，直接用classList.replace()替换成另一个主题类，逻辑更直观：

'use strict';
const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function () {
  const body = document.body;
  if (body.classList.contains('light-theme')) {
    body.classList.replace('light-theme', 'dark-theme');
    this.textContent = "Light";
  } else {
    body.classList.replace('dark-theme', 'light-theme');
    this.textContent = "Dark";
  }
  console.log('current class name: ' + body.className);
});

修改后，点击按钮时body的类会在light-theme和dark-theme之间互斥切换，不会再出现两个类共存的情况，页面的主题样式也能正常跟随类切换变化。

内容的提问来源于stack exchange，提问作者Gustavo França