Sådan tilføjer du mørk tilstand til din hjemmeside eller app (uden blink)

For at tilføje mørk tilstand definerer du dine farver som navngivne tokens (baggrund, tekst, overflade, kant, accent) i stedet for hårdkodede værdier, giver hvert token en lys og en mørk værdi, og skifter mellem dem med CSS-mediefunktionen prefers-color-scheme, så siden følger den besøgendes systemindstilling. Hvis du også vil have en manuel skifter, gemmer du valget i browseren og anvender det med et lille inline-script i sidens head, så der ikke kommer et hvidt blink ved indlæsning. Kontrollér derefter kontrast, billeder og diagrammer i begge temaer. I et AI-værktøj til apps kan én klar prompt gøre det meste af arbejdet; kontrollen er der, kvaliteten kommer fra.

To tilgange

De fleste apps klarer sig bedst med den anden: respektér systemet som standard, og lad folk tilsidesætte det.

Start med farvetokens

Mørk tilstand er smertefuld, når farver er spredt rundt i koden som white, #333 og gray-100. Den er let, når hver farve kommer fra et lille sæt navngivne tokens:

Hver komponent bruger tokennavnene. At skifte tema betyder så at udskifte ét sæt værdier, ikke at redigere hver komponent.

Tips til den mørke palette:

• Undgå ren sort og ren hvid på store flader; meget mørk grå og off-white er lettere at læse.
• Vis dybde med lysere overflader, ikke skygger — skygger ses knapt på mørke baggrunde.
• Afdæmp lyse brandfarver lidt; de kan gløde ubehageligt på mørke baggrunde.
• Hold kontrasten læsbar. WCAG's AA-niveau kræver mindst 4,5:1 kontrast for normal tekst. Dæmpet grå tekst fejler ofte dette i mørke temaer.

Med Tailwind CSS

Tailwind er standardværktøjet til styling i mange AI-byggede apps. Ifølge Tailwinds dokumentation om mørk tilstand bruger dark:-varianten prefers-color-scheme som standard, så klasser som bg-white dark:bg-gray-900 følger systemindstillingen uden ekstra arbejde.

Til en manuel skifter i Tailwind v4 viser dokumentationen, at varianten skiftes til en klasse på et overordnet element:

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

Derefter tilføjer eller fjerner appen klassen dark på rodelementet. Dokumentationen foreslår også et inline-script i head, der anvender det gemte valg (eller systemindstillingen), før siden tegnes — netop sådan undgår du blinket.

Undgå det hvide blink

Blinket opstår, fordi siden tegnes i lys tilstand, derefter indlæses JavaScript, læser det gemte valg og skifter til mørk. Løsningen:

1. Læg et lille inline-script i sidens head, der læser det gemte tema og sætter klassen på rodelementet, før noget tegnes.
2. Sæt CSS-egenskaben color-scheme for hvert tema, så browserens egne dele (rullepaneler, formularelementer) matcher.
3. Giv siden en eksplicit baggrundsfarve i begge temaer.
4. Hvis appen er server-renderet, så sørg for, at serveren og browseren er enige om det første tema, ellers kan siden tegnes om og flimre.

Eksempler på prompts

En fuld opsætning:

Tilføj mørk tilstand. Erstat først hårdkodede farver med temafarvetokens (baggrund, overflade, tekst, dæmpet tekst, kant, accent) med lyse og mørke værdier. Standard er den besøgendes systemindstilling. Tilføj en temaskifter i headeren med valgene Lys, Mørk og System, husk valget i localStorage, og anvend det med et inline-script i head, så der ikke er noget hvidt blink ved indlæsning. Sæt color-scheme for hvert tema. Behold det nuværende lyse design præcis, som det er.

Retning af det der er tilbage:

Tjek hver side i mørk tilstand, og ret: tekst med lav kontrast (sigt efter mindst 4,5:1), hårdkodede hvide baggrunde, kanter der forsvinder, diagrammer med mørk tekst på mørke baggrunde, og logoer der forsvinder. Ændr ikke det lyse tema.

Billeder og diagrammer:

Brug en lys version af logoet i mørk tilstand. Lad diagrammets akser, gitterlinjer og etiketter bruge temafarvetokens. Giv skærmbilleder en diskret kant i mørk tilstand, så de ikke smelter sammen med baggrunden.

Trin for trin

1. Revider farver. Find hårdkodede farver og erstat dem med tokens. Det er det meste af arbejdet.
2. Definér mørke værdier for hvert token.
3. Følg systemet med prefers-color-scheme (eller Tailwinds standard dark:).
4. Tilføj en skifter, hvis du vil have en: Lys, Mørk, System. Gem valget i browseren; for indloggede apps kan du også gemme det i brugerens profil.
5. Forebyg blinket med head-inline-scriptet og color-scheme.
6. Tjek de svære dele: logoer, ikoner, billeder med hvide baggrunde, diagrammer, kodeblokke, kort, indlejringer, e-mails.
7. Test begge temaer på desktop og telefon, med systemet sat til lys og til mørk, og efter en hård genindlæsning.

Almindelige fejl

• At vende alt om. Et filter, der inverterer farver, ødelægger fotos og brandfarver.
• Hårdkodede farver tilbage. Ét hvidt kort på en mørk side springer straks i øjnene.
• Grå tekst med lav kontrast. Ser stilfuld ud, men fejler læsbarhed.
• Hvidt blink ved indlæsning. Især mærkbart på telefoner om natten.
• At glemme tredjeparts-indlejringer. Kort, videoer og widgets kan forblive lyse; tjek, om de har en mørk mulighed.
• Skifter med kun to tilstande. Når nogen klikker, kan de ikke gå tilbage til at følge systemet.
• At ødelægge det lyse tema. Skriv eksplicit i din prompt, at det lyse design skal forblive det samme.

Tjekliste

• Alle farver kommer fra temafarvetokens
• Følger systemindstillingen som standard
• Valgfri skifter med Lys, Mørk og System, husket
• Intet hvidt blink ved indlæsning eller genindlæsning
• color-scheme sat, så formularelementer og rullepaneler matcher
• Tekstkontrast mindst 4,5:1 i begge temaer
• Logoer, billeder, diagrammer og indlejringer tjekket i mørk tilstand
• Lyst tema uændret
• Testet på desktop og telefon

Mørk tilstand med Mythex

Apps bygget på Mythex bruger som standard Vite, React, TypeScript og Tailwind, så Tailwind-tilgangen ovenfor gælder direkte: indsæt den fulde opsætningsprompt i chatten, og tjek derefter Preview i begge temaer og i telefonstørrelse. Mythex' vejledning til design-prompts er at nævne, hvad der skal ændres, og hvad der skal bevares — det betyder noget her; sig at det lyse tema skal være, som det er. Se Design- og UI-prompts, og rul tilbage med et checkpoint, hvis et forsøg går galt.

For mere om at få udseendet rigtigt, se sådan designer du en flot app med AI og sådan skriver du prompts til AI-appbyggere.

Spørgsmål