实现持久化暗黑模式图标切换：解决页面重载后图标状态不一致问题

<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>

/* 暗黑模式切换按钮基础样式 */
.dark-mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0; /* 移除默认内边距 */
  display: flex; /* 使图标并排居中，如果需要 */
  align-items: center;
  justify-content: center;
}

/* 默认状态：月亮图标显示，太阳图标隐藏 */
#moon {
  color: var(--a-clr, #333); /* 假设 --a-clr 是一个主题色变量，提供回退值 */
  font-size: 2rem;
  display: block; /* 默认显示 */
}

#sun {
  color: var(--a-clr, #333);
  font-size: 2rem;
  display: none; /* 默认隐藏 */
}

/* 当 html 元素具有 darkmode 类时：月亮图标隐藏，太阳图标显示 */
html.darkmode #moon {
  display: none;
}

html.darkmode #sun {
  display: block;
}

/* 其他暗黑模式样式示例，例如背景和文本颜色 */
html {
  background-color: #f0f0f0;
  color: #333;
  transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡 */
}

html.darkmode {
  background-color: #222;
  color: #eee;
}

// 获取 DOM 元素
const sun = document.getElementById("sun");
const moon = document.getElementById("moon");
const darkModeToggle = document.querySelector("#dark-mode-toggle");

// 从 localStorage 获取暗黑模式状态
let darkMode = localStorage.getItem("darkMode");

/**
 * 启用暗黑模式
 * - 为 html 元素添加 'darkmode' 类
 * - 在 localStorage 中记录状态为 'enabled'
 */
const enableDarkMode = () => {
  document.documentElement.classList.add("darkmode");
  localStorage.setItem("darkMode", "enabled");
};

/**
 * 禁用暗黑模式
 * - 从 html 元素移除 'darkmode' 类
 * - 在 localStorage 中记录状态为 'null' (或 'disabled')
 */
const disableDarkMode = () => {
  document.documentElement.classList.remove("darkmode");
  localStorage.setItem("darkMode", null); // 或者 'disabled'，保持一致性
};

// 页面加载时，根据 localStorage 状态初始化暗黑模式
// 这是解决图标不持久化的关键步骤
if (darkMode === "enabled") {
  enableDarkMode();
} else {
  disableDarkMode();
}

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

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

// 页面加载时，根据 localStorage 状态初始化暗黑模式
// 这是解决图标不持久化的关键步骤
if (darkMode === "enabled") {
  enableDarkMode();
} else {
  disableDarkMode();
}