Tmavý režim pre tvoju webovú stránku

Prepínač svetlej/tmavej témy, ktorú si webová stránka pamätá aj po zatvorení prehliadača.

Ako to bude fungovať

Tmavý režim je kúzlo zo dvoch častí:

CSS pripraví druhý „kostým” – pravidlá, ktoré platia len keď má stránka triedu dark.
JavaScript pri kliknutí triedu pridá alebo odstráni. A zapíše tvoju voľbu do pamäte prehliadača, aby platila aj zajtra.

Ukážem ti: tmavý kostým v CSS

Pridaj toto 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;
}

Prečítaj to takto: „Keď má body triedu dark, platia tieto pravidlá.” Bez triedy sa nič z toho nepoužije.

💡

Uprav farby podľa svojej webovej stránky – prejdi svoje CSS a vymysli tmavého súrodenca pre každú svetlú farbu. Pravidlo zostáva: tmavé pozadie → svetlý text.

Ukážem ti: prepínač v JavaScripte

Pridaj tlačidlo do hlavičky (do <nav>):

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

A v 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 nové veci:

classList.toggle("dark") – „ak triedu má, odstráň ju; ak nemá, pridaj ju.” Prepínač na jeden riadok.
classList.contains("dark") – „má ju práve teraz?” (vráti true/false, užitočné v podmienke).
localStorage – zošit prehliadača. setItem do neho zapíše, getItem z neho prečíta. Čo tam uložíš, prežije aj zatvorenie prehliadača. (Vlastne aj táto webová stránka ho používa na ukladanie tvojho postupu pri učení!)

Teraz ty 💪

Pridaj tmavý kostým do svojho style.css – prejdi všetky farby (pozadie, hlavička, karty, pätička, bublinky) a daj im tmavé verzie pod body.dark.
Pridaj prepínač do hlavičky na každej stránke a kód do script.js.
Vyskúšaj to: prepni na tmavý režim, zatvor prehliadač, znova otvor web – mal by sa otvoriť rovno v tmavom režime.

Príklad kompletnejšieho tmavého kostýmu (uprav farby podľa 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;
}

✅

Skontroluj sa: Kliknutie na 🌙 web stmaví (a ikona sa zmení na ☀️), kliknutie na ☀️ ho znova rozsvieti. Po zatvorení a znovuotvorení prehliadača si webová stránka pamätá tvoju voľbu. Toto je funkcia, ktorú nemajú ani niektoré „dospelácke” weby!

Čo si z tejto lekcie odnášaš

Tmavý režim = pripravený CSS kostým (body.dark) + JavaScript, ktorý triedu prepína.
classList.toggle() pridáva/odstraňuje triedu, classList.contains() ju kontroluje.
localStorage je trvalá pamäť prehliadača: setItem("key", "value") a getItem("key").