來回切換JS按鈕

通過運行更改 CSS 的函數，我在 javascript 中的切換按鈕在從默認暗模式打開亮模式時似乎工作正常。但是，當我再次翻轉按鈕時，它不會改變。這有點在意料之中，因為它沒有理由改變。我將如何將其切換回來？

按鈕 HTML：

<label for="ID_HERE" class="toggle-switchy" >
    <input checked type="checkbox" id="ID_HERE">
        <span class="toggle" onclick="lightmode();"></span>
      <span class="switch"></span>
    </span>
</label>

按鈕的JS：

function lightmode() {
  const bodyChanges = document.querySelectorAll('.margin_body');
  for (let i = 0; i < bodyChanges.length; i++) {
    bodyChanges[i].style.background = 'white';
  }
  /*const bodyChanges = document.querySelectorAll('.margin_body');
  for (let i = 0; i < bodyChanges.length; i++) {
    bodyChanges[i].style.backgroundImage = '';
  } */

  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 buttonTextChanges = document.querySelectorAll('.button_text');
  for (let i = 0; i < buttonTextChanges.length; i++) {
    buttonTextChanges[i].style.color = '#0C0C0C';*/
  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")';
  }
  
}