Dark mode toevoegen aan een website (CSS, Tailwind, Next.js)
Dark mode toevoegen aan een website
Dark mode toevoegen: CSS, Tailwind en Next.js | We.Inc
Voeg dark mode toe met prefers-color-scheme, CSS-variabelen en light-dark(), een schakelaar voor Licht/Donker/Systeem, Tailwind v4 en next-themes, zonder flits bij het laden.
De eenvoudigste dark mode is pure CSS: declareer color-scheme: light dark, bewaar kleuren in custom properties en wissel ze binnen @media (prefers-color-scheme: dark). Voor een handmatige schakelaar zet u een class of data-attribuut op het html-element, slaat u de keuze op in localStorage en past u die toe met een klein inline script in de head, zodat het verkeerde thema nooit even oplicht.
Welke aanpak past bij uw stack
Stack
Volgt het besturingssysteem
Handmatige schakelaar
Kernonderdeel
Gewone CSS
Ja
Nee
@media (prefers-color-scheme: dark)
CSS + klein script
Ja
Ja
data-theme op html + inline script in de head
Tailwind CSS v4
Ja, standaard
Met @custom-variant
dark: utilities
Next.js App Router
Ja
Ja
next-themes ThemeProvider
Dark mode heeft drie bewegende delen: kleuren die kunnen wisselen, een manier om te bepalen welke set wordt gebruikt, en timing zodat de pagina de eerste keer meteen goed wordt getekend. Met de preview hieronder wisselt u op een voorbeeldlayout tussen licht, donker en systeem, en daarna geeft elke sectie de exacte code voor gewone CSS, Tailwind en Next.js.
Kies Licht, Donker of Systeem in de preview. Systeem volgt uw besturingssysteem en werkt live bij als u dat wijzigt.
Let op dat het formulierveld en de scrollbalk ook wisselen. Dat is de property color-scheme aan het werk.
Kies uw stack uit de voorbeelden hieronder en kopieer de code. Het script tegen flitsen komt inline in de head.
Test door in elke modus te herladen, en één keer met uw besturingssysteem op donker en niets opgeslagen.
Draai niet simpelweg puur zwart en puur wit om. Iets lichtere donkergrijze tinten met gebroken witte tekst lezen langer prettig.
Controleer het contrast opnieuw in beide thema's. Een merkblauw dat op wit voldoet, kan op een donkergrijze achtergrond tekortschieten.
Geef afbeeldingen en logo's een donkere variant of een transparante achtergrond, zodat er geen wit vlak oplicht op een donkere pagina.
Sla systeem op als het ontbreken van een opgeslagen waarde in plaats van als woord, zodat een latere wijziging in het besturingssysteem nog steeds wordt gevolgd.
Voeg <meta name="color-scheme" content="light dark"> toe zodat de browser een donker canvas tekent voordat uw CSS binnen is.
Veelgestelde vragen
Hoe voorkom ik de witte flits als de pagina in dark mode laadt?
Bepaal het thema vóór de eerste paint. Zet een klein blokkerend script bovenaan de head dat de opgeslagen keuze en de systeemvoorkeur leest en de class of het attribuut op het html-element zet. Scripts aan het einde van de body of in een frameworkcomponent draaien te laat.
Hoe werkt dark mode in Tailwind?
In Tailwind v4 gebruikt de variant dark: standaard prefers-color-scheme, dus dark:bg-gray-900 geldt wanneer het systeem donker is. Om het met een schakelaar aan te sturen, voegt u @custom-variant dark (&:where(.dark, .dark *)); toe aan uw CSS en zet u de class dark op het html-element.
Hoe voeg ik dark mode toe in Next.js?
De gangbare route is het package next-themes met MIT-licentie. Wikkel de app in de ThemeProvider binnen de root layout, voeg suppressHydrationWarning toe aan de html-tag en roep setTheme uit useTheme aan in een client component. Het voegt het script tegen flitsen voor u in.
Wat doet color-scheme?
Het vertelt de browser welke schema's uw pagina ondersteunt, zodat ingebouwde onderdelen zoals formulierelementen, scrollbalken en de pagina-achtergrond bijpassende kleuren gebruiken. color-scheme: light dark op de root is ook vereist om de functie light-dark() zijn tweede waarde te laten kiezen.
Moet dark mode het systeem volgen of een schakelaar hebben?
Allebei. Gebruik standaard de systeemvoorkeur, want mensen hebben die al gekozen, en bied een schakelaar met Licht, Donker en Systeem zodat een bezoeker hem alleen voor uw site kan overschrijven.
Bouw eerst het palet met variabelen
Geef kleuren een naam naar hun functie, niet naar hun uiterlijk: --bg, --surface, --text, --muted, --accent, --border. Componenten gebruiken alleen die namen. Van thema wisselen betekent dan een handvol variabelen op één plek opnieuw definiëren.
De functie light-dark() maakt dit nog korter door beide waarden in één declaratie te houden. MDN vermeldt hem als Baseline 2024, dus houd een fallback aan voor oudere browsers als uw publiek die nodig heeft.
De schakelaar toegankelijk maken
Een schakelaar is een echte knop met een duidelijke naam. Gebruik voor een schakelaar met twee standen aria-pressed; voor drie keuzes is een kleine groep radioknoppen of een select duidelijker dan een icoon dat rondloopt.
Kondig niets extra's aan. De zichtbare verandering is de feedback, en de eigen status van het bedieningselement vertelt gebruikers van een schermlezer wat er geselecteerd is.
Server rendering en hydration
Een server kan bij het eerste verzoek het thema van een bezoeker niet kennen, dus gerenderde HTML kan geen themaspecifieke tekst bevatten zoals Schakel naar licht. Render het label van de schakelaar pas nadat de component is gemount, of render iets neutraals.
Daarom vraagt next-themes ook om suppressHydrationWarning op html: het script wijzigt daar een attribuut voordat React hydrateert.
1. Pure CSS die het systeem volgt
Variabelen gewisseld via prefers-color-scheme
Het resultaatkader volgt de instelling van uw apparaat. Zet uw systeem op donker en het werkt bij zonder herladen.
Hetzelfde idee met light-dark()
Eén declaratie per kleur. Het vereist color-scheme op de root, en MDN vermeldt het als Baseline 2024.
2. Een schakelaar voor Licht, Donker en Systeem zonder flits
Inline script bovenaan de head
Draait voordat de body wordt getekend. Als er niets is opgeslagen, doet het niets, zodat de media query het systeem blijft volgen.
CSS die zowel het attribuut als het systeem respecteert
Het attribuut wint als het aanwezig is. Zonder attribuut beslist de media query.
De schakelaar zelf
Een select met drie opties. Systeem kiezen verwijdert de opgeslagen waarde.
3. Tailwind CSS v4
dark: utilities met een class-schakelaar
Zonder de regel @custom-variant volgt dark: prefers-color-scheme. Met die regel bepaalt de class dark op html het thema.
4. Next.js App Router met next-themes
Root layout en een client provider
ThemeProvider is een client component en staat dus in een eigen bestand. attribute="class" koppelt hem aan de Tailwind-class dark.
Schakelaar die wacht tot hij gemount is
De server kent het thema niet, dus het bedieningselement rendert na het mounten om een hydration mismatch te voorkomen.
Themapreview
Wissel tussen Licht, Donker en Systeem om een voorbeeldlayout te zien veranderen, inclusief de formulierelementen.