Så lägger du till mörkt läge i din webbplats eller app (utan blixten)

För att lägga till mörkt läge definierar du dina färger som namngivna tokens (bakgrund, text, yta, kant, accent) i stället för hårdkodade värden, ger varje token ett ljust och ett mörkt värde och växlar mellan dem med CSS-funktionen prefers-color-scheme så att webbplatsen följer besökarens systeminställning. Om du också vill ha en manuell växel, spara valet i webbläsaren och tillämpa det med ett litet inline-skript i sidans head så att det inte blinkar vitt vid laddning. Kontrollera sedan kontrasten, bilder och diagram i båda teman. I en AI-appbyggare kan en tydlig prompt göra det mesta av detta; kontrollen är där kvaliteten kommer ifrån.

Två ansatser

De flesta appar klarar sig bäst med den andra: respektera systemet som standard, låt folk åsidosätta det.

Börja med färgtokens

Mörkt läge är smärtsamt när färger är utspridda i koden som white, #333 och gray-100. Det är enkelt när varje färg kommer från en liten uppsättning namngivna tokens:

Varje komponent använder tokennamnen. Att byta tema innebär då att byta ut en uppsättning värden, inte att redigera varje komponent.

Tips för den mörka paletten:

• Undvik ren svart och ren vit för stora ytor; mycket mörkgrått och benvitt är lättare att läsa.
• Visa djup med ljusare ytor, inte skuggor — skuggor syns knappt mot mörka bakgrunder.
• Dämpa ljusa varumärkesfärger något; de kan glöda obehagligt mot mörka bakgrunder.
• Håll kontrasten läsbar. WCAG:s nivå AA kräver minst 4,5:1 kontrast för vanlig text. Dämpad grå text klarar ofta inte detta i mörka teman.

Med Tailwind CSS

Tailwind är standardstylingverktyget i många AI-byggda appar. Enligt Tailwinds dokumentation om mörkt läge använder varianten dark: som standard prefers-color-scheme, så klasser som bg-white dark:bg-gray-900 följer systeminställningen utan extra arbete.

För en manuell växel i Tailwind v4 visar dokumentationen hur man byter varianten till en klass på ett överordnat element:

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

Sedan lägger appen till eller tar bort klassen dark på rotelementet. Dokumentationen föreslår också ett inline-skript i head som tillämpar det sparade valet (eller systeminställningen) innan sidan ritas — vilket är exakt hur man undviker blixten.

Undvika den vita blixten

Blixten uppstår eftersom sidan ritas i ljust läge, sedan laddar JavaScript, läser det sparade valet och växlar till mörkt. Lösningen:

1. Lägg ett litet inline-skript i sidans head som läser det sparade temat och sätter klassen på rotelementet innan något renderas.
2. Ange CSS-egenskapen color-scheme för varje tema så att webbläsarritade delar (rullningslistor, formulärkontroller) matchar.
3. Ge sidan en tydlig bakgrundsfärg i båda teman.
4. Om appen renderas på servern, se till att servern och webbläsaren är överens om det initiala temat, annars kan sidan ritas om och fladdra.

Exempelprompter

En fullständig uppsättning:

Lägg till mörkt läge. Byt först ut hårdkodade färger mot temafärgtokens (bakgrund, yta, text, dämpad text, kant, accent) med ljusa och mörka värden. Standard är besökarens systeminställning. Lägg till en temaväxel i sidhuvudet med alternativen Ljust, Mörkt och System, spara valet i localStorage och tillämpa det med ett inline-skript i head så att det inte blinkar vitt vid laddning. Ange color-scheme för varje tema. Behåll den nuvarande ljusa designen exakt som den är.

Åtgärda resten:

Kontrollera varje sida i mörkt läge och åtgärda: text med låg kontrast (sikta på minst 4,5:1), hårdkodade vita bakgrunder, kanter som försvinner, diagram med mörk text på mörk bakgrund och logotyper som försvinner. Ändra inte det ljusa temat.

Bilder och diagram:

Använd en ljus version av logotypen i mörkt läge. Låt diagrammens axlar, rutnät och etiketter använda temafärgtokens. Ge skärmbilder en subtil kant i mörkt läge så att de inte smälter in i bakgrunden.

Steg för steg

1. Granska färger. Hitta hårdkodade färger och ersätt dem med tokens. Det här är det mesta av arbetet.
2. Definiera mörka värden för varje token.
3. Följ systemet med prefers-color-scheme (eller Tailwinds standard dark:).
4. Lägg till en växel om du vill ha en: Ljust, Mörkt, System. Spara valet i webbläsaren; för inloggade appar kan du också spara det i användarens profil.
5. Förhindra blixten med inline-skriptet i head och color-scheme.
6. Kontrollera de krångliga delarna: logotyper, ikoner, bilder med vita bakgrunder, diagram, kodblock, kartor, inbäddningar, e-post.
7. Testa båda teman på dator och telefon, med systemet inställt på ljust och på mörkt, och efter en hård omladdning.

Vanliga misstag

• Att invertera allt. Ett filter som inverterar färger förstör foton och varumärkesfärger.
• Hårdkodade färger som blivit kvar. Ett enda vitt kort på en mörk sida sticker ut direkt.
• Grå text med låg kontrast. Ser stilren ut, men klarar inte läsbarheten.
• Vit blixt vid laddning. Särskilt märkbart på telefoner på kvällen.
• Att glömma tredjepartsinbäddningar. Kartor, videor och widgets kan förbli ljusa; kontrollera om de har ett mörkt alternativ.
• Växel med bara två lägen. När någon klickat kan de inte gå tillbaka till att följa systemet.
• Att bryta det ljusa temat. Skriv uttryckligen i prompten att den ljusa designen ska vara kvar.

Checklista

• Alla färger kommer från temafärgtokens
• Följer systeminställningen som standard
• Valfri växel med Ljust, Mörkt och System, sparad
• Ingen vit blixt vid laddning eller omladdning
• color-scheme satt så att formulärkontroller och rullningslistor matchar
• Textkontrast minst 4,5:1 i båda teman
• Logotyper, bilder, diagram och inbäddningar kontrollerade i mörkt läge
• Ljust tema oförändrat
• Testad på dator och telefon

Mörkt läge med Mythex

Apper byggda på Mythex använder Vite, React, TypeScript och Tailwind som standard, så Tailwind-metoden ovan gäller direkt: klistra in den fullständiga uppsättningsprompten i chatten, och kontrollera sedan förhandsvisningen i båda teman och i telefonstorlek. Mythex råd för designprompter är att namnge vad som ska ändras och vad som ska behållas, vilket spelar roll här — skriv att det ljusa temat ska vara kvar som det är. Se Design- och UI-prompter, och gå tillbaka med en checkpoint om en omgång går fel.

Mer om hur du får rätt utseende finns i hur du designar en snygg app med AI och hur du skriver prompter för AI-appbyggare.

Frågor