Hogyan adj sötét módot a weboldaladhoz vagy appodhoz (fehér villanás nélkül)

Sötét mód hozzáadásához definiáld a színeidet elnevezett tokenekként (háttér, szöveg, felület, keret, kiemelés), ahelyett hogy beégetett értékeket használnál, adj minden tokenhez világos és sötét értéket, és a CSS prefers-color-scheme médiafunkcióval válts közöttük, hogy az oldal kövesse a látogató rendszerbeállítását. Ha kézi kapcsolót is szeretnél, a választást a böngészőben tárold, és egy apró inline szkripttel az oldal fejlécében alkalmazd, hogy betöltéskor ne legyen fehér villanás. Ezután ellenőrizd a kontrasztot, a képeket és a diagramokat mindkét témában. AI-alkalmazásépítőben egyetlen világos prompt is a legtöbbet elvégzi; a minőség az ellenőrzésen múlik.

Két megközelítés

A legtöbb app a másodikkal jár jól: alapértelmezetten tiszteli a rendszert, de az emberek felülírhatják.

Kezdd a színtokenekkel

A sötét mód fájdalmas, ha a színek szétszórva vannak a kódban white, #333 és gray-100 formában. Könnyű, ha minden szín egy kis halmaz elnevezett tokenből jön:

Minden komponens a tokenneveket használja. A témaváltás így egy értékkészlet cseréjét jelenti, nem minden komponens szerkesztését.

Tippek a sötét palettához:

• Kerüld a tiszta feketét és a tiszta fehéret nagy felületeken; a nagyon sötét szürke és a törtfehér könnyebben olvasható.
• Mélységet világosabb felületekkel mutass, ne árnyékokkal – az árnyékok alig látszanak sötét háttéren.
• Kissé tompítsd az élénk márkaszíneket; sötét háttéren kellemetlenül ragyoghatnak.
• Tartsd olvashatónak a kontrasztot. A WCAG AA szintje legalább 4,5:1 kontrasztot kér a normál szövegnél. A tompított szürke szöveg sötét témában gyakran nem felel meg ennek.

Tailwind CSS-sel

A Tailwind sok AI-val épített appban az alapértelmezett stílusozó eszköz. A Tailwind sötét mód dokumentációja szerint a dark: változat alapértelmezetten a prefers-color-scheme értéket használja, így az olyan osztályok, mint a bg-white dark:bg-gray-900, extra munka nélkül követik a rendszerbeállítást.

Kézi kapcsolóhoz Tailwind v4-ben a dokumentáció azt mutatja, hogyan lehet a változatot egy szülőelemen lévő osztályraz átállítani:

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

Ezután az app hozzáadja vagy eltávolítja a dark osztályt a gyökérelemen. A dokumentáció emellett javasol egy inline szkriptet a fejlécben, amely a mentett választást (vagy a rendszerbeállítást) alkalmazza, mielőtt az oldal kirajzolódik – pontosan így kerülhető el a villanás.

A fehér villanás elkerülése

A villanás azért történik, mert az oldal világos módban rajzolódik ki, majd a JavaScript betöltődik, beolvassa a mentett választást, és sötétre vált. A megoldás:

1. Tegyél egy apró inline szkriptet az oldal fejlécébe, amely beolvassa a mentett témát, és még mielőtt bármi megjelenne, beállítja az osztályt a gyökérelemen.
2. Állítsd be a color-scheme CSS-tulajdonságot minden témához, hogy a böngésző által rajzolt részek (görgetősávok, űrlapelemek) illeszkedjenek.
3. Adj az oldalnak egyértelmű háttérszínt mindkét témában.
4. Ha az app szerveroldalon renderelt, győződj meg róla, hogy a szerver és a böngésző ugyanazt a kezdeti témát látja, különben az oldal újrarenderelődhet és villoghat.

Példa promptok

Teljes beállítás:

