Le mode sombre n’est pas une inversion

Le mode sombre le plus rapide jamais livré tient en une ligne de CSS : filter: invert(1) hue-rotate(180deg) sur l’élément racine. Une équipe pressée par les délais l’essaie, et la première capture d’écran semble presque plausible — les surfaces claires sont devenues sombres, le texte sombre est devenu clair, la mise en page est intacte. Puis quelqu’un s’en sert. Les photos s’affichent en négatif jusqu’à ce que chacune soit ré-inversée. Le bleu de la marque revient sous une approximation nauséeuse de lui-même. Les bordures qui se lisaient comme de discrètes lignes en creux paraissent maintenant en relief, les boutons au repos semblent enfoncés, et rien de précis n’est vraiment cassé — l’écran entier est simplement, uniformément, subtilement faux.

Le mode sombre n’est pas le thème clair inversé — c’est une seconde palette dérivée des mêmes couleurs de départ. L’inversion réutilise les valeurs du thème clair dans des positions miroir et échoue de trois manières à la fois : les relations entre rôles s’inversent en bloc, l’élévation perd son signal, et la couleur se vide sur le fond sombre. La dérivation, elle, relance la construction de la palette pour un contexte sombre — sa propre courbe de luminosité s’élevant depuis un plancher profond, le chroma rehaussé pour contrer l’atténuation perceptuelle, et chaque rôle re-vérifié pour le contraste. Cette distinction sous-tend tout dans notre guide du mode sombre ; cet article explique pourquoi l’approche évidente échoue et ce que fait celle qui fonctionne.

Pourquoi l’inversion de la palette claire échoue-t-elle ?

L’inversion existe en deux degrés. Le degré grossier, c’est le filtre CSS : inverser les canaux RGB transforme chaque couleur en sa complémentaire, d’où le besoin d’un hue-rotate(180deg) en rattrapage — et même là, les teintes ne reviennent qu’approximativement, et chaque image doit être sauvée. Le degré rigoureux conserve la teinte et le chroma et n’inverse que la luminosité ; il mérite d’être pris au sérieux, car il échoue pour des raisons instructives.

La logique des rôles se casse. Dans un thème clair, une bordure discrète est légèrement plus sombre que la surface qu’elle borde, et l’œil la lit comme un trait tracé — un creux. Inversez la luminosité et la bordure devient légèrement plus claire que sa surface, ce qui se lit comme un relief : une arête qui capte la lumière au lieu d’un sillon qui retient l’ombre. Multipliez cela sur chaque relation intermédiaire — séparateurs, rayures de tableau, contours de champs, teintes de survol, texte désactivé — et le thème se remplit de petits mensonges physiques. Le problème plus profond, c’est que certaines relations devraient s’inverser (le texte sombre sur clair devient à juste titre du texte clair sur sombre) tandis que d’autres ne le doivent pas, et l’inversion ne sait pas faire la différence. Elle les inverse toutes, sans distinction.

L’élévation s’inverse de travers. Le mode clair signale une surface surélevée par une ombre en dessous. Sur un fond sombre, ce signal ne s’enregistre presque pas — il n’y a quasiment nulle part de plus sombre où l’ombre puisse aller — alors les thèmes sombres signalent la hauteur autrement : les surfaces s’éclaircissent à mesure qu’elles montent, convention codifiée dans les recommandations de Material pour le thème sombre. L’inversion ne produit rien de tel. Les ombres survivent au miroir, inutilement, et les relations entre surfaces atterrissent là où l’arithmétique les place plutôt que là où la logique d’élévation du mode sombre en a besoin.

La couleur se vide. La coloration perçue se juge par rapport à l’environnement, et une même valeur de chroma paraît nettement plus terne sur un quasi-noir que sur du blanc. Une palette inversée reporte les valeurs de chroma du thème clair telles quelles, si bien que la couleur de marque arrive délavée, et chaque badge et accent arrive fatigué avec elle. Les palettes sombres dérivées contrent cela en rehaussant le chroma — dans Scale Composer d’environ 20 % — là où l’inversion ignore qu’il y a quoi que ce soit à contrer.

Que signifie dériver une palette sombre ?

La dérivation conserve les entrées et refait la construction. Les couleurs de départ — les couleurs de marque dont la palette est issue — restent les mêmes, si bien que le thème sombre reste reconnaissable comme la même marque. Tout ce qui en découle est recalculé à neuf pour le contexte sombre.

