Discourse è incredibilmente personalizzabile!
L’obiettivo di questo argomento è mostrarti come sfruttare tutte le fantastiche opzioni a tua disposizione come sviluppatore di temi. Lo sai… così non dovrai reinventare la ruota 
Variabili? Che variabili?
Le variabili coprono un’ampia gamma di elementi, dalle dimensioni dei font ai colori ai valori z-index. Puoi utilizzare e sovrascrivere la stragrande maggioranza delle variabili nel tuo editor di temi.
Colori
Sono disponibili molti colori che puoi utilizzare o sovrascrivere nel tuo tema. Puoi visualizzare il set di colori di base nell’interfaccia di amministrazione, sotto Personalizza > Colori. Ecco uno screenshot della combinazione di colori predefinita:
Questi colori sono disponibili come proprietà CSS personalizzate che puoi utilizzare e sovrascrivere con questa sintassi:
var(--primary)
var(--secondary)
var(--tertiary)
var(--quaternary)
var(--header_background)
var(--header_primary)
var(--highlight)
var(--danger)
var(--success)
var(--love)
L’uso delle variabili colore SCSS (come
$primary, $secondary` e così via) è deprecato. Il core di Discourse utilizza le proprietà CSS personalizzate da agosto 2020 e possiamo raccomandare a tutti i temi esistenti di passare dalle variabili SCSS alle proprietà CSS personalizzate. Per manipolazioni complesse dei colori, consulta questa guida.
Come posso usarli?
Inizia creando un nuovo tema o, se stai usando un tema basato su git, crea un nuovo componente di tema e aggiungilo al tuo tema.
Supponiamo di voler impostare lo sfondo dell’elemento <body> per corrispondere al colore highlight della combinazione di colori corrente. Bene, posso farlo così:
body {
background: var(--highlight);
}
E il colore verrà recuperato automaticamente dalla combinazione di colori corrente, come mostrato qui:
(Questo colore di sfondo non è raccomandato 
)
Ora, supponiamo che la combinazione di colori corrente non sia impostata su “Light scheme” per il tema attuale. Invece, supponiamo che sia impostata sulla combinazione predefinita “Dark”; lo stesso codice produrrebbe un risultato diverso perché la variabile è diversa.
Puoi vedere come lo sfondo dell’elemento <body> segue la variabile highlight corrente, qualunque essa sia per la combinazione di colori attuale.
Questo copre le variabili di base dei colori. Discourse utilizza anche colori derivati che possono essere utilizzati o sovrascritti. Puoi vedere l’elenco completo dei colori della combinazione di colori corrente nel tuo ispettore del browser; ecco uno screenshot del tema predefinito:
Nota che puoi ispezionare questi colori su qualsiasi istanza di Discourse, senza bisogno di autenticazione. Sulla tua istanza di Discourse, puoi (e dovresti) anche utilizzare il plugin styleguide, che ora è incluso nel core. Attivalo e vai a /styleguide, e vedrai tutti gli elementi dell’interfaccia utente di Discourse, inclusi i colori:
(Questa è la combinazione di colori Grey Ember mostrata sopra.)
Ok, passiamo ad argomenti più avanzati:
Variabili avanzate
Dai un’occhiato a questo file nel repository di Discourse:
Qui vengono definite la maggior parte delle variabili. Proprio come i colori, queste variabili sono magicamente disponibili per te da utilizzare nei fogli di stile del tema.
Proverò a scomporre il contenuto del file qui sotto:
Larghezze
$small-width: 800px !default;
$medium-width: 995px !default;
$large-width: 1110px !default;
queste sono molto utili se vuoi che il tuo tema corrisponda al comportamento nativo di Discourse, specialmente nelle query media. Ad esempio, dai un’occhiato alle parti rilevanti dello scss pre-compilato per .user-info:
.user-info {
&.medium {
flex: 0 0 32%;
margin: 0 2% 4vh 0;
@media screen and (max-width: $small-width) {
flex: 0 0 48%;
margin-right: 0;
}
}
}
Nota come la query media riceva una variabile per determinare un punto di taglio per gli schermi piccoli e applicare stili diversi.
Font
--base-font-size: 0.938em; // eq. to 15px
--base-font-size-larger: 1.063em; // eq. to 17px
--base-font-size-largest: 1.118em; // eq. to 19px
// Font-size definitions, multiplier ^ (step / interval)
--font-up-6: 2.296em;
--font-up-5: 2em;
--font-up-4: 1.7511em;
--font-up-3: 1.5157em;
--font-up-2: 1.3195em;
--font-up-1: 1.1487em; // 2^(1/5)
--font-0: 1em;
--font-down-1: 0.8706em; // 2^(-1/5)
--font-down-2: 0.7579em; // Smallest size we use based on the 1em base
--font-down-3: 0.6599em;
--font-down-4: 0.5745em;
--font-down-5: 0.5em;
--font-down-6: 0.4355em;
Anche questo è piuttosto semplice, Discourse ha un ottimo sistema di scalatura dei font e quindi dovresti farne uso.
Le unità utilizzate sono in em e quindi sarebbero relative a --base-font-size, che viene utilizzato sull’elemento <html>.
Quindi:
.btn {
font-size: var(--font-up-6);
}
viene compilato in:
(–base-font-size _ --font-up-6) o (14px _ 2.296) = 32.14px
O questo:
Altezza delle righe
--line-height-small: 1;
--line-height-medium: 1.2; // Headings or large text
--line-height-large: 1.4; // Normal or small text
Queste variabili possono essere utilizzate proprio come nell’esempio precedente. Tieni presente che sono valori senza unità. Ecco cosa significa:
Valori Z-index
$z-layers: (
"max": 9999,
"fullscreen": 1700,
"modal": (
"tooltip": 1600,
"popover": 1500,
"dropdown": 1400,
"content": 1300,
"overlay": 1200,
),
"mobile-composer": 1100,
"header": 1000,
"tooltip": 600,
"composer": (
"popover": 500,
"content": 400,
),
"dropdown": 300,
"usercard": 200,
"timeline": 100,
"base": 1,
);
Questi possono essere utilizzati come discusso qui:
div {
z-index: z("header");
}
“o, quando annidati, in questo modo:”
div {
z-index: z("modal", "dropdown");
}
“Puoi anche fare calcoli di base come ti aspetteresti:”
div {
z-index: z("base") + 1;
}
I blocchi di codice sopra fanno parte della citazione, ma li ho spostati fuori per formattazione
Ecco un esempio:
Metti una scatola sopra l’intestazione:
.zbox {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: red;
z-index: z("header") + 1;
}
Metti una scatola sotto l’intestazione:
.zbox {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: red;
z-index: z("header") - 1;
}
Ombre delle caselle
$box-shadow: (
"modal": 0 8px 60px rgba(0, 0, 0, 0.6),
"composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
"menu-panel": 0 6px 14px rgba(0, 0, 0, 0.15),
"card": 0 4px 14px rgba(0, 0, 0, 0.15),
"dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
"header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
"kbd": (
0 2px 0 rgba(0, 0, 0, 0.2),
0 0 0 1px dark-light-choose(#fff, #000) inset,
),
"focus": 0 0 6px 0 $tertiary,
"focus-danger": 0 0 6px 0 $danger,
);
Come puoi vedere, gran parte del lavoro è già stato fatto per te quando si tratta di variabili, e nella maggior parte dei casi hai solo bisogno di sfruttare ciò che è già presente.
L’uso per le ombre delle caselle è così:
.d-header {
box-shadow: shadow("focus");
}
Questo dovrebbe far sì che l’intestazione utilizzi l’ombra della casella di focus. E se verifichiamo per confermare:
Questo post è una wiki, quindi modifica come necessario 
Questo documento è sotto controllo di versione - suggerisci modifiche su github.