合并两个JavaScript文件后深色模式开关状态刷新不保存如何修复

问题根因 #

• 深色模式逻辑和按钮状态逻辑完全独立，各自在localStorage存储了互不关联的两个字段theme和checked，没有做状态同步
• 页面初始化时仅根据checked字段设置按钮选中状态，没有和当前实际生效的主题对齐
• 切换主题的themeToggle函数只更新了theme字段，没有同步更新按钮对应的状态存储值
• 按钮同时绑定了onclick属性和addEventListener点击监听，两套逻辑并行也容易引发状态冲突

修复方案 #

直接合并两套逻辑，统一用theme字段作为唯一状态源，避免多字段不同步的问题，原有冗余的按钮状态存储逻辑可以直接删除。

修复后完整代码 #

JavaScript代码

/* 合并后的深色模式+按钮控制逻辑 */
(function() {
    const savedTheme = localStorage.getItem("theme") || "";
    const body = document.body;
    const toggleBtn = document.getElementById("toggle");
    const themeText = document.getElementById("theme");
    
    // 页面加载时同步主题样式
    body.classList.add(savedTheme);
    // 同步按钮选中状态
    toggleBtn.checked = savedTheme === "dark-mode";
    // 同步主题展示文本
    themeText.textContent = savedTheme || "light";
})();

function themeToggle() {
    const body = document.body;
    const toggleBtn = document.getElementById("toggle");
    const themeText = document.getElementById("theme");
    
    // 切换主题样式
    body.classList.toggle("dark-mode");
    const isDarkMode = body.classList.contains("dark-mode");
    
    // 同步存储的主题值
    localStorage.setItem("theme", isDarkMode ? "dark-mode" : "");
    // 同步主题展示文本
    themeText.textContent = isDarkMode ? "dark-mode" : "light";
};

HTML代码（无需修改，保留原有结构即可）

<div class="toggle1">
     <input type="checkbox" onclick="themeToggle()" class="dmbtn" id="toggle">
     <label for="toggle"></label>
</div>

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