JavaScript toggle按钮无法双向切换明暗模式，如何实现切回暗色模式功能

方案1：基于现有代码快速补全双向逻辑 #

你可以直接复用已有checkbox的选中状态做判断，无需新增额外全局变量，修改后的JS代码如下：

function lightmode() {
  // 获取当前checkbox的选中状态，默认checked对应暗色模式
  const modeCheckbox = document.getElementById('ID_HERE');
  const isDarkMode = modeCheckbox.checked;

  if (isDarkMode) {
    // 切换到亮色模式，保留你原有逻辑
    const bodyChanges = document.querySelectorAll('.margin_body');
    for (let i = 0; i < bodyChanges.length; i++) {
      bodyChanges[i].style.background = 'white';
    }
    const paraChanges = document.querySelectorAll('.paragraph');
    for (let i = 0; i < paraChanges.length; i++) {
      paraChanges[i].style.color = 'black';
    }
    const topTitleChanges = document.querySelectorAll('.toptitle');
    for (let i = 0; i < topTitleChanges.length; i++) {
      topTitleChanges[i].style.color = 'black';
    }
    const alphabetSChanges = document.querySelectorAll('.AlphabetS');
    for (let i = 0; i < alphabetSChanges.length; i++) {
      alphabetSChanges[i].style.color = 'black';
    }
    const arowanaContainerChanges = document.querySelectorAll('.arowanacontainer');
    for (let i = 0; i < arowanaContainerChanges.length; i++) {
      arowanaContainerChanges[i].style.background = 'white';
    }
    const fishContainerChanges = document.querySelectorAll('.fishcontainer');
    for (let i = 0; i < fishContainerChanges.length; i++) {
      fishContainerChanges[i].style.background = 'white';
    }
    const articleContainerChanges = document.querySelectorAll('.articlescontainer');
    for (let i = 0; i < articleContainerChanges.length; i++) {
      articleContainerChanges[i].style.background = 'white';
    }
    const sideTextChanges = document.querySelectorAll('.sidetext');
    for (let i = 0; i < sideTextChanges.length; i++) {
      sideTextChanges[i].style.color = 'black';
    }
    const topMenuChanges = document.querySelectorAll('.topmenu');
    for (let i = 0; i < topMenuChanges.length; i++) {
      topMenuChanges[i].style.background = '#fff2f2';
    }
    const h3Changes = document.querySelectorAll('h3');
    for (let i = 0; i < h3Changes.length; i++) {
      h3Changes[i].style.background = '#fff2f2';
    }
    const articlePageChanges = document.querySelectorAll('.articlepage');
    for (let i = 0; i < articlePageChanges.length; i++) {
      articlePageChanges[i].style.color = 'black';
    }
    const articleTeaserChanges = document.querySelectorAll('.articleteaser');
    for (let i = 0; i < articleTeaserChanges.length; i++) {
      articleTeaserChanges[i].style.color = 'black';
    }
    const box2Changes = document.querySelectorAll('.box2');
    for (let i = 0; i < box2Changes.length; i++) {
      box2Changes[i].style.color = 'rgb(245, 245, 245)';
    }
    const box3Changes = document.querySelectorAll('.box3');
    for (let i = 0; i < box3Changes.length; i++) {
      box3Changes[i].style.color = 'rgb(245, 245, 245)';
    }
    const projectPhoto1Changes = document.querySelectorAll('.projectphoto1');
    for (let i = 0; i < projectPhoto1Changes.length; i++) {
      projectPhoto1Changes[i].style.backgroundImage = 'linear-gradient(to bottom, #Fdfcfa 50%, lightgrey 50%)';
    }
    const section1Changes = document.querySelectorAll('.section1');
    for (let i = 0; i < section1Changes.length; i++) {
      section1Changes[i].style.backgroundColor = '#fff2f2';
    }
    const section1textChanges = document.querySelectorAll('.section1text');
    for (let i = 0; i < section1textChanges.length; i++) {
      section1textChanges[i].style.color = 'black';
    }
    const section1smalltextChanges = document.querySelectorAll('.section1smalltext');
    for (let i = 0; i < section1smalltextChanges.length; i++) {
      section1smalltextChanges[i].style.color = 'black';
    }
    const button_textChanges = document.querySelectorAll('.button_text');
    for (let i = 0; i < button_textChanges.length; i++) {
      button_textChanges[i].style.color = 'black';
    }
    const polygonfrontChanges = document.querySelectorAll('.polygonfront');
    for (let i = 0; i < polygonfrontChanges.length; i++) {
      polygonfrontChanges[i].style.fill = '#fff2f2';
    }
    const bgChanges = document.querySelectorAll('.bg');
    for (let i = 0; i < bgChanges.length; i++) {
      bgChanges[i].style.backgroundImage = 'url(".jpg")';
    }
    const bg2Changes = document.querySelectorAll('.bg2');
    for (let i = 0; i < bg2Changes.length; i++) {
      bg2Changes[i].style.backgroundImage = 'url(".jpg")';
    }
    const bg3Changes = document.querySelectorAll('.bg3');
    for (let i = 0; i < bg3Changes.length; i++) {
      bg3Changes[i].style.backgroundImage = 'url(".jpg")';
    }
  } else {
    // 切换回暗色模式，把各个属性改回你默认的暗色样式即可，示例如下，你可以根据自己实际的默认值修改
    const bodyChanges = document.querySelectorAll('.margin_body');
    for (let i = 0; i < bodyChanges.length; i++) {
      bodyChanges[i].style.background = '#121212'; // 替换为你实际的暗色背景色
    }
    const paraChanges = document.querySelectorAll('.paragraph');
    for (let i = 0; i < paraChanges.length; i++) {
      paraChanges[i].style.color = '#ffffff'; // 替换为你实际的暗色文字色
    }
    // 剩下的所有元素样式都按照上面的格式，改回你原来的暗色模式对应数值即可
  }
}

方案2：更易维护的CSS类切换方案 #

你现有JS里直接批量修改style的方式冗余度很高，后期修改样式需要同时改JS和CSS，更推荐用类切换的方式实现：

第一步：修改CSS代码 #

保留你原有默认的暗色模式样式，新增亮色模式对应的类样式：

/* 亮色模式下的样式，所有需要修改的属性都写在这里 */
body.light-mode .margin_body {
  background: white;
}
body.light-mode .paragraph {
  color: black;
}
body.light-mode .toptitle {
  color: black;
}
/* 剩下的所有亮色模式样式都按照上面的格式补充完整即可 */

第二步：修改JS代码 #

仅保留切换类的逻辑，代码大幅精简：

function toggleMode() {
  document.body.classList.toggle('light-mode');
}

第三步：修改HTML绑定 #

把原有toggle元素的onclick事件修改为：

<span class="toggle" onclick="toggleMode();"></span>

这种方案后续调整样式只需要修改CSS即可，不需要改动JS代码，维护成本更低。

注意：你原有HTML代码里存在多余的</span>闭合标签，有空可以修正避免潜在的布局问题。

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