Dark/Light 模式 js 与 localStorage JS

Question

我正在尝试对我的 bootstrap 面板执行 dark/light 模式，但我遗漏了一些东西，因为它仅在启用 chrome 开发选项卡并且缓存为禁用...理论上很简单，但可能我做错了什么；（

这是我的js代码：

$(document).ready(function(){
    $(window).on('load', function(){
        if (localStorage.getItem("cor_do_tema") === 'claro') {
            $("body").removeClass("dark-layout");
        }
    })
    $(document).on("click", '#altera_cor_tema', function() {
        if(localStorage.getItem("cor_do_tema") == 'claro') {
            localStorage.setItem("cor_do_tema", "escuro");
            Swal.fire({
                    icon: "success",
                    title: 'Alterando Cor',
                    html: 'Estamos alterando a cor do seu painel!',
                    allowOutsideClick: false,
                    timerProgressBar: true,
                    showConfirmButton: false,
                    timer: 4000,
                    willOpen: () => {
                        Swal.showLoading()
                    },
            });
            setTimeout(function () {
                window.location.reload();
            }, 4000);

        } else if (localStorage.getItem("cor_do_tema") === 'escuro'){
            localStorage.setItem("cor_do_tema", "claro");
            Swal.fire({
                    icon: "success",
                    title: 'Alterando Cor',
                    html: 'Estamos alterando a cor do seu painel!',
                    allowOutsideClick: false,
                    timerProgressBar: true,
                    showConfirmButton: false,
                    timer: 4000,
                    willOpen: () => {
                        Swal.showLoading()
                    },
            });
            setTimeout(function () {
                window.location.reload();
            }, 4000);
        } else {
            localStorage.setItem("cor_do_tema", "claro");
            Swal.fire({
                    icon: "success",
                    title: 'Alterando Cor',
                    html: 'Estamos alterando a cor do seu painel!',
                    allowOutsideClick: false,
                    timerProgressBar: true,
                    showConfirmButton: false,
                    timer: 4000,
                    willOpen: () => {
                        Swal.showLoading()
                    },
            });
            setTimeout(function () {
                window.location.reload();
            }, 4000);
        }

    })
});

这是我的默认 HTML 正文标签

<body class="horizontal-layout horizontal-menu navbar-static dark-layout 2-columns footer-static" data-open="hover" data-menu="horizontal-menu">

这是我的 HTML 按钮标签

<ul class="nav navbar-nav bookmark-icons">
<li class="nav-item d-none d-lg-block">
<a id="altera_cor_tema" class="nav-link" data-toggle="tooltip" data-placement="top" title="" data-original-title="Alterar Cor"><i class="ficon bx bx-adjust"></i></a>
</li>
</ul>

Js 代码正在页脚中

感谢您的宝贵时间:)

Answer 1

好的伙计们，我做到了嘿嘿

我要post这里的代码谁想要做类似的事情。

JS代码，body标签下方

if (localStorage.getItem("cor_do_tema") === 'escuro') {
    document.querySelector('body').classList.add('dark-layout');
}
window.onload = function() {
    document.getElementById("altera_cor_tema").onclick = function grava_cor_tema() {
        if(localStorage.getItem("cor_do_tema") == 'claro') {
            localStorage.setItem("cor_do_tema", "escuro");
            Swal.fire({
                    icon: "success",
                    title: 'Alterando Cor',
                    html: 'Estamos alterando a cor do seu painel!',
                    allowOutsideClick: false,
                    timerProgressBar: true,
                    showConfirmButton: false,
                    timer: 4000,
                    willOpen: () => {
                        Swal.showLoading()
                    },
            });
            setTimeout(function () {
                window.location.reload();
            }, 3000);
        } else if (localStorage.getItem("cor_do_tema") === 'escuro'){
            localStorage.setItem("cor_do_tema", "claro");
            Swal.fire({
                    icon: "success",
                    title: 'Alterando Cor',
                    html: 'Estamos alterando a cor do seu painel!',
                    allowOutsideClick: false,
                    timerProgressBar: true,
                    showConfirmButton: false,
                    timer: 4000,
                    willOpen: () => {
                        Swal.showLoading()
                    },
            });
            setTimeout(function () {
                window.location.reload();
            }, 3000);
        } else {
            localStorage.setItem("cor_do_tema", "escuro");
            Swal.fire({
                    icon: "success",
                    title: 'Alterando Cor',
                    html: 'Estamos alterando a cor do seu painel!',
                    allowOutsideClick: false,
                    timerProgressBar: true,
                    showConfirmButton: false,
                    timer: 4000,
                    willOpen: () => {
                        Swal.showLoading()
                    },
            });
            setTimeout(function () {
                window.location.reload();
            }, 3000);
        }
    }
}

Dark/Light 模式 js 与 localStorage JS

Dark/Light mode js with localStorage JS

javascript

local-storage

darkmode