如何使通过更改颜色主题的复选框设置样式的切换按钮在刷新期间保持相同的颜色

<input type="checkbox" id="themeCheckbox">
<label for="themeCheckbox">切换颜色主题</label>
<button id="toggleButton">切换按钮</button>

#toggleButton {
  background-color: #ccc;
  border: none;
  color: #fff;
  padding: 10px 20px;
}

#toggleButton.dark {
  background-color: #333;
}

#toggleButton.light {
  background-color: #f5f5f5;
  color: #333;
}

document.addEventListener("DOMContentLoaded", function() {
  var themeCheckbox = document.getElementById("themeCheckbox");
  var toggleButton = document.getElementById("toggleButton");

  // 检查复选框的状态并设置切换按钮的样式
  if (localStorage.getItem("theme") === "dark") {
    toggleButton.classList.add("dark");
  } else {
    toggleButton.classList.add("light");
  }

  // 监听复选框的状态变化事件
  themeCheckbox.addEventListener("change", function() {
    if (themeCheckbox.checked) {
      toggleButton.classList.remove("light");
      toggleButton.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      toggleButton.classList.remove("dark");
      toggleButton.classList.add("light");
      localStorage.setItem("theme", "light");
    }
  });
});