Slik legger du til mørk modus på nettsiden eller i appen din (uten blink)

For å legge til mørk modus definerer du fargene dine som navngitte tokens (bakgrunn, tekst, flate, kant, aksent) i stedet for hardkodede verdier. Gi hver token en lys og en mørk verdi, og bytt mellom dem med CSS-egenskapen prefers-color-scheme, slik at nettstedet følger besøkendes systeminnstilling. Vil du også ha en manuell bryter, lagrer du valget i nettleseren og bruker det med et lite inline-skript i sidehodet, slik at det ikke blinker hvitt ved lasting. Kontroller deretter kontrast, bilder og diagrammer i begge temaene. I et AI-verktøy for app-bygging kan én tydelig prompt gjøre mesteparten av dette. Kontrollen er der kvaliteten kommer fra.

To tilnærminger

De fleste apper er best tjent med den andre: respekter systemet som standard, og la folk overstyre det.

Start med fargetokens

Mørk modus er smertefullt når farger er spredt rundt i koden som white, #333 og gray-100. Det er enkelt når alle farger kommer fra et lite sett navngitte tokens:

Hver komponent bruker tokennavnene. Å bytte tema betyr da å bytte ett sett verdier, ikke redigere hver komponent.

Tips for den mørke paletten:

• Unngå ren svart og ren hvit på store flater. Svært mørkegrå og off-white er lettere å lese.
• Vis dybde med lysere flater, ikke skygger. Skygger synes knapt på mørk bakgrunn.
• Demp lyse merkefarger litt. De kan gløde ubehagelig på mørk bakgrunn.
• Hold kontrasten lesbar. WCAGs AA-nivå krever minst 4,5:1 kontrast for vanlig tekst. Dempet grå tekst feiler ofte dette i mørke temaer.

Med Tailwind CSS

Tailwind er standard styringsverktøy i mange AI-bygde apper. Ifølge Tailwinds dokumentasjon for mørk modus bruker dark:-varianten prefers-color-scheme som standard, så klasser som bg-white dark:bg-gray-900 følger systeminnstillingen uten ekstra arbeid.

For en manuell bryter i Tailwind v4 viser dokumentasjonen at varianten byttes til en klasse på et overordnet element:

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

Appen legger så til eller fjerner klassen dark på rotelementet. Dokumentasjonen foreslår også et inline-skript i sidehodet som bruker det lagrede valget (eller systeminnstillingen) før siden tegnes. Nettopp slik unngår du blinket.

Unngå det hvite blinket

Blinket oppstår fordi siden tegnes i lys modus, deretter laster JavaScript, leser det lagrede valget og bytter til mørk. Løsningen:

1. Legg et lite inline-skript i sidehodet som leser det lagrede temaet og setter klassen på rotelementet før noe tegnes.
2. Sett CSS-egenskapen color-scheme for hvert tema, slik at nettleserens egne deler (rullefelt, skjemakontroller) samsvarer.
3. Gi siden en eksplisitt bakgrunnsfarge i begge temaene.
4. Hvis appen rendres på serveren, sørg for at server og nettleser er enige om starttemaet. Ellers kan siden tegnes på nytt og flimre.

Eksempelprompter

Et fullstendig oppsett:

Legg til mørk modus. Erstatt først hardkodede farger med fargetokens (bakgrunn, flate, tekst, dempet tekst, kant, aksent) med lys og mørk verdi. Følg besøkendes systeminnstilling som standard. Legg til en temabryter i headeren med alternativene Lys, Mørk og System, husk valget i localStorage, og bruk det med et inline-skript i head slik at det ikke blinker hvitt ved lasting. Sett color-scheme for hvert tema. Behold dagens lyse design akkurat slik det er.

Fikse det som gjenstår:

Sjekk hver side i mørk modus og fiks: tekst med lav kontrast (sikt på minst 4,5:1), hardkodede hvite bakgrunner, kanter som forsvinner, diagrammer med mørk tekst på mørk bakgrunn og logoer som blir borte. Ikke endre det lyse temaet.

Bilder og diagrammer:

Bruk en lys versjon av logoen i mørk modus. Gjør aksene, rutenettlinjene og etikettene i diagrammene avhengige av tematokens. Gi skjermbilder en subtil kant i mørk modus, slik at de ikke smelter sammen med bakgrunnen.

Steg for steg

1. Revider farger. Finn hardkodede farger og erstatt dem med tokens. Dette er mesteparten av arbeidet.
2. Definer mørke verdier for hver token.
3. Følg systemet med prefers-color-scheme (eller Tailwinds standard dark:).
4. Legg til en bryter hvis du vil ha en: Lys, Mørk, System. Lagre valget i nettleseren. For innloggede apper kan du også lagre det i brukerprofilen.
5. Forhindre blinket med inline-skriptet i head og color-scheme.
6. Sjekk de vanskelige delene: logoer, ikoner, bilder med hvite bakgrunner, diagrammer, kodeblokker, kart, innbygginger og e-poster.
7. Test begge temaene på desktop og telefon, med systemet satt til lys og til mørk, og etter en hard oppfriskning.

Vanlige feil

• Å invertere alt. Et filter som inverterer farger ødelegger bilder og merkefarger.
• Hardkodede farger igjen. Ett hvitt kort på en mørk side skiller seg ut med en gang.
• Grå tekst med lav kontrast. Ser stilig ut, men feiler lesbarhet.
• Hvitt blink ved lasting. Særlig merkbart på telefoner om natten.
• Å glemme tredjepartsinnbygginger. Kart, videoer og widgeter kan forbli lyse. Sjekk om de har et mørkt alternativ.
• Bryter med bare to tilstander. Når noen klikker den, kan de ikke gå tilbake til å følge systemet.
• Å ødelegge det lyse temaet. Si eksplisitt i prompten at det lyse designet skal være uendret.

Sjekkliste

• Alle farger kommer fra tematokens
• Følger systeminnstillingen som standard
• Valgfri bryter med Lys, Mørk og System, husket
• Ingen hvitt blink ved lasting eller oppfriskning
• color-scheme satt slik at skjemakontroller og rullefelt samsvarer
• Tekstkontrast minst 4,5:1 i begge temaene
• Logoer, bilder, diagrammer og innbygginger sjekket i mørk modus
• Lyst tema uendret
• Testet på desktop og telefon

Mørk modus med Mythex

Apper bygget på Mythex bruker Vite, React, TypeScript og Tailwind som standard, så Tailwind-tilnærmingen over gjelder direkte. Lim inn prompten for fullstendig oppsett i chatten, og sjekk Preview i begge temaene og i telefonstørrelse. Mythex' råd om design-prompting er å nevne hva som skal endres og hva som skal beholdes, og det er viktig her: si at det lyse temaet må være som det er. Se Design og UI-prompter, og gå tilbake med et sjekkpunkt hvis et pass går galt.

For mer om å få utseendet riktig, se hvordan designe en flott app med AI og hvordan skrive prompter til AI-app-byggere.

Spørsmål