Diverse modifiche CSS per diversi schemi di colori

[Renato_Mendes]

Ciao!

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.

Recentemente, ho dovuto affrontare questo problema: in modalità scura, il testo racchiuso appare dello stesso colore del wrapper e, se lo modifico tramite CSS, anche il testo racchiuso nel tema chiaro verrà modificato, ma non lo voglio.

Come posso modificare il CSS solo per uno schema di colori?

[Lilly (Lillian Louis)]

Se si utilizzano le variabili di colore (ad es. var(--primary-very-low), var(--secondary-low)) disponibili nella guida di stile del forum /styleguide/atoms/colors, le modalità scura e chiara dovrebbero rispettare le diverse variabili (è possibile vederle anche nelle due palette di colori che si stanno utilizzando per l’interruttore scuro e chiaro). Sarà necessario abilitare l’impostazione styleguide enabled nelle impostazioni dell’amministratore, ed esiste anche l’impostazione styleguide admin only che la limita solo agli amministratori.

[Renato_Mendes]

Il problema è che ho già apportato modifiche che non rispettavano la variabile di colore impostata sulla guida di stile (non ho potuto accedervi tramite /styleguide/atoms/colors, però). Esiste un modo per farlo senza seguire le variabili?

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