刷新页面时关闭暗模式

Question

My Dashboard has a dark mode(CSS) but when I refresh the page it turns class BODY dark-mode to light mode!

How I can save Dark-Mode when the page is refreshed?

NioApp.ModeSwitch = function () {
var toggle = $('.dark-switch');

if ($body.hasClass('dark-mode')) {
  toggle.addClass('active');
} else {
  toggle.removeClass('active');
}

toggle.on('click', function (e) {
  e.preventDefault();
  $(this).toggleClass('active');
  $body.toggleClass('dark-mode');
});};

Answer 1

You can use cookies to store theme and get as you left it like

document.cookie = "theme=dark expires=Fri, 31 Dec 9999 23:59:59 GMT /*Not to expire*/" //when switching dark mode

document.cookie = "theme=light expires=Fri, 31 Dec 9999 23:59:59 GMT /*Not to expire*/" //when switching light mode 

And than retrieve this by function

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
        c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

now you only have to get theme from cookies when window ia loaded

window.addEventListener("load", function() {
    if (getCookie("theme") == "light") {
        //Toggle To Light Theme By Function
    } else if (getCookie("theme") == "dark") {
        //Toggle To Dark Theme By Function
    }
});