Fare riferimento alle variabili del colore del tema Discourse in un componente tema personalizzato?

[jordan-violet]

È possibile accedere alle variabili del tema di Discourse nei miei componenti personalizzati?

Sto cercando di usare variabili come --secondary nel mio CSS e sembra non funzionare.

[david (David Taylor)]

Sì, dovresti essere in grado di accedere alle variabili native-css di core da un tema o da un componente del tema

ad es.

body {
  background-color: var(--secondary);
}

Potresti condividere un esempio che non funziona?

[jordan-violet]

Ah! Non stavo usando var()

[pfaffman (Jay Pfaffman)]

Ho sempre problemi di questo tipo. Certo, è “ovvio” usare var, ma solo se lo sai e te lo ricordi!

Sto aspettando che qualcosa venga eseguito, quindi per curiosità ho controllato https://ask.discourse.com/ e ho chiesto “È possibile accedere alle variabili di colore del tema di Discourse nel mio componente tema?” e voilà! Ho ottenuto questo:

1. Variabili di colore disponibili:
   Discourse fornisce diverse proprietà personalizzate CSS predefinite per i colori, come:

   var(--primary)
   var(--secondary)
   var(--tertiary)
   var(--quaternary)
   var(--header_background)
   var(--header_primary)
   var(--highlight)
   var(--danger)
   var(--success)
   var(--love)
   
   

2. Esempio di utilizzo:
   Puoi usare queste variabili nel tuo CSS per assicurarti che il tuo tema si adatti a diversi schemi di colori selezionati dall’utente. Ad esempio:

   body {
       background: var(--highlight);
   }