darkmode HTML tetap diterapkan walaupun sudah di-refresh

Screen Shot 2022-02-23 at 12.58.48.pngsesuai judul gimana cara agar darkmode tetap diterapkan walau sudah direfresh, misal saya menerapkan dark mode setelah direfresh harus tetap dark mode tp ini malah balik lagi ke light mode

styles.css

    <style>
         :root {
            --background: #000;
            --text: white;
            --highlight: deepskyblue;
        }

         :root {
            ---background: rgb(255, 0, 0);
            ---text: rgb(255, 255, 255);
        }

        body {
            background: var(--background);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
            transition: 0.5s background ease;
        }

        button {
            background-color: var(--background);
            color: var(--text);
        }

        .theme-switch {
            --background: white;
            --text: #000;
            color: var(--text);
            width: 50px;
            height: 30px;
            background: var(--highlight);
            border-radius: 50px;
            position: relative;
        }

        .theme-switch .switch {
            background: white;
            width: 24px;
            height: 24px;
            background: var(--background);
            border-radius: 100%;
            position: absolute;
            top: 3px;
            left: 3px;
            transition: 0.5s all ease;
        }

        .light-theme {
            --background: white;
            --text: #000;
            background: var(--background);
        }

        .light-theme .theme-switch {
            background: var(--text);
        }

        .light-theme .theme-switch .switch {
            transform: translateX(20px);
        }

        .light-theme a {
            color: var(--text);
        }

        .light-theme button {
            background-color: var(---background);
            color: var(---text);
        }

        .navigation {
            display: flex;
            justify-content: center;
        }

        ul {
            display: flex;
            list-style: none;
        }

        ul a {
            margin: 10px;
            position: relative;
            color: var(--text);
            font-family: tahoma;
            font-size: 20px;
            text-transform: uppercase;
            text-decoration: none;
        }

        ul a:before {
            position: absolute;
            bottom: -2px;
            content: '';
            width: 100%;
            height: 3px;
            background: var(--highlight);
            transform: translateX(-100%);
            opacity: 0;
        }

        ul a:hover:before {
            opacity: 1;
            transition: 0.5s transform ease, 0.8s opacity ease;
            transform: translateX(0);
        }

        ul.active {
            color: var(--highlight);
        }

        ul.active:hover:before {
            opacity: 0;
        }
    </style>

index.html

<head>
    <meta charset="utf-8">
    <title>dark mode menu</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/d6e78495c8.js" crossorigin="anonymous"></script>

</head>

<body>
    <div class="theme-switch">
        <div class="switch"></div>
    </div>
    <div class="navigation">
        <ul>
            <a href="" class="active">Home</a>
            <a href="">About Us</a>
            <a href="">Gallery</a>
            <a href="">Our Team</a>
            <a href="">Testimony</a>
        </ul>
    </div>
    <button>Cgange</button>
</body>

script.js

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
    $(".theme-switch").on("click", () => {
        $("body").toggleClass("light-theme");
    });
</script>

html css

@dynemix

43 Kontribusi 5 Poin

Diperbarui 2 tahun yang lalu

3 Jawaban:

<div>Gunakan javascript (localstorage) untuk menyimpan prefrensi tema dark mode user.<br>Pelajar di video ini<br><a href="https://www.youtube.com/watch?v=83to4Ti8xD8">Cara membuat dark mode di website</a></div>

@hilmanski

2699 Kontribusi 2140 Poin

Dipost 2 tahun yang lalu

<div>saya terapin ke kodingan saya gakbisa2, agak susah ya. mungkin bisa dibantu mana aja yg lerlu disesuaikan di localstorage nya 🤦‍♂️</div>

@dynemix

43 Kontribusi 5 Poin

Dipost 2 tahun yang lalu

<div>Coba cek forum ini deh <a href="https://sekolahkoding.com/forum/menyediakan-dark-mode-pada-website-1550220053">https://sekolahkoding.com/forum/menyediakan-dark-mode-pada-website-1550220053</a> itu udah lengkap banget dijelasin langkah-langkahnya oleh mas @hilmanski :D</div>

@ahanafi

815 Kontribusi 554 Poin

Dipost 2 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

darkmode HTML tetap diterapkan walaupun sudah di-refresh

Kelas Premium!
Belajar bikin website dari nol sekarang