Dark mode: designové principy a implementace pro moderní web

Dark mode, česky tmavý režim, mění světlé rozhraní na kompozici tmavších ploch, světlejšího textu a pečlivě řízených akcentů. Aby fungoval dlouhodobě, nestačí převrátit barvy v CSS; je třeba navrhnout barevnou paletu, kontrast, typografii, stavy komponent a uživatelské preference jako jeden systém.

Co je dark mode a kdy dává smysl

Dark mode je barevná varianta digitálního rozhraní, která používá tmavé pozadí a světlé obsahové prvky. Dává smysl tam, kde uživatelé pracují večer, dlouhodobě sledují obrazovku nebo potřebují rozhraní s výraznou vizuální hierarchií.

Tmavý režim se hodí například pro webové aplikace, dashboardy, editory, vývojářské nástroje, streamovací služby a produkty s výrazným vizuálním obsahem. U článkových webů může být užitečný jako volitelný režim pro delší čtení, ale jeho přínos závisí na kvalitě typografie, jasu displeje a okolním osvětlení.

Dark mode není automaticky šetrnější k očím ani vždy úspornější pro baterii. Na OLED displeji může tmavé rozhraní snížit spotřebu, zatímco u LCD se podobný efekt obvykle neprojeví stejným způsobem. Rozhodující je také okolí: velmi jasný text na téměř černém pozadí může být v tmavé místnosti nepříjemný.

Rozlišujte proto estetický trend od funkčního řešení. Dobře navržený režim zlepšuje orientaci a podporuje uživatelský kontext. Špatně navržený pouze zmenší čitelnost a přidá práci při údržbě.

Základní designové principy tmavého rozhraní

Tmavé rozhraní potřebuje vlastní vizuální systém, nikoli mechanicky převrácenou světlou paletu. Pracujte s několika úrovněmi povrchů, jasem, hierarchií obsahu a stavovými barvami.

Čistá černá plocha #000000 často vytváří příliš tvrdý kontrast. Pro hlavní pozadí bývá praktičtější velmi tmavá šedá, například #121212 nebo #16181D. Jednotlivé plochy pak rozlišujte jemnými odstíny:

• hlavní pozadí pro celou aplikaci,
• povrch karet, panelů a navigace,
• zvýrazněný povrch pro dialogy nebo aktivní komponenty,
• odstín okrajů a oddělovacích linií.

Hierarchie obsahu v dark mode vzniká kombinací jasu, velikosti, prostoru a umístění. Nepoužívejte pouze bílé a šedé texty. Primární text může mít vysoký jas, sekundární text nižší a pomocné informace ještě méně výrazný odstín, který však stále splní požadavky přístupnosti.

Akcentní barva se na tmavém pozadí chová jinak než na bílém. Jasná modrá, zelená nebo fialová může působit výrazněji a někdy opticky zářit. Upravte proto její světlost a sytost pro každý režim zvlášť. Stejné pravidlo platí pro UI komponenty, jako jsou tlačítka, štítky, odkazy, vstupy a upozornění.

Kontrast, barvy a přístupnost

Kontrast v dark mode ověřujte pro každý typ obsahu a každý stav komponenty, ne pouze pro běžný text. Přístupné rozhraní musí zůstat čitelné při běžném zobrazení, při zvětšení i při použití klávesnice.

Pro běžný text doporučuje WCAG minimální poměr kontrastu 4,5:1, pro velký text 3:1. U grafických objektů a ovládacích prvků se posuzují také hranice, ikony a stavové indikátory. Přehled pravidel poskytuje například Web Content Accessibility Guidelines.

Začněte u textu, ale nekončete u něj. Zkontrolujte odkazy, ikony, placeholdery, obrysy formulářů, fokus, hover, disabled stav, chybové zprávy i indikátory úspěchu. Barva nesmí být jediným způsobem, jak uživatel pozná chybu nebo aktivní stav. Přidejte ikonu, text, podtržení, změnu tvaru či viditelný obrys.

Praktická pravidla pro barevnou paletu

• Pro hlavní text používejte světlou šedou místo absolutní bílé.
• Sekundární text zeslabte, ale zachovejte jeho čitelnost v reálném použití.
• Odkazy odlišujte nejen odstínem, ale také podtržením nebo jasným stavem fokusu.
• U chybových a varovných barev kontrolujte kontrast na pozadí i uvnitř tlačítka.
• Fokusní obrys ponechte výrazný; v tmavém režimu se snadno ztratí mezi tmavými hranami.

Nejlepší kontrolu získáte kombinací automatického nástroje pro kontrast a ručního testu. Číselný výsledek nenahradí zkušenost člověka, který prochází formulář, čte delší text nebo používá web při sníženém jasu.

Typografie v dark mode

Typografie v dark mode musí kompenzovat vyšší optickou výraznost světlého textu na tmavém pozadí. Pomáhá vhodný řez fontu, dostatečná velikost, komfortní řádkování a omezení příliš jasných ploch textu.

Začněte fontem, který má dobře rozlišitelné znaky, stabilní kresbu v menších velikostech a podporu potřebných jazyků. U webu v češtině ověřte diakritiku, číslice, interpunkci a dostupné řezy. Příliš tenké písmo může v dark mode rychle ztratit tahy, zatímco příliš tučné působí těžce.

Pro běžné odstavce se často osvědčí řádkování přibližně 1,5 až 1,7. Délku řádku držte zhruba mezi 55 a 80 znaky; tmavé pozadí samo o sobě neřeší únavu z dlouhých řádků. Nadpisy mohou mít vyšší kontrast, ale neměly by zabírat velké souvislé bílé plochy.

