La bonne méthode pour modifier le CSS pour les modes clair et sombre

Soutien
1

Je dois modifier beaucoup de CSS pour les modes clair et sombre. J’ai lu quelques messages sur le forum qui disent qu’il n’existe pas de méthode fiable pour le faire, notamment :

Cependant, beaucoup de ces messages sont anciens. Existe-t-il une solution simple en 2026 ? J’ai testé avec ceci :

@container style(--scheme-type: light) {
  body {
    background: #ffffff !important;
  }
}
@container style(--scheme-type: dark) {
.sidebar-wrapper {
   background: #000000 !important;
}
}

Mais je ne suis pas sûr que ce soit correct, même si cela fonctionne.

2

La requête de conteneur fonctionnera, mais pour simplifier, vous pouvez également utiliser la fonction native light-dark() en CSS pour cela :

.my-thing {
  background: light-dark(#fff, #000);
  color: light-dark(#222, #eee);
}

En général, dans Discourse, nous nous appuyons sur des variables de couleur qui changent automatiquement pour éviter de définir des couleurs spécifiques de cette manière (--primary, --secondary, etc.)… cela permet aux couleurs de fonctionner indépendamment du schéma de couleurs.

Vous pouvez voir quelques exemples ici : https://meta.discourse.org/styleguide/atoms/colors et comment elles changent si vous basculez entre les modes sombre et clair. Ces variables sont configurées par des palettes de couleurs dans /admin/config/colors

3

Super, merci beaucoup Kris. Au fait, ce lien ne fonctionne pas.