javascript - 在所有页面上传播暗模式更改

Question

有什么方法可以在不更改 CSS 的情况下让启用/禁用暗模式的更改在我网站的所有页面上传播？

我的 jQuery.js 代码

onload = function() {
    if(localStorage.getItem("darkMode") === "true") {
        var mode = localStorage.getItem("darkMode");
        enableDarkMode();
    }
}

function enableDarkMode() {
    $( "body" ).addClass( "dark" );
    $( "nav" ).removeClass( "navbar navbar-expand-md navbar-light");
    $( "nav" ).addClass( "navbar navbar-expand-md navbar-dark");
    $( '.inner-switch' ).text( "ON" );
    var mode = localStorage.setItem("darkMode", "true");
}

function disableDarkMode() {
    $( "body" ).removeClass( "dark" );
    $( "nav" ).removeClass( "navbar navbar-expand-md navbar-dark");
    $( "nav" ).addClass( "navbar navbar-expand-md navbar-light");
    $( '.inner-switch' ).text( "OFF" );
    var mode = localStorage.setItem("darkMode", "false");
}

$( '.inner-switch' ).on("click", function() {
    if( $( "body" ).hasClass( "dark" )) {
        disableDarkMode();
    } else {
        enableDarkMode();
    }
});

Answer 1

看起来您的问题有一个可行的解决方案。您只需将该代码放入 $(document).read() 语句中，并在用户加载页面后执行它。

或者，您可以设置一个计时器来检查您的 darkMode 变量的值并根据更改进行更新。