Adj hozzá sötét módot. Először cseréld le a beégetett színeket tématokenekre (háttér, felület, szöveg, tompított szöveg, keret, kiemelés) világos és sötét értékekkel. Alapértelmezetten a látogató rendszerbeállítását kövesse. Adj egy témakapcsolót a fejlécbe Világos, Sötét és Rendszer opciókkal, a választást tárold localStorage-ban, és alkalmazd egy inline szkripttel a fejlécben, hogy betöltéskor ne legyen fehér villanás. Állíts be color-scheme értéket minden témához. A jelenlegi világos dizájn maradjon pontosan olyan, amilyen.

A maradék javítása:

Ellenőrizd minden oldalt sötét módban, és javítsd: a gyenge kontrasztú szöveget (cél legalább 4,5:1), a beégetett fehér háttereket, az eltűnő kereteket, a sötét szöveggel rendelkező diagramokat sötét háttéren, és az eltűnő logókat. Ne változtasd a világos témát.

Képek és diagramok:

Sötét módban használj a logónak világos változatot. A diagram tengelyei, rácsvonalai és címkéi témátokeneket használjanak. A képernyőképeknek sötét módban adj finom keretet, hogy ne olvadjanak bele a háttérbe.

Lépésről lépésre

1. Auditáld a színeket. Keresd meg a beégetett színeket, és cseréld tokenekre. Ez a munka nagy része.
2. Definiáld a sötét értékeket minden tokenhez.
3. Kövesd a rendszert a prefers-color-scheme-mel (vagy a Tailwind alapértelmezett dark: változatával).
4. Adj hozzá kapcsolót, ha szeretnél: Világos, Sötét, Rendszer. A választást tárold a böngészőben; bejelentkezett appoknál a felhasználói profilban is elmentheted.
5. Előzd meg a villanást a fejléc inline szkriptjével és a color-scheme-mel.
6. Ellenőrizd a bonyolult részeket: logók, ikonok, fehér hátterű képek, diagramok, kódblokkok, térképek, beágyazások, e-mailek.
7. Teszteld mindkét témát asztali gépen és telefonon, a rendszert világosra és sötétre állítva, illetve kemény frissítés után.

Gyakori hibák

• Minden invertálása. Egy színeket invertáló szűrő tönkreteszi a fotókat és a márkaszíneket.
• Beégetett színek maradnak. Egy fehér kártya a sötét oldalon azonnal feltűnik.
• Alacsony kontrasztú szürke szöveg. Stílusosnak tűnik, de nem olvasható.
• Fehér villanás betöltéskor. Különösen feltűnő telefonon éjszaka.
• Harmadik féltől származó beágyazások elfelejtése. Térképek, videók és widgetek világosak maradhatnak; nézd meg, van-e sötét opciójuk.
• Két állapotú kapcsoló. Ha valaki rákattint, nem tud visszatérni a rendszer követéséhez.
• A világos téma elrontása. Promptban mondd ki egyértelműen, hogy a világos dizájnnak meg kell maradnia.

Ellenőrzőlista

• Minden szín tématokenből jön
• Alapértelmezetten követi a rendszerbeállítást
• Opcionális kapcsoló Világos, Sötét és Rendszer opciókkal, megjegyezve
• Nincs fehér villanás betöltéskor vagy frissítéskor
• A color-scheme be van állítva, hogy az űrlapelemek és görgetősávok illeszkedjenek
• A szöveg kontrasztja legalább 4,5:1 mindkét témában
• Logók, képek, diagramok és beágyazások ellenőrizve sötét módban
• A világos téma változatlan
• Asztali gépen és telefonon tesztelve

Sötét mód a Mythexben

A Mythexen épített appok alapértelmezetten Vite, React, TypeScript és Tailwind eszközöket használnak, így a fenti Tailwind-megközelítés közvetlenül alkalmazható: illeszd be a teljes beállítás promptját a chatbe, majd ellenőrizd az Előnézetet mindkét témában és telefonméreten. A Mythex dizájnpromptolási tanácsa, hogy nevezd meg, mit kell változtatni és mit kell megtartani, ami itt fontos – mondd ki, hogy a világos témának változatlannak kell maradnia. Lásd: Dizájn és UI promptok, és ha egy kör rosszul sül el, állj vissza egy ellenőrzőponthoz.

A kinézet eltalálásáról további információ: hogyan tervezz jól kinéző appot AI-val és hogyan írj promptokat AI-alkalmazásépítőknek.

Kérdések