Thème et mode sombre

Le mode sombre commence toujours bien. Vous ajoutez dark:bg-slate-900 à côté de bg-white, dark:text-slate-100 à côté de text-slate-900, et l'écran d'accueil est convaincant en dix minutes. Puis vient le reste : quarante composants, chacun avec ses fonds, ses bordures, ses états de survol. Chaque classe de couleur en appelle une seconde. Vos attributs class doublent de longueur, et un mois plus tard vous constatez que trois nuances de bordure sombre cohabitent, parce que personne ne se rappelle laquelle avait été retenue.

Le symptôme est réel mais la cause n'est pas le mode sombre : c'est d'avoir écrit des couleurs littérales dans les composants. bg-white décrit un pigment, pas un rôle. Tant que vos composants nomment des pigments, chaque thème supplémentaire multiplie les classes. Si en revanche ils nomment des rôles — la surface d'une carte, la couleur du texte courant, celle d'une bordure discrète — alors changer de thème consiste à redéfinir une douzaine de valeurs à un seul endroit, et les composants ne contiennent plus une seule variante dark:.