Pourquoi ma palette rend-elle mal en mode sombre ?

Généralement parce qu'elle a été inversée plutôt que dérivée. Les couleurs paraissent plus ternes sur un fond sombre, la logique de contraste du mode clair s'inverse, et les repères d'élévation disparaissent — une palette sombre a besoin de sa propre courbe de luminosité et d'un renfort de saturation, calculés à partir des mêmes couleurs de départ.

Les fonds sombres doivent-ils être en noir pur ?

Rarement. Des quasi-noirs, proches des gris profonds, laissent de la place à l'élévation (les surfaces s'éclaircissent en s'élevant) et adoucissent l'éblouissement du texte blanc. Le noir pur a un seul argument valable — la consommation et le contraste sur OLED — qui relève d'un compromis assumé, pas d'un réglage par défaut.

Ai-je besoin de couleurs distinctes pour le mode sombre ?

Des valeurs distinctes, pas des décisions distinctes. Une palette sombre dérivée recalcule chaque rampe de couleur à partir des mêmes couleurs de départ — nouvelle courbe de luminosité, saturation renforcée — de sorte que la marque survit pendant que chaque valeur s'adapte. Choisir à la main une seconde palette double au contraire la maintenance.

Comment fonctionne l'élévation en mode sombre ?

Plus clair signifie plus proche. Les ombres se remarquent à peine sur des surfaces sombres, alors les éléments surélevés signalent leur hauteur en étant plus clairs que ce sur quoi ils reposent — l'inverse de la logique d'ombre du mode clair.

Quelles règles de contraste s'appliquent en mode sombre ?

Les mêmes planchers — 4,5:1 pour le corps de texte, 3:1 pour le grand texte et les éléments d'interface — mais de nouveaux modes d'échec : le texte blanc pur sur fond sombre irradie (halation), les couleurs de marque saturées s'affaissent, et les paliers de surface quasi noirs se confondent les uns avec les autres.

Comment mettre en œuvre le changement de thème ?