La courbe de luminosité est le plus grand changement. Une rampe de mode clair va du quasi-blanc jusqu’à une marche profonde — L ≈ 0,97 à ≈ 0,25 — parce que les interfaces claires ont besoin de nombreuses teintes exploitables et d’une extrémité sombre modeste. La rampe sombre dérivée ne reflète pas cela. Elle suit sa propre courbe, remontant depuis un plancher profond : les marches de classe arrière-plan se situent autour de L ≈ 0,13–0,19, et la rampe grimpe jusqu’à ≈ 0,95 à l’extrémité de classe texte. Le chroma est replanifié par-dessus — rehaussé d’environ 20 % par rapport aux valeurs claires, borné par ce que le gamut autorise à chaque luminosité. Et les rôles sémantiques sont re-dérivés plutôt que re-pointés : les rôles de texte, de bordure et d’état sont choisis contre les nouvelles surfaces, avec les seuils WCAG et l’APCA vérifiés sur le fond sombre, car une association qui passait sur du blanc ne prouve rien sur du quasi-noir. L’export de tokens porte alors les jeux de rôles clair et sombre côte à côte — une section semantic et une section semantic-dark — si bien qu’un changement de thème échange des valeurs résolues sans aucun recalcul à l’exécution.

Où l’inversion et la dérivation divergent-elles en chiffres ?

Prenez la rampe bleue issue de #2563eb — oklch(0.546 0.215 262.9). La colonne de gauche est la rampe claire générée ; celle du milieu est le miroir rigoureux (L → 1 − L, chroma conservé) ; celle de droite est la rampe sombre dérivée.

Lisez d’abord les deux extrémités. La rampe claire s’étend de 0,97 → 0,25, donc son miroir s’étend de 0,03 → 0,75 — une plage construite pour un thème clair, retournée, pas une plage construite pour un thème sombre. Le plancher inversé à L 0,03 se situe bien en dessous de la zone ≈ 0,13–0,18 où fonctionnent les arrière-plans sombres, sur un terrain où vivent le halo et les détails écrasés. Et le plafond inversé s’arrête à 0,75 : la marche censée porter le texte s’affiche en oklch(0.75 0.026 262.9) ≈ #A5AEBF, un gris-bleu terne, là où la rampe dérivée atteint ≈ 0,95 — ≈ #E6EFFF, un blanc cassé qui peut réellement faire le travail.

Lisez ensuite le chroma à la marche de travail. L’inversion conserve C 0,192 et l’abaisse à L 0,39 : ≈ #0134A9, un bleu sombre et éteint que personne n’a jamais choisi. La rampe dérivée place le cœur interactif à L ≈ 0,54 avec un chroma rehaussé à ≈ 0,23 : ≈ #1C5EF1, vif sur le fond sombre comme la couleur de départ l’était sur le blanc.

Ouvrez cette comparaison dans Scale Composer — la même couleur de départ bleue rendue deux fois, l’inversion naïve à côté de la rampe sombre dérivée, avec les courbes de luminosité tracées l’une par-dessus l’autre pour que le miroir et la remontée soient visibles comme des formes.

Qu’est-ce qui requiert encore un designer ?

La dérivation automatise les valeurs, pas le jugement. Quelques décisions restent humaines. La première : quels éléments conservent toute leur vivacité — un thème sombre où chaque remplissage prend le chroma rehaussé peut paraître plus criard que son équivalent clair, et décider de ce qui reste discret est un choix de design. L’imagerie en est une autre — les photographies et les illustrations ne s’inversent ni ne se dérivent, et leur choisir un traitement adapté au sombre est une tâche à part. Et l’ancre de la page — que l’arrière-plan le plus sombre reste lié à la marche profonde de la marque ou se découple vers un neutre ordinaire — change la température de tout le thème. La dérivation vous donne une palette de départ correcte ; ces choix en font une palette conçue.

Essayez-le sur votre propre palette

La différence entre une palette reflétée et une palette dérivée est plus facile à ressentir qu’à lire. Dérivez une palette sombre à partir de votre propre couleur de marque — collez une couleur de départ, et regardez la rampe sombre sortir avec sa propre courbe, son chroma rehaussé et ses rôles re-vérifiés, à côté de ce qu’une inversion vous aurait donné.