🌙 Dark mode

Co je dark mode?

Dark mode (tmavý režim) je barevné schéma, kde pozadí webu je tmavé (často černé, šedé) a text světlý.
Jeho opakem je klasický light mode – světlé pozadí a tmavý text.

Uživatelé si dnes často vybírají, v jakém režimu chtějí web prohlížet – ručně nebo automaticky podle systému.

Proč přidat dark mode na web?

🧑‍💻 1. Lepší UX při nízkém světle

Dark mode snižuje namáhání očí, zejména při čtení večer nebo v tmavém prostředí.

🔋 2. Úspora energie (na OLED displejích)

Tmavé pixely spotřebovávají méně energie než světlé.

🎯 3. Uživatelé to očekávají

Moderní aplikace i OS (Android, iOS, macOS, Windows) dark mode podporují. Uživatelé si zvykli a někteří ho preferují trvale.

👁 4. Vizuální kontrast a styl

Správně navržený dark mode působí elegantně, profesionálně a moderně.

UX doporučení pro dark mode

✅ Používej tmavé šedé místo čisté černé (#121212 místo #000) – snižuje kontrast
✅ Zachovej čitelnost a hierarchii – světlejší text, výrazné titulky, čitelné odkazy
✅ Omez příliš syté barvy – neonově modrá na černém pozadí je unavující
✅ Testuj čitelnost interaktivních prvků – tlačítka, ikony, formy
✅ Umožni přepnutí na light mode – pomocí přepínače, nebo automaticky podle nastavení systému

Jak implementovat dark mode – 3 možnosti

1. 🎚️ Přepínač režimů (manual toggle)

Uživatel si vybere režim pomocí tlačítka:

htmlCopyEdit<button id="theme-toggle">Přepnout režim</button>

cssCopyEditbody.dark {
  background-color: #121212;
  color: #f0f0f0;
}

🔧 Nutné: uložit preferenci do localStorage.

2. 🖥 Automatický režim podle systému

CSS umožňuje detekovat preferenci uživatele:

cssCopyEdit@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f0f0f0;
  }
}

✅ Není třeba JS
⚠️ Uživatel ale nemá možnost volby

3. 🌗 Kombinace obojího (doporučeno)

🔁 Detekuj výchozí preferenci + umožni přepnutí
💾 Pamatuj volbu (např. do localStorage)
🎨 Umožni přepnutí stylů přes CSS proměnné (např. pomocí :root)

Doporučené barvy pro dark mode

Nejčastější chyby

❌ Čistě černé pozadí s bílým textem → příliš velký kontrast
❌ Nepřizpůsobené obrázky (s bílým pozadím)
❌ Ikony neviditelné v tmavém režimu
❌ Není možné přepnout zpět do světlého režimu
❌ Texty a odkazy s nízkým kontrastem

FAQ – často kladené otázky

Je dark mode vhodný pro každý web?
Ne nutně – ale u webů s častým čtením (blog, aplikace, platformy) je to velmi vítaná funkce.

Zlepší dark mode SEO?
Nepřímo – zlepší UX a čas strávený na webu, což může pozitivně ovlivnit uživatelské signály.

Jak otestovat, jestli dark mode funguje správně?
Použij např. prefers-color-scheme tester, testuj v různých prohlížečích a přepínej mezi režimy.