Comment ajouter le mode sombre à votre site web ou application (sans l'éclair blanc)

Pour ajouter le mode sombre, définissez vos couleurs comme des jetons nommés (arrière-plan, texte, surface, bordure, accent) au lieu de valeurs codées en dur, donnez à chaque jeton une valeur claire et une valeur sombre, et basculez entre elles avec la fonctionnalité CSS prefers-color-scheme pour que le site suive le réglage du système du visiteur. Si vous voulez aussi un bouton manuel, enregistrez le choix dans le navigateur et appliquez-le avec un petit script intégré dans l'en-tête de la page pour éviter l'éclair blanc au chargement. Vérifiez ensuite le contraste, les images et les graphiques dans les deux thèmes. Dans un créateur d'applications IA, une seule consigne claire peut faire l'essentiel de ce travail; la vérification fait la différence de qualité.

Deux approches

La plupart des applications fonctionnent mieux avec la seconde approche : respecter le système par défaut, et laisser les gens le remplacer.

Commencer par les jetons de couleur

Le mode sombre est pénible quand les couleurs sont dispersées dans le code sous forme de white, #333 et gray-100. Il devient facile quand chaque couleur vient d'un petit ensemble de jetons nommés :

Chaque composant utilise les noms de jetons. Changer de thème revient alors à remplacer un seul ensemble de valeurs, et non à modifier chaque composant.

Conseils pour la palette sombre :

• Évitez le noir pur et le blanc pur pour les grandes surfaces; un gris très foncé et un blanc cassé sont plus faciles à lire.
• Montrez la profondeur avec des surfaces plus claires, et non avec des ombres, qui se voient à peine sur fond sombre.
• Désaturez légèrement les couleurs de marque vives; elles peuvent briller de façon désagréable sur fond sombre.
• Gardez un contraste lisible. Le niveau AA des WCAG exige un contraste d'au moins 4,5:1 pour le texte normal. Le texte gris atténué échoue souvent à ce critère dans les thèmes sombres.

Avec Tailwind CSS

Tailwind est l'outil de style par défaut de beaucoup d'applications créées avec l'IA. Selon la documentation de Tailwind sur le mode sombre, la variante dark: utilise prefers-color-scheme par défaut, donc des classes comme bg-white dark:bg-gray-900 suivent le réglage du système sans travail supplémentaire.

Pour un bouton manuel avec Tailwind v4, la documentation montre comment remplacer la variante par une classe sur un élément parent :

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

L'application ajoute ou retire ensuite la classe dark sur l'élément racine. La documentation suggère aussi un script intégré dans l'en-tête qui applique le choix enregistré (ou le réglage du système) avant l'affichage de la page, ce qui évite précisément l'éclair.

Éviter l'éclair blanc

L'éclair se produit parce que la page s'affiche en mode clair, puis JavaScript se charge, lit le choix enregistré et passe en mode sombre. La solution :

1. Placez un petit script intégré dans l'en-tête de la page qui lit le thème enregistré et applique la classe à l'élément racine avant tout affichage.
2. Définissez la propriété CSS color-scheme pour chaque thème afin que les éléments dessinés par le navigateur (barres de défilement, contrôles de formulaire) correspondent.
3. Donnez à la page une couleur d'arrière-plan explicite dans les deux thèmes.
4. Si l'application est rendue côté serveur, assurez-vous que le serveur et le navigateur s'entendent sur le thème initial, sinon la page peut se réafficher et scintiller.

Exemples de consignes

Une configuration complète :

Ajoute le mode sombre. D'abord, remplace les couleurs codées en dur par des jetons de thème (arrière-plan, surface, texte, texte atténué, bordure, accent) avec des valeurs claires et sombres. Par défaut, suis le réglage du système du visiteur. Ajoute un sélecteur de thème dans l'en-tête avec les options Clair, Sombre et Système, mémorise le choix dans localStorage, et applique-le avec un script intégré dans l'en-tête pour éviter l'éclair blanc au chargement. Définis color-scheme pour chaque thème. Garde le design clair actuel exactement tel quel.

Corriger ce qui reste :

Vérifie chaque page en mode sombre et corrige : le texte à faible contraste (vise au moins 4,5:1), les arrière-plans blancs codés en dur, les bordures qui disparaissent, les graphiques avec du texte sombre sur fond sombre, et les logos qui disparaissent. Ne modifie pas le thème clair.

Images et graphiques :

Utilise une version claire du logo en mode sombre. Fais en sorte que les axes, les lignes de quadrillage et les étiquettes des graphiques utilisent les jetons de thème. Donne aux captures d'écran une bordure discrète en mode sombre pour qu'elles ne se fondent pas dans l'arrière-plan.

Étape par étape

1. Auditez les couleurs. Trouvez les couleurs codées en dur et remplacez-les par des jetons. C'est l'essentiel du travail.
2. Définissez les valeurs sombres pour chaque jeton.
3. Suivez le système avec prefers-color-scheme (ou la valeur dark: par défaut de Tailwind).
4. Ajoutez un bouton si vous en voulez un : Clair, Sombre, Système. Enregistrez le choix dans le navigateur; pour les applications avec connexion, vous pouvez aussi l'enregistrer dans le profil de l'utilisateur.
5. Prévenez l'éclair avec le script d'en-tête et color-scheme.
6. Vérifiez les parties délicates : logos, icônes, images avec arrière-plan blanc, graphiques, blocs de code, cartes, intégrations, courriels.
7. Testez les deux thèmes sur ordinateur et sur téléphone, avec le système réglé en clair puis en sombre, et après un rechargement complet.

Erreurs courantes

• Tout inverser. Un filtre qui inverse les couleurs abîme les photos et les couleurs de marque.
• Des couleurs codées en dur oubliées. Une carte blanche dans une page sombre saute aux yeux immédiatement.
• Texte gris à faible contraste. Ça peut paraître élégant, mais la lisibilité échoue.
• L'éclair blanc au chargement. Particulièrement visible sur téléphone la nuit.
• Oublier les intégrations tierces. Cartes, vidéos et widgets peuvent rester clairs; vérifiez s'ils ont une option sombre.
• Un bouton à deux états seulement. Une fois qu'une personne a cliqué, elle ne peut plus revenir au réglage du système.
• Casser le thème clair. Dites explicitement dans votre consigne que le design clair doit rester le même.

Liste de vérification

• Toutes les couleurs viennent de jetons de thème
• Le site suit le réglage du système par défaut
• Un bouton facultatif avec Clair, Sombre et Système, mémorisé
• Aucun éclair blanc au chargement ou au rechargement
• color-scheme défini pour que les contrôles de formulaire et les barres de défilement correspondent
• Contraste du texte d'au moins 4,5:1 dans les deux thèmes
• Logos, images, graphiques et intégrations vérifiés en mode sombre
• Thème clair inchangé
• Testé sur ordinateur et sur téléphone

Le mode sombre avec Mythex

Les applications créées sur Mythex utilisent Vite, React, TypeScript et Tailwind par défaut; l'approche Tailwind ci-dessus s'applique donc directement : collez la consigne de configuration complète dans le clavardage, puis vérifiez l'aperçu dans les deux thèmes et à la taille d'un téléphone. Le conseil de Mythex pour les consignes de design est de nommer ce qui doit changer et ce qui doit rester, ce qui compte ici : dites que le thème clair doit rester tel quel. Consultez Consignes de design et d'interface, et revenez à un point de contrôle si une passe tourne mal.

Pour en savoir plus sur l'obtention du bon look, consultez comment concevoir une application esthétique avec l'IA et comment rédiger des consignes pour les créateurs d'applications IA.

Questions