页面切换后Dark Mode切换按钮失效问题求助

问题核心原因分析 #

你的代码在主页正常，但其他页面失效，大概率是以下几个细节问题导致的：

1. 元素不存在/路径错误导致JS报错中断 #

如果其他页面没有logo或theme-switch元素，或者图片相对路径在子目录页面中失效，代码执行到document.getElementById("xxx").src或addEventListener时会直接报错，导致整个脚本停止运行，按钮自然失去功能。

修复方案：

给DOM元素操作加存在性判断，同时改用绝对路径加载图片：

document.addEventListener('DOMContentLoaded', () => {
    let darkmode = localStorage.getItem("darkmode")
    const themeSwitch = document.getElementById("theme-switch")

    const enableDarkmode = () => {
        document.body.classList.add("darkmode")
        localStorage.setItem("darkmode", "active")
        // 先判断logo元素是否存在，再修改路径
        const logo = document.getElementById("logo");
        if (logo) {
            // 用绝对路径（/开头指向网站根目录），适配所有页面路径
            logo.src = "/Imgs/logo-white.png";
        }
    }

    const disableDarkmode = () => {
        document.body.classList.remove("darkmode")
        // 移除localStorage项，而非存null字符串
        localStorage.removeItem("darkmode")
        const logo = document.getElementById("logo");
        if (logo) {
            logo.src = "/Imgs/logo-blue.png";
        }
    }

    // 初始化深色模式状态
    if (darkmode === "active") enableDarkmode()

    // 先判断切换按钮是否存在，再绑定事件
    if (themeSwitch) {
        themeSwitch.addEventListener("click", () => {
            darkmode = localStorage.getItem("darkmode")
            darkmode !== "active" ? enableDarkmode() : disableDarkmode()
        })
    }
})

2. JS执行时机过早，DOM元素未加载完成 #

如果你的JS代码放在<head>标签里，会在页面DOM元素（比如切换按钮、logo）渲染前执行，此时document.getElementById("theme-switch")会返回null，无法绑定点击事件。

修复方案：

把JS代码放在</body>标签的最后（DOM元素之后），或者用DOMContentLoaded事件包裹代码（如上示例），确保DOM完全加载后再执行脚本。

3. LocalStorage存储值的潜在问题 #

原代码中禁用深色模式时存的是null，但localStorage只能存储字符串，实际会存入"null"字符串。虽然当前判断逻辑没问题，但后续如果修改判断条件容易出错，建议直接移除对应项（如上示例中的localStorage.removeItem("darkmode")）。

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