单JS文件如何实现跨页面暗黑模式状态持久保留

• 执行时序错误：脚本在全局作用域直接操作DOM元素（icon、document.body）时，如果脚本放置位置在页面对应元素之前（比如放在<head>中），会因为DOM还未解析完成拿到null值，触发Cannot set properties of null类报错，直接中断整个脚本运行——这就是你把脚本引入所有页面时功能完全失效的核心原因。
• 缺少元素存在性校验：脚本默认所有页面都提前声明了icon全局变量、且存在对应的切换按钮，一旦某个页面漏了按钮、或者没声明icon变量，会直接抛出引用错误，导致后续主题初始化逻辑完全不执行。
• 跨页面生效的前提是所有同源页面都执行主题初始化逻辑：你之前只在单个页面引入脚本，其余页面根本没有读取localStorage主题值、应用对应样式类的逻辑，自然无法保持暗黑状态。

所有同源页面都引入同一份公共脚本，对脚本做容错、时序适配，可选增加多标签页实时同步能力，修改后代码如下：

// 初始化默认主题
if (localStorage.getItem("theme") === null) {
    localStorage.setItem("theme", "light");
}

/**
 * 主题应用通用方法
 * @param {string} theme 目标主题 light/dark
 */
function applyTheme(theme) {
    // 给body应用对应样式类
    if (document.body) {
        document.body.classList.toggle("dark-theme", theme === "dark");
    }
    // 切换按钮存在时才更新图标，避免无按钮页面报错
    const themeIcon = document.getElementById("theme-toggle-icon");
    if (themeIcon) {
        themeIcon.src = theme === "dark" ? "images/sun.png" : "images/moon.png";
    }
}

// 等DOM全部解析完成后再执行初始化和事件绑定
document.addEventListener("DOMContentLoaded", () => {
    // 读取本地存储的主题值，初始化页面样式
    const savedTheme = localStorage.getItem("theme");
    applyTheme(savedTheme);

    // 绑定主题切换事件，按钮存在时才绑定
    const themeIcon = document.getElementById("theme-toggle-icon");
    if (themeIcon) {
        themeIcon.onclick = () => {
            const newTheme = document.body.classList.contains("dark-theme") ? "light" : "dark";
            localStorage.setItem("theme", newTheme);
            applyTheme(newTheme);
        }
    }

    // 可选：监听storage事件，实现同站点多标签页打开时，一个页面切主题其余页面实时同步
    window.addEventListener("storage", (e) => {
        if (e.key === "theme") {
            applyTheme(e.newValue);
        }
    })
})

• 所有页面的主题切换按钮需要统一设置id，和代码中getElementById的参数保持一致，示例：<img id="theme-toggle-icon" src="images/moon.png" alt="切换主题">，不要依赖全局变量传递元素，避免漏声明导致脚本报错。
• 脚本可以统一放在所有页面的</body>标签闭合之前，配合代码中的DOMContentLoaded监听，彻底规避DOM未加载完成就执行操作的问题。
• 同源（同协议、同域名、同端口）下localStorage是全局共享的，所有页面加载时都会读取同一份主题配置，切换页面时会自动应用保存的主题状态。

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