点击按钮切换暗黑模式太阳/月亮图标失效的修复咨询

问题根源 #

你当前的代码每次调用darkmode()函数时，不管当前是太阳还是月亮图标，都会强制把图标改成月亮。虽然body.classList.toggle('dark-mode')能正确切换模式类，但图标没有根据当前模式状态做对应切换，所以第一次点击后就固定显示月亮，无法再切回太阳。

修复方案1：根据模式状态切换图标内容 #

修改你的darkmode函数，先切换模式类，再判断当前模式，设置对应的图标HTML：

function darkmode() {
  const body = document.body;
  // 切换暗黑模式类
  body.classList.toggle('dark-mode');
  const toggleKnop = document.getElementById('toggleknop');
  
  // 根据当前模式决定显示太阳还是月亮
  if (body.classList.contains('dark-mode')) {
    toggleKnop.innerHTML = '<i class="fas fa-moon fa-2x" id="maan" style="color:#737eac;"></i>';
  } else {
    toggleKnop.innerHTML = '<i class="fas fa-sun fa-2x" id="zon" style="color:#d8c658;"></i>';
  }
}

这个方法逻辑直观：每次点击先切换模式，然后检查body是否包含dark-mode类，再设置对应的图标内容，就能实现双向切换了。

修复方案2：直接切换图标类（更优） #

相比修改innerHTML，直接操作已有图标的类和样式是更高效的DOM操作方式，避免重复创建元素。

首先调整HTML，给图标一个统一的ID：

<button onclick="darkmode()" id="Knop">
  <span id="toggleknop">
    <i class="fas fa-sun fa-2x" id="mode-icon" style="color:#d8c658;"></i>
  </span>
</button>

然后修改JavaScript函数，切换图标的类和颜色：

function darkmode() {
  const body = document.body;
  body.classList.toggle('dark-mode');
  const modeIcon = document.getElementById('mode-icon');
  
  if (body.classList.contains('dark-mode')) {
    // 切换到暗黑模式：太阳→月亮
    modeIcon.classList.remove('fa-sun');
    modeIcon.classList.add('fa-moon');
    modeIcon.style.color = '#737eac';
  } else {
    // 切换到浅色模式：月亮→太阳
    modeIcon.classList.remove('fa-moon');
    modeIcon.classList.add('fa-sun');
    modeIcon.style.color = '#d8c658';
  }
}

这个方案的优势是DOM操作更少，性能更好，也更符合前端开发的最佳实践。

内容的提问来源于stack exchange，提问作者David Van der Ham