Le mode sombre est partout. Les systèmes d'exploitation, les applications, les sites web : presque toutes les interfaces proposent une version sombre. Et pourtant, la plupart des implémentations se résument à une inversion paresseuse des couleurs. Fond blanc qui devient noir, texte noir qui devient blanc. Le résultat est souvent inconfortable, incohérent et parfois illisible.
Un vrai dark mode ne se contente pas de changer les couleurs. Il repense fondamentalement la hiérarchie visuelle, le contraste, l'élévation et la sémantique des couleurs. Voyons comment le faire correctement.
Pourquoi le noir pur est une mauvaise idée
L'erreur la plus courante est d'utiliser #000000 comme couleur de fond. Le noir pur crée un contraste excessif avec le texte blanc, ce qui fatigue les yeux et rend la lecture pénible sur de longues durées.
Les interfaces dark mode réussies utilisent des gris très sombres plutôt que du noir pur :
/* Mauvais : noir pur */
--bg: #000000;
--text: #ffffff;
/* Rapport de contraste : 21:1 (trop élevé pour le corps de texte) */
/* Bon : gris très sombre */
--bg: #0a0a0b;
--text: #fafafa;
/* Rapport de contraste : ~18:1 (plus confortable) */
/* Encore mieux : hiérarchie de gris */
--bg: #121215;
--bg-elevated: #1a1a1f;
--bg-surface: #222228;
--text: #e4e4e7;
--text-muted: #71717a;Google Material Design recommande d'utiliser #121212 comme couleur de fond de base. Apple utilise des noirs légèrement bleutés ou violacés. L'essentiel est d'éviter le #000 pur.
Le contraste du texte : pas trop, pas trop peu
En mode clair, on vise un contraste élevé pour la lisibilité. En mode sombre, la donne change. Un contraste trop élevé (texte blanc sur fond noir) provoque un phénomène appelé "halation" : les lettres semblent rayonner et se brouiller.
Les recommandations :
- Texte principal : utilisez un blanc cassé (
#e4e4e7ou#fafafa) plutôt que du blanc pur (#ffffff). Visez un ratio de 12:1 à 16:1. - Texte secondaire : utilisez des gris moyens (
#a1a1aa). Ratio de 7:1 à 10:1. - Texte tertiaire / légendes : des gris plus clairs (
#71717a). Ratio minimum de 4.5:1 pour respecter WCAG AA.
Un bon dark mode est subtil. Si vous plissez les yeux en le regardant, le contraste est trop élevé. Si vous devez vous rapprocher de l'écran, il est trop faible.
L'élévation remplace les ombres
En mode clair, la hiérarchie des éléments est souvent créée avec des ombres portées (box-shadow). Sur fond sombre, les ombres sont invisibles. Il faut changer de stratégie.
En dark mode, l'élévation se traduit par la luminosité. Plus un élément est "élevé" (proche de l'utilisateur), plus il est clair :
:root {
/* Niveaux d'élévation en dark mode */
--elevation-0: #0a0a0b; /* fond de page */
--elevation-1: #111113; /* cartes, sections */
--elevation-2: #18181b; /* éléments survolés */
--elevation-3: #222228; /* menus, dropdowns */
--elevation-4: #2a2a32; /* modales, dialogs */
}
.card {
background: var(--elevation-1);
}
.card:hover {
background: var(--elevation-2);
}
.modal {
background: var(--elevation-4);
}Ce système d'élévation par luminosité est intuitif : les éléments interactifs ou superposés se distinguent naturellement par leur luminosité croissante.
Les couleurs d'accent : désaturer et ajuster
Les couleurs vives qui fonctionnent bien sur fond blanc peuvent être agressives sur fond sombre. Il faut les ajuster :
- Réduire la saturation : une couleur très saturée sur fond sombre crie. Baissez la saturation de 10 à 20%.
- Augmenter la luminosité : pour maintenir le contraste, augmentez légèrement la luminosité de vos couleurs d'accent.
- Tester le contraste : vérifiez que vos couleurs d'accent ont un ratio de contraste suffisant sur les fonds sombres.
/* Mode clair */
--accent-light: hsl(245, 85%, 55%);
/* Mode sombre : moins saturé, plus lumineux */
--accent-dark: hsl(245, 70%, 65%);
/* Avec OKLCH (meilleure uniformité perceptuelle) */
--accent-light: oklch(0.55 0.25 280);
--accent-dark: oklch(0.70 0.18 280);L'implémentation CSS avec prefers-color-scheme
La méthode la plus robuste utilise des custom properties CSS et la media query prefers-color-scheme :
/* Tokens sémantiques */
: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%);
}
}Les composants utilisent les custom properties sans se soucier du thème actif. Le changement de mode est instantané et sans JavaScript. La documentation MDN sur prefers-color-scheme détaille toutes les subtilités de cette media query, et les directives WCAG sur le contraste minimum restent la référence pour garantir l'accessibilité.
Le dark mode n'est plus réservé aux applications techniques. On le retrouve désormais sur toutes sortes de plateformes, y compris les sites d'information spécialisés. Ce média francophone consacré à l'intelligence artificielle, par exemple, propose un thème sombre qui améliore le confort de lecture de ses articles souvent longs et denses. C'est un bon indicateur que le dark mode est devenu un standard attendu par les utilisateurs.
Ajouter un toggle manuel
Pour permettre à l'utilisateur de choisir, combinez la media query avec un attribut de données :
/* Thème par défaut : suit le système */
:root { /* tokens light */ }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { /* tokens dark */ }
}
/* Override manuel */
[data-theme="dark"] { /* tokens dark */ }
[data-theme="light"] { /* tokens light */ }// JavaScript pour le toggle
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
// Restaurer le choix de l'utilisateur
const saved = localStorage.getItem('theme');
if (saved) setTheme(saved);Les images et le dark mode
Les images méritent une attention particulière :
- Les screenshots : un screenshot d'interface en mode clair sur un fond sombre est éblouissant. Fournissez des versions sombres quand c'est possible, ou ajoutez un border subtil pour atténuer le contraste.
- Les illustrations : les illustrations avec des fonds blancs transparents posent problème. Utilisez des illustrations avec des fonds adaptés ou appliquez un filtre CSS.
- Les icônes : utilisez
currentColordans vos SVG pour qu'elles s'adaptent automatiquement au thème.
/* Atténuer les images en dark mode */
@media (prefers-color-scheme: dark) {
img:not([src*=".svg"]) {
filter: brightness(0.9) contrast(1.05);
}
}Les bordures et séparateurs
En mode clair, les bordures sont généralement des gris clairs sur fond blanc. En dark mode, elles doivent être très subtiles :
/* Mode clair */
--border: #e2e8f0; /* Bien visible sur blanc */
/* Mode sombre */
--border: #1e1e22; /* Juste assez visible pour séparer */
/* Alternative : bordures semi-transparentes */
--border: rgba(255, 255, 255, 0.08);L'utilisation de bordures semi-transparentes est une technique élégante qui s'adapte automatiquement à différents niveaux d'élévation.
La transition entre les modes
Quand l'utilisateur bascule entre les modes, une transition brusque est désagréable. Ajoutez une transition douce :
/* Transition globale lors du changement de thème */
:root {
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Ou plus sélectif */
body, .card, .header, .footer {
transition: background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}Attention : n'appliquez pas de transition sur * universellement. Cela dégraderait les performances en animant des centaines d'éléments simultanément.
Checklist d'un dark mode réussi
- Fond gris très sombre, jamais noir pur (
#000). - Texte blanc cassé, jamais blanc pur (
#fff). - Au moins 3 niveaux de hiérarchie de texte (principal, secondaire, tertiaire).
- Élévation exprimée par la luminosité, pas par les ombres.
- Couleurs d'accent désaturées et ajustées en luminosité.
- Bordures subtiles, semi-transparentes si possible.
- Images atténuées ou adaptées.
- Respect de
prefers-color-scheme. - Option de toggle manuel avec persistance.
- Tous les contrastes conformes WCAG AA minimum.
Conclusion
Un dark mode bien fait est un exercice de design à part entière. Ce n'est pas un filtre qu'on applique sur un thème clair. C'est un système de couleurs parallèle, pensé pour le confort visuel en environnement sombre, avec ses propres règles de contraste, d'élévation et de hiérarchie.
Prenez le temps de le concevoir correctement. Vos utilisateurs nocturnes, qui représentent souvent plus de 50% du trafic sur mobile, vous en seront reconnaissants.