Presque jamais, et il est utile de comprendre pourquoi avec des chiffres plutôt que par simple règle empirique. Voici les fonds sombres et les surfaces de cartes de cinq palettes distinctes, en HSL :

Trois modèles, tous cohérents, aucun n'est le fruit du hasard.

• Rien n'est à 0 % de luminosité. La valeur la plus sombre est à 8 %. Le noir pur est la seule valeur qui ne laisse aucune marge de manœuvre : dès que vous avez besoin d'une surface *sous* l'arrière-plan, vous êtes bloqué.
• Les cartes sont plus claires que l'arrière-plan, de 3 à 5 points. Dans les interfaces sombres, l'élévation se traduit par une luminosité accrue. Cela inverse l'instinct du mode clair, où une carte est souvent l'élément le plus clair posé sur une page teintée.
• Un seul des cinq est un vrai gris. Les autres portent une teinte — 30, 222, 128, 36 — généralement orientée vers la couleur d'accentuation. Un neutre sombre teinté paraît travaillé ; un neutre sans teinte paraît être un réglage par défaut, car c'est précisément ce qu'il est.

Le moyen le plus rapide d'obtenir un mauvais mode sombre est d'inverser la luminosité de chaque valeur du mode clair. Quatre éléments spécifiques s'en trouvent brisés, approximativement dans cet ordre :

1. Les ombres ne fonctionnent plus. Une ombre est une zone d'obscurité projetée sur une surface plus claire. Sur une surface sombre, il n'y a plus rien à assombrir ; tous vos indices d'élévation disparaissent silencieusement et l'interface s'aplatit.
2. L'accent manque de contraste. Une couleur de marque saturée et moyenne, parfaitement lisible sur blanc, est souvent trop sombre sur un fond presque noir. L'inversion des neutres ne la modifie pas, elle échoue donc discrètement plutôt qu'évidemment.
3. Les bordures disparaissent ou deviennent criardes. En mode clair, une bordure est une ligne légèrement plus sombre. Inversée, elle devient une ligne légèrement plus claire — qui soit disparaît face à la carte, soit brille sur l'arrière-plan, selon la surface sur laquelle elle se trouve.
4. Les états désactivés et atténués s'effondrent. En mode clair, ce sont des gris plus clairs. Inversés, ils deviennent des gris foncés sur un fond sombre, et l'état « atténué » devient « invisible ».

Les ombres étant indisponibles, les interfaces sombres expriment la profondeur via la luminosité des surfaces. C'est précisément le rôle de l'écart entre l'arrière-plan et la carte dans le tableau ci-dessus : chaque niveau supérieur dans la pile correspond à un gain de luminosité.

Vous avez besoin d'au moins trois niveaux, et il est préférable de les nommer plutôt que d'improviser : l'arrière-plan de la page, une surface surélevée (cartes, panneaux) et une surface de superposition (popovers, menus déroulants, dialogues) qui surplombe les deux autres. Un espacement de 3 à 5 points de luminosité permet de garder des limites lisibles sans transformer l'écran en zébrure. En dessous de 3 points, les niveaux ne sont plus distinguables à une luminosité normale ; au-delà de 6, la surface supérieure commence à ressembler à un panneau de mode clair parachuté là.

Regardez à nouveau les couleurs primaires de ces cinq kits : 12 71% 46%, 46 85% 60%, 225 63% 80%, 114 47% 50%, 23 92% 60%. Toutes sont des teintes claires ou moyennes. Aucune n'est une version sombre et saturée de la teinte, car une couleur sombre et saturée sur une surface presque noire est à la fois difficile à lire et fatigante pour l'œil.

La règle générale est qu'un accent de mode clair doit être éclairci et généralement désaturé pour le mode sombre. L'éclaircissement apporte le contraste ; la désaturation empêche la couleur de « vibrer » contre le neutre sombre, un effet qui rend certains thèmes sombres physiquement épuisants. De plus, l'accent nécessite sa propre décision de premier plan : une couleur assez lumineuse pour être lisible sur fond sombre est souvent assez lumineuse pour nécessiter un texte *sombre* par-dessus, soit l'inverse du couple utilisé en mode clair.

Vérifiez les deux directions par rapport à un objectif de contraste. Le texte du corps sur l'arrière-plan est évident ; les deux points souvent oubliés sont le texte atténué sur une carte et le premier plan de l'accent sur l'accent lui-même.

C'est là que la plupart des galeries de palettes vous abandonnent. Une rangée de cinq codes hexadécimaux vous donne l'ambiance, mais ne répond à presque aucune des questions qu'un écran réel pose : quelle est la couleur d'une bordure sur une carte, à quoi ressemble un texte atténué sur une superposition, quel aspect a un bouton destructif lorsqu'il est désactivé, quelle est la couleur de l'anneau d'un champ de saisie focalisé.

La liste des rôles est la même dans les deux modes, et c'est là tout l'intérêt : background, foreground, card, card-foreground, popover, popover-foreground, muted, muted-foreground, primary, primary-foreground, secondary, accent, destructive, border, input, ring, plus les séries de graphiques. Définissez-les une fois par mode et chaque composant se résout sans intervention manuelle. Si vous les ignorez, chaque nouvel écran devra faire un choix différent. La liste complète et l'utilité de chaque rôle se trouvent dans explications sur les design tokens de couleurs sémantiques.

Tout ce qui précède est une règle. Voici quatre ensembles sombres qui s'y conforment, choisis parce qu'ils résolvent le même problème de manières visiblement différentes. Observez le couple background et card dans chacun d'eux : cet écart constitue le modèle d'élévation, et c'est la décision qui détermine le plus si une UI sombre paraît conçue ou simplement inversée.

Les interfaces sont de plus en plus conçues par des agents de code s'appuyant sur un brief écrit, et le mode sombre est l'élément le plus fréquemment oublié dans ces briefs. Nous avons analysé 299 fichiers DESIGN.md publics — le fichier qu'un agent de code lit avant de générer l'UI — pour mesurer leur contenu.

La conséquence est prévisible. Si on lui demande une variante sombre sans instructions écrites, l'agent inverse les gris — précisément l'erreur qui brise les quatre points mentionnés précédemment. Il produit un résultat plausible sur le premier écran, mais incohérent dès le cinquième ; et comme chaque écran semble correct individuellement, personne ne s'en aperçoit avant que l'application entière ne soit bâtie.

1. 1

   Superposez trois surfaces

   Placez un overlay sur une carte, elle-même sur le fond, avec une bordure d'un pixel sur chaque élément. Si une limite disparaît, vos paliers de luminosité sont trop proches ou votre rôle de bordure remplit une double fonction.

2. 2

   Affichez du texte atténué sur chaque surface

   Pas seulement sur le fond. C'est sur le texte atténué des cartes que les palettes inversées échouent généralement, alors qu'il s'agit de l'état de texte le plus courant dans une interface dense.

3. 3

   Créez une confirmation d'action destructive

   Cela permet de tester simultanément la couleur destructive, son premier plan, son état de survol et sa bordure — le groupe de rôles que l'on définit en dernier et que l'on utilise en premier.

4. 4

   Testez le focus

   Naviguez avec la touche Tab vers un champ de saisie. L'anneau de focus est une couleur que personne ne choisit délibérément ; c'est donc soit votre couleur d'accentuation qui remplit un rôle pour lequel elle est inadaptée, soit un défaut du navigateur que personne n'a souhaité.

5. 5

   Examinez un tableau dense

   L'exercice le plus difficile pour une palette sombre est d'aligner trois nuances de gris. Une palette qui survit à un tableau de paramètres survivra sans effort à une page marketing ; l'inverse n'est pas vrai.

• Partir du noir pur. Cela supprime le niveau inférieur à votre arrière-plan avant même que vous ne réalisiez que vous en avez besoin.
• Réutiliser la couleur d'accentuation du mode clair sans modification. Elle doit généralement être éclaircie, souvent désaturée, et peut nécessiter un texte sombre par-dessus.
• Conserver les ombres tout en ajoutant des paliers de luminosité. Choisissez un seul langage d'élévation. Cumuler les deux donne l'impression que les surfaces surélevées sont floues.
• Ne définir que les besoins du premier écran. Les rôles que vous oubliez sont ceux que l'écran suivant inventera, et il les inventera différemment.
• Tester sur une page marketing. Les sections Hero flattent toutes les palettes. Testez sur l'écran le plus dense de votre interface.