Dark-varianten toepassen

Zodra je strategie voor de donkere modus is geconfigureerd, gebruik je het voorvoegsel dark: om alternatieve stijlen toe te passen in de donkere modus. Zie het als een voorwaarde: het hulpprogramma na dark: wordt alleen geactiveerd wanneer de donkere modus actief is. Je plaatst zowel de standaardversie als de donkere versie op hetzelfde element en Tailwind genereert de juiste CSS voor beide toestanden. Zo blijft alle stijllogica op één plek staan — in de HTML.

Achtergrondkleur is het meest fundamentele aandachtspunt voor een donkere modus. Schakel lichte oppervlakken zoals bg-white of bg-gray-50 om naar donkere oppervlakken zoals bg-gray-900 of bg-slate-800. Het kleurenpalet van Tailwind bevat tinten van 50 (lichtst) tot 950 (donkerst), zodat je nauwkeurig de gewenste toon voor elke modus kunt bepalen.

De tekstkleur moet in beide modi goed leesbaar blijven. In de lichte modus is donkere tekst op een lichte achtergrond gebruikelijk. Gebruik in de donkere modus lichtere tinten — doorgaans dark:text-gray-100 voor primaire tekst, dark:text-gray-300 voor secundaire tekst en dark:text-gray-400 voor gedempte tekst. Deze hiërarchie met drie niveaus helpt de visuele hiërarchie in de donkere modus net zo goed te behouden als in de lichte modus.

Randen vallen op donkere achtergronden vaak te sterk op als je hun standaardkleur behoudt. Gebruik dark:border-gray-700 of dark:border-gray-600 om randen subtiel te houden in de donkere modus. Voor decoratieve scheidingslijnen kun je nog donkerdere randen gebruiken, zoals dark:border-gray-800, om een zachte scheiding te creëren zonder visuele ruis.

Schaduwen werken anders in de donkere modus, omdat donkere achtergronden traditionele kaderschaduwen onzichtbaar maken. Gebruik de hulpprogramma's shadow-{color} van Tailwind om gekleurde schaduwen toe te voegen, of verminder eenvoudig de intensiteit van schaduwen in de donkere modus. Je kunt ook subtiele randen gebruiken in plaats van schaduwen om diepte op donkere oppervlakken te creëren — een veelgebruikt patroon in moderne donkere interfaces.

Knoppen en links hebben voor al hun statussen varianten voor de donkere modus nodig: standaard, hover, focus en actief. Combineer het voorvoegsel dark: met statusvarianten om elke interactie af te handelen. Denk eraan dat contrastverhoudingen in beide modi aan de WCAG-standaarden moeten voldoen — een helderblauwe knop die in de lichte modus werkt, heeft mogelijk een lichtere tint zoals dark:bg-blue-400 nodig om voldoende contrast met een donkere achtergrond te behouden.

SVG-pictogrammen die zijn gestileerd met de hulpprogramma's text-* van Tailwind (die de CSS-eigenschap currentColor aansturen) nemen donkere varianten automatisch over. Pas dark:text-gray-300 toe op de wrapper van een pictogram of rechtstreeks op het SVG-element. Voor ingevulde SVG-pictogrammen die fill-current of stroke-current gebruiken, werkt dezelfde aanpak, omdat beide de eigenschap color overnemen.

Ook plaatshouders van formulierinvoer hebben donkere varianten nodig. Gebruik de variant placeholder: samen met dark: om plaatshoudertekst in de donkere modus te stijlen. Ook invoerachtergronden, randen en tekst hebben elk hun eigen donkere tegenhanger nodig. Een consistente invoerstijl in de donkere modus gebruikt doorgaans een middelmatig donkere achtergrond met lichtere plaatshoudertekst en een subtiele rand.

Je kunt het voorvoegsel dark: combineren met de syntaxis voor transparantiemodifiers van Tailwind. Zo past dark:bg-white/10 in de donkere modus een witte achtergrond met 10% transparantie toe — een nuttige techniek om subtiele kaartoppervlakken met een glaseffect te maken. Deze samenstelbaarheid is een van de krachtigste functies van Tailwind voor het bouwen van geavanceerde donkere thema's.

Een veelgemaakte fout is alleen donkere achtergrondvarianten toepassen zonder de tekst- en randkleuren aan te passen — dit leidt tot combinaties van donker op donker of licht op licht. Werk altijd alle gerelateerde eigenschappen samen bij: achtergrond, tekst, rand en schaduw. Een andere valkuil is puur zwart (bg-black) als donker oppervlak gebruiken — dit zorgt voor een hard contrast. Geef de voorkeur aan donkergrijze tinten zoals bg-gray-900 of bg-slate-900 voor een zachter uiterlijk.

Bij gebruik van de klasse-strategie kun je de donkere modus tijdens de ontwikkeling testen door handmatig de klasse dark aan je element <html> toe te voegen. Met de ontwikkelaarstools van de browser kun je ook prefers-color-scheme: dark simuleren, ongeacht je strategie. Schrijf voor geautomatiseerd testen tests die de klasse dark schakelen en controleren of de juiste berekende stijlen op je belangrijkste elementen worden toegepast.

In deze les heb je geleerd dat het voorvoegsel dark: alternatieve stijlen toepast wanneer de donkere modus actief is, dat achtergronden, tekst, randen en schaduwen allemaal donkere varianten nodig hebben voor een goede visuele kwaliteit, en dat je dark: kunt combineren met statusvarianten en transparantiemodifiers voor nauwkeurige controle. Hierna bouwen we een JavaScript-schakelaar voor de donkere modus die thema's tijdens runtime wisselt.