Systèmes de couleurs pour le mode sombre : construire une palette qui tient à 2 h du matin
Un guide pratique des systèmes de couleurs pour le mode sombre. Le modèle d'élévation des surfaces, la règle de désaturation, la calibration des accents, et les sept marques qui livrent les palettes sombres les plus propres en 2026.
Systèmes de couleurs pour le mode sombre : construire une palette qui tient à 2 h du matin
Un mode sombre est un système parallèle, et les produits qui se contentent d'actionner un interrupteur sur leur version claire sont ceux qui ont l'air cassés quand la lumière s'éteint.
Voilà tout l'article en une phrase. La raison pour laquelle la plupart des modes sombres échouent est plus précise : les designers se contentent d'« inverser la palette claire » et finissent avec des étendues de gris sur gris ou un corail électrique qui brûle les rétines. La solution est architecturale, pas cosmétique. Construisez un système parallèle avec son propre modèle d'élévation, ses propres règles de désaturation et sa propre calibration des accents, et le résultat paraît intentionnel parce qu'il l'est.
Un mode sombre est un système parallèle, pas une inversion
Votre palette claire a des tokens de fond, de surface, de bordure, de texte et d'accent. Votre palette sombre a besoin des mêmes tokens, et leurs valeurs ne sont pas l'inverse des valeurs claires. La chroma se comporte différemment à faible luminosité. Les décalages de teinte se produisent à la frontière perceptive. Ce qui se lit comme un corail propre à L 0,62 en mode clair s'épanouit en néon vibrant à L 0,72 en mode sombre sur une surface quasi noire.
Les équipes qui livrent des modes sombres propres ne touchent à aucun bouton d'inversion. Elles dessinent une seconde palette, la rattachent à la même couche de tokens sémantiques et relient les deux par un sélecteur de mode à la racine du thème. C'est plus de travail. C'est la seule approche qui ne vous humilie pas.
Le modèle d'élévation des surfaces
Fond. Surface. Surface élevée. Surface en surimpression. Chaque interface de design en mode sombre qui fonctionne a ces quatre niveaux, et sauter le troisième est la raison la plus courante pour laquelle les interfaces sombres paraissent plates.
En mode clair, l'élévation est évidente : des cartes blanches posées sur des fonds gris, des ombres bon marché, et une profondeur gratuite. En mode sombre, les ombres disparaissent sur les surfaces foncées. L'élévation doit vivre dans la luminosité de la surface elle-même. Chaque niveau est une petite marche délibérée en luminosité, pas un saut.
Les quatre niveaux ne sont pas des choix esthétiques. Ce sont des éléments porteurs. Chaque composant de votre système repose sur l'un de ces niveaux, et la lisibilité de chaque paire texte-sur-surface dépend de l'endroit de la pile où vous la placez.
Le fond pose le plancher
Le fond est le niveau le plus profond. La règle : n'utilisez jamais du noir pur (oklch(0 0 0)) à pleine saturation. Utilisez un quasi-noir légèrement teinté, autour de 8 à 10 pour cent de luminosité. La teinte est presque toujours chaude, car les noirs froids paraissent plus bon marché et plus glacials que le produit ne le mérite.
Une valeur comme oklch(0.10 0.012 30) vous donne un charbon chaud et sombre qui se lit comme du « noir » sur n'importe quel écran, tout en évitant la sensation de vide mort du noir pur. La chroma de 0,012 et l'angle de teinte de 30 degrés (une légère pente chaude) suffisent. Plus, et ça devient boueux. Moins, et c'est sans vie.
La surface porte le contenu
La surface est le niveau où se trouve la plupart du contenu, légèrement surélevé par rapport au fond. L'écart de luminosité entre le fond et la surface est généralement de 3 à 5 points en OKLCH. Cet écart est le premier signal que l'œil lit : c'est ici que vit le contenu, le fond est derrière.
oklch(0.14 0.010 30) contre oklch(0.10 0.012 30) offre assez de séparation visuelle sans bordure ni ombre. La chroma baisse légèrement parce que, à mesure que la luminosité augmente sur les surfaces sombres, la chroma doit reculer pour éviter un bavement boueux dans le fond. C'est subtil au rendu et complètement faux quand on l'omet.
Surface élevée et surface en surimpression
Les surfaces élevées accueillent les cartes et les panneaux. Les surfaces en surimpression accueillent les modales et les feuilles. La progression de luminosité continue : surface élevée à environ oklch(0.18 0.008 30), surface en surimpression à oklch(0.22 0.007 30). La chroma baisse à chaque palier, car plus haut dans la pile veut dire plus près du spectateur, et ces surfaces doivent paraître nettes.
La raison pour laquelle la plupart des interfaces sombres s'effondrent en bouillie grise et plate, c'est que les designers n'utilisent que deux niveaux : fond et surface. Les cartes vivent sur le fond, le texte vit sur la surface, et tout se lit à la même profondeur. Ajoutez le troisième et le quatrième niveau et l'interface gagne aussitôt en lisibilité, sans une seule ombre portée.
La règle de désaturation
Les couleurs saturées qui fonctionnent en clair brûlent la nuit. La règle : désaturez les accents de 15 à 25 pour cent et baissez encore plus la chroma du texte et des bordures. Il ne s'agit pas de ternir la marque. Il s'agit de la façon dont l'œil traite la chroma en faible lumière ambiante.
En forte lumière ambiante (le bureau à midi), une chroma vive paraît dynamique. En faible lumière ambiante (le bureau à minuit), cette même chroma paraît agressive, auréolée et physiquement inconfortable. La solution n'est pas de craindre la couleur. C'est de la calibrer. La marque reste reconnaissable. Le produit arrête de faire mal.
Pourquoi le texte blanc pur est une erreur
Du blanc pur sur du quasi-noir n'est pas du contraste élevé, c'est trop de contraste. L'effet de halo, où un texte brillant semble déborder dans son entourage sombre, est un phénomène optique documenté qui rend les interfaces sombres plus difficiles à lire, pas plus faciles.
La bonne valeur pour le texte principal en mode sombre se situe autour de 90 à 95 pour cent de luminosité avec une pointe de teinte chaude. oklch(0.93 0.005 60) se lit comme du « blanc » mais ne crée pas de halo. Le texte secondaire descend à oklch(0.70 0.010 60), toujours lisible en taille de corps de texte, visuellement en retrait par rapport au texte principal. Le blanc cassé est la valeur que les designers ratent le plus souvent, parce qu'il ressemble à un compromis alors que c'est en réalité la bonne valeur.
La calibration des accents garde la marque reconnaissable
Les accents de marque doivent se lire en mode sombre sans perdre leur identité. La calibration est une hausse de luminosité plus une baisse de chroma, pas un changement de teinte. Si l'accent en mode clair est oklch(0.62 0.22 25), l'accent en mode sombre est oklch(0.72 0.17 25). Même teinte. Luminosité plus haute pour ressortir sur les surfaces sombres. Chroma plus basse pour ne pas créer de halo.
L'erreur est de traiter le mode sombre comme un endroit où l'on tamise les accents. Tamiser tue la reconnaissance de la marque. Monter la luminosité et baisser la chroma préserve l'esprit de la palette de couleurs de marque tout en évitant la brûlure visuelle. L'utilisateur ne remarque pas l'ajustement. Il remarque que le produit est beau.
La passe de contraste que WCAG rate
Les ratios de contraste WCAG 2.1 laissent passer beaucoup d'interfaces sombres moches. Un ratio de 4,5:1 entre une surface sombre et un texte gris atténué peut valider WCAG tout en étant vraiment difficile à lire en conditions ambiantes réelles. La deuxième passe est APCA, qui modélise plus fidèlement la perception de la luminosité, surtout dans la distinction clair sur sombre.
Après APCA, faites le test à l'œil. Le shimmer est la vibration que vous voyez quand deux couleurs de luminosité proche mais de chroma différente se côtoient. Le halo est le débordement des éléments brillants dans l'entourage sombre. Le bloom est l'éclat perçu sur les accents saturés. Si l'un d'eux est présent, la paire échoue quel que soit le ratio. Corrigez les valeurs, pas le ratio. Pour aller plus loin sur la mécanique du contraste de couleur accessible, la méthodologie complète couvre des cas limites que l'audit en mode clair ne fait pas ressortir.
Sept marques qui livrent des palettes sombres propres
Linear, Notion, Vercel, Stripe, GitHub, Arc et Raycast résolvent chacun le mode sombre différemment. Les motifs qu'elles partagent sont ceux qui valent d'être volés.
| Marque | Modèle de surface | Stratégie d'accent | Ce qu'elles réussissent |
|---|---|---|---|
| Linear | Vrai modèle à quatre niveaux, paliers serrés | Violet relevé, chroma ~0,15 | Des paliers si serrés que la profondeur paraît fluide |
| Notion | Trois niveaux avec surimpression | Usage minimal de l'accent en sombre | Presque aucune chroma, toute la profondeur |
| Vercel | Binaire (fond + élevé) | Blanc uniquement | Brutalement simple ; ça marche parce que c'est assumé |
| Stripe | Quatre niveaux, teinte chaude | Bleu calibré, pas réduit | Des données denses lisibles à chaque niveau |
| GitHub | Trois thèmes nommés (dark, dimmed, high-contrast) | Bleu-vert, désaturé | « Dimmed » est le bon réglage par défaut |
| Arc | Teinte personnalisée par espace | Teinte entièrement définie par l'utilisateur | L'élévation vient du décalage de teinte, pas de la luminosité |
| Raycast | Deux niveaux avec flou prononcé | Accent orange, fortement relevé | Le flou crée une élévation implicite |
Linear est l'implémentation de référence. Les paliers de surface sont assez étroits pour que l'interface se lise comme un champ sombre unique doté d'une vraie profondeur. L'accent violet est identifiable comme le violet de Linear sans jamais brûler. La hiérarchie typographique repose sur des paliers de luminosité dans les tokens de texte, pas sur la seule taille.
Vercel prouve que le modèle binaire peut fonctionner si l'on s'y engage à fond. Pas de troisième surface. Pas d'états gris. Tout est soit fond profond, soit surface légèrement élevée, et l'engagement monochrome en fait une décision de design plutôt qu'une limitation. La plupart des équipes ne peuvent pas y arriver parce qu'elles ont des couleurs de statut, des illustrations et des moments de marque qui demandent de l'élévation.
L'option « Dimmed » de GitHub est le bon constat appliqué au mauvais périmètre. Ils l'ont construite comme une variante de thème, mais la vraie leçon est qu'une surface sombre à teinte chaude est plus confortable pour une lecture prolongée que le réglage froid par défaut. Chaque mode sombre devrait être chaud par défaut.
Vous voulez un mode sombre qui paraît intentionnel à 2 h du matin au lieu d'inversé à midi ? Brainy conçoit des systèmes de couleurs sombres parallèles, avec le modèle d'élévation, la calibration des accents et la table de tokens OKLCH prêts à déposer dans Figma et CSS. Engagez Brainy.
La table de tokens d'un mode sombre qui fonctionne
La table de tokens ci-dessous livre un vrai mode sombre en coordonnées OKLCH. Les primitives sont les valeurs brutes. Les sémantiques sont les rôles. Déposez les primitives dans une collection de variables Figma comme valeurs brutes. Reliez les sémantiques aux primitives sous forme d'alias. Cette architecture à deux couches est tout le système de tokens.
| Token | Rôle | Valeur OKLCH | Hex approx. |
|---|---|---|---|
--color-bg | Plancher du fond | oklch(0.10 0.012 30) | #191512 |
--color-surface | Surface de contenu par défaut | oklch(0.14 0.010 30) | #221e1a |
--color-surface-elevated | Cartes, panneaux | oklch(0.18 0.008 30) | #2c2723 |
--color-surface-overlay | Modales, menus, feuilles | oklch(0.22 0.007 30) | #35302c |
--color-text-primary | Texte courant, titres | oklch(0.93 0.005 60) | #edeae5 |
--color-text-secondary | Légendes, labels, méta | oklch(0.70 0.010 60) | #b0a89e |
--color-text-disabled | États désactivés | oklch(0.45 0.005 60) | #6e6860 |
--color-border-subtle | Séparateurs, filets | oklch(0.22 0.008 30) | #36302b |
--color-border-default | Bordures de champs, bordures de cartes | oklch(0.28 0.010 30) | #433d37 |
--color-accent | CTA principal, états actifs | oklch(0.72 0.17 25) | #e0816a |
--color-accent-muted | Survol, accent secondaire | oklch(0.65 0.12 25) | #c27060 |
--color-accent-subtle | Fond teinté derrière les éléments d'accent | oklch(0.16 0.04 25) | #2a1e1a |
La teinte reste entre 25 et 30 degrés partout (territoire corail chaud). Le système est cohérent parce que la température est constante du plancher au plafond. Passer la teinte à 250 degrés donne une palette façon Linear. Passer à 200 degrés donne une palette proche de Vercel. La structure ne change pas. Seule la teinte change.
Pour l'implémentation, toute la table se traduit en propriétés personnalisées CSS sur :root[data-theme="dark"]. Dans Figma, chaque ligne est une variable dans une collection en mode « Dark ». Cette architecture à deux collections est ce qui rend un design system extensible à toutes les surfaces.
Bascule de mode : l'implémentation qui ne scintille pas
Basculer de mode sans flash du mauvais thème se règle en définissant le schéma de couleurs sur l'élément html avant l'exécution de tout JavaScript. Toute autre approche est fausse dans au moins un cas limite.
Le principe : lire localStorage pour une préférence enregistrée dans une balise <script> inline bloquante dans <head>. Appliquer data-theme="dark" ou data-theme="light" à l'élément html de façon synchrone, avant le rendu du CSS qui référence les propriétés personnalisées. Pas de React. Pas de useEffect. Pas de flash.
<script>
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.dataset.theme = saved ?? (prefersDark ? 'dark' : 'light');
</script>
Ce script est bloquant par conception. Il s'exécute avant le rendu. Le flash de contenu sans style est causé par l'application du thème en JavaScript après le premier affichage, et ce seul script bloquant l'élimine entièrement.
Préférence système, défaut et surcharge
Le défaut doit suivre la préférence de l'OS. La surcharge de l'utilisateur doit persister dans localStorage. Le sélecteur doit exposer trois états : système, clair et sombre.
Un sélecteur à deux états est une erreur de design. L'utilisateur qui règle son OS en sombre et veut que l'app suive n'a pas envie de gérer un second interrupteur. Le sélecteur a besoin d'un état « système » qui efface la surcharge enregistrée et laisse la préférence de l'OS mener. La plupart des apps construisent deux états, puis reçoivent un ticket de support chaque fois que quelqu'un change le thème de son OS et se demande pourquoi l'app n'a pas suivi.
FAQ
Utiliser des couleurs d'accent en mode sombre nuit-il à l'autonomie des écrans OLED ?
Les couleurs d'accent couvrent une petite surface dans une interface typique. Les économies de batterie du mode sombre sur OLED viennent presque entièrement des grandes zones sombres. Un bouton CTA corail sur fond sombre ne change pas de façon significative la consommation. Les fonds noir pur comptent. Les illustrations saturées en plein écran comptent. Un bouton, non.
Puis-je utiliser directement ma couleur de marque du mode clair comme accent du mode sombre ?
Pas sans calibration. Si votre couleur de marque en mode clair est à L 0,55 à 0,65 en OKLCH, l'utiliser telle quelle sur une surface sombre soit sous-performera (trop terne pour ressortir), soit créera un halo (trop vive face à l'ambiance sombre). Relevez la luminosité de 8 à 12 points. Baissez la chroma de 20 à 30 pour cent. Gardez la teinte. C'est l'accent calibré du mode sombre.
Quel est le mode sombre minimum viable pour un système qui n'en a pas encore ?
Fond, surface, surface élevée, texte principal, texte secondaire, accent. Six tokens. Ce n'est pas complet, mais c'est un système. Chaque composant peut se rattacher à l'une de ces six valeurs, le modèle d'élévation est en place pour l'extension, et vous pouvez le livrer sans rougir. Commencez par là, pas avec une centaine de tokens et aucune structure.
Un mode sombre généré automatiquement est-il jamais acceptable ?
Pour des prototypes, des outils internes et des produits avec un seul designer actif, une inversion automatisée avec ajustements de saturation est acceptable comme point de départ. Comme mode sombre livré pour un produit avec des standards de marque et de vrais utilisateurs, non. Les modes sombres automatisés échouent sur les couleurs d'accent, sur les illustrations et sur les états des composants. C'est une esquisse de départ, pas un système fini.
OKLCH facilite-t-il la construction d'un mode sombre ?
Énormément. L'axe de luminosité perceptuellement uniforme d'OKLCH fait que les paliers de luminosité entre niveaux d'élévation se comportent comme prévu d'une teinte à l'autre. En HSL, un palier de 5 points sur l'orange ne ressemble pas à un palier de 5 points sur le bleu. En OKLCH, si. Construire le modèle d'élévation en OKLCH signifie que les paliers semblent cohérents quelle que soit la teinte de l'accent. Le plaidoyer complet pour la couleur OKLCH détaille les maths.
Les tokens sémantiques doivent-ils différer entre clair et sombre, ou seulement les primitives ?
Les primitives diffèrent. Les sémantiques restent identiques. --color-surface signifie « la surface de contenu par défaut » dans les deux modes. La primitive vers laquelle il pointe est différente en mode sombre. C'est tout l'intérêt de l'architecture à deux couches. Les composants référencent les sémantiques. Les sémantiques référencent les primitives. La bascule de mode réassigne les primitives. Les composants se mettent à jour automatiquement et correctement.
Le changement que débloquent vraiment les systèmes de mode sombre
Un vrai mode sombre est une surface de design parallèle. Pas un après-coup. Pas un réglage dans les paramètres. Une seconde surface avec sa propre structure, ses propres contraintes et ses propres choix d'artisanat. Les équipes qui la traitent ainsi livrent des produits qui paraissent intentionnels à 2 h du matin. Les équipes qui actionnent un interrupteur livrent des produits qui ont l'air d'avoir été laissés inachevés.
Le modèle d'élévation est la fondation. La règle de désaturation et la calibration des accents sont la couche d'artisanat. La table de tokens OKLCH est l'implémentation. Le sélecteur à trois états avec bascule sans scintillement est la condition de livraison. Chaque pièce s'emboîte. Rien n'est optionnel si vous voulez un bon résultat.
Construisez le système parallèle. Livrez la table. La différence se voit.
Vous voulez un mode sombre qui paraît intentionnel à 2 h du matin au lieu d'inversé à midi ? Brainy conçoit des systèmes de couleurs sombres parallèles, avec le modèle d'élévation, la calibration des accents et la table de tokens OKLCH prêts à déposer dans Figma et CSS. Engagez Brainy.
Enregistrement en cours dans drafts/dark-mode-color-systems.md.
Want a dark mode that looks intentional at 2 a.m. instead of inverted at noon? Brainy designs parallel dark color systems with the elevation model, accent calibration, and the OKLCH token map ready to drop into Figma and CSS.
Get Started
