Donkere modus toevoegen aan uw website of app (zonder het witte flitsen)

Om donkere modus toe te voegen, definieert u uw kleuren als benoemde tokens (achtergrond, tekst, oppervlak, rand, accent) in plaats van vastgelegde waarden, geeft u elk token een lichte en een donkere waarde, en wisselt u daartussen met de CSS-mediafunctie prefers-color-scheme, zodat de site de systeeminstelling van de bezoeker volgt. Wilt u ook een handmatige schakelaar, sla de keuze dan op in de browser en pas die toe met een klein inline script in de head van de pagina, zodat er geen wit flitsen bij laden is. Controleer daarna contrast, afbeeldingen en grafieken in beide thema's. In een AI-app-builder doet één duidelijke prompt het meeste werk; de controle is waar de kwaliteit ontstaat.

Twee aanpakken

De meeste apps doen het best met de tweede: volg standaard het systeem, maar laat mensen het overschrijven.

Begin met kleurtokens

Donkere modus is pijnlijk werk als kleuren verspreid door de code staan als white, #333 en gray-100. Het is makkelijk als elke kleur uit een kleine set benoemde tokens komt:

Elke component gebruikt de tokennamen. Van thema wisselen betekent dan één set waarden vervangen, niet elk component aanpassen.

Tips voor het donkere palet:

• Vermijd puur zwart en puur wit voor grote vlakken; heel donkergrijs en gebroken wit zijn makkelijker te lezen.
• Toon diepte met lichtere oppervlakken, niet met schaduwen — schaduwen zijn op een donkere achtergrond nauwelijks zichtbaar.
• Dim felle merkkleuren iets; ze kunnen op een donkere achtergrond ongemakkelijk gaan gloeien.
• Houd het contrast leesbaar. Het AA-niveau van WCAG vraagt minimaal 4,5:1 contrast voor normale tekst. Gedempte grijze tekst haalt dat in donkere thema's vaak niet.

Met Tailwind CSS

Tailwind is in veel met AI gebouwde apps de standaard stylingtool. Volgens de documentatie van Tailwind over donkere modus gebruikt de variant dark: standaard prefers-color-scheme, zodat klassen als bg-white dark:bg-gray-900 het systeem volgen zonder extra werk.

Voor een handmatige schakelaar in Tailwind v4 laat de documentatie zien hoe u de variant omzet naar een klasse op een bovenliggend element:

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

Daarna voegt de app de klasse dark toe of verwijdert hem op het root-element. De documentatie raadt ook een inline script in de head aan dat de opgeslagen keuze (of de systeeminstelling) toepast voordat de pagina wordt getekend — precies zo voorkomt u het flitsen.

Het witte flitsen voorkomen

Het flitsen ontstaat doordat de pagina in lichte modus wordt getekend, daarna JavaScript laadt, de opgeslagen keuze leest en naar donker schakelt. De oplossing:

1. Zet een klein inline script in de pagina-head dat het opgeslagen thema leest en de klasse op het root-element instelt voordat er iets wordt getekend.
2. Stel de CSS-eigenschap color-scheme voor elk thema in, zodat door de browser getekende onderdelen (scrollbalken, formulierelementen) erbij passen.
3. Geef de pagina in beide thema's een expliciete achtergrondkleur.
4. Als de app server-side wordt gerenderd, zorg dan dat server en browser het beginthema eens zijn, anders kan de pagina opnieuw renderen en flikkeren.

Voorbeeldprompts

Een volledige opzet:

Voeg donkere modus toe. Vervang eerst vastgelegde kleuren door thematokens (achtergrond, oppervlak, tekst, gedempte tekst, rand, accent) met lichte en donkere waarden. Standaard wordt de systeeminstelling van de bezoeker gevolgd. Voeg een themaschakelaar in de header toe met de opties Licht, Donker en Systeem, sla de keuze op in localStorage, en pas die toe met een inline script in de head zodat er geen wit flitsen bij laden is. Stel color-scheme in voor elk thema. Behoud het huidige lichte ontwerp exact zoals het is.

Wat nog overblijft oplossen:

Controleer elke pagina in donkere modus en los op: tekst met laag contrast (streef naar minimaal 4,5:1), vastgelegde witte achtergronden, randen die verdwijnen, grafieken met donkere tekst op donkere achtergronden, en logo's die onzichtbaar worden. Verander het lichte thema niet.

Afbeeldingen en grafieken:

Gebruik een lichte versie van het logo in donkere modus. Laat de assen, rasterlijnen en labels van grafieken themetokens gebruiken. Geef screenshots in donkere modus een subtiele rand, zodat ze niet in de achtergrond opgaan.

Stap voor stap

1. Controleer de kleuren. Zoek vastgelegde kleuren en vervang ze door tokens. Dit is het grootste deel van het werk.
2. Definieer donkere waarden voor elk token.
3. Volg het systeem met prefers-color-scheme (of de standaard dark: van Tailwind).
4. Voeg een schakelaar toe als u die wilt: Licht, Donker, Systeem. Sla de keuze op in de browser; voor apps waarin mensen inloggen kunt u die ook in het profiel van de gebruiker opslaan.
5. Voorkom het flitsen met het inline head-script en color-scheme.
6. Controleer de lastige onderdelen: logo's, pictogrammen, afbeeldingen met witte achtergronden, grafieken, codeblokken, kaarten, embeds, e-mails.
7. Test beide thema's op desktop en telefoon, met het systeem op licht en op donker, en na een harde refresh.

Veelgemaakte fouten

• Alles omkeren. Een filter dat kleuren omkeert verpest foto's en merkkleuren.
• Vastgelegde kleuren vergeten. Eén witte kaart op een donkere pagina valt meteen op.
• Grijze tekst met laag contrast. Ziet er stijlvol uit, maar is slecht leesbaar.
• Wit flitsen bij laden. Vooral opvallend op telefoons 's avonds.
• Ingesloten content vergeten. Kaarten, video's en widgets kunnen licht blijven; kijk of ze een donkere optie hebben.
• Een schakelaar met alleen twee standen. Zodra iemand erop klikt, kan die niet meer terug naar het systeem volgen.
• Het lichte thema breken. Zeg in uw prompt uitdrukkelijk dat het lichte ontwerp moet blijven.

Checklist

• Alle kleuren komen uit themetokens
• Volgt standaard de systeeminstelling
• Optionele schakelaar met Licht, Donker en Systeem, onthouden
• Geen wit flitsen bij laden of verversen
• color-scheme ingesteld zodat formulierelementen en scrollbalken erbij passen
• Tekstcontrast minimaal 4,5:1 in beide thema's
• Logo's, afbeeldingen, grafieken en embeds gecontroleerd in donkere modus
• Lichte thema ongewijzigd
• Getest op desktop en telefoon

Donkere modus met Mythex

Apps die op Mythex zijn gebouwd, gebruiken standaard Vite, React, TypeScript en Tailwind, dus de Tailwind-aanpak hierboven geldt direct: plak de volledige-opzetprompt in de chat en controleer daarna Preview in beide thema's en op telefoonformaat. De ontwerpadviezen van Mythex zijn om te benoemen wat u wilt veranderen en wat u wilt behouden; dat is hier belangrijk — zeg dat het lichte thema moet blijven zoals het is. Zie Ontwerp- en UI-prompts, en draai terug naar een checkpoint als een ronde misgaat.

Voor meer over het goede uiterlijk krijgen, zie hoe u met AI een mooi ogende app ontwerpt en hoe u prompts schrijft voor AI-app-builders.

Veelgestelde vragen