解决网页刷新后暗黑模式图标不同步的问题

<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; /* 确保图标占据全部空间，避免额外的间距 */
}

/* 默认状态：月亮图标可见，太阳图标隐藏 */
#moon {
  color: var(--a-clr); /* 假设 --a-clr 是一个定义的颜色变量 */
  font-size: 2rem;
  display: block;
}

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

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

html.darkmode #sun {
  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); // 或者 'disabled'
};

// 监听切换按钮的点击事件
darkModeToggle.addEventListener("click", () => {
  darkMode = localStorage.getItem("darkMode"); // 重新获取当前状态
  if (darkMode !== "enabled") {
    enableDarkMode();
  } else {
    disableDarkMode();
  }
});

// ... (之前的变量定义)
let darkMode = localStorage.getItem("darkMode");
const sun = document.getElementById("sun");
const moon = document.getElementById("moon");
const darkModeToggle = document.querySelector("#dark-mode-toggle");

// 在脚本加载时立即检查并设置暗黑模式状态和图标
if (darkMode === "enabled") {
  enableDarkMode(); // 如果已启用暗黑模式，则设置页面和图标
} else {
  disableDarkMode(); // 否则禁用暗黑模式，并设置页面和图标
}

// ... (enableDarkMode, disableDarkMode 函数和事件监听器)

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");
  // 注意：图标的显示/隐藏由CSS控制，这里不需要直接操作图标的display属性
};

// 禁用暗黑模式的函数
const disableDarkMode = () => {
  document.documentElement.classList.remove("darkmode");
  localStorage.setItem("darkMode", "disabled"); // 建议使用 'disabled' 字符串而非 null
  // 注意：图标的显示/隐藏由CSS控制
};

// 在脚本加载时立即检查并设置暗黑模式状态和图标
if (darkMode === "enabled") {
  enableDarkMode();
} else {
  disableDarkMode();
}

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