Le dark mode est attendu par défaut en 2026. Mais beaucoup le bâclent en inversant bêtement les couleurs — résultat : du texte qui éblouit, des ombres invisibles, des accents criards. Voici comment le concevoir vraiment.
Pourquoi pas un simple négatif
Inverser blanc et noir donne du texte blanc pur (#FFF) sur noir pur (#000) : le contraste est si violent qu'il crée un halo et fatigue l'œil. Le dark mode bien fait est plus subtil qu'une inversion — c'est une refonte de la hiérarchie lumineuse.
1. Pas de noir pur, pas de blanc pur
On utilise un near-black (ex. #0E0E0F) pour le fond et un blanc cassé / crème pour le texte. Plus doux, plus pro, moins fatigant. Le contraste reste suffisant (WCAG) sans agresser.
2. La hiérarchie par les surfaces
En light mode, on hiérarchise avec des ombres. En dark mode, les ombres ne se voient pas — on hiérarchise avec des niveaux de luminosité : plus une surface est "haute" (proche de l'utilisateur), plus elle est claire. Fond le plus sombre, cartes un peu plus claires, popovers encore plus.
3. Les couleurs d'accent désaturées
Une couleur vive qui marche sur fond clair devient souvent criarde sur fond sombre. On la désature légèrement et on ajuste sa luminosité pour qu'elle reste lisible sans vibrer. L'orange signature, par exemple, se tempère un peu.
4. Le contraste, encore plus critique
Le texte gris clair qui passait en light mode peut devenir illisible en dark. On revérifie chaque ratio (minimum 4,5:1 pour le texte). Le dark mode ne dispense pas de l'accessibilité, au contraire.
5. Les images et illustrations
Une illustration au fond blanc "flashe" en dark mode. Il faut des assets adaptés (fond transparent, versions dédiées) ou un léger voile. Les photos, elles, peuvent être très légèrement assombries pour ne pas éblouir.
L'approche qui rend tout simple : les tokens
Faire un dark mode à la main sur chaque composant est un cauchemar de maintenance. Avec des design tokens sémantiques, passer en dark mode revient à réassigner un jeu de tokens (surface, texte, bordure) — les composants suivent automatiquement. C'est LA bonne méthode.
Un bon dark mode ne se remarque pas. Il repose l'œil, garde la hiérarchie, et reste fidèle à la marque.
À ne pas oublier
Laisser le choix à l'utilisateur (light / dark / système), respecter sa préférence OS par défaut (prefers-color-scheme), et tester les deux modes aussi sérieusement l'un que l'autre. Un dark mode "bonus" mal testé fait plus de mal que pas de dark mode du tout.
Tu veux un produit qui gère le dark mode proprement, pas en bricolage ? C'est le genre de détail qu'on soigne — parlons-en.