Tamni način za tvoju web stranicu

Prekidač svijetle/tamne teme koji web stranica pamti i nakon zatvaranja preglednika.

Kako će raditi

Tamni način je čarolija od dva dijela:

CSS priprema drugi “kostim” – pravila koja vrijede samo kad stranica ima klasu dark.
JavaScript dodaje ili uklanja tu klasu na klik. I zapisuje što si odabrao u memoriju preglednika, pa vrijedi i sutra.

Pokazat ću ti: tamni kostim u CSS-u

Dodaj ovo na kraj 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;
}

Čitaj ovako: “Kad body ima klasu dark, vrijede ova pravila.” Bez klase se ništa od ovoga ne koristi.

💡

Prilagodi boje svojoj web stranici – prođi kroz CSS i smisli tamnog brata za svaku svijetlu boju. Pravilo ostaje isto: tamna pozadina → svijetli tekst.

Pokazat ću ti: prekidač u JavaScriptu

Dodaj gumb u zaglavlje (unutar <nav>):

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

A u 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 = "🌙";
  }
});

Tri nove stvari:

classList.toggle("dark") – “ako ima klasu, ukloni je; ako nema, dodaj je.” Prekidač u jednom retku.
classList.contains("dark") – “ima li je sada?” (vraća true/false, korisno u uvjetu).
localStorage – bilježnica preglednika. setItem u nju piše, getItem iz nje čita. Što tamo spremiš preživljava i zatvaranje preglednika. (Zapravo, ova web stranica koristi to za spremanje tvog napretka dok učiš!)

Sad si ti na redu 💪

Dodaj tamni kostim u svoj style.css – prođi sve boje (pozadina, zaglavlje, kartice, podnožje, značke) i daj im tamne verzije pod body.dark.
Dodaj gumb za prekidač u zaglavlje na svakoj stranici i kod u script.js.
Isprobaj: prebaci na tamno, zatvori preglednik, ponovo otvori web stranicu – trebala bi se odmah otvoriti u tamnom načinu.

Primjer potpunijeg tamnog kostima (prilagodi boje svom 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;
}

✅

Provjeri sam sebe: Klik na 🌙 tamni web stranicu (i ikona se promijeni u ☀️), klik na ☀️ je opet posvijetli. Nakon zatvaranja i ponovnog otvaranja preglednika web stranica pamti tvoj izbor. To je značajka koju puno “odraslih” web stranica nema!

Što ćeš ponijeti iz ove lekcije

Tamni način = pripremljeni CSS kostim (body.dark) + JavaScript koji prebacuje klasu.
classList.toggle() dodaje/uklanja klasu, classList.contains() provjerava je li postoji.
localStorage je trajna memorija preglednika: setItem("key", "value") i getItem("key").