日间/夜间模式切换问题：切换后刷新或跳转页面恢复为日间模式

当前代码仅在页面运行时临时切换主题状态，没有将用户的主题偏好持久化存储。页面刷新或跳转后，浏览器会重新加载初始状态，导致主题重置为默认的日间模式。我们可以通过浏览器的 localStorage 来保存用户的主题选择，实现状态持久化。

修改后的 JavaScript 代码 #

const themeToggler = document.querySelector(".theme-toggler");
const body = document.body;
const sunIcon = themeToggler.querySelector("span:nth-child(1)");
const moonIcon = themeToggler.querySelector("span:nth-child(2)");

// 页面加载时恢复保存的主题
function loadSavedTheme() {
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme === "dark") {
    body.classList.add("dark-theme-variables");
    sunIcon.classList.remove("active");
    moonIcon.classList.add("active");
  } else {
    body.classList.remove("dark-theme-variables");
    sunIcon.classList.add("active");
    moonIcon.classList.remove("active");
  }
}

// 切换主题并保存到 localStorage
themeToggler.addEventListener("click", () => {
  const isDark = body.classList.toggle("dark-theme-variables");
  sunIcon.classList.toggle("active");
  moonIcon.classList.toggle("active");
  
  // 根据当前主题状态保存到本地存储
  localStorage.setItem("theme", isDark ? "dark" : "light");
});

// 页面加载完成后自动恢复主题
document.addEventListener("DOMContentLoaded", loadSavedTheme);

关键改动说明 #

• 持久化存储：使用 localStorage.setItem() 将用户选择的主题（"light" 或 "dark"）保存到浏览器本地，即使关闭浏览器也不会丢失。
• 页面加载恢复：通过 DOMContentLoaded 事件触发主题恢复逻辑，读取本地存储的主题设置，自动应用对应的主题类和图标状态。
• 状态同步：每次切换主题时同步更新本地存储的值，确保操作后最新的偏好被保存。

修改完成后，用户切换到夜间模式后，刷新页面或跳转站内其他页面时，主题会保持为夜间模式，直到用户主动切换回日间模式。

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