𝗖𝗿𝗲́𝗮𝘁𝗶𝗼𝗻 𝗱𝘂 𝗠𝗼𝗱𝗲 𝗦𝗼𝗺𝗯𝗿𝗲 𝗱𝗮𝗻𝘀 𝗡𝗲𝘅𝘁.𝗷𝘀 𝘀𝗮𝗻𝘀 𝗳𝗹𝗮𝘀𝗵

Le mode sombre semble simple. Puis, vous voyez le flash.

Lorsqu'un utilisateur charge votre page, le serveur envoie le thème par défaut. L'utilisateur voit un écran blanc pendant une fraction de seconde avant que le thème sombre ne s'active. C'est une mauvaise expérience utilisateur.

Le problème vient du fait que le serveur ne peut pas lire le localStorage. Le serveur ne connaît le thème qu'une fois que le navigateur a exécuté votre JavaScript.

Voici comment le résoudre.

La solution : le script inline

Vous devez appliquer le thème avant que React ne démarre. Placez un petit script dans votre balise . Ce script lit la préférence et ajoute immédiatement la classe dark.

Utilisez ces étapes :

  • Ajoutez un script dans le de votre RootLayout pour vérifier le localStorage.
  • Utilisez suppressHydrationWarning sur votre balise . Cela empêche React de signaler un avertissement concernant le décalage de thème.
  • Utilisez un ThemeProvider pour gérer l'état et la synchronisation avec le localStorage.
  • Utilisez des variables CSS avec Tailwind pour des transitions de couleurs fluides.

Pourquoi cela fonctionne : Le script s'exécute avant le rendu de la page. Cela évite le saut visuel.

Gestion des images

Les images nécessitent souvent des versions différentes pour les modes clair et sombre. Vous avez deux choix :

  • Méthode CSS : Utilisez display: none et display: block pour alterner les images en fonction de la classe .dark. C'est la méthode la plus rapide.
  • Méthode Client : Utilisez un composant qui vérifie le thème et choisit la bonne source d'image.

Conseil d'expert pour le contenu côté serveur

Si vous avez besoin que le serveur connaisse le thème pour des graphiques ou du contenu lourd, utilisez des cookies au lieu du localStorage.

  • Stockez le thème dans un cookie.
  • Utilisez le middleware de Next.js pour lire ce cookie.
  • Passez le thème à votre layout via les headers.

Cela permet au serveur d'envoyer le HTML correct dès le départ.

Résumé pour un système sans flash : • Utilisez un script inline dans le • Utilisez suppressHydrationWarning • Gérez l'état avec un Context Provider • Écoutez les changements de préférence du système

Cette approche convient aux applications en production. Elle garantit un changement instantané et aucun flash.

Source: https://dev.to/aon_infotech_3a1b6ff525fc/building-a-dark-mode-system-in-nextjs-app-router-without-layout-flash-5gf9