Definizioni colore per schemi cromatici oltre a chiaro/scuro

Supporto
1

Ciao, vorrei sapere come definire i colori per più di uno schema di colori, ad esempio chiaro, scuro, attenuato, simile a come funziona Twitter.

Il mio problema attuale:
Attualmente sono in grado di stilizzare i colori predefiniti chiari e scuri non elencati come primary-low in un componente tema personalizzato, ma non so come aggiungere questa modalità di colore personalizzata a uno schema di colori diverso.

$dark-theme-ins: #1e2732;
$light-theme-ins: #e9e9e9;
$dim-theme-ins: #337733;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);
:root {
    --primary-100:#{$ins};
    --primary-low:#{$ins};

}
2

Ciao :wave:

Discourse può gestire due schemi di colori: Chiaro e Scuro. Quindi, quando cambi il dispositivo in modalità scura, utilizzerà di default l’impostazione del sito default dark mode color scheme id.

Puoi impostare palette di colori personalizzate aggiuntive su Discourse.

Puoi configurare nuove palette di colori nella pagina /admin/customize/colors.

oppure

Ad esempio, se utilizzi un tema personalizzato, puoi impostarle nel file about.json.
Come facciamo, ad esempio, nel tema FKB Pro.

In questo caso, verranno aggiunte queste palette di colori alla pagina /admin/customize/colors.

Quando queste palette di colori vengono aggiunte, gli utenti possono selezionarle nella pagina delle preferenze utente, se abilitate.

Screenshot 2024-01-06 at 9.43.56
Screenshot 2024-01-06 at 9.43.56512×134 4.66 KB

dark-light-choose()

La funzione dark-light-choose() gestisce solo i due schemi di colori chiaro/scuro, non le palette di colori. Ti consiglio di usarla solo per creare variabili di colore personalizzate, non per sovrascrivere quelle predefinite. Per sovrascrivere le variabili di colore predefinite, puoi fare come ho mostrato sopra.

Se un utente imposta una palette di colori diversa da quella predefinita del sito (Chiaro/Scuro) nella pagina delle preferenze utente, allora verranno utilizzate le variabili di colore create con dark-light-choose() per tutte le palette di colori chiare o scure negli schemi di colore.

Questo è uno dei motivi per cui ho creato il seguente componente tema Customization > Theme component.

In questo componente tema puoi prendere di mira separatamente gli color-scheme="id".

Quindi cosa puoi fare è :arrow_down_small:

Creare palette di colori (Chiaro, Dim, Scuro)

Utilizzare il componente sopra per apportare modifiche ai colori della palette Dim color-scheme="id" o ad altre cose, se necessario.