两个基于localStorage的JavaScript函数冲突问题求助

问题原因 #

两个脚本共存时浅色背景切换功能失效的核心原因是深色模式的初始化逻辑会覆盖浅色背景的设置：

1. 页面加载时，浅色脚本先读取localStorage.name设置背景色；
2. 但深色脚本的初始化代码会检查localStorage.albus和localStorage.umbra，只要这两个值存在，就会直接覆盖body的背景色；
3. 点击浅色背景按钮后，虽然设置了localStorage.name，但页面重载后深色脚本的初始化逻辑依然优先执行，导致浅色设置被覆盖。

修复方案 #

需要统一模式状态标记，明确区分浅色/深色模式的逻辑，避免相互覆盖：

1. 统一状态管理 #

新增isDarkMode作为localStorage的状态标记，用来判断当前是否处于深色模式，替代原有的仅靠albus/umbra判断的方式。

2. 修改浅色背景切换脚本 #

点击浅色背景按钮时，强制退出深色模式并清除相关存储，确保浅色背景生效：

function setBackground(color) {
  // 标记为浅色模式，清除深色模式相关存储
  localStorage.setItem("isDarkMode", "false");
  localStorage.removeItem("albus");
  localStorage.removeItem("umbra");
  // 保存选择的浅色背景
  localStorage.setItem("lightBg", color);
  window.location.href = '#';
}

3. 修改深色模式切换脚本 #

调整切换逻辑，维护isDarkMode状态，初始化时先判断模式再加载对应样式：

var modus = document.getElementById("modus"),
  corpus = document.getElementsByTagName("body")[0];

modus.addEventListener("click", function () {
  var isDark = corpus.classList.contains("luccious");
  if (isDark) {
    // 切换到浅色模式
    corpus.classList.remove("luccious");
    modus.textContent = "TURN OFF THE LIGHTS";
    // 恢复之前的浅色背景，无则用默认白色
    var lightBg = localStorage.getItem("lightBg") || "#FFFFFF";
    corpus.style.backgroundColor = lightBg;
    corpus.style.color = "#121212";
    localStorage.setItem("isDarkMode", "false");
    localStorage.removeItem("albus");
    localStorage.removeItem("umbra");
  } else {
    // 切换到深色模式
    corpus.classList.add("luccious");
    modus.textContent = "TURN ON THE LIGHTS";
    corpus.style.backgroundColor = "#121212";
    corpus.style.color = "#FFFFFF";
    localStorage.setItem("isDarkMode", "true");
    localStorage.setItem("albus", "#121212");
    localStorage.setItem("umbra", "#FFFFFF");
  }
});

// 页面初始化逻辑
var isDarkMode = localStorage.getItem("isDarkMode") === "true";
var lightBg = localStorage.getItem("lightBg");

if (isDarkMode) {
  // 深色模式初始化
  var lux = localStorage.getItem("albus"),
    umbris = localStorage.getItem("umbra");
  if (lux && umbris) {
    corpus.style.backgroundColor = lux;
    corpus.style.color = umbris;
    corpus.classList.add("luccious");
    modus.textContent = "TURN ON THE LIGHTS";
  }
} else {
  // 浅色模式初始化，用存储的背景或默认白色
  corpus.style.backgroundColor = lightBg || "#FFFFFF";
  corpus.style.color = "#121212";
  modus.textContent = "TURN OFF THE LIGHTS";
}

4. HTML部分无需修改 #

保持原有HTML的点击事件和结构即可。

修复后，两种模式的逻辑互不干扰：

• 选择浅色背景时，会自动退出深色模式，页面重载后加载选中的浅色背景；
• 切换深色模式时，会保存深色状态，重载后优先加载深色样式；
• 状态切换清晰，不会出现样式覆盖的问题。

内容的提问来源于stack exchange，提问作者user22034781