Est-ce toujours la solution pour vérifier le mode sombre ?

Dev
1

Continuant la discussion de Aucune classe spécifique pour le mode sombre :

J’ai un composant de thème qui change le logo du site en fonction de la catégorie dans laquelle se trouve l’utilisateur et ajoute des logos aux catégories dans la barre latérale, et maintenant ils veulent changer pour un logo différent en mode sombre.

Quelque chose comme ceci :

.category-my-other-identity #site-logo {
  content: url($AS) !important;
  display: inline-block;
  height: $site-logo-height;
  font-size: 0;
  margin-top: $site-margin-top;
  margin-bottom: $site-margin-bottom;
}

Je suis nul en CSS, mais il semblerait que ce serait beaucoup plus facile s’il y avait une classe “ce-ci-est-le-mode-sombre”. Ou peut-être que quelque chose comme ce qui précède peut fonctionner.

Ou peut-être que si c’était un “vrai” composant de thème avec des paramètres (pour l’instant, il est juste codé à la main comme ci-dessus), alors il serait assez facile d’y intégrer ces paramètres dans le CSS. C’est probablement ce que je devrais faire de toute façon, n’est-ce pas ?

6 « J'aime »
2

Coïncidence, c’est quelque chose dont nous avons discuté en interne cette semaine ! Quelques PR de preuve de concept sont ici :

Notez qu’il ne s’agit que d’expériences pour nous aider dans notre réflexion - il n’y a aucune garantie que l’une ou l’autre sera fusionnée.

Quant à “maintenant”, le mieux est probablement d’utiliser le composant <LightDarkImg> comme ceci :

8 « J'aime »
3

C’est logique. J’ai eu le même problème une fois mais @david, cela aurait fonctionné pour moi.
Aussi, les difficultés d’attribution de badges seraient-elles considérées comme un bug ou autre chose ?

2 « J'aime »
4

Cela pourrait être un bug, mais nous aurions besoin de plus de détails pour le savoir — c’est aussi sans rapport avec ce sujet, donc votre meilleure option serait de rechercher le problème, et si vous ne trouvez pas de réponse, de créer un nouveau sujet expliquant ce que vous essayez de faire et où cela échoue.

5 « J'aime »
5

Une solution purement CSS utiliserait probablement la variable CSS --scheme-type, ou même la propriété color-scheme qui a été ajoutée il y a quelques heures (youpi !), avec des requêtes de style @container ou light-dark().

Malheureusement, light-dark() ne fonctionne qu’avec des valeurs de couleur. Vous pourriez essayer d’utiliser des requêtes de style @container ciblant la propriété color-scheme (firefox ne prend pas encore en charge les requêtes de style pour les propriétés personnalisées). Je n’ai pas pu tester l’idée car mon environnement de développement est actuellement hors service.

Avoir une classe .dark-mode ou .light-mode dédiée à la racine serait certainement le plus simple à utiliser.

5 « J'aime »