JavaScript实现Dark mode刷新页面后自动关闭问题

DevOps 小满

2026-8-30

暗黑模式刷新后状态丢失解决方案

问题根源

页面刷新会清空当前JS运行上下文的所有临时状态，页面会回退到代码初始定义的浅色模式，由于没有持久化存储用户的主题选择，也没有在页面加载时读取历史配置，就会出现刷新后模式重置的问题。

实现方法

使用浏览器内置的localStorage做主题状态持久化，只需要做两处改造：

在主题切换函数执行时，同步把当前选中的主题标识存入本地存储，数据不会因为页面刷新、关闭浏览器丢失
监听页面加载事件，页面初始化时优先读取本地存储的主题配置，自动应用对应模式

改造后完整代码

function darkMode() {
  var element = document.body;
  var content = document.getElementById("DarkModetext");
  element.className = "darkmode11";
  content.innerText = "Dark Mode is ON";
  content.style.color = "white";
  // 持久化存储暗黑模式状态
  localStorage.setItem("siteTheme", "dark");
}

function lightMode() {
  var element = document.body;
  var content = document.getElementById("DarkModetext");
  content.innerText = "Dark Mode is OFF";
  element.className = "lightmode11";
  content.style.color = "black";
  // 持久化存储浅色模式状态
  localStorage.setItem("siteTheme", "light");
}

// 页面初始化时自动读取保存的主题
window.addEventListener("DOMContentLoaded", function () {
  const currentSavedTheme = localStorage.getItem("siteTheme");
  // 匹配到之前保存的暗黑模式就自动启用
  if (currentSavedTheme === "dark") {
    darkMode();
    return;
  }
  // 无存储记录或存储为浅色时默认启用浅色模式
  lightMode();
});