Mode sombre

Le mode sombre est une option d'affichage qui présente une interface aux couleurs claires sur un fond sombre, à l'inverse de la mise en page classique en clair, ce qui réduit la luminosité de l'écran en faible lumière et, sur les écrans OLED, la consommation d'énergie.

Qu'est-ce que le mode sombre ?

Le mode sombre inverse la relation de couleurs habituelle d'une interface : un texte gris clair ou blanc repose sur un fond quasi noir ou gris foncé, plutôt qu'un texte sombre sur une page blanche. Apparu d'abord comme préférence du système d'exploitation, il est désormais attendu comme réglage automatique ou bascule manuelle dans la plupart des applications, sites et outils de design. L'objectif est le confort en faible luminosité ambiante et, pour certains utilisateurs, une réduction de la fatigue oculaire lors d'un usage prolongé de l'écran.

Comment fonctionne le mode sombre

Sur le web, le mode sombre s'implémente le plus souvent via la fonctionnalité média CSS prefers-color-scheme, qui lit le réglage du système d'exploitation et permet à une feuille de style de s'adapter automatiquement :

@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #e6e6e6; }
}

Une bascule manuelle définit généralement un attribut data-theme ou une classe CSS sur la page et permute un ensemble de variables CSS, des design tokens de couleur, plutôt que de coder les couleurs en dur deux fois, ce qui garde les deux thèmes cohérents et faciles à maintenir.

Les approches du mode sombre

• Piloté par le système : l'interface suit automatiquement le réglage clair ou sombre du système d'exploitation, via prefers-color-scheme.
• Bascule utilisateur : un interrupteur permet à un visiteur de forcer le réglage clair ou sombre, généralement mémorisé dans le stockage local ou un cookie.
• Sombre forcé : une fonctionnalité du navigateur ou du système qui inverse les couleurs des sites sans mode sombre natif, avec des résultats souvent inégaux.
• Sombre uniquement : certaines marques choisissent un thème sombre unique par parti pris de design, plutôt qu'une alternative à un thème clair.

Mode sombre vs mode clair

Bonnes pratiques et pièges courants

Une erreur fréquente est le noir pur (#000000) avec du texte blanc pur, ce qui crée un contraste brutal provoquant une vibration visuelle chez certains lecteurs ; un fond quasi noir, autour de #121212, avec un texte blanc cassé est plus confortable. Les surfaces surelevées comme les cartes ou les fenêtres modales ont besoin d'une teinte légèrement plus claire que le fond de base pour préserver la profondeur, car les ombres portées se lisent mal sur fond sombre. Chaque couleur, pas seulement les fonds et le texte, a besoin d'un équivalent en mode sombre : couleurs de marque, bordures, icônes et images doivent toutes être vérifiées face à la palette sombre, et une photo à fond blanc peut sembler déplacée sans un léger cadre ou ajustement de marge.

Accessibilité et impact

Le mode sombre réduit sensiblement la consommation d'énergie sur les écrans OLED et AMOLED, car les pixels noirs consomment peu ou pas d'énergie, même si l'effet est négligeable sur les écrans LCD qui rétroéclairent tout le panneau quelle que soit la couleur. Le contraste doit toujours respecter les recommandations WCAG dans les deux thèmes : un texte gris clair sur fond gris foncé peut échouer aux seuils d'accessibilité aussi facilement qu'en mode clair. Certains utilisateurs rapportent moins de fatigue oculaire en faible lumière avec le mode sombre, bien que les preuves sur la santé oculaire restent mitigées plutôt que concluantes ; le confort relève surtout d'une préférence personnelle et de l'éclairage ambiant.

Le mode sombre chez BeBranded

Nous construisons les systèmes de couleurs sous forme de design tokens dès le début de chaque projet de design, si bien qu'ajouter un mode sombre plus tard, ou le livrer dès le premier jour, revient à permuter des tokens plutôt qu'à tout reconstruire.