Diverse modifiche CSS per diversi schemi di colori

[Canapin (Coin-coin le Canapin)]

@Renato_Mendes

Per quanto ho potuto capire finora, qualsiasi modifica al CSS viene applicata sia alla modalità chiara che a quella scura, il che non ha molto senso.

Se ho capito bene il problema, c’è una cosa specifica da fare per questo.

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…

Ho lavorato a una guida su questo, ma sto avendo un po’ di difficoltà a unire le informazioni in modo che siano abbastanza chiare da poterle utilizzare direttamente in un tema, ma che spieghino comunque le basi tecniche sottostanti.

Per spiegare come farlo nel modo più chiaro possibile…

Suggerisco di creare un tema localmente (utilizzando Install the Discourse Theme CLI console app to help you build themes ti aiuterà).
Quindi, crea un file common/color_definitions.scss nel tuo tema, in cui scrivi:

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

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

Quindi, in common/common.scss, puoi utilizzare la variabile in questo modo:

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

Sceglierà automaticamente il colore giusto quando si è in modalità scura o chiara.