Jak přidat tmavý režim na web nebo do aplikace (bez záblesku)

Tmavý režim přidáte tak, že barvy definujete jako pojmenované tokeny (pozadí, text, plocha, ohraničení, akcent) místo pevně zadaných hodnot a pro každý token nastavíte světlou a tmavou hodnotu. Přepínání mezi nimi pak zařídí CSS funkce prefers-color-scheme, takže se web řídí nastavením systému návštěvníka. Pokud chcete i ruční přepínač, uložte volbu v prohlížeči a aplikujte ji malým inline skriptem v hlavičce stránky, aby nebyl bílý záblesk při načtení. Pak zkontrolujte kontrast, obrázky a grafy v obou režimech. V AI nástroji pro tvorbu aplikací zvládne většinu této práce jeden jasný prompt; kvalita se ukáže v kontrole.

Dva přístupy

Většina aplikací nejlépe funguje s druhou variantou: ve výchozím stavu respektovat systém a nechat lidi nastavení přepsat.

Začněte s barevnými tokeny

Tmavý režim je bolestivý, když jsou barvy rozházené v kódu jako white, #333 a gray-100. Je snadný, když každá barva pochází z malé sady pojmenovaných tokenů:

Každá komponenta používá názvy tokenů. Přepnutí motivu pak znamená vyměnit jednu sadu hodnot, ne upravovat každou komponentu.

Tipy pro tmavou paletu:

• Vyhněte se čisté černé a čisté bílé u velkých ploch; velmi tmavě šedá a bílá s nádechem se lépe čtou.
• Hloubku ukazujte světlejšími plochami, ne stíny; stíny na tmavém pozadí téměř nejsou vidět.
• Mírně odsaťte jasné barvy značky; na tmavém pozadí mohou nepříjemně zářit.
• Udržte čitelný kontrast. Úroveň WCAG AA vyžaduje u běžného textu alespoň poměr 4,5:1. Ztlumený šedý text v tmavých motivech tento limit často nesplní.

S Tailwind CSS

Tailwind je ve spoustě aplikací postavených pomocí AI výchozím nástrojem pro styly. Podle dokumentace Tailwindu k tmavému režimu varianta dark: ve výchozím nastavení používá prefers-color-scheme, takže třídy jako bg-white dark:bg-gray-900 se řídí nastavením systému bez dalšího úsilí.

Pro ruční přepínač v Tailwindu v4 dokumentace ukazuje přepnutí varianty na třídu na nadřazeném prvku:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Pak aplikace přidá nebo odebere třídu dark na kořenovém prvku. Dokumentace také doporučuje inline skript v hlavičce, který použije uloženou volbu (nebo nastavení systému), než se stránka vykreslí. Právě tím se vyhnete záblesku.

Jak se vyhnout bílému záblesku

Záblesk vzniká tak, že se stránka vykreslí ve světlém režimu, pak se načte JavaScript, přečte uloženou volbu a přepne na tmavý. Oprava:

1. Vložte malý inline skript do hlavičky stránky, který přečte uložený motiv a nastaví třídu na kořenovém prvku dřív, než se cokoli vykreslí.
2. Nastavte vlastnost CSS color-scheme pro každý motiv, aby části kreslené prohlížečem (posuvníky, formulářové prvky) odpovídaly.
3. Nastavte stránce explicitní barvu pozadí v obou motivech.
4. Pokud je aplikace renderovaná na serveru, zajistěte, aby server a prohlížeč souhlasily s počátečním motivem; jinak může stránka překreslovat a blikat.

Příklady promptů

Kompletní nastavení:

Přidej tmavý režim. Nejdřív nahraď pevně zadané barvy tokeny motivu (pozadí, plocha, text, ztlumený text, ohraničení, akcent) se světlými a tmavými hodnotami. Výchozí nastavení ber podle systému návštěvníka. Do hlavičky přidej přepínač motivu s možnostmi Světlý, Tmavý a Systém, volbu ulož do localStorage a aplikuj ji inline skriptem v hlavičce, aby nebyl bílý záblesk při načtení. Nastav color-scheme pro každý motiv. Zachovej současný světlý design přesně tak, jak je.

