页面重载时已勾选的Darkmode复选框未触发暗黑模式功能的问题

我用checkbox做暗黑模式切换按钮，勾选时能触发darkmode功能，也把复选框状态存到了localStorage，但页面重载后，复选框虽然保持勾选状态，暗黑模式却没生效。只有取消再重新勾选，功能才激活。

我的HTML代码：

<input type="checkbox" onclick="save();darkmode(this);" id="dark-switch"> 

我的JS代码：

// ...其他代码
function save() {   
    var checkbox = document.getElementById("dark-switch");
    localStorage.setItem("dark-switch", checkbox.checked);  
}

//for loading
var checked = JSON.parse(localStorage.getItem("dark-switch"));
    document.getElementById("dark-switch").checked = checked;


function darkmode(checkbox) {
    if(checkbox.checked == true){
        body?.classList.toggle("body-dark-mode");
        nav_dark?.classList.toggle("nav-dark-mode");
        doc_dark?.classList.toggle("doc-bar-dark-mode");
        searchterm?.classList.toggle("searchTerm-dark-mode");
        searchbtn?.classList.toggle("searchButton-dark-mode");
        login_menu?.classList.toggle("login-sub-menu-dark-mode");
        // ...其他类操作

    }
    else{
        body?.classList.remove("body-dark-mode");
        nav_dark?.classList.remove("nav-dark-mode");
        doc_dark?.classList.remove("doc-bar-dark-mode");
        searchterm?.classList.remove("searchTerm-dark-mode");
        searchbtn?.classList.remove("searchButton-dark-mode");
        login_menu?.classList.remove("login-sub-menu-dark-mode");
        // ...其他类操作
    }
}

解决方案 #

问题核心是页面加载时仅恢复了复选框的勾选状态，未同步执行暗黑模式的样式切换逻辑。只需在加载完成后，根据localStorage的状态手动调用一次darkmode函数即可，同时优化函数逻辑让样式控制更可靠。

具体修改 #

1. 加载状态后调用darkmode函数：
   在设置完复选框checked属性后，获取复选框元素并传入darkmode，触发样式切换。
2. 统一样式操作逻辑：
   将原函数中勾选时的toggle改为add，避免toggle可能导致的状态混乱，让样式添加/移除逻辑更明确。

修改后的JS代码 #

// ...其他代码
function save() {   
    var checkbox = document.getElementById("dark-switch");
    localStorage.setItem("dark-switch", checkbox.checked);  
}

// 页面加载时恢复状态并应用暗黑模式
var checkbox = document.getElementById("dark-switch");
var checked = JSON.parse(localStorage.getItem("dark-switch"));
checkbox.checked = checked;
// 关键：加载完成后调用darkmode应用样式
darkmode(checkbox);


function darkmode(checkbox) {
    if(checkbox.checked) {
        // 勾选时添加所有暗黑模式类
        body?.classList.add("body-dark-mode");
        nav_dark?.classList.add("nav-dark-mode");
        doc_dark?.classList.add("doc-bar-dark-mode");
        searchterm?.classList.add("searchTerm-dark-mode");
        searchbtn?.classList.add("searchButton-dark-mode");
        login_menu?.classList.add("login-sub-menu-dark-mode");
        // ...其他需要添加的类
    } else {
        // 取消勾选时移除所有暗黑模式类
        body?.classList.remove("body-dark-mode");
        nav_dark?.classList.remove("nav-dark-mode");
        doc_dark?.classList.remove("doc-bar-dark-mode");
        searchterm?.classList.remove("searchTerm-dark-mode");
        searchbtn?.classList.remove("searchButton-dark-mode");
        login_menu?.classList.remove("login-sub-menu-dark-mode");
        // ...其他需要移除的类
    }
}

说明 #

• 原代码只设置了复选框的checked属性，但没有执行样式切换逻辑，所以DOM元素的暗黑模式类未被添加，导致重载后功能不生效。
• 用add替代toggle是因为toggle会切换类的状态，若页面存在缓存残留的类，可能导致逻辑错误；add和remove则严格根据复选框状态设置样式，逻辑更稳定。

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