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

[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.