Praktická hierarchie může vypadat takto:

• primární text: nejsvětlejší neutrální odstín,
• sekundární text: středně světlá šedá pro popisy a metadata,
• pomocný text: nižší důležitost, ale stále přístupný,
• akcentní text: odkaz nebo značka s jasným interaktivním stavem.

Vyhněte se dlouhým pasážím v čistě bílé barvě. Vysoký jas zvyšuje vizuální vibraci hran textu, zejména při nízkém okolním osvětlení. Lepší výsledek často přinese mírně ztlumená bílá a více prostoru mezi odstavci.

Implementace pomocí CSS a design tokenů

Dark mode implementujte přes design tokeny, CSS vlastní vlastnosti a jasně definovanou prioritu systémové a ruční volby. Tím udržíte konzistenci napříč komponentami a zjednodušíte pozdější úpravy.

Nejprve pojmenujte význam barev, nikoli jejich konkrétní vzhled. Token --color-surface popisuje účel plochy; nemusí se jmenovat například --gray-900. Základní ukázka může vypadat takto:

:root { --color-bg: #ffffff; --color-surface: #f3f4f6; --color-text: #171717; --color-muted: #5f6368; --color-accent: #175cd3; }

@media (prefers-color-scheme: dark) { :root { --color-bg: #121212; --color-surface: #1d1f24; --color-text: #e6e6e6; --color-muted: #b2b5ba; --color-accent: #8ab4f8; } }

CSS media query prefers-color-scheme umožní respektovat systémové nastavení bez JavaScriptu. Pro ruční přepínání přidejte například atribut na kořenový prvek a definujte explicitní varianty:

[data-theme="dark"] { --color-bg: #121212; --color-surface: #1d1f24; --color-text: #e6e6e6; }

Uživatelská volba by měla mít přednost před automatickým režimem. Uložte ji do localStorage, při načtení ji aplikujte co nejdříve a nabídněte tři možnosti: světlý režim, tmavý režim a systémové nastavení. Tato volba je přesnější než jednoduchý přepínač, protože respektuje různé pracovní situace.

Design tokeny musí pokrývat také okraje, stíny, focus ring, stavové barvy, grafy, ilustrace a obrázky. Pokud komponenta používá natvrdo zadanou bílou nebo černou, systém se časem rozpadne.

Testování a časté chyby

Dark mode testujte jako samostatný produktový režim na různých displejích, velikostech a stavech rozhraní. Automatická kontrola odhalí část problémů, ale rozhodující je také ruční průchod celým uživatelským scénářem.

Chyba 1: Absolutní černá a absolutní bílá

Lidé ji volí kvůli jednoduchosti a silnému kontrastu. Výsledkem může být tvrdé rozhraní, zářící text a špatné rozlišení vrstev. Použijte několik tmavých povrchů a mírně ztlumený primární text.

Chyba 2: Kontrola pouze základního stavu

Výchozí tlačítko může vypadat dobře, zatímco hover, disabled nebo fokus se ztratí. Pro každou komponentu vytvořte matici stavů a ověřte ji v obou režimech. Zvláštní pozornost věnujte formulářům, tabulkám a navigaci.

Chyba 3: Mechanické převrácení barev

Invertování barev zamění význam akcentů, obrázků i stavových signálů. Některé ilustrace pak působí nepřirozeně a brandová barva ztrácí kontrolu. Navrhujte tokeny podle účelu a jednotlivé vizuály posuzujte ručně.

Chyba 4: Ignorování systémového nastavení

Ruční přepínač bez respektu k preferenci zařízení vytváří překvapivé chování. Nabídněte volbu systém, zachovejte uživatelské rozhodnutí a otestujte první návštěvu i návrat po několika dnech.

Testujte alespoň v prohlížečích Chrome, Firefox a Safari, na LCD i OLED obrazovce a při různém jasu. Zkontrolujte také obrázky, SVG ikony, grafy, zvýraznění kódu a obsah vložený z externích zdrojů.

Praktický checklist pro spuštění dark mode

Před spuštěním dark mode ověřte design, kód, přístupnost i údržbu obou barevných variant. Následující checklist funguje jako rychlá kontrola pro web i digitální produkt.

• Definovali jste barevnou paletu pro pozadí, povrchy, text, akcenty a stavové barvy.
• Každá barva má významový design token a není zapsaná pouze přímo v komponentě.
• Kontrast textu, ikon, odkazů a ovládacích prvků splňuje příslušné požadavky WCAG.
• Fokus, hover, active, disabled, chyba a úspěch jsou viditelné v obou režimech.
• Typografie používá čitelné řezy, vhodné řádkování a přiměřenou délku řádku.
• CSS podporuje prefers-color-scheme a ruční volba má předvídatelnou prioritu.
• Uživatelská preference se zachová mezi návštěvami a možnost návratu k systému je snadno dostupná.
• Otestovali jste reálné obrazovky, různé úrovně jasu, zvětšení textu a klávesovou navigaci.
• Prověřili jste obrázky, ikony, grafy, formuláře, modální okna a obsah třetích stran.
• Máte pravidlo pro údržbu nových komponent, aby se světlý a tmavý režim nerozešly.

Dobře navržený dark mode je součást designového systému. Když propojí barevné tokeny, typografii, přístupnost a CSS logiku, získáte režim, který působí přirozeně a zůstává udržitelný i při dalším rozvoji webu.