Comment ajouter le mode sombre à votre site ou app (sans le flash blanc)

Pour ajouter le mode sombre, définissez vos couleurs sous forme de jetons nommés (fond, 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 les deux 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, afin d'éviter le flash blanc au chargement. Vérifiez ensuite le contraste, les images et les graphiques dans les deux thèmes. Dans un outil de création d'app par IA, un seul prompt clair peut faire l'essentiel de ce travail ; la vérification est ce qui garantit la qualité.

Deux approches

La plupart des apps s'en sortent mieux avec la seconde approche : respecter le système par défaut, tout en laissant les personnes le modifier.

Commencer par les jetons de couleur

Le mode sombre est pénible lorsque les couleurs sont éparpillées dans le code sous forme de white, #333 ou gray-100. Il devient simple lorsque chaque couleur provient d'un petit ensemble de jetons nommés :

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

Conseils pour la palette sombre :

• Évitez le noir pur et le blanc pur pour les grandes zones ; 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 — les ombres se voient à peine sur fond sombre.
• Désaturez légèrement les couleurs de marque vives ; elles peuvent briller de manière gênante sur fond sombre.
• Gardez un contraste lisible. Le niveau AA des WCAG demande au moins 4,5:1 de contraste pour un texte normal. Le texte gris atténué échoue souvent à ce seuil dans les thèmes sombres.

Avec Tailwind CSS

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

Pour un bouton manuel dans Tailwind v4, la documentation montre comment faire passer la variante sur une classe placée sur un élément parent :

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

L'app 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 système) avant l'affichage de la page — c'est exactement ce qui permet d'éviter le flash.

Éviter le flash blanc

Le flash survient parce que la page s'affiche d'abord 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 définit la classe sur l'élément racine avant tout rendu.
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 de fond explicite dans les deux thèmes.
4. Si l'app est rendue côté serveur, assurez-vous que le serveur et le navigateur s'accordent sur le thème initial, sinon la page peut être redessinée et scintiller.

Exemples de prompts

une configuration complète :

Ajoute le mode sombre. Remplace d'abord les couleurs codées en dur par des jetons de thème (fond, surface, texte, texte atténué, bordure, accent) avec des valeurs claires et sombres. Par défaut, suis le réglage 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 qu'il n'y ait pas de flash blanc au chargement. Définis color-scheme pour chaque thème. Garde exactement le design clair actuel.

Corriger ce qui reste :

Vérifie chaque page en mode sombre et corrige : le texte à faible contraste (vise au moins 4,5:1), les fonds 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 grilles 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 confondent pas avec le fond.

Étape par étape

1. Auditez les couleurs. Repérez 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 apps avec connexion, vous pouvez aussi le sauvegarder dans le profil de l'utilisateur.
5. Empêchez le flash avec le script d'en-tête et color-scheme.
6. Vérifiez les points délicats : logos, icônes, images à fond blanc, graphiques, blocs de code, cartes, intégrations, e-mails.
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 rafraîchissement complet.

Erreurs courantes

• Tout inverser. Un filtre qui inverse les couleurs abîme les photos et les couleurs de marque.
• Couleurs codées en dur oubliées. Une carte blanche sur une page sombre se remarque immédiatement.
• Texte gris à faible contraste. Esthétique, mais peu lisible.
• Flash 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 proposent une option sombre.
• Un bouton à deux états seulement. Une fois cliqué, l'utilisateur ne peut plus revenir à la valeur du système.
• Casser le thème clair. Indiquez explicitement dans votre prompt que le design clair doit rester identique.

Checklist

• Toutes les couleurs proviennent de jetons de thème
• Suit le réglage système par défaut
• Bouton optionnel avec Clair, Sombre et Système, mémorisé
• Aucun flash blanc au chargement ni au rafraîchissement
• 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 apps construites sur Mythex utilisent par défaut Vite, React, TypeScript et Tailwind, donc l'approche Tailwind décrite ci-dessus s'applique directement : collez le prompt de configuration complète dans le chat, puis vérifiez l'aperçu dans les deux thèmes et à la taille d'un téléphone. Le conseil de Mythex sur les prompts de design consiste à nommer ce qu'il faut changer et ce qu'il faut garder, ce qui compte ici : précisez que le thème clair doit rester tel quel. Voir Prompts design et interface, et revenez en arrière avec un point de restauration si une modification tourne mal.

Pour aller plus loin sur l'aspect visuel, consultez comment concevoir une app esthétique avec l'IA et comment écrire des prompts pour les outils de création d'app par IA.

Questions