Sfondo
Scegli una decorazione, sovrascrivi il colore di sfondo per modalità o regola colore, dimensioni, posizione e opacità del gradiente Jam.
Il blocco background in docs.json controlla lo sfondo della pagina. Puoi scegliere uno dei quattro tipi di decorazione, sovrascrivere il colore di base per modalità e regolare 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 di base --color-bg-primary; la modalità scura visualizza sempre uno sfondo uniforme, indipendentemente dal valore.
{
"background": {
"decoration": "grid"
}
}| Valore | Comportamento |
|---|---|
gradient (predefinito) | Gradiente radiale ancorato in alto. Regolabile tramite il blocco gradient qui sotto |
grid | Motivo a griglia di punti discreto: punti da 1,5 px in --color-primary con opacità dell'8% e spaziatura di 24 px |
windows | Due aree radiali sfumate negli angoli superiori, per un effetto satinato in stile Windows 11 |
none | Riempimento uniforme --color-bg-primary, senza decorazioni |
decoration influisce solo sulla modalità chiara del tema Jam. Nebula e Pulsar visualizzano sfondi uniformi indipendentemente dal valore. Nella modalità scura di Jam, tutti i valori producono uno sfondo uniforme.
colore
Sovrascrivi il colore di sfondo della pagina per modalità. Accetta qualsiasi colore CSS: hex, 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 |
Entrambi i campi sono facoltativi. Imposta solo light per sovrascrivere la modalità chiara e mantenere il valore predefinito scuro del tema, o viceversa. Funziona con tutti i temi (Jam, Nebula, Pulsar).
Abbina decoration: "none" a una sovrascrittura di color per ottenere uno sfondo uniforme personalizzato. È una scelta comune nella documentazione editoriale o in stile marketing.
gradiente
Regola il gradiente radiale in modalità chiara del tema Jam. Tutti e quattro i campi sono facoltativi e vengono applicati indipendentemente. Imposta solo color per cambiare il colore oppure solo size per ridurre o aumentare le dimensioni.
{
"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 unità di 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 compreso 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 leggono --color-primary per il colore del motivo, quindi personalizzalo tramite il blocco colors.
Supporto browser
Il gradiente parametrico (utilizzo di variabili CSS) usa color-mix(), che richiede:
- Chrome / Edge 111+
- Firefox 113+
- Safari 16.2+
I browser meno recenti usano il gradiente Jam originale: visualizzano il valore predefinito del brand e ignorano le sovrascritture di gradient. Il fallback ha comunque un aspetto pulito, ma non può essere personalizzato.
Ricette comuni
{
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Comune nella documentazione in stile editoriale. Funziona con qualsiasi tema.
{
"background": {
"gradient": {
"color": "#a855f7",
"opacity": 0.15
}
}
}Cambia il colore del gradiente Jam senza modificarne le dimensioni o la 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 tenue da 24 px nel colore primario del tema. Legge --color-primary, quindi puoi cambiare il colore dei punti impostando colors.primary in docs.json.
{
"background": {
"decoration": "windows"
}
}Due aree radiali sfumate negli angoli superiori, ancorate alla viewport. Legge --color-primary per il colore delle aree.
{
"background": {
"color": {
"dark": "#0d0d12"
}
}
}Mantiene i valori predefiniti del tema nella modalità chiara e imposta uno sfondo personalizzato nella modalità scura.