带有 localStorage JS 的暗/亮模式 js

Question

我正在尝试对我的引导面板进行暗/亮模式，但我遗漏了一些东西，因为它仅在 chrome dev 选项卡启用b并且缓存被禁用时才有效......总的来说，这很简单，但可能我我做错了什么；（

这是我的 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

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

我将在这里发布想要做类似事情的代码。

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);
        }
    }
}

带有 localStorage JS 的暗/亮模式 js

问题描述

1 个解决方案

解决方案1
0 2022-01-16 17:26:35

带有 localStorage JS 的暗/亮模式 js

问题描述

1 个解决方案

解决方案1 0 2022-01-16 17:26:35

解决方案1
0 2022-01-16 17:26:35