页面刷新后Dark Mode自动关闭，刷新时未加载暗黑模式的技术求助

你的问题出在没有持久化存储用户的暗黑模式选择，当前代码仅在点击切换时修改DOM类，但页面刷新后所有DOM状态重置，load事件里判断的是页面初始的body类，自然无法恢复之前的设置。

修复步骤： #

• 切换模式时，将当前状态存入localStorage，这样刷新后能读取到用户之前的选择
• 页面加载时，优先从localStorage读取状态，再同步更新body类和图标状态

修改后的完整代码： #

const dayNight = document.querySelector(".day-night");

// 切换模式并保存状态
dayNight.addEventListener("click", () => {
    const isDark = document.body.classList.toggle("dark");
    dayNight.querySelector("i").classList.toggle("fa-sun");
    dayNight.querySelector("i").classList.toggle("fa-moon");
    // 将状态存入localStorage
    localStorage.setItem("darkMode", isDark);
});

// 页面加载时恢复状态
window.addEventListener("load", () => {
    // 从localStorage读取状态，默认关闭暗黑模式
    const isDarkMode = localStorage.getItem("darkMode") === "true";
    if (isDarkMode) {
        document.body.classList.add("dark");
        dayNight.querySelector("i").classList.add("fa-sun");
    } else {
        dayNight.querySelector("i").classList.add("fa-moon");
    }
});

代码说明： #

• 点击切换时，用isDark变量记录切换后的状态，并存入localStorage（注意localStorage只能存字符串，所以直接存布尔值会被转成字符串，读取时要做判断）
• 页面加载时，先读取localStorage里的darkMode值，判断是否开启暗黑模式，再手动给body添加/移除dark类，同时同步图标的状态

这样修改后，用户的暗黑模式选择会被保存，页面刷新后就能自动恢复之前的设置了。

内容的提问来源于stack exchange，提问作者Restu Windri P