Changements CSS différents pour différents thèmes de couleurs

[Renato_Mendes]

Salut !

D’après ce que j’ai compris jusqu’à présent, toute modification apportée au CSS s’applique à la fois au mode clair et au mode sombre, ce qui n’a pas beaucoup de sens.

Plus récemment, j’ai dû faire face à ce problème : en mode sombre, le texte encapsulé a la même couleur que l’encapsuleur, et si je le modifie via CSS, le texte encapsulé du thème clair sera également modifié, mais je ne le souhaite pas.

Comment puis-je modifier le CSS uniquement pour un schéma de couleurs ?

[Lilly]

Si vous utilisez les variables de couleur (par exemple, var(--primary-very-low), var(--secondary-low)) disponibles dans le guide de style de votre forum /styleguide/atoms/colors, alors les modes sombre et clair doivent respecter les différentes variables (vous pouvez également les voir dans les deux palettes de couleurs que vous utilisez pour le commutateur sombre et clair). Vous devrez activer le paramètre styleguide enabled dans les paramètres administrateur, et il existe également le paramètre styleguide admin only qui le limite uniquement aux administrateurs.

[Renato_Mendes]

Le problème est que j’ai déjà effectué des modifications qui ne respectaient pas la variable de couleur définie dans le guide de style (je n’ai pas pu y accéder via /styleguide/atoms/colors, cependant). Existe-t-il un moyen de le faire sans suivre les variables ?

[Canapin (Coin-coin le Canapin)]

@Renato_Mendes

D’après ce que j’ai pu comprendre jusqu’à présent, tout changement dans le CSS est appliqué au mode clair et au mode sombre, ce qui n’a pas beaucoup de sens.

Si je comprends bien le problème, il y a une chose spécifique à faire pour cela.

Update themes and plugins to support automatic dark mode

Great question, I tried this and noticed that we didn’t properly support using background images or theme variables in the special color definitions stylesheet. So I made some fixes in core, and you should be able to do this now (make sure you pull the latest core). So, if you have two images in your theme or theme component, with SCSS vars of $bg-light and $bg-dark respectively, you can add this to your color_definitions.scss stylesheet: $bg: url(dark-light-choose($bg-light, $bg-dark)); :ro…

J’ai travaillé sur un guide à ce sujet, mais j’ai un peu de mal à fusionner les informations pour qu’elles soient suffisamment claires pour être utilisées directement dans un thème, tout en expliquant les aspects techniques sous-jacents.

Pour expliquer comment faire le plus clairement possible…

Je vous suggère de créer un thème localement (en utilisant Install the Discourse Theme CLI console app to help you build themes vous aidera).
Ensuite, créez un fichier common/color_definitions.scss dans votre thème, dans lequel vous écrivez :

$my-color: dark-light-choose(#FC3468, #FF93AC);

:root {
  --my-color: #{$my-color};
}

Ensuite, dans common/common.scss, vous pouvez utiliser la variable comme ceci :

h1 {
  color: var(--my-color);
}

Cela choisira automatiquement la bonne couleur en mode sombre ou clair.