Ako pridať tmavý režim na web alebo do aplikácie (bez bieleho záblesku)

Tmavý režim pridáte tak, že definujete farby ako pomenované tokeny (pozadie, text, plocha, ohraničenie, akcent) namiesto pevne zadaných hodnôt, každému tokenu dáte svetlú a tmavú hodnotu a prepínate medzi nimi pomocou CSS médiálnej vlastnosti prefers-color-scheme, takže web nasleduje systémové nastavenie návštevníka. Ak chcete aj ručný prepínač, uložte voľbu v prehliadači a aplikujte ju malým inline skriptom v hlavičke stránky, aby nebolo pri načítaní vidieť biely záblesk. Potom skontrolujte kontrast, obrázky a grafy v oboch témach. V nástroji na tvorbu aplikácií stačí na väčšinu tohto jeden jasný prompt; kvalita je v kontrole.

Dva prístupy

Väčšina aplikácií najlepšie funguje s druhým prístupom: rešpektovať systém predvolene, no umožniť ľuďom nastavenie prepísať.

Začnite s farebnými tokenmi

Tmavý režim je bolestivý, keď sú farby rozhádzané po kóde ako white, #333 a gray-100. Je jednoduchý, keď každá farba pochádza z malej sady pomenovaných tokenov:

Každý komponent používa názvy tokenov. Prepnutie témy potom znamená vymenenie jednej sady hodnôt, nie úpravu každého komponentu.

Tipy pre tmavú paletu:

• Vyhnite sa čistej čiernej a čistej bielej na veľkých plochách; veľmi tmavošedá a takmer biela sa čítajú ľahšie.
• Hĺbku ukazujte svetlejšími plochami, nie tieňmi — tiene na tmavom pozadí takmer nevidno.
• Mierne zníženo sýtosť jasných farieb značky; na tmavom pozadí môžu nepríjemne žiariť.
• Udržte čitateľný kontrast. Úroveň WCAG AA vyžaduje aspoň 4,5:1 pre bežný text. Tlmený šedý text v tmavých témach často tento limit nesplní.

S Tailwind CSS

Tailwind je v mnohých aplikáciách vytvorených s AI predvoleným nástrojom na štýlovanie. Podľa dokumentácie Tailwindu k tmavému režimu variant dark: predvolene používa prefers-color-scheme, takže triedy ako bg-white dark:bg-gray-900 nasledujú systémové nastavenie bez ďalšej práce.

Pre ručný prepínač v Tailwinde v4 dokumentácia ukazuje prepnutie variantu na triedu na rodičovskom elemente:

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

Potom aplikácia pridá alebo odstráni triedu dark na koreňovom elemente. Dokumentácia tiež odporúča inline skript v hlavičke, ktorý aplikuje uloženú voľbu (alebo nastavenie systému) predtým, než sa stránka vykreslí — presne tak sa vyhnete záblesku.

Ako sa vyhnúť bielemu záblesku

Záblesk nastáva preto, že sa stránka vykreslí vo svetlom režime, potom sa načíta JavaScript, prečíta uloženú voľbu a prepne sa na tmavý režim. Riešenie:

1. Vložte malý inline skript do hlavičky stránky, ktorý prečíta uloženú tému a nastaví triedu na koreňovom elemente skôr, než sa čokoľvek vykreslí.
2. Nastavte CSS vlastnosť color-scheme pre každú tému, aby sa prvky kreslené prehliadačom (posuvníky, formulárové prvky) zhodovali.
3. Dajte stránke explicitnú farbu pozadia v oboch témach.
4. Ak je aplikácia renderovaná na serveri, zabezpečte, aby server a prehliadač súhlasili s počiatočnou témou, inak sa stránka môže znova vykresliť a blikať.

Príklady promptov

Kompletné nastavenie:

Pridaj tmavý režim. Najprv nahraď pevne zadané farby témovými tokenmi (pozadie, plocha, text, tlmený text, ohraničenie, akcent) so svetlými a tmavými hodnotami. Predvolene nasleduj systémové nastavenie návštevníka. V hlavičke pridaj prepínač témy s možnosťami Svetlý, Tmavý a Systém, voľbu zapamätaj v localStorage a aplikuj ju inline skriptom v hlavičke, aby nebolo vidieť biely záblesk pri načítaní. Nastav color-scheme pre každú tému. Zachovaj súčasný svetlý dizajn presne tak, ako je.

