70% des utilisateurs d'iOS et 80% des utilisateurs Android ont activé le dark mode sur leur appareil. Ce n'est plus une fonctionnalité bonus — c'est une attente. Et au-delà de l'esthétique, le dark mode a un impact réel sur la fatigue oculaire (surtout en faible luminosité) et la consommation de batterie sur les écrans OLED. Chez Go To Agency, nous intégrons le dark mode dans nos projets en respectant les standards d'accessibilité WCAG. Voici comment le faire correctement.
Détecter la préférence système avec CSS et JavaScript
Le navigateur expose la préférence de l'utilisateur via la media query prefers-color-scheme. En CSS pur, vous pouvez l'exploiter directement :
@media (prefers-color-scheme: dark) { body { background: #1a1a1a; color: #e5e5e5; } }
En JavaScript, window.matchMedia('(prefers-color-scheme: dark)').matches retourne un booléen. Vous pouvez aussi écouter les changements en temps réel avec un event listener sur ce media query.
Dans React/Next.js, utilisez la librairie next-themes qui gère le toggle, la persistance (localStorage), et l'hydratation sans flash de contenu (FOUC). C'est la solution la plus robuste pour les applications Next.js.
Les design tokens : la base d'un dark mode maintenable
La grande erreur est de hardcoder les couleurs directement dans les composants. "La couleur de fond est #FFFFFF en light et #1A1A1A en dark" — si vous le répétez dans 50 composants, la maintenance devient cauchemardesque.
La solution : les design tokens. Des variables CSS (custom properties) qui portent des noms sémantiques plutôt que des valeurs de couleur :
:root { --color-bg: #FFFFFF; --color-text: #1A1A1A; --color-border: #E5E5E5; }
[data-theme="dark"] { --color-bg: #1A1A1A; --color-text: #E5E5E5; --color-border: #3A3A3A; }
Tous vos composants utilisent ces variables. Quand le thème change, une seule modification (l'attribut data-theme sur le <html>) met à jour tous les composants instantanément.
Choisir les bonnes couleurs pour le dark mode
Évitez le noir pur : un fond #000000 avec du texte blanc crée un contraste trop violent, fatigant à la longue. Les applications qui réussissent (Slack, Discord, GitHub) utilisent des tons sombres intermédiaires : #1A1A2E, #0F0F0F, #121212. Material Design recommande #121212 comme fond primaire.
Les niveaux d'élévation : en dark mode, la profondeur et la hiérarchie visuelle ne se créent pas avec des ombres (invisibles sur fond sombre) mais avec des niveaux de luminosité. Le fond principal est le plus sombre, les cards et modales sont légèrement plus claires. Material Design utilise des overlays blancs transparents : 5% pour les surfaces de niveau 1, 8% pour le niveau 2, etc.
Les couleurs saturées en dark mode : les couleurs vives (CTA, badges) doivent être légèrement désaturées en dark mode. Une couleur très saturée sur fond sombre peut paraître agressive et vibrer visuellement. Réduisez la saturation de 10 à 20% et augmentez la luminosité de 5 à 10%.
Accessibilité WCAG et contrastes
Le dark mode doit respecter les mêmes niveaux de contraste que le light mode selon les critères WCAG. Le niveau AA exige un ratio de contraste minimum de 4,5:1 pour le texte normal et 3:1 pour les grands textes et éléments UI.
Utilisez des outils comme WebAIM Contrast Checker ou le plugin Figma Contrast pour vérifier vos ratios. La plupart des interfaces dark mode échouent sur les textes de couleur secondaire, les placeholders de formulaires et les labels désactivés — des cas souvent négligés.
La media query prefers-reduced-motion : en dark mode, les transitions de thème (animation de fondu entre les thèmes) doivent respecter cette préférence. Un utilisateur sensible aux animations ne doit pas avoir de flash visuel lors du changement de thème.
Le toggle utilisateur : bonnes pratiques
Permettez à l'utilisateur de choisir explicitement son thème, indépendamment de la préférence système. Trois états possibles : light forcé, dark forcé, ou "suivre le système". Sauvegardez le choix en localStorage pour le persistez entre les sessions.
Placez le toggle dans un endroit accessible et visible — header ou footer. Utilisez une icône claire (soleil/lune) et une info-bulle explicative. Testez le toggle sur tous les navigateurs, y compris Safari qui a des comportements particuliers sur les color-scheme.
Besoin d'un site web accessible et moderne avec dark mode ? Notre équipe développement intègre ces bonnes pratiques dans chaque projet. Demandez un devis.