Comment fonctionnent les jetons de mode sombre
Les jetons de mode sombre sont un second jeu de valeurs rattaché aux mêmes noms sémantiques que le thème clair : changer de mode fait pointer des noms comme --color-surface vers d'autres couleurs, sans qu'aucun composant ait besoin de savoir quel mode est actif.
Pourquoi inverser ne marche pas
L'approche intuitive — retourner la luminosité, échanger le noir et le blanc — produit un thème sombre qui semble faux d'une manière difficile à nommer au début.
Quelques raisons concrètes :
Le noir pur est agressif. La plupart des bons thèmes sombres utilisent un gris très foncé, souvent légèrement teinté, plutôt que #000000. Du texte blanc à plein contraste sur du noir pur provoque un halo : le texte semble baver.
Les couleurs saturées paraissent plus vives sur fond sombre. Un bleu confortable sur blanc peut vibrer sur un fond sombre. Les variantes sombres sont généralement désaturées et éclaircies, pas seulement éclaircies.
L'élévation s'inverse. En thème clair, les surfaces surélevées portent une ombre. En thème sombre l'ombre est presque invisible, si bien que les surfaces surélevées se signalent en devenant plus claires. Les jetons d'ombre qui fonctionnent dans un mode ne transportent aucune information dans l'autre.
Les ratios de contraste ne survivent pas au basculement. Une association qui passe AA en clair peut échouer en sombre. Chaque association doit être revérifiée, pas seulement recalculée.
La structure qui rend cela possible
Le mode sombre est d'abord un problème de nommage, ensuite un problème de couleur. Il ne fonctionne proprement que si la couche sémantique existe déjà.
:root {
--color-surface: var(--grey-50);
--color-text-primary: var(--grey-900);
}
[data-theme="dark"] {
--color-surface: var(--grey-900);
--color-text-primary: var(--grey-50);
}Les composants référencent --color-surface. Ils n'apprennent jamais qu'il existe un mode. Ajouter un troisième thème plus tard, c'est un autre bloc de la même forme, pas une modification de chaque composant.
Si les composants référencent directement des primitifs, il n'y a rien à réorienter, et le mode sombre devient une condition dans chaque fichier.
Générez les deux ensemble
Un thème sombre rétrofitté six mois plus tard, c'est une revue de tous les composants. Produit en même temps que le thème clair, depuis les mêmes échelles, il est gratuit.
C'est l'argument le plus fort pour trancher la question des modes dès le départ même si vous n'en livrez qu'un : le coût structurel est dans le nommage, et le nommage est bon marché avant qu'il n'y ait des composants, cher après.
Ce que Flash DSM apporte ici
Chaque système généré produit le clair et le sombre ensemble, liés aux mêmes noms sémantiques, avec le contraste vérifié sur les associations plutôt qu'un mode dérivé de l'autre après coup.