确保暗色模式切换图标在页面重载后状态持久化的教程

<button
  id="dark-mode-toggle"
  class="dark-mode-toggle"
  aria-label="toggle dark mode"
>
  <i class="bx bx-moon moon" id="moon"></i>
  <i class="bx bx-sun sun" id="sun"></i>
</button>

/* Darkmode Toggle Button Styles */
.dark-mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
}

#moon {
  color: var(--a-clr); /* 假设颜色变量已定义 */
  font-size: 2rem;
  display: block; /* 默认显示 */
}

#sun {
  font-size: 2rem;
  color: var(--a-clr); /* 假设颜色变量已定义 */
  display: block; /* 默认显示 */
}

let darkMode = localStorage.getItem("darkMode");
const sun = document.getElementById("sun"); // 实际代码中并未直接使用
const moon = document.getElementById("moon"); // 实际代码中并未直接使用
const darkModeToggle = document.querySelector("#dark-mode-toggle");

const enableDarkMode = () => {
  document.documentElement.classList.add("darkmode");
  localStorage.setItem("darkMode", "enabled");
};

const disableDarkMode = () => {
  document.documentElement.classList.remove("darkmode");
  localStorage.setItem("darkMode", null); // 注意：这会将 "null" 字符串存储
};

darkModeToggle.addEventListener("click", () => {
  darkMode = localStorage.getItem("darkMode"); // 每次点击时重新获取状态

  if (darkMode !== "enabled") {
    enableDarkMode();
  } else {
    disableDarkMode();
  }
});

/* Darkmode Toggle Button Styles */
.dark-mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
}

/* 默认状态：月亮图标可见（亮色模式），太阳图标隐藏 */
#moon {
  color: var(--a-clr); /* 假设 --a-clr 已定义 */
  font-size: 2rem;
  display: block;
}

#sun {
  font-size: 2rem;
  color: var(--a-clr); /* 假设 --a-clr 已定义 */
  display: none; /* 初始隐藏 */
}

/* 当html元素具有'darkmode'类时（暗色模式） */
html.darkmode #moon {
  display: none; /* 隐藏月亮图标 */
}

html.darkmode #sun {
  display: block; /* 显示太阳图标 */
}

// 1. 获取DOM元素和localStorage中的darkMode状态
// 注意：sun和moon元素无需在JS中直接操作它们的style.display，因为CSS会处理
let darkMode = localStorage.getItem("darkMode");
const darkModeToggle = document.querySelector("#dark-mode-toggle");

// 2. 定义启用暗色模式的函数
const enableDarkMode = () => {
  document.documentElement.classList.add("darkmode"); // 添加类到html元素
  localStorage.setItem("darkMode", "enabled"); // 更新localStorage
  // CSS会根据html.darkmode类自动调整图标显示
};

// 3. 定义禁用暗色模式的函数
const disableDarkMode = () => {
  document.documentElement.classList.remove("darkmode"); // 移除类
  // 最佳实践：使用removeItem来清除localStorage中的项，而不是设置为"null"字符串
  localStorage.removeItem("darkMode");
  // CSS会根据html.darkmode类自动调整图标显示
};

// 4. 页面加载时，根据localStorage中的状态初始化暗色模式
// 这是解决图标重载后状态不一致的关键步骤
if (darkMode === "enabled") {
  enableDarkMode(); // 如果已启用暗色模式，则立即激活
} else {
  disableDarkMode(); // 否则，确保处于亮色模式
}

// 5. 为切换按钮添加事件监听器
darkModeToggle.addEventListener("click", () => {
  // 每次点击时重新获取当前状态，确保逻辑正确
  darkMode = localStorage.getItem("darkMode");

  if (darkMode !== "enabled") {
    // 如果当前不是暗色模式，则启用它
    enableDarkMode();
  } else {
    // 如果当前是暗色模式，则禁用它
    disableDarkMode();
  }
});