Doladenie zvyšku:

Skontroluj každú stránku v tmavom režime a oprav: text s nízkym kontrastom (cieľ aspoň 4,5:1), natvrdo zadané biele pozadia, ohraničenia, ktoré miznú, grafy s tmavým textom na tmavom pozadí a logá, ktoré zmiznú. Svetlú tému nemeň.

Obrázky a grafy:

V tmavom režime použi svetlú verziu loga. Osi grafu, mriežky a popisky nech používajú témové tokeny. Obrazovkám daj v tmavom režime jemné ohraničenie, aby sa nezlievali s pozadím.

Krok za krokom

1. Auditujte farby. Nájdite natvrdo zadané farby a nahraďte ich tokenmi. Toto je väčšina práce.
2. Definujte tmavé hodnoty pre každý token.
3. Nasledujte systém pomocou prefers-color-scheme (alebo predvoleného dark: v Tailwinde).
4. Pridajte prepínač, ak ho chcete: Svetlý, Tmavý, Systém. Voľbu uložte v prehliadači; pri aplikáciách s prihlásením ju môžete uložiť aj do profilu používateľa.
5. Zabráňte blikaniu inline skriptom v hlavičke a color-scheme.
6. Skontrolujte problematické časti: logá, ikony, obrázky s bielym pozadím, grafy, bloky kódu, mapy, vložené prvky, e-maily.
7. Otestujte obe témy na počítači aj na telefóne, so systémom nastaveným na svetlý aj na tmavý režim, a po tvrdom obnovení stránky.

Bežné chyby

• Invertovať všetko. Filter, ktorý invertuje farby, pokazí fotografie aj farby značky.
• Zostané natvrdo zadané farby. Jedna biela karta na tmavej stránke okamžite vyniká.
• Šedý text s nízkym kontrastom. Vyzerá štýlovo, no zle sa číta.
• Biely záblesk pri načítaní. Obzvlášť viditeľný na telefónoch v noci.
• Zabudnuté vložené prvky tretích strán. Mapy, videá a widgety môžu zostať svetlé; skontrolujte, či majú tmavú možnosť.
• Prepínač iba s dvoma stavmi. Keď na neho niekto klikne, nemôže sa vrátiť k nasledovaniu systému.
• Pokazenie svetlej témy. Vo svojom prompte výslovne povedzte, že svetlý dizajn má zostať rovnaký.

Kontrolný zoznam

• Všetky farby pochádzajú z témových tokenov
• Predvolene sa nasleduje nastavenie systému
• Voliteľný prepínač so možnosťami Svetlý, Tmavý a Systém, zapamätaný
• Žiadny biely záblesk pri načítaní alebo obnovení
• color-scheme nastavené, aby formulárové prvky a posuvníky zodpovedali
• Kontrast textu aspoň 4,5:1 v oboch témach
• Logá, obrázky, grafy a vložené prvky skontrolované v tmavom režime
• Svetlá téma nezmenená
• Otestované na počítači a na telefóne

Tmavý režim s Mythexom

Aplikácie postavené na Mythexe predvolene používajú Vite, React, TypeScript a Tailwind, takže prístup s Tailwindom vyššie sa priamo uplatní: vložte prompt pre kompletné nastavenie do chatu a potom skontrolujte Náhľad v oboch témach a na veľkosti telefónu. Mythex odporúča pri návrhu dizajnu pomenovať, čo meniť a čo zachovať, a to je tu dôležité — povedzte, že svetlá téma má zostať taká, aká je. Pozrite si Prompty pre dizajn a UI a ak sa niektorý prechod pokazí, vráťte sa na checkpoint.

Viac o tom, ako dostať správny vzhľad, nájdete v ako navrhnúť pekne vyzerajúcu aplikáciu s AI a ako písať prompty pre nástroje na tvorbu aplikácií s AI.

Otázky