Ciemny tryb dla twojej strony · Koduj z Martinem

Przełącznik jasnego i ciemnego motywu, który strona zapamięta nawet po zamknięciu przeglądarki.

Jak to będzie działać

Ciemny tryb to zaklęcie z dwóch części:

CSS przygotowuje drugi „kostium” – reguły, które obowiązują tylko wtedy, gdy strona ma klasę dark.
JavaScript dodaje lub usuwa tę klasę po kliknięciu. I zapisuje twój wybór w pamięci przeglądarki, żeby obowiązywał także jutro.

Pokażę ci: ciemny kostium w CSS

Dodaj to na koniec style.css:

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2 {
  color: #93c5fd;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
}

Czytaj to tak: „Gdy body ma klasę dark, obowiązują te reguły.” Bez klasy nic z tego się nie używa.

💡

Dostosuj kolory do swojej strony – przejrzyj swoje CSS i do każdego jasnego koloru wymyśl ciemną siostrę. Reguła zostaje ta sama: ciemne tło → jasny tekst.

Pokażę ci: przełącznik w JavaScript

Dodaj przycisk do nagłówka (wewnątrz <nav>):

<button id="switch">🌙</button>

A w script.js:

const switchButton = document.getElementById("switch");

// When the page loads: remember what the visitor picked last time
if (localStorage.getItem("mode") === "dark") {
  document.body.classList.add("dark");
  switchButton.textContent = "☀️";
}

switchButton.addEventListener("click", () => {
  document.body.classList.toggle("dark");

  if (document.body.classList.contains("dark")) {
    localStorage.setItem("mode", "dark");
    switchButton.textContent = "☀️";
  } else {
    localStorage.setItem("mode", "light");
    switchButton.textContent = "🌙";
  }
});

Trzy nowości:

classList.toggle("dark") – „jeśli ma klasę, usuń ją; jeśli nie ma, dodaj.” Przełącznik w jednej linijce.
classList.contains("dark") – „czy ma ją teraz?” (zwraca true/false, przydatne w warunku).
localStorage – notes przeglądarki. setItem zapisuje, getItem czyta. To, co tam zapiszesz, przeżyje nawet zamknięcie przeglądarki. (Właśnie tam ta strona kursu zapisuje twój postęp w nauce!)

Teraz ty 💪

Dodaj ciemny kostium do własnego style.css – przejrzyj wszystkie kolory (tło, nagłówek, karty, stopkę, znaczki) i daj im ciemne wersje pod body.dark.
Dodaj przycisk-przełącznik do nagłówka na każdej stronie oraz kod do script.js.
Sprawdź: przełącz na ciemny, zamknij przeglądarkę, otwórz stronę znowu – powinna otworzyć się od razu w ciemnym trybie.

Przykład pełniejszego ciemnego kostiumu (dostosuj kolory do swojego projektu)

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2,
body.dark h3 {
  color: #93c5fd;
}

body.dark header {
  background-color: #0f172a;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
  box-shadow: none;
}

body.dark footer {
  background-color: #0f172a;
}

body.dark a {
  color: #93c5fd;
}

✅

Sprawdź się: Kliknięcie 🌙 ściemnia stronę (a ikona zmienia się na ☀️), kliknięcie ☀️ rozjaśnia z powrotem. Po zamknięciu i ponownym otwarciu przeglądarki strona pamięta twój wybór. To funkcja, której nie ma nawet sporo „dorosłych” stron!

Co wyniesiesz z tej lekcji

Ciemny tryb = przygotowany kostium CSS (body.dark) + JavaScript, który przełącza klasę.
classList.toggle() dodaje/usuwa klasę, classList.contains() sprawdza, czy jest.
localStorage to trwała pamięć przeglądarki: setItem("key", "value") i getItem("key").