页面刷新后Darkmode切换图标自动还原问题求助

云上老周

2026-7-18

解决暗黑模式图标刷新后不匹配的问题

问题根源是页面刷新时，仅恢复了页面的暗黑模式类，但没有同步更新图标的显示状态。以下是修复方案：

步骤1：调整CSS默认显示状态

默认隐藏太阳图标，确保页面加载初期符合未启用暗黑模式的视觉状态：

/* Darkmode */
.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: none; /* 默认隐藏太阳图标 */
}

步骤2：修改JavaScript逻辑

在启用/禁用暗黑模式的函数中同步更新图标显示，并在页面初始化时根据本地存储状态恢复图标状态：

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");
  // 启用暗黑模式时显示太阳，隐藏月亮
  sun.style.display = "block";
  moon.style.display = "none";
};

const disableDarkMode = () => {
  document.documentElement.classList.remove("darkmode");
  localStorage.setItem("darkMode", null);
  // 禁用暗黑模式时显示月亮，隐藏太阳
  sun.style.display = "none";
  moon.style.display = "block";
};

// 页面加载时，根据本地存储恢复状态
if (darkMode === "enabled") {
  enableDarkMode();
} else {
  disableDarkMode();
}

darkModeToggle.addEventListener("click", () => {
  darkMode = localStorage.getItem("darkMode");

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