Před pár lety nás jeden z klientů Kosmowebu — pražský fintech startup — požádal o přidání přepínače tmavého režimu do jejich dashboardu. Odhadovali jsme, že to zabere pár dní. Nakonec nám to trvalo dva týdny, protože jsme rychle zjistili, že tmavý režim neznamená pouhé obrácení barev. Vyžaduje vlastní designový jazyk, vlastní paletu a pečlivou pozornost ke každému prvku na stránce. Tato zkušenost změnila náš přístup ke každému dalšímu projektu.
Co je vlastně tmavý režim?
Tmavý režim se posunul z okrajové preference na běžné očekávání. Operační systémy, prohlížeče i velké aplikace jej nabízejí a uživatelé si zvykli přepínat mezi světlým a tmavým režimem podle svého prostředí. Pro mnoho lidí tmavý režim snižuje únavu očí při nočním prohlížení. Pro jiné jednoduše vypadá rafinovaněji.
Z pohledu designu přináší tmavý režim omezení, která vedou k lepšímu rozhodování. Nemůžete se spoléhat na jemné šedé okraje nebo nevýrazné stíny stejným způsobem jako na bílém pozadí. Každý prvek si musí zasloužit své místo a zůstat čitelný na tmavém povrchu. Výsledkem, pokud je vše provedeno správně, je rozhraní, které působí záměrně a uhlazeně.
Správná volba barev
Nejčastější chyba, se kterou se setkáváme, je sáhnutí po čistě černé (#000000) jako barvě pozadí. I když se zdá jako logický opak bílé, čistě černá vytváří ostrý kontrast, který při delším čtení unavuje oči. Pokyny Material Designu od Googlu doporučují tmavě šedé tóny — přibližně v rozsahu #121212 až #1E1E1E — a naše zkušenosti to potvrzují.
Pro fintech klienta jsme vybrali #1A1A2E jako primární pozadí s #16213E pro karty a panely. Tento jemný rozdíl ve světlosti vytvořil vizuální hierarchii bez nutnosti okrajů a oddělujících čar, které by na tmavém rozhraní mohly působit rušivě. Pro textové barvy je dobrým výchozím bodem #E0E0E0 namísto čistě bílé. Čistě bílý text na tmavém pozadí vytváří halaci, zejména na OLED displejích, kde černé pixely opravdu nesvítí.
Důležitou výjimkou jsou akční prvky. CTA tlačítka a interaktivní elementy profitují z vyššího kontrastu, protože potřebují okamžitě upoutat pozornost. Na tmavém pozadí jsme zjistili, že sytě modré a fialové tóny fungují výjimečně dobře, zatímco červené a oranžové vyžadují pečlivé testování, aby nepůsobily agresivně.
Typografie v tmavém režimu
Typografie vyžaduje v tmavém režimu úpravy. Tučné fonty, které na bílém pozadí vypadají skvěle, mohou na tmavém pozadí působit masivně, protože světlý text na tmavém pozadí se opticky zdá těžší než tmavý text na světlém. U fintechového dashboardu jsme snížili tloušťku fontu o jeden stupeň u nadpisů (z Bold na Semibold) a zvětšili řádkový proklad o přibližně 10 %, abychom zachovali čitelnost bez pocitu těžkopádnosti.
Velikost fontu je obecně bezpečné ponechat nezměněnou, ale zvažte mírné zvýšení velikosti základního textu, pokud Vaše písmo má tenké tahy, které při tmavém zobrazení hůře vyniknou. Testujte na skutečných obrazovkách při různém jasu. To, co vypadá na designérově kalibrovaném monitoru naprosto v pořádku, může být na starším notebooku při polovičním jasu nečitelné.
Zacházení s obrázky a ikonami
Obrázky navržené pro světlé rozhraní mohou v tmavém režimu působit jako bodnutí do oka. Produktové fotografie na bílém pozadí, loga s bílým pozadím a ilustrace s ostrými okraji vyžadují pozornost. Náš přístup zahrnuje přidání jemného zaoblení rohů a mírného stínu kolem obrázků v tmavém režimu. Ty vizuálně začlení obrázek do prostředí místo toho, aby na stránce trčel jako cizorodý prvek.
SVG ikony by měly používat currentColor nebo být navrženy s ohledem na tematizaci. U fintechového projektu jsme každou ikonu překonvertovali z pevných barevných výplní na dynamické barvy popředí, což nám umožnilo automatické přepínání bez nutnosti udržovat dvě sady ikon.
Pokud Vaše aplikace zobrazuje uživatelsky nahraný obsah, zvažte přidání polotransparentního překryvu nebo rámečku, aby se rozmanité obrázky vizuálně sjednotily. Tento detail se snadno přehlédne, ale výrazně přispívá k ucelenosti celého rozhraní.
Systémové preference a manuální ovládání
Moderní operační systémy umožňují uživatelům nastavit systémovou preferenci pro tmavý režim a CSS media query prefers-color-scheme Vám umožní toto nastavení respektovat automaticky. Doporučujeme však nabídnout i manuální přepínač. Někteří uživatelé mohou chtít tmavý systém, ale světlou verzi Vašeho webu, nebo naopak.
Uložte preferenci uživatele do localStorage a ponechte ji mezi návštěvami. Není nic otravnějšího než stránka, která se při každé návštěvě přepne zpět na systémové nastavení a ignoruje, že jste si minule explicitně zvolili konkrétní režim. Respektování volby uživatele je drobnost, která svědčí o promyšlenosti celého designu.
Testování na různých zařízeních
Tmavý režim vypadá na každém displeji jinak. OLED obrazovky zobrazují černou jako skutečnou černou, protože pixely úplně zhasnou, zatímco LCD panely prosvětlují černé plochy podsvícením. Barvy, které na jedné technologii vypadají rafinovaně, mohou na jiné vypadat vybledle. Testujte na obou typech displejů a při různých úrovních jasu.
Testujte i v různých prohlížečích. Vykreslování fontů se mezi prohlížeči liší, což ovlivňuje vnímání hmotnosti a čitelnost na tmavém pozadí. Safari na macOS vykresluje text o poznání tučnější než Chrome, což může ovlivnit rovnováhu, na kterou jste pečlivě cílili.
Praktická doporučení
Začněte přidáním CSS custom properties pro každou barvu ve Vašem systému. Definujte je pro obě témata na začátku projektu, nikoli jako dodatečný krok. Navrhněte komponenty s ohledem na tematizaci od prvního dne. Vytvořte si kontrolní seznam, který zahrnuje kontrast, čitelnost typografie, zpracování obrázků, stavy formulářů, chybové zprávy a stav načítání. Každý z těchto stavů vyžaduje individuální pozornost v tmavém režimu.
A konečně dokumentujte svá designová rozhodnutí. Když do projektu vstoupí další designér za půl roku, bude potřebovat vědět nejen jaké barvy jste zvolili, ale také proč. Tato dokumentace změní Váš tmavý režim z odškrtnuté položky na promyšlenou součást Vaší designové soustavy.