Design du mode sombre : livrer un second thème sans casser le premier
Le guide d'un designer en activité sur le mode sombre. La math des couleurs qui marche vraiment, les pièges des composants à éviter, et comment livrer un thème sombre qui a l'air dessiné plutôt qu'inversé.
La plupart des modes sombres ne sont pas dessinés, ils sont inversés. Un designer passe le fond en quasi-noir, teinte le texte en quasi-blanc, et considère le travail terminé. Résultat : un thème agressif, plus difficile à lire que la version claire, et une marque qui ressemble à un autre produit sous le mauvais éclairage.
Ce paper est la version de terrain. La math des couleurs qui rend un thème sombre intentionnel, les pièges de composants qui cassent dans le noir, et la structure de tokens qui garde les deux thèmes synchronisés à mesure que le produit grandit. Pas de dégradés Dribbble, juste un thème sombre qui mérite sa place dans le design system.
Ce qu'est vraiment le mode sombre
Le mode sombre est un second thème à part entière, pas une inversion de couleurs. Il a sa propre logique de surfaces, ses propres règles de contraste et ses propres ajustements de graisse typographique. Un vrai mode sombre est conçu de zéro sur le même jeu de composants, puis réconcilié avec le thème clair via des tokens partagés.
Le raccourci de l'inversion échoue pour une raison précise. Le mode clair repose sur des surfaces blanches qui renvoient la profondeur vers le haut. Le mode sombre ne peut pas l'inverser, car les surfaces noires pures absorbent la profondeur au lieu de la créer. Tout le système d'élévation doit être reconstruit. L'analyse du guide des design systems explique pourquoi cela doit se passer dans les tokens, pas dans chaque composant.
Pourquoi le mode sombre compte en 2026
Trois raisons. Aucune n'est esthétique.
L'autonomie sur les écrans OLED. Chaque pixel noir sur une dalle OLED ne consomme rien. Une interface sombre sur un téléphone peut réduire la consommation de l'écran de 30 à 60 % à forte luminosité. Pour les utilisateurs mobiles, un thème sombre est une fonction de batterie avant d'être un choix visuel.
L'accessibilité pour la sensibilité à la lumière. Les personnes sujettes aux migraines, à l'astigmatisme ou à la photophobie ne peuvent pas utiliser confortablement une interface claire longtemps. Livrer un mode sombre est un engagement d'accessibilité, pas une préférence. La checklist d'accessibilité web montre où la thématisation s'inscrit dans un audit complet.
L'attente des utilisateurs. Les systèmes d'exploitation proposent un réglage de mode sombre qui s'applique à tout l'OS. Un produit qui ignore ce réglage fait vieux. Les utilisateurs filtrent les stores et les annuaires d'extensions selon la prise en charge du mode sombre. L'absence de thème sombre est un problème marketing, pas seulement un trou dans l'UI.
La première règle : jamais de noir pur
Le noir pur (#000000) est l'erreur la plus courante dans un nouveau mode sombre. Il paraît juste parce qu'il semble être la surface la plus sombre possible. Il rend mal parce que l'œil humain ne sait pas juger la profondeur contre un noir parfait.
La solution : utiliser un gris foncé avec une légère teinte de marque comme surface de base. Quelque chose entre #0B0B10 et #121218 pour la plupart des produits, parfois jusqu'à #1A1A1F. La valeur exacte dépend de la température de couleur de la marque. Une marque chaude va vers un sombre légèrement chaud. Une marque froide, vers un sombre légèrement froid. Le neutre pur paraît sans vie.
La même règle s'applique au texte le plus contrasté. Le blanc pur (#FFFFFF) sur une surface sombre crée de l'halation, un flou lumineux sur les bords qui fatigue la lecture des petits textes. Ramenez le texte autour de #E8E8EA ou appliquez un blanc à 85 à 92 % d'opacité. La baisse est invisible à l'œil mais énorme pour la lisibilité.
L'élévation des surfaces en mode sombre
Le mode clair utilise des ombres pour montrer qu'une carte est au-dessus du fond. Le mode sombre ne le peut pas, car les ombres sont avalées par les surfaces sombres. La parade, c'est l'élévation par la clarté.
Chaque niveau d'élévation éclaircit la surface, il ne l'assombrit pas. Une carte posée au-dessus de la surface de base est légèrement plus claire que la base. Une modale au-dessus d'une carte l'est encore plus. La profondeur dans une interface sombre se lit comme un dégradé de surfaces qui montent vers l'utilisateur, pas comme des ombres qui tombent en dessous.
Material Design a formalisé cela avec une échelle d'élévation en cinq niveaux, et l'idée générale vaut pour n'importe quel design system. Une échelle qui fonctionne pour la plupart des produits :
| Élévation | Exemple | Valeur de surface |
|---|---|---|
| 0 | Fond de base | #0E0E12 |
| 1 | Carte, champ de saisie | #17171C |
| 2 | Carte surélevée, menu | #1F1F25 |
| 3 | Modale, boîte de dialogue | #28282F |
| 4 | Popover, infobulle | #31313A |
Les chiffres précis varient selon la marque, mais la logique non. Chaque surface surélevée est plus claire que celle en dessous, chaque ombre portée reste subtile, et la hiérarchie se lit comme des surfaces empilées dans l'espace plutôt que des boîtes dessinées sur une page.
La math du contraste pour les thèmes sombres
Le glossaire sur le ratio de contraste couvre la base WCAG de 4,5 pour 1 pour le texte normal et 3 pour 1 pour le grand texte. Le mode sombre n'assouplit pas ces règles, mais il change la façon de les respecter.
En mode clair, un texte de corps autour de #222 sur fond blanc atteint environ 16 pour 1. Les designers sont habitués à une énorme marge au-dessus du minimum. Le mode sombre est plus serré. Un texte de corps à #E0E0E0 sur #0E0E12 atteint environ 13 pour 1, ce qui reste solide, mais la marge d'erreur est plus faible. Descendre le texte à #B0B0B0 pour adoucir le rendu peut discrètement faire passer une section sous 4,5 pour 1.
La discipline : chaque décision de couleur en mode sombre passe par un vérificateur de contraste. Pas une fois par thème, une fois par association de tokens. Texte sur surface de base, texte sur carte, texte sur modale, texte de placeholder, texte désactivé, texte de lien. Chaque association est une vérification séparée.
Un piège courant est le token de texte atténué. En mode clair, un texte atténué à #666 sur blanc se lit clairement à 5,7 pour 1. Inversé en #999 sur #0E0E12, le ratio tombe à environ 4,2 pour 1, ce qui échoue au niveau WCAG AA. Le raccourci de l'inversion casse la conformité d'accessibilité en silence, et la plupart des équipes ne s'en aperçoivent que lorsqu'un audit le révèle.
La couleur en mode sombre : la saturation, pas seulement la valeur
Les couleurs de marque qui chantent sur fond blanc paraissent souvent boueuses ou électriques sur fond sombre. La raison : les surfaces sombres amplifient la saturation perçue. Un accent saturé à 100 % sur surface claire paraît sûr de lui. Le même accent sur surface sombre paraît radioactif.
La règle est de désaturer les couleurs d'accent pour le thème sombre, en général de 10 à 20 %, et de les éclaircir légèrement. Un bouton principal en #3455FF sur blanc peut devenir #5C78FF sur sombre. Même famille de teinte, ajustée au nouvel environnement de contraste. La marque reste la marque. Elle arrête simplement de faire mal aux yeux.
Le glossaire sur la palette de couleurs couvre la structure de base dans laquelle cet ajustement s'inscrit. Un bon mode sombre n'invente pas de nouvelles couleurs, il livre un jeu parallèle des mêmes couleurs de marque réglées pour le nouveau contexte de surface.
Les pièges de composants qui cassent dans le noir
La plupart des composants demandent au moins un ajustement pour le mode sombre. Quelques-uns cassent complètement sans lui. Voici les coupables habituels.
Les bordures deviennent le séparateur principal
En mode clair, une ombre subtile ou une bordure à peine visible sépare les composants. En mode sombre, les ombres disparaissent et la plupart des bordures s'évanouissent. La bordure devient l'outil principal pour définir les bords des composants, et il faut souvent la faire passer de quelque chose comme #EEE en clair à environ #2A2A30 en sombre pour qu'elle reste visible.
Le test consiste à regarder l'UI à 80 % de luminosité sur un laptop. Si les bords des composants commencent à disparaître, le token de bordure a besoin d'une valeur plus claire dans le thème sombre.
Les ombres inversent leur rôle
En mode clair, les ombres repoussent les surfaces vers le bas et l'arrière. En mode sombre, elles doivent suggérer des surfaces qui montent et avancent. On y arrive généralement en combinant une surface très légèrement plus claire (l'élévation) et une ombre sombre quasi invisible dessous, qui ajoute du poids sans se voir.
Une paire d'ombres qui fonctionne en mode sombre :
- Extérieure :
0 4px 12px rgba(0, 0, 0, 0.5)pour ancrer l'élément - Reflet intérieur en haut :
inset 0 1px 0 rgba(255, 255, 255, 0.05)pour suggérer un bord soulevé
Utilisés ensemble, le composant paraît surélevé au lieu d'être découpé. Utilisés seuls, aucun des deux effets ne se voit.
Les états désactivés disparaissent
Un bouton désactivé en mode clair est généralement un gris désaturé sur blanc. Le même traitement en mode sombre fond complètement le bouton dans la surface. La solution est d'augmenter l'opacité de l'état désactivé, pas de la diminuer. Quelque chose comme 40 % d'opacité par-dessus la couleur de la surface surélevée, plutôt qu'un gris délavé. L'état désactivé doit toujours se lire comme un bouton, simplement inactif.
Les images et illustrations demandent leur propre traitement
Une photo produit prise sur fond blanc paraît cassée sur une surface sombre. Une illustration de marque dessinée avec un trait blanc disparaît complètement. Les images ont besoin de leur propre passe en mode sombre, via un asset séparé, un changement de fond ou un filtre soigneusement réglé. C'est la partie la plus coûteuse du mode sombre à livrer correctement, et c'est celle que la plupart des équipes coupent.
La solution pragmatique pour les équipes qui ne peuvent pas livrer d'assets d'image parallèles : ajouter un fond doux à chaque conteneur d'image en mode sombre, autour de #F5F5F7 avec des coins arrondis. Les images prises sur fond blanc reposent alors sur un conteneur clair, et le reste de l'UI reste sombre.
Les états de focus des champs demandent plus de contraste
Un anneau de focus bleu qui marche sur fond blanc perd son impact sur des surfaces sombres. Le glossaire sur l'état de focus couvre l'indicateur focus-visible exigé par WCAG. En mode sombre, l'anneau de focus doit souvent être 10 à 20 % plus lumineux ou plus épais que son jumeau du mode clair. L'exigence d'accessibilité ne change pas, mais le traitement visuel doit s'ajuster pour continuer à la satisfaire.
Structure de tokens pour deux thèmes
Un mode sombre qui vit dans des surcharges CSS est un mode sombre qui va dériver. Chaque nouveau composant gérera la thématisation différemment, et en six mois le produit aura trois approches de thème qui se disputent.
La bonne structure, ce sont les tokens sémantiques. Le glossaire sur le design token couvre le concept de base. Le mode sombre est le cas d'usage qui prouve que les tokens ne sont pas optionnels.
Trois couches de tokens :
Couche un : les primitives. Des valeurs de couleur brutes. color.neutral.900, color.brand.500. Aucune opinion, aucun contexte.
Couche deux : le sémantique. Des noms basés sur le rôle. color.surface.base, color.surface.raised, color.text.primary, color.text.muted, color.border.default. Chaque token sémantique pointe vers une primitive.
Couche trois : le thème. Deux cartes complètes, une par thème, qui décident vers quelle primitive chaque token sémantique se résout. Le thème clair associe color.surface.base à color.neutral.50. Le thème sombre associe color.surface.base à color.neutral.900.
Les composants ne consomment que des tokens sémantiques. Ils ne référencent jamais directement une primitive, et ne codent jamais un thème en dur. Le sélecteur de thème change la carte, les composants se redessinent, et rien ne casse. C'est le seul modèle qui tient au-delà d'une équipe de deux designers.
Respecter les préférences système
Le navigateur expose prefers-color-scheme via les media queries CSS. Le produit doit le respecter. L'expérience par défaut d'un utilisateur ayant activé le mode sombre au niveau de l'OS, c'est le thème sombre, point final. Un interrupteur dans l'app est un raffinement, pas un remplacement.
Trois règles pour une implémentation correcte :
Suivre la préférence système au premier chargement. Ne jamais écraser le choix d'OS de l'utilisateur par un thème clair simplement parce que le designer préfère les maquettes claires.
Conserver le choix fait dans l'app. Si l'utilisateur passe en sombre dans l'app, ce choix survit aux rafraîchissements et l'emporte sur la préférence système jusqu'à ce qu'il le réinitialise.
Proposer une option « suivre le système ». Les utilisateurs qui veulent que le réglage de l'OS décide ont besoin d'un moyen de revenir à ce comportement. L'interrupteur à trois états (clair, sombre, système) est le modèle attendu et doit être livré par défaut.
Tester le mode sombre
Les bugs du mode sombre se cachent. Un composant a l'air parfait dans le fichier de design, passe la revue de code dans le thème clair, et part en production avec un échec de contraste qui n'apparaît que lorsqu'un utilisateur l'ouvre la nuit. La discipline de test doit être agressive.
Le test de luminosité. Ouvrez le produit sur un laptop à 30 % de luminosité dans une pièce sombre. Tout ce qui disparaît, tout ce qui bave, tout ce qui éblouit désagréablement est consigné comme un bug. Cela révèle les bordures trop subtiles, le texte trop brillant et les couleurs d'accent encore trop saturées.
L'audit de contraste. Chaque changement de thème déclenche une vérification complète du contraste sur toutes les associations sémantiques. Des outils comme axe, WAVE ou le vérificateur de contraste intégré de Figma attrapent les régressions qu'une revue visuelle rate.
Le diff de captures. Des captures des modes clair et sombre sont prises pour chaque écran clé à chaque release. Les diffs visuels révèlent une dérive involontaire des thèmes avant qu'un utilisateur ne le fasse.
Le test sur appareil réel. Les téléphones OLED rendent les surfaces sombres autrement que les laptops LCD. Un mode sombre parfait sur un MacBook révèle souvent du banding ou des transitions dures sur un iPhone. Testez sur de vrais téléphones, pas seulement dans l'émulateur d'appareil du navigateur.
Les échecs courants du mode sombre
Trois schémas causent la plupart des problèmes de qualité à la livraison du mode sombre. Les trois sont évitables avec la structure de tokens ci-dessus.
L'UI à moitié inversée. Les surfaces principales passent en sombre, mais des composants enfouis (modales, infobulles, pages marketing, anciens écrans d'admin) restent livrés en mode clair. L'utilisateur active le sombre et la moitié du produit repasse au blanc au clic. La solution est un audit de chaque surface du produit, avec une checklist qui suit la couverture du thème écran par écran.
Le moment de marque brisé. Les landing pages marketing restent claires alors que le produit passe en sombre, ou l'inverse. L'identité de marque se fragmente tout au long du parcours de l'utilisateur, et le produit ressemble à deux entreprises. La solution est de décider dès le départ si le site marketing livre un mode sombre. Les deux choix sont valides, mais les deux surfaces doivent concorder.
La régression d'accessibilité. Le mode clair est livré conforme WCAG AA, le mode sombre la rate à trois endroits, et personne ne vérifie avant un audit de conformité. La solution est la couche de tokens sémantiques plus une vérification automatique du contraste en CI. Chaque PR lance un contrôle de contraste. Les échecs bloquent le merge.
Si vous voulez une équipe qui livre le mode sombre comme une décision système de premier rang, des tokens jusqu'aux tests, engagez Brainy. Le mode sombre est rarement le vrai problème. Le vrai problème, c'est de livrer la paire sans dérive.
FAQ
Le noir pur est-il le meilleur fond pour le mode sombre ?
Non. Le noir pur (#000000) crée un contraste brutal avec le texte blanc et supprime les indices de profondeur dont l'œil a besoin pour lire l'élévation. Utilisez un gris foncé avec une légère teinte de marque, généralement entre #0B0B10 et #121218. La profondeur dans une interface sombre se lit comme des surfaces qui montent vers l'utilisateur, ce qui exige une surface de départ qui n'est pas du noir pur.
Comment gérer l'élévation en mode sombre sans ombres ?
L'élévation en mode sombre vient de la clarté, pas des ombres. Chaque surface surélevée est légèrement plus claire que celle en dessous, créant un dégradé de surfaces qui s'empilent vers l'utilisateur. Une ombre sombre subtile et un très léger reflet en haut peuvent renforcer l'effet, mais l'indice principal est la couleur de la surface elle-même.
Le mode sombre doit-il simplement inverser les couleurs du thème clair ?
Non. L'inversion sature les couleurs d'accent à des niveaux inconfortables, fait tomber le texte atténué sous les seuils de contraste WCAG et casse le modèle d'élévation qui repose sur les ombres. Le mode sombre est un second thème conçu de zéro sur le même jeu de composants, puis réconcilié via des tokens sémantiques partagés.
Comment gérer les images et les photos en mode sombre ?
Les images prises sur fond blanc brisent la continuité du thème. Les options : livrer des assets parallèles pour le mode sombre, ajouter un conteneur clair discret autour de chaque image quand le mode sombre est actif, ou appliquer des filtres avec soin. Les illustrations demandent souvent une variante dédiée au mode sombre. C'est la partie la plus coûteuse du mode sombre et la plus souvent sautée.
Comment structurer les tokens pour prendre en charge deux thèmes ?
Trois couches. Les primitives (valeurs de couleur brutes), les tokens sémantiques (noms basés sur le rôle comme color.surface.base) et les cartes de thème (une par thème, résolvant chaque token sémantique vers une primitive). Les composants ne consomment que des tokens sémantiques, donc le sélecteur de thème change la carte et rien ne casse. C'est ce modèle qui permet au mode sombre de tenir au-delà d'une petite équipe.
Le mode sombre améliore-t-il l'accessibilité ?
Pour les personnes sensibles à la lumière, sujettes aux migraines ou à la photophobie, oui. Pour celles qui ont besoin d'un texte à fort contraste ou ont des perceptions des couleurs spécifiques, pas forcément. Le mode sombre est une option d'accessibilité, pas une victoire d'accessibilité automatique. Un thème sombre bien implémenté respecte les règles de contraste WCAG avec la même rigueur que le thème clair, et un thème mal implémenté les enfreint.
Le mode sombre est une décision système, pas un interrupteur
Un produit avec un thème et un second thème cassé est pire qu'un produit avec un seul thème propre. Le mode sombre est soit livré comme un parallèle du thème clair entièrement dessiné, entièrement testé et entièrement tokenisé, soit pas livré du tout.
Construisez d'abord la couche de tokens. Faites la math du contraste ensuite. Dessinez le thème sombre contre chaque élévation, chaque composant, chaque conteneur d'image. Testez à faible luminosité sur de vrais appareils. Livrez les deux thèmes ensemble ou aucun.
Si vous voulez un travail de marque, de web et d'UI qui traite le mode sombre comme un engagement au niveau du système plutôt qu'un simple interrupteur de préférence, engagez Brainy. Deux thèmes, un produit, une décision de design cohérente.
À lire aussi
- Guide des design systems
- Contraste de couleurs accessible
- Checklist d'accessibilité web
- Théorie des couleurs pour designers
- Design de la hiérarchie visuelle
Want a product that ships dark mode as a system decision instead of a last-minute toggle? Brainy builds brand, web, and UI with both themes wired into the tokens from day one.
Get Started
