Le dark mode bien fait : au-dela de l'inversion des couleurs

Le mode sombre est partout. Les systemes d’exploitation, les applications, les sites web : presque toutes les interfaces proposent une version sombre. Et pourtant, la plupart des implementations se resument a une inversion paresseuse des couleurs.

Un vrai dark mode ne se contente pas de changer les couleurs. Il repense fondamentalement la hierarchie visuelle, le contraste, l’elevation et la semantique des couleurs.

Pourquoi le noir pur est une mauvaise idee

L’erreur la plus courante est d’utiliser #000000 comme couleur de fond. Le noir pur cree un contraste excessif avec le texte blanc, ce qui fatigue les yeux.

/* Mauvais : noir pur */
--bg: #000000;
--text: #ffffff;
/* Rapport de contraste : 21:1 (trop eleve) */

/* Bon : gris tres sombre */
--bg: #0a0a0b;
--text: #fafafa;
/* Rapport de contraste : ~18:1 (plus confortable) */

/* Encore mieux : hierarchie de gris */
--bg: #121215;
--bg-elevated: #1a1a1f;
--bg-surface: #222228;
--text: #e4e4e7;
--text-muted: #71717a;

Le contraste du texte : pas trop, pas trop peu

• Texte principal : utilisez un blanc casse (#e4e4e7). Visez un ratio de 12:1 a 16:1.
• Texte secondaire : des gris moyens (#a1a1aa). Ratio de 7:1 a 10:1.
• Texte tertiaire : des gris plus clairs (#71717a). Ratio minimum de 4.5:1 pour WCAG AA.

Un bon dark mode est subtil. Si vous plissez les yeux en le regardant, le contraste est trop eleve.

L’elevation remplace les ombres

En dark mode, l’elevation se traduit par la luminosite. Plus un element est “eleve”, plus il est clair :

:root {
  --elevation-0: #0a0a0b;   /* fond de page */
  --elevation-1: #111113;   /* cartes, sections */
  --elevation-2: #18181b;   /* elements survoles */
  --elevation-3: #222228;   /* menus, dropdowns */
  --elevation-4: #2a2a32;   /* modales, dialogs */
}

Les couleurs d’accent : desaturer et ajuster

/* Mode clair */
--accent-light: hsl(245, 85%, 55%);

/* Mode sombre : moins sature, plus lumineux */
--accent-dark: hsl(245, 70%, 65%);

/* Avec OKLCH */
--accent-light: oklch(0.55 0.25 280);
--accent-dark: oklch(0.70 0.18 280);

L’implementation CSS

:root {
  --bg: #ffffff;
  --bg-card: #f8fafc;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --accent: hsl(245, 85%, 55%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0b;
    --bg-card: #111113;
    --text: #e4e4e7;
    --text-muted: #71717a;
    --border: #1e1e22;
    --accent: hsl(245, 70%, 65%);
  }
}

La documentation MDN sur prefers-color-scheme detaille toutes les subtilites de cette media query, et les directives WCAG sur le contraste minimum restent la reference pour garantir l’accessibilite.

Le dark mode n’est plus reserve aux applications techniques. On le retrouve desormais sur toutes sortes de plateformes, y compris les sites d’information specialises. Ce media francophone consacre a l’intelligence artificielle, par exemple, propose un theme sombre qui ameliore le confort de lecture.

Les images et le dark mode

@media (prefers-color-scheme: dark) {
  img:not([src*=".svg"]) {
    filter: brightness(0.9) contrast(1.05);
  }
}

Checklist d’un dark mode reussi

• Fond gris tres sombre, jamais noir pur.
• Texte blanc casse, jamais blanc pur.
• Au moins 3 niveaux de hierarchie de texte.
• Elevation exprimee par la luminosite.
• Couleurs d’accent desaturees.
• Bordures subtiles, semi-transparentes si possible.
• Images attenuees ou adaptees.
• Respect de prefers-color-scheme.
• Tous les contrastes conformes WCAG AA.

Conclusion

Un dark mode bien fait est un exercice de design a part entiere. Prenez le temps de le concevoir correctement. Vos utilisateurs nocturnes, qui representent souvent plus de 50% du trafic sur mobile, vous en seront reconnaissants.