Zkontroluj každou stránku v tmavém režimu a oprav: text s nízkým kontrastem (cílit na alespoň 4,5:1), pevně zadaná bílá pozadí, ohraničení, která zmizela, grafy s tmavým textem na tmavém pozadí a loga, která nejsou vidět. Světlý motiv neměň.

Obrázky a grafy:

V tmavém režimu použij světlou verzi loga. Osy, mřížky a popisky grafů ať používají tokeny motivu. U snímků obrazovky v tmavém režimu přidej jemné ohraničení, aby nesplývaly s pozadím.

Postup krok za krokem

1. Proveďte audit barev. Najděte pevně zadané barvy a nahraďte je tokeny. To je většina práce.
2. Definujte tmavé hodnoty pro každý token.
3. Řiďte se systémem pomocí prefers-color-scheme (nebo výchozí varianty dark: v Tailwindu).
4. Přidejte přepínač, pokud ho chcete: Světlý, Tmavý, Systém. Volbu uložte v prohlížeči; u přihlášených aplikací ji můžete uložit i do profilu uživatele.
5. Zabraňte záblesku inline skriptem v hlavičce a color-scheme.
6. Zkontrolujte složité části: loga, ikony, obrázky s bílým pozadím, grafy, bloky kódu, mapy, vložené prvky, e-maily.
7. Otestujte oba motivy na počítači i na telefonu, se systémem nastaveným na světlý i na tmavý režim a po tvrdém obnovení stránky.

Časté chyby

• Invertování všeho. Filtr, který invertuje barvy, zničí fotografie a barvy značky.
• Zapomenuté pevně zadané barvy. Jedna bílá karta na tmavé stránce hned vynikne.
• Šedý text s nízkým kontrastem. Vypadá stylově, ale špatně se čte.
• Bílý záblesk při načtení. Obzvlášť patrný na telefonech v noci.
• Zapomenuté vložené prvky třetích stran. Mapy, videa a widgety mohou zůstat světlé; zkontrolujte, zda mají tmavou variantu.
• Přepínač jen se dvěma stavy. Jakmile na něj někdo klikne, nemůže se vrátit k řízení podle systému.
• Rozbití světlého motivu. Ve svém promptu výslovně napište, že světlý design má zůstat stejný.

Kontrolní seznam

• Všechny barvy pocházejí z tokenů motivu
• Ve výchozím stavu se řídí nastavením systému
• Volitelný přepínač Světlý, Tmavý a Systém, který si zapamatuje volbu
• Žádný bílý záblesk při načtení nebo obnovení
• Nastavený color-scheme, aby formulářové prvky a posuvníky odpovídaly
• Kontrast textu alespoň 4,5:1 v obou motivech
• Loga, obrázky, grafy a vložené prvky zkontrolované v tmavém režimu
• Světlý motiv beze změny
• Otestováno na počítači i na telefonu

Tmavý režim s Mythexem

Aplikace postavené na Mythexu používají ve výchozím nastavení Vite, React, TypeScript a Tailwind, takže přístup s Tailwindem výše platí přímo: vložte prompt pro kompletní nastavení do chatu, pak zkontrolujte náhled v obou motivech a na šířce telefonu. Doporučení Mythexu pro prompty k designu je pojmenovat, co změnit a co zachovat, a to je tady podstatné; napište, že světlý motiv má zůstat tak, jak je. Viz Design a UI prompty a pokud průchod něco rozbije, vraťte se ke kontrolnímu bodu.

Více o tom, jak dostat správný vzhled, najdete v článku jak navrhnout dobře vypadající aplikaci pomocí AI a jak psát prompty pro AI nástroje pro tvorbu aplikací.

Otázky