𝗗𝗮𝗿𝗸 𝗠𝗼𝗱𝗲 𝗯𝘂𝗶𝗹𝗱𝗲𝗻 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀 𝘇𝗼𝗻𝗱𝗲 𝗱𝗲 𝗳𝗹𝗮𝘀𝗵
Dark mode lijkt simpel. Totdat je de flits ziet.
Wanneer een gebruiker je pagina laadt, stuurt de server het standaardthema. De gebruiker ziet een fractie van een seconde een wit scherm voordat het donkere thema wordt geactiveerd. Dit zorgt voor een slechte gebruikerservaring.
Het probleem ontstaat omdat de server geen toegang heeft tot localStorage. De server weet pas welk thema nodig is nadat de browser je JavaScript heeft uitgevoerd.
Zo los je het op.
De oplossing: Het inline script
Je moet het thema toepassen voordat React start. Plaats een klein script in je
-tag. Dit script leest de voorkeur uit en voegt direct de .dark-class toe.Gebruik deze stappen:
- Voeg een script toe aan de van je RootLayout om localStorage te controleren.
- Gebruik suppressHydrationWarning op je -tag. Dit voorkomt dat React klaagt over een mismatch in het thema.
- Gebruik een ThemeProvider om de state te beheren en te synchroniseren met localStorage.
- Gebruik CSS-variabelen met Tailwind voor vloeiende kleurovergangen.
Waarom dit werkt: Het script wordt uitgevoerd voordat de pagina wordt gerenderd. Dit voorkomt de visuele sprong.
Afbeeldingen afhandelen
Afbeeldingen hebben vaak verschillende versies nodig voor de lichte en donkere modus. Je hebt twee keuzes:
- CSS-methode: Gebruik display none en display block om afbeeldingen te wisselen op basis van de .dark-class. Dit is de snelste manier.
- Client-methode: Gebruik een component die het thema controleert en de juiste afbeeldingsbron kiest.
Pro-tip voor server-side content
Als de server het thema moet weten voor grafieken of zware content, gebruik dan cookies in plaats van localStorage.
- Sla het thema op in een cookie.
- Gebruik Next.js middleware om die cookie uit te lezen.
- Geef het thema door aan je layout via headers.
Hierdoor kan de server vanaf het begin de juiste HTML versturen.
Samenvatting voor een flitsvrij systeem: • Gebruik een inline script in de
• Gebruik suppressHydrationWarning • Beheer de state met een Context Provider • Luister naar wijzigingen in de systeemvoorkeurenDeze aanpak werkt voor productie-apps. Het zorgt voor directe wisseling en nul flitsen.