Jetons de design et thème sombre

1Faire l'inventaire avant de décider quoi que ce soit

Tu ne peux pas ranger ce que tu n'as pas compté. Demande le relevé :

Liste toutes les valeurs de couleur ecrites en dur dans le projet
(hexadecimal, rgb, hsl, oklch), avec pour chacune le fichier, la ligne et
le nombre d'occurrences. Trie par frequence. Ne modifie rien.

Le résultat est presque toujours instructif : trois ou quatre valeurs dominantes, puis une longue traîne de variantes uniques qui sont des erreurs de copie. La traîne se ramène sur les valeurs dominantes.

Fais le même relevé sur les espacements, les rayons de bordure et les tailles de police. C'est le même problème, en moins visible.

2Nommer par rôle, pas par couleur

C'est la décision qui rend le thème sombre possible. Un composant ne doit pas savoir qu'il est bleu, il doit savoir qu'il est « la surface principale » ou « le texte secondaire ».

Une palette de rôles utile tient en une dizaine d'entrées : fond de page, surface d'un bloc, texte principal, texte secondaire, bordure, accent, texte sur accent, et deux ou trois états (succès, avertissement, erreur).

3Poser les variables

Tout se déclare une fois, sur la racine :

:root {
  color-scheme: light;

  --surface-page: #ffffff;
  --surface-carte: #f7f7f5;
  --texte-principal: #16151a;
  --texte-secondaire: #5b5966;
  --bordure: #e4e2dd;
  --accent: #5b3df5;
  --texte-sur-accent: #ffffff;
}

La déclaration color-scheme n'est pas décorative. Elle indique au navigateur dans quel schéma la page se rend, et il ajuste en conséquence les couleurs par défaut de la surface du document, des barres de défilement et des contrôles de formulaire. Ses valeurs sont normal, light, dark, light dark, et les formes only light et only dark qui interdisent au navigateur d'appliquer son propre forçage.

Sans elle, tu obtiens des menus déroulants blancs sur un site sombre.

4Basculer le thème

Deux mécanismes, à combiner.

La préférence système se lit avec prefers-color-scheme, dont les valeurs sont light et dark. Le choix explicite du visiteur se porte, lui, par un attribut ou une classe posée sur l'élément racine.

/* preference systeme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-page: #131217;
    --surface-carte: #1c1b22;
    --texte-principal: #f2f1ee;
    --texte-secondaire: #a5a2b0;
    --bordure: #2c2a35;
    --texte-sur-accent: #ffffff;
  }
}

/* choix explicite, qui doit gagner dans les deux sens */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #131217;
  /* ...les memes redefinitions */
}

Le point à ne pas rater : une couleur ne doit jamais avoir sa seule définition à l'intérieur d'un bloc @media ou d'un sélecteur de thème. La définition complète vit sur :root nu, les blocs suivants ne font que redéfinir.

5Vérifier les contrastes, thème par thème

Un thème sombre n'hérite pas des contrastes du thème clair. Le gris secondaire qui passait sur fond blanc peut échouer sur fond gris foncé.

Le seuil de référence est celui du critère WCAG 1.4.3, de niveau AA : 4,5:1 pour le texte courant, 3:1 pour le texte de grande taille, défini comme au moins 18 points, ou 14 points en gras. Les éléments d'interface et les indicateurs visuels relèvent du critère 1.4.11, à 3:1.

Ouvre la page en thème clair puis en thème sombre. Pour chaque couple
texte/fond distinct, calcule le rapport de contraste et rends-moi un
tableau : selecteur, couleurs, ratio, seuil applicable, conforme ou non.
Ne corrige rien.