现在应该可以正常工作了，我只是添加到你的代码。
用户选择的（模式）颜色将保存在localStorage中，并在加载页面时检索。此外，我更新了CSS，包括一个.dark-mode类，它将暗模式样式应用于body元素。

html
<button id="toggleBtn">Dark mode is on</button>

javascript

var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];

toggleBtn.addEventListener("click", function() {
  var bgColor, textColor;

  if (body.classList.contains("dark-mode")) {
    body.classList.remove("dark-mode");
    toggleBtn.textContent = "Dark mode is on";
    bgColor = "#FFFFFF";
    textColor = "#101010";
  } else {
    body.classList.add("dark-mode");
    toggleBtn.textContent = "Dark mode is off";
    bgColor = "#101010";
    textColor = "#FFFFFF";
  }

  body.style.backgroundColor = bgColor;
  body.style.color = textColor;

  // Save the chosen colors to localStorage
  localStorage.setItem("bgColor", bgColor);
  localStorage.setItem("textColor", textColor);
});

// Retrieve saved colors from localStorage
var savedBgColor = localStorage.getItem("bgColor");
var savedTextColor = localStorage.getItem("textColor");

if (savedBgColor && savedTextColor) {
  body.style.backgroundColor = savedBgColor;
  body.style.color = savedTextColor;

  if (savedBgColor === "#101010" && savedTextColor === "#FFFFFF") {
    body.classList.add("dark-mode");
    toggleBtn.textContent = "Dark mode is off";
  }
}

css
body {
  margin: 0;
  height: 100%;
}

.dark-mode {
  background-color: #101010;
  color: #FFFFFF;
}

我也是新手，我会尽力帮你的。
我建议使用复选框。你可以使用CSS来制作一个滑动按钮。下面是你需要我的评论。

window.addEventListener('DOMContentLoaded', function() {
    var checkbox = document.getElementById('change'); //Get the status os the checkbox
  
    checkbox.addEventListener('change', function() { //Checks if the status changed
      if (checkbox.checked) {
        document.body.classList.add('dark-theme'); //Uses the dark-theme that is in the CSS file.
        localStorage.setItem('theme', 'dark'); //Saves the "theme" in local storage
      } else {
        document.body.classList.remove('dark-theme'); //Goes back to normal model in the CSS file
        localStorage.setItem('theme', 'light');  //Saves the "theme" in local storage
      }
    });
  
    var savedTheme = localStorage.getItem('theme'); //When you load the page, it will check which 'theme' is stored. If it is normal, it does nothing, if it's dark, checks the checkbox and uses the dark-theme in CSS.
    if (savedTheme === 'dark') {
      checkbox.checked = true;
      document.body.classList.add('dark-theme');
    }
  });

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<label for="change">Dark mode</label>
<label class="switch">
    <input type="checkbox" id="change">
    <span class="slider round"></span>
  </label>

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>