Come funzionano i colori e come cambiarli?

Mi dispiace per l’argomento generico, ma ci sto pensando da un po’ e non riesco a trovare un tutorial o una spiegazione appropriata.

Ogni volta che ho bisogno di cambiare un colore ovunque su Discourse, seguo questo percorso:

  • Il colore è gestito da un componente del tema? Se no,
  • Sembra essere gestito da /admin/customize/colors? Se no,
  • Apri gli strumenti per sviluppatori e prova a trovare il CSS corrispondente

Ma poi mi perdo perché trovo cose come var(--primary-low) e non ho idea di dove siano definite, anche se sembrano correlate alla nozione di colore primario in /admin/customize/colors. Quindi:

  • Come sono definite queste cose var()?
  • Qual è il modo consigliato per modificarle in modo coerente?

I colori sono (calcolati) qui:

Le variabili CSS sono definite qui:

Se vuoi sovrascrivere, diciamo --primary-medium, puoi aggiungere questo al tuo tema:

:root {
    --primary-high: red;
}

Tuttavia, non so come usare le funzioni di trasformazione del colore, che necessitano di variabili SCSS.

Vedo che @import "common/foundation/variables"; non è richiesto poiché “le variabili core e del tema vengono ora iniettate prima che qualsiasi file SCSS venga compilato”, ma non sono riuscito a farlo funzionare comunque. Passo la parola a utenti più esperti :microphone:

4 Mi Piace

Puoi controllare la guida di stile

Puoi anche controllare /styleguide/atoms/colors per i colori. Devi abilitarlo nelle impostazioni del tuo sito cercando ‘styleguide’

Ad esempio: https://meta.discourse.org/styleguide/atoms/colors

2 Mi Piace

Wow, prima volta che sento parlare di styleguide, grazie.
Quindi capisco che il CSS personalizzato è l’unico modo per modificare questi stili, come ha detto @Canapin, giusto? (:heart: per confermare se vuoi)

Questo metodo è probabilmente il più semplice, funzionerà per tutti i colori generati automaticamente

ma puoi anche sovrascrivere i colori nel file about.json di un tema come descritto qui Override values for auto-generated color variables

3 Mi Piace

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.