Au moyen de tokens sémantiques — background, surface, text-primary — qui portent une valeur par thème. Les composants référencent le token, prefers-color-scheme (assorti d'une bascule manuelle) choisit le thème, et aucun composant ne sait dans quel mode il se trouve.

Le mode sombre en design : le guide pratique

Le mode sombre n’est pas le mode clair aux valeurs inversées — c’est un second rendu du même système de design, dérivé des mêmes couleurs de départ sous une physique différente : les couleurs paraissent plus ternes sur un fond sombre, l’élévation doit se signaler par la luminosité plutôt que par l’ombre, et le contraste échoue à de nouveaux endroits. Ce hub rassemble nos guides pour bien s’y prendre ; la version en une image, c’est une palette et son jumeau sombre dérivé, côte à côte.

L’inversion est le piège

Inverser une palette claire place les valeurs de texte là où devraient être les surfaces, retourne l’élévation sens dessus dessous, et vide la couleur de marque de sa saturation apparente. Chaque guide de ce hub part de l’alternative : la dérivation. La palette sombre est calculée à partir de la même couleur de départ — sa propre courbe de luminosité, un renfort de saturation délibéré pour contrer la façon dont un environnement sombre atténue la couleur — de sorte que la marque survit pendant que chaque valeur s’adapte à la nouvelle physique. Dark Mode Is Not Inversion développe cet argument dans son intégralité et constitue la première lecture naturelle ; Adapting Brand Colors for Dark Mode l’applique au cas le plus difficile, la couleur de marque elle-même. La dérivation, c’est aussi la manière dont Scale Composer traite le mode sombre : les mêmes couleurs de départ qui produisent la palette claire, l’échelle typographique et la grille produisent aussi la palette sombre, de sorte que le thème sombre est un résultat recalculé plutôt qu’un second fichier maintenu à la main.

La nouvelle physique, en bref

Trois effets déterminent la plupart des décisions en mode sombre. La saturation perçue chute sur les fonds sombres, ce qui explique pourquoi les rampes sombres dérivées renforcent le chroma. Les ombres perdent leur signal sur les surfaces sombres, alors la hauteur se communique par la luminosité — les surfaces surélevées sont des surfaces plus claires. Et l’éblouissement s’inverse : le texte blanc sur un quasi-noir peut irradier, les paliers quasi noirs se resserrent, et les échecs de contraste se déplacent vers des endroits où le mode clair n’en avait jamais.

Chaque effet a son propre guide : Why Colors Look Duller on Dark mesure la chute de saturation et sa compensation, Elevation in Dark Mode élabore la logique du plus-clair-signifie-plus-proche, et Dark Mode Contrast Pitfalls cartographie où se déplacent les échecs. L’intuition derrière ces trois-là est la même : le système visuel juge la couleur et la profondeur relativement à leur environnement, donc changer l’environnement change chaque jugement — aucun pixel n’a besoin de bouger pour que la perception, elle, change.

Le fond lui-même est une décision, pas une donnée. Never Pure Black explique pourquoi la plupart des thèmes sombres se placent quelques paliers au-dessus de #000 — de la place pour que l’élévation se signale, moins d’éblouissement face au texte clair — et OLED and True Black accorde une écoute juste au seul contre-argument valable, la consommation et le contraste sur les dalles OLED.

Les tokens en font un mode, pas un projet

La moitié technique est une discipline de nommage : les composants référencent des rôles sémantiques — background, surface, text-primary — et chaque rôle porte une valeur par thème. Changez de thème et chaque élément lié suit ; aucun composant ne porte d’opinion sur le mode dans lequel il se trouve. La même mécanique est traitée du côté des tokens dans notre guide des design tokens et du côté de la palette dans color scales. Au sein de ce hub, Semantic Tokens for Theme Switching construit la couche de nommage, et prefers-color-scheme: Doing It Right in CSS la relie à la préférence système du lecteur — plus la bascule manuelle que les utilisateurs s’attendent à voir l’emporter.

Ce que la dérivation ne couvre pas

Deux tâches restent manuelles une fois la palette dérivée. Les photographies, les illustrations et les logos arrivent avec leurs propres fonds et leurs propres hypothèses de contraste — Images and Media in Dark Mode couvre l’assombrissement, les bords transparents et les cas où un asset a besoin d’une seconde version. Et une palette dérivée est un solide premier jet, pas un verdict : Testing a Dark Palette est la passe de vérification — contenu réel, écrans réels, luminosité baissée — qui rattrape ce que les calculs ne peuvent pas voir.

Les guides de ce hub

Adapter les couleurs de marque au mode sombre
Adapter les couleurs de marque au mode sombre : pourquoi la valeur canonique échoue sur du quasi-noir, quelle marche de la rampe reprend le travail, et comment relancer le test sur fond de remplissage.
Images et médias en mode sombre
En mode sombre, les images conservent leurs propres pixels : une photo lumineuse devient éblouissante sur une page presque noire. Assombrissement, variantes sombres, currentColor et le motif d'encadrement.
Jamais de noir pur : choisir les fonds sombres
Le noir pur est la mauvaise couleur de fond en mode sombre pour la plupart des interfaces : aucune place en dessous pour l'élévation, éblouissement de halation. La plage de quasi-noir qui fonctionne.
L'élévation en mode sombre : plus clair signifie plus proche
L'élévation en mode sombre repose sur la luminosité, pas sur l'ombre : les surfaces s'éclaircissent à mesure qu'elles s'élèvent. Construire l'échelle de surfaces avec de vrais nombres et la limite d'encombrement du JND.
Le mode sombre n'est pas une inversion
La conception en mode sombre commence là où l'inversion échoue : logique des rôles renversée, élévation cassée, couleur vidée. Ce que signifie dériver une palette sombre à partir des mêmes couleurs de départ.
Les pièges du contraste en mode sombre
Le contraste en mode sombre garde les mêmes planchers WCAG, mais les échecs se déplacent : les gris moyens s'effondrent, les couleurs de marque coulent, et le blanc pur passe le calcul mais déborde.
OLED et vrai noir : le débat
L'OLED rend tentant un mode sombre en vrai noir : les pixels noirs s'éteignent et économisent de l'énergie. Ce que coûte #000 — élévation, bavure, éblouissement — et pourquoi le quasi-noir reste par défaut.
Pourquoi les couleurs paraissent plus ternes en mode sombre (et la correction à 20 %)
Couleurs délavées en mode sombre ? Le même chroma paraît plus terne sur un fond quasi noir — le contraste simultané l'explique, et une hausse de chroma d'environ 20 % restaure l'éclat.
prefers-color-scheme : bien l'utiliser en CSS
Comment fonctionne prefers-color-scheme : la media query comme valeur par défaut, une surcharge data-theme pour le bouton manuel, color-scheme, et le correctif du flash de thème incorrect.
Tester une palette sombre
Le test du mode sombre en sept vérifications : revérifier le contraste par thème, contrôler la séparabilité des surfaces, les états, l'éblouissement, la vision des couleurs et le contenu à la luminosité nocturne.
Tokens sémantiques pour le changement de thème
Les design tokens du mode sombre expliqués : des rôles sémantiques qui portent une valeur par thème, pourquoi le mapping sombre n'est pas un miroir, et le CSS qui change de thème.

Regardez une palette basculer

Le remède le plus rapide contre le réflexe d’inversion, c’est de regarder une dérivation : flip a full palette between light and its derived dark — les mêmes couleurs de départ, le côté sombre exécutant sa propre courbe de luminosité avec le renfort de chroma appliqué. Ce qui change, et ce qui, délibérément, ne change pas, c’est tout le sujet de ce hub en une seule interaction.