Come funzionano i colori e come cambiarli?

pHneutre · 20 Marzo 2025, 10:12am

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?

Canapin · 20 Marzo 2025, 11:15am

I colori sono (calcolati) qui:

github.com/discourse/discourse

app/assets/stylesheets/common/foundation/color_transformations.scss

main

// standard color transformations, use these if possible, and add any new dark-light-diffs here
// any variables defined here can be added in theme color schemes
// all variables should have the !default flag

@use "sass:string";

// primary
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%) !default;
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;

// primary-numbers
$primary-50: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-100: dark-light-diff($primary, $secondary, 94%, -80%) !default;
$primary-200: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default;
$primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default;

This file has been truncated. show original

Le variabili CSS sono definite qui:

github.com/discourse/discourse

app/assets/stylesheets/color_definitions.scss

main

// This file maps all SCSS color variables to CSS custom properties.
// It is compiled to CSS separately from the rest of the app.
// The source variables come from color_transformations.scss and variables.scss
:root {
  color-scheme: #{schemeType()};

  --scheme-type: #{schemeType()};
  --primary: #{$primary};
  --secondary: #{$secondary};
  --tertiary: #{$tertiary};
  --quaternary: #{$quaternary};
  --header_background: #{$header_background};
  --header_primary: #{$header_primary};
  --highlight: #{$highlight};
  --danger: #{$danger};
  --success: #{$success};
  --love: #{$love};
  --d-selected: #{$selected};
  --d-hover: #{$hover};
  --always-black-rgb: 0, 0, 0;

This file has been truncated. show original

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

ondrej · 20 Marzo 2025, 1:13pm

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

pHneutre · 20 Marzo 2025, 1:24pm

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? ( per confermare se vuoi)

awesomerobot · 20 Marzo 2025, 1:37pm

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

system · 19 Aprile 2025, 1:37pm

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

Argomento		Risposte	Visualizzazioni
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11860	Gennaio 9, 2018
Referencing Discourse theme color variables in custom theme component? Support css	4	72	Aprile 20, 2025
Styling Discourse with variables: Show & Tell Dev dev-news	1	168	Agosto 5, 2025
Reference for full color customization Dev	4	1311	Febbraio 14, 2023
Challenges creating a custom color palette Dev	8	149	Gennaio 29, 2025

Come funzionano i colori e come cambiarli?

Argomenti correlati