Skrypt 5: Przełącznik ciemnego/jasnego motywu (z zapamiętywaniem)

Teoria

Przełącza klasę CSS na całej stronie i ZAPAMIĘTUJE wybór użytkownika w localStorage — magazynie danych przeglądarki, który przetrwa zamknięcie karty i ponowne otwarcie strony (w przeciwieństwie do zwykłych zmiennych JavaScript, które znikają po przeładowaniu).

Kod (JavaScript)

<button id="przelacznikMotywu">Włącz ciemny motyw</button>

<script>
    const przycisk = document.getElementById("przelacznikMotywu");

    // wczytaj wcześniej zapisany wybór (jeśli istnieje) od razu po wczytaniu strony
    if (localStorage.getItem("motyw") === "ciemny") {
        document.body.classList.add("motyw-ciemny");
    }

    przycisk.addEventListener("click", function () {
        document.body.classList.toggle("motyw-ciemny");

        if (document.body.classList.contains("motyw-ciemny")) {
            localStorage.setItem("motyw", "ciemny");
        } else {
            localStorage.setItem("motyw", "jasny");
        }
    });
</script>

Komentarz i wyjaśnienie kodu

localStorage.setItem("klucz", "wartość") zapisuje dane trwale w przeglądarce, a localStorage.getItem("klucz") je odczytuje — obie wartości to zawsze tekst (string). Sprawdzenie zapisanego motywu wykonuje się OD RAZU po wczytaniu strony (poza obsługą kliknięcia), żeby ciemny motyw "trzymał się" nawet po odświeżeniu strony.

Typowe błędy

Częsty błąd to zapisywanie wyboru TYLKO w zmiennej JavaScript (bez localStorage) — motyw "resetuje się" do domyślnego przy każdym odświeżeniu strony, co jest frustrujące dla użytkownika.