Tmavý režim pro tvůj web · Programuj s Martinem

Přepínač světlého a tmavého vzhledu, který si web zapamatuje i po zavření prohlížeče.

Jak to bude fungovat

Tmavý režim je kouzlo ze dvou dílů:

CSS si připraví druhý „kostým” – pravidla, která platí, jen když má stránka třídu tmavy.
JavaScript tu třídu po kliknutí přidá nebo odebere. A do paměti prohlížeče si zapíše, co sis vybral(a), aby to platilo i zítra.

Ukaž mi to: tmavý kostým v CSS

Do styl.css přidej na konec:

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

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

body.tmavy .karta {
  background-color: #292524;
  color: #f5f0ea;
}

Čti to takhle: „Když má body třídu tmavy, plať tahle pravidla.” Bez třídy se nic z toho nepoužije.

💡

Barvy si uprav podle svého webu – projdi svoje CSS a ke každé světlé barvě vymysli tmavou sestru. Pravidlo zůstává: tmavé pozadí → světlý text.

Ukaž mi to: přepínač v JavaScriptu

Do hlavičky (do <nav>) přidej tlačítko:

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

A do skript.js:

const prepinac = document.getElementById("prepinac");

// Při načtení stránky: vzpomeň si, co si návštěvník vybral minule
if (localStorage.getItem("rezim") === "tmavy") {
  document.body.classList.add("tmavy");
  prepinac.textContent = "☀️";
}

prepinac.addEventListener("click", () => {
  document.body.classList.toggle("tmavy");

  if (document.body.classList.contains("tmavy")) {
    localStorage.setItem("rezim", "tmavy");
    prepinac.textContent = "☀️";
  } else {
    localStorage.setItem("rezim", "svetly");
    prepinac.textContent = "🌙";
  }
});

Tři novinky:

classList.toggle("tmavy") – „když třídu má, sundej ji; když nemá, nasaď ji”. Přepínač jedním řádkem.
classList.contains("tmavy") – „má ji teď?” (vrací true/false, hodí se do podmínky).
localStorage – zápisník prohlížeče. setItem do něj zapíše, getItem přečte. Co si tam uložíš, přežije i zavření prohlížeče. (Přesně tam si mimochodem ukládá postup i tenhle web, na kterém se učíš!)

Teď ty 💪

Přidej tmavý kostým do svého styl.css – projdi všechny své barvy (pozadí, hlavičku, karty, patičku, cedulky) a dej jim tmavé verze pod body.tmavy.
Přidej tlačítko-přepínač do hlavičky na všech stránkách a kód do skript.js.
Vyzkoušej: přepni na tmavý, zavři prohlížeč, otevři web znovu – měl by se otevřít rovnou tmavý.

Ukázka kompletnějšího tmavého kostýmu (uprav si barvy podle projektu)

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

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

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

body.tmavy .karta {
  background-color: #292524;
  color: #f5f0ea;
  box-shadow: none;
}

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

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

✅

Kontrola: Kliknutím na 🌙 web ztmavne (a ikona se změní na ☀️), kliknutím na ☀️ zase zesvětlá. Po zavření a otevření prohlížeče si web volbu pamatuje. Tohle je funkce, kterou nemá ani spousta „dospělých” webů!

Co si z téhle lekce odnést

Tmavý režim = připravený CSS kostým (body.tmavy) + JavaScript, který třídu přepíná.
classList.toggle() přidá/odebere třídu, classList.contains() se zeptá.
localStorage je trvalá paměť prohlížeče: setItem("klic", "hodnota") a getItem("klic").