Images et médias en mode sombre

Le thème sombre du tableau de bord est parti en bon état : une page presque noire, des paliers de surface soignés, un texte blanc cassé, un contraste vérifié partout. Puis le contenu s’est chargé. Chaque graphique était une capture d’écran avec un fond de tracé blanc, les photos produit avaient été prises sur fond blanc, et le panneau d’aide intégrait une vidéo à la vignette blanche. La nuit, l’interface se lisait comme une rangée de fenêtres éclairées sur un mur sombre — le thème était sombre ; la page ne l’était pas.

Les images sont la partie de la page qu’un thème ne peut pas recolorer : photographies, captures d’écran et contenus intégrés conservent leurs propres pixels dans les deux modes. Non traitée, une image à fond blanc devient de loin l’objet le plus lumineux d’une interface sombre — sur une page presque noire, elle se situe autour de 20:1, plus lumineuse que n’importe quel texte du thème. Les réponses qui marchent, à peu près par ordre de coût : assombrir légèrement les médias en mode sombre, servir des variantes sombres des graphiques qui vous appartiennent, dessiner icônes et diagrammes en currentColor, et encadrer le reste dans un cadre. La palette dans laquelle ces correctifs s’inscrivent — l’ancre, les surfaces, les valeurs de texte — fait l’objet de notre guide du mode sombre ; cet article porte sur les pixels que cette palette ne peut pas atteindre.

Pourquoi les images lumineuses ruinent-elles un thème sombre ?

Parce que l’œil ne cesse de s’adapter à l’objet le plus lumineux qu’il voit. La vision s’ajuste à la luminance moyenne du champ visuel, et un thème sombre fonctionne en maintenant cette moyenne basse — un texte de luminance modérée se lit clairement parce que tout le champ s’accorde sur l’obscurité du monde. Un rectangle lumineux rompt cet accord : l’adaptation se recalibre vers l’image, et tout ce qui l’entoure devient trouble. L’image ne fait pas que reposer sur la page ; elle recalibre la page autour d’elle.

Les chiffres disent à quel point c’est déséquilibré. Sur une page à L ≈0,15 — ≈#070B14 — un champ d’image blanc mesure ≈20:1, tandis que le texte courant le plus lumineux du thème atteint ≈15:1. La capture d’écran surpasse en contraste chaque titre à l’écran, et l’attention suit le contraste, que le contenu le mérite ou non.

Faut-il assombrir les images en mode sombre ?

Un léger assombrissement est le correctif efficace le moins coûteux, et il tient en une seule règle :

@media (prefers-color-scheme: dark) {
  .content img,
  .content video {
    filter: brightness(0.85);
  }
}

Un multiplicateur de ≈0,85 fait passer un champ d’image blanc de ≈20:1 à ≈14:1 sur la même page — dans le registre du texte lumineux propre au thème plutôt qu’au-dessus. L’image cesse d’être l’objet le plus criard à l’écran, et la plupart des photographies survivent au changement sans dommage visible.

La réserve, c’est la fidélité. Le filtre multiplie chaque canal, il assombrit donc le produit en même temps que son fond — et une couleur de tissu ou un échantillon de peinture qui se vend sur sa précision doit être assombri doucement (de classe 0,9) ou pas du tout. L’assombrissement est un instrument grossier : il ne sait pas ce que l’image montre, seulement à quel point elle est lumineuse. Il gagne sa place comme traitement par défaut de l’imagerie de contenu, avec des exceptions déclarées là où la couleur est la marchandise.

Comment servir une image différente selon le thème ?

Pour les graphiques qui vous appartiennent — logos, illustrations, graphiques — la réponse robuste est de livrer deux ressources et de laisser le navigateur choisir :

<picture>
  <source srcset="revenue-chart-dark.svg"
          media="(prefers-color-scheme: dark)">
  <img src="revenue-chart-light.svg" alt="Revenue by quarter">
</picture>

La media query de l’élément <source> sélectionne la variante sombre dès que le système de l’utilisateur la demande ; l’élément <img> reste le repli partout ailleurs. Le comportement complet de l’élément est documenté dans la référence picture de MDN.

Le coût est franc : deux ressources à produire et à maintenir synchronisées, pour toujours. Cela vaut la peine pour les graphiques porteurs de sens — et la variante sombre doit être conçue pour le fond sombre, non générée à partir de la version claire : des arrière-plans transparents ou aux couleurs du thème, et des couleurs choisies pour le presque-noir comme le reste de la palette sombre l’a été.

Quand currentColor résout-il le problème ?

Pour les icônes et les diagrammes monochromes, la réponse compatible avec les tokens est de cesser complètement d’embarquer la couleur dans la ressource. Un SVG en ligne dessiné avec fill="currentColor" ou stroke="currentColor" hérite de la couleur de texte CSS de son contexte — ce qui signifie qu’il hérite du token de texte sémantique, ce qui signifie qu’il change de thème au moment même où le thème bascule, sans deuxième ressource ni filtre. Flèches, glyphes de statut, dessins au trait d’états vides et diagrammes d’architecture simples peuvent tous voyager ainsi.

La limite est dans le nom : une seule couleur. La technique couvre les graphiques qui sont des dessins de lignes, non des images de choses — dès qu’une ressource a besoin de sa propre palette, elle passe au traitement <picture> ci-dessus.

Qu’est-ce que le motif d’encadrement ?

Une partie de la luminosité ne peut être ni assombrie ni remplacée : photos téléversées par les utilisateurs, vignettes tierces, le graphique qui doit rester blanc par fidélité. Le seul geste restant est de changer ce que la luminosité signifie. Une analogie utile est le mur de galerie : une photographie blanche sur un mur sombre n’est jamais accrochée nue — elle reçoit un passe-partout et un cadre, et le passe-partout fait la médiation entre le tirage lumineux et la pièce sombre. L’équivalent dans l’interface est de placer les médias lumineux sur une surface surélevée avec un padding visible : l’image se lit comme un contenu présenté dans un cadre plutôt que comme un trou brûlé dans le thème.

Le cadre est entièrement construit à partir de la machinerie existante de la palette — une surface surélevée d’un palier au-dessus de la page (de classe L ≈0,19 par-dessus une ancre à L ≈0,15), un padding assez large pour se lire comme délibéré, et éventuellement une bordure très fine issue du rôle de bordure. Rien dans ce flux de travail ne touche aux pixels de l’image ; le rôle de la palette est de bien les recevoir. Ouvrez la palette du cadre dans Scale Composer — l’ancre de page sombre avec les valeurs de surface surélevée et de bordure dont s’inspire un cadre de média, et l’écart de luminosité entre les paliers, mesuré.

Que ne faut-il jamais faire aux images en mode sombre ?

Deux traitements reviennent, et tous deux se lisent comme des dégâts. Inverser automatiquement les photographies — étendre le filter: invert() du thème aux médias — les transforme en négatifs : les ciels virent à l’orange, les visages au cyan, et aucune rotation de teinte ne les sauve complètement. L’inversion a sa place pour le dessin au trait noir pur sur blanc, et nulle part ailleurs dans la chaîne de traitement des images. L’assombrissement excessif est l’échec plus subtil : poussez le filtre de luminosité vers 0,5 et l’imagerie cesse de paraître adaptée pour commencer à paraître cassée — les lecteurs jugent les photographies par rapport à leur mémoire, non par rapport à la page, et une photo assombrie à ce point se lit comme un panneau défaillant plutôt que comme un choix de conception.

Et les captures d’écran dans la documentation ?

La documentation est le cas particulier, car les captures d’écran en sont le contenu — page après page de grands rectangles presque entièrement blancs si le produit a été capturé en mode clair. Deux options honnêtes existent. La minutieuse : capturer un jeu de captures d’écran en thème sombre pour la documentation en thème sombre, afin que les images s’accordent à la page qui les entoure — au coût réel d’un doublement de la matrice de capture et de maintenance. La pragmatique : conserver un seul jeu et appliquer le motif d’encadrement de façon cohérente, de sorte que chaque capture repose, passe-partout inclus, sur une surface surélevée et que la luminosité se lise comme un contenu encadré. L’assombrissement du conteneur fonctionne comme solution provisoire pour les captures riches en texte, mais le petit texte d’interface dans les captures perd vite en lisibilité : assombrissez donc les captures de documentation plus doucement que les photographies.

Préparez la scène pour les pixels que vous ne pouvez pas changer

Les images arriveront aussi lumineuses qu’elles sont ; ce qu’un système de design contrôle, c’est la scène sur laquelle elles atterrissent. Construisez les valeurs du cadre de média — les rôles de surface surélevée, de bordure et de page qui encadrent le contenu lumineux, exportés comme design tokens avec le reste du thème sombre, pour que le cadre soit livré comme système plutôt que comme improvisation.