JavaScript明暗模式切换bug：仅能切深色无法切浅色，求助修复

问题描述 #

项目需实现暗色/亮色模式切换，点击按钮调用swipe12函数，全局变量swipe = 1（1代表暗色模式，0代表亮色模式），但目前所有元素仅能切换为深色，无法切回浅色。

问题根源 #

1. 局部变量覆盖全局状态：函数内用var swip = 1/var swip = 0声明了局部变量，修改的不是全局的swipe，导致每次调用函数时，默认传入的始终是初始全局值1。
2. 双if分支顺序执行：第一个if执行后将局部swip改为1，紧接着第二个if (swip === 1)触发，最终总是执行暗色模式代码。

修正后的代码 #

直接修改全局变量swipe，并用if-else确保每次仅执行一个分支：

var swipe = 1; // 0 => 亮色模式 & 1 => 暗色模式

function swipe12() {
  const swipeLight = document.getElementsByClassName('swipeLight');
  if (swipe === 1) {
    // 切换到亮色模式
    console.log('切换为亮色模式');
    for (let i = 0; i < swipeLight.length; i++) {
      swipeLight[i].style.backgroundColor = 'white';
    }
    swipe = 0;
  } else {
    // 切换到暗色模式
    console.log('切换为暗色模式');
    for (let i = 0; i < swipeLight.length; i++) {
      swipeLight[i].style.backgroundColor = 'black';
    }
    swipe = 1;
  }
}

更优实现建议 #

直接操作内联样式灵活性差，推荐用CSS类切换的方式，便于维护多维度样式：

/* 亮色模式样式 */
.light-mode {
  background-color: white;
  color: #333;
}

/* 暗色模式样式 */
.dark-mode {
  background-color: black;
  color: white;
}

var swipe = 1;

function swipe12() {
  const elements = document.getElementsByClassName('swipeLight');
  if (swipe === 1) {
    // 切换亮色模式
    for (let el of elements) {
      el.classList.remove('dark-mode');
      el.classList.add('light-mode');
    }
    swipe = 0;
  } else {
    // 切换暗色模式
    for (let el of elements) {
      el.classList.remove('light-mode');
      el.classList.add('dark-mode');
    }
    swipe = 1;
  }
}

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