Dark mode : au-delà de l’inversion des couleurs
Le dark mode est passé de préférence de développeurs à fonctionnalité attendue par tous. Bien conçu, il réduit la fatigue oculaire, économise la batterie sur OLED, et peut être plus esthétique. Chez Eve Media, nous concevons des interfaces qui brillent dans les deux modes.
Pas juste une inversion
Inverser les couleurs produit un résultat criard et illisible. Le dark mode demande une palette pensée spécifiquement. Les surfaces, les textes, les accents doivent être choisis pour l’obscurité.
Hiérarchie des surfaces
En dark mode, l’élévation s’exprime par la clarté, pas l’ombre. Les éléments plus élevés (cards, modals) sont légèrement plus clairs. Material Design recommande d’éclaircir de 5-16% selon l’élévation.
Le bon noir
Le noir pur (#000000) sur écran est trop contrasté et fatiguant. Préférez des gris très foncés (#121212, #1a1a1a). Ce léger adoucissement améliore considérablement le confort visuel.
Contraste du texte
Le blanc pur sur fond sombre éblouit. Réduisez l’opacité du texte : 87% pour le texte principal, 60% pour le secondaire. Les standards WCAG s’appliquent toujours : minimum 4.5:1 pour le texte normal.
Couleurs d’accent
Les couleurs vives du light mode peuvent être trop saturées en dark mode. Désaturez légèrement vos couleurs d’accent. Les teintes pastel fonctionnent souvent mieux sur fond sombre.
Images et illustrations
Les images à fond blanc créent des « trous » lumineux. Prévoyez des versions dark de vos illustrations. Les images avec transparence s’adaptent automatiquement. Les photos sont généralement ok telles quelles.
Implémentation CSS
prefers-color-scheme media query détecte la préférence système. Les CSS custom properties (variables) facilitent le switch entre palettes. Combinez avec un toggle manuel pour le contrôle utilisateur.
Tailwind et frameworks
Tailwind CSS a un support dark mode intégré avec le préfixe dark:. Les composants librairies (shadcn/ui, Radix) supportent le theming. next-themes gère le dark mode élégamment en Next.js.
Persistance du choix
Sauvegardez le choix de l’utilisateur (localStorage, cookie). Respectez la préférence système par défaut. Gérez le flash de mauvais thème au chargement (FOUC) avec un script inline.
Test et accessibilité
Testez les deux modes systématiquement. Vérifiez les contrastes avec des outils d’accessibilité. Les utilisateurs qui ont besoin de haut contraste peuvent préférer l’un ou l’autre mode.
Conclusion
Le dark mode est une attente utilisateur qui demande un vrai travail de design. Un dark mode bâclé est pire que pas de dark mode. Investissez dans une palette dédiée.
Chez Eve Media, nous concevons des interfaces élégantes dans les deux modes. Contactez-nous pour vos projets design.
