Sfondo
Scegli una decorazione (gradiente, griglia di punti, macchie sfumate o tinta unita), imposta il colore di sfondo per modalità o regola colore e dimensione del gradiente Jam.
Il blocco background in docs.json controlla lo sfondo della pagina. Scegli uno dei quattro tipi di decorazione, sovrascrivi il colore di base per modalità oppure regola il gradiente predefinito.
{
"theme": "jam",
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Tutti i campi sono facoltativi. Ometti l'intero blocco background per usare i valori predefiniti del tema.
decorazione
Scegli il tipo di sfondo per la modalità chiara del tema Jam. Ogni valore visualizza un motivo distinto sopra il colore base --color-bg-primary. La modalità scura è sempre a tinta unita.
{
"background": {
"decoration": "grid"
}
}| Valore | Comportamento |
|---|---|
gradient (predefinito) | Gradiente radiale ancorato in alto. Regolabile tramite il blocco gradient qui sotto |
grid | Griglia di punti discreta: punti da 1,5px in --color-primary con opacità 8%, spaziatura 24px |
windows | Due macchie radiali morbide negli angoli superiori (effetto smerigliato stile Windows 11) |
none | Riempimento piatto --color-bg-primary, nessuna decorazione |
decoration influisce solo sulla modalità chiara del tema Jam. Nebula e Pulsar mostrano sempre sfondi a tinta unita. La modalità scura di Jam è sempre a tinta unita.
colore
Sovrascrivi il colore di sfondo della pagina per modalità. Accetta qualsiasi colore CSS: esadecimale, rgb(...), rgba(...) o hsl(...).
{
"background": {
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}| Campo | Si applica a |
|---|---|
color.light | Sfondo del corpo in modalità chiara |
color.dark | Sfondo del corpo in modalità scura |
Imposta solo light per sovrascrivere la modalità chiara e mantenere il valore scuro predefinito del tema. Imposta solo dark per il caso inverso. Funziona su ogni tema: Jam, Nebula, Pulsar, Halo e Dusk.
Abbina decoration: "none" a una sovrascrittura di color per uno sfondo piatto e personalizzato. È comune nella documentazione in stile editoriale o marketing.
gradiente
Regola il gradiente radiale in modalità chiara del tema Jam. Ogni campo è facoltativo e funziona in modo indipendente. Imposta solo color per cambiare colore, oppure solo size per ridurlo o ingrandirlo.
{
"background": {
"gradient": {
"color": "#a855f7",
"size": "800px",
"position": "top center",
"opacity": 0.25
}
}
}| Campo | Predefinito | Descrizione |
|---|---|---|
color | Eredita colors.primary | Colore del gradiente (qualsiasi colore CSS) |
size | 500px | Raggio. Qualsiasi lunghezza CSS (px, rem, %, vh) |
position | top center | Punto centrale. Parole chiave top/bottom/center/left/right, percentuali o coordinate in pixel |
opacity | 0.12 | Opacità massima al centro. Numero tra 0 e 1 |
gradient si applica solo quando decoration è gradient (o non impostato). Le decorazioni grid, windows e none ignorano questo blocco. grid e windows prendono il colore del motivo da --color-primary. Modificalo nel blocco colors.
Compatibilità browser
Il gradiente parametrico (che usa le variabili CSS) impiega color-mix(), che richiede:
- Chrome / Edge 111+
- Firefox 113+
- Safari 16.2+
I browser più vecchi ricorrono al gradiente originale di Jam e ignorano le tue impostazioni gradient.
Ricette comuni
{
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Comune nella documentazione in stile editoriale. Funziona su qualsiasi tema.
{
"background": {
"gradient": {
"color": "#a855f7",
"opacity": 0.15
}
}
}Cambia il colore del gradiente Jam senza modificarne dimensione o posizione.
{
"background": {
"gradient": {
"size": "1200px",
"position": "top left",
"opacity": 0.2
}
}
}Gradiente più ampio e diffuso, ancorato all'angolo superiore sinistro.
{
"background": {
"decoration": "grid"
}
}Disegna una griglia di punti da 24px appena visibile nel colore primario del tema. Cambia il colore dei punti con colors.primary in docs.json.
{
"background": {
"decoration": "windows"
}
}Due macchie radiali morbide negli angoli superiori, ancorate alla finestra. Usa --color-primary per il colore delle macchie.
{
"background": {
"color": {
"dark": "#0d0d12"
}
}
}Mantiene i valori predefiniti del tema in modalità chiara e imposta uno sfondo scuro personalizzato.