Hintergrund
Wähle eine Dekoration (Verlauf, Punktraster, Milchglas-Flecken oder einfarbig), lege die Seitenhintergrundfarbe pro Modus fest oder passe Farbe und Größe des Jam-Verlaufs an.
Der background-Block in docs.json steuert den Seitenhintergrund. Wähle eine von vier Dekorationsvarianten, überschreibe die Grundfarbe pro Modus oder passe den Standardverlauf an.
{
"theme": "jam",
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Alle Felder sind optional. Lass den gesamten background-Block weg, um die Standardwerte des Themes zu verwenden.
Dekoration
Wähle die Hintergrundvariante für den hellen Modus des Jam-Themes. Jeder Wert rendert ein eigenes Muster über der Grundfarbe --color-bg-primary. Der dunkle Modus wird immer einfarbig dargestellt.
{
"background": {
"decoration": "grid"
}
}| Wert | Verhalten |
|---|---|
gradient (Standard) | Radialer Verlauf, oben verankert. Anpassbar über den gradient-Block unten |
grid | Dezentes Punktraster: 1,5 px große Punkte in --color-primary mit 8 % Deckkraft, 24 px Abstand |
windows | Zwei weiche radiale Flecken in den oberen Ecken (Milchglas-Look im Stil von Windows 11) |
none | Flache Füllung mit --color-bg-primary, ohne Dekoration |
decoration wirkt nur auf den hellen Modus des Jam-Themes. Nebula und Pulsar rendern unabhängig davon immer einfarbige Hintergründe. Der dunkle Modus von Jam wird immer einfarbig dargestellt.
Farbe
Überschreibe die Seitenhintergrundfarbe pro Modus. Akzeptiert jede CSS-Farbe: Hex, rgb(...), rgba(...) oder hsl(...).
{
"background": {
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}| Feld | Gilt für |
|---|---|
color.light | Body-Hintergrund im hellen Modus |
color.dark | Body-Hintergrund im dunklen Modus |
Setze nur light, um den hellen Modus zu überschreiben und den dunklen Standard des Themes beizubehalten. Setze nur dark für den umgekehrten Fall. Das funktioniert bei jedem Theme: Jam, Nebula, Pulsar, Halo und Dusk.
Kombiniere decoration: "none" mit einer color-Überschreibung für einen flachen, gebrandeten Hintergrund. Das ist bei redaktionell oder werblich gestalteten Dokumentationen üblich.
Verlauf
Passe den radialen Verlauf des Jam-Themes im hellen Modus an. Jedes Feld ist optional und wirkt eigenständig. Setze nur color, um die Farbe zu ändern, oder nur size, um ihn zu verkleinern oder zu vergrößern.
{
"background": {
"gradient": {
"color": "#a855f7",
"size": "800px",
"position": "top center",
"opacity": 0.25
}
}
}| Feld | Standard | Beschreibung |
|---|---|---|
color | Übernimmt colors.primary | Farbe des Verlaufs (beliebige CSS-Farbe) |
size | 500px | Radius. Beliebige CSS-Länge (px, rem, %, vh) |
position | top center | Mittelpunkt. Schlüsselwörter top/bottom/center/left/right, Prozentwerte oder Pixelkoordinaten |
opacity | 0.12 | Maximale Deckkraft im Zentrum. Zahl zwischen 0 und 1 |
gradient greift nur, wenn decoration auf gradient steht (oder nicht gesetzt ist). Die Dekorationen grid, windows und none ignorieren diesen Block. grid und windows beziehen ihre Musterfarbe aus --color-primary. Ändere sie im colors-Block.
Browser-Unterstützung
Der parametrische Verlauf (Nutzung der CSS-Variablen) verwendet color-mix(), das folgende Versionen voraussetzt:
- Chrome / Edge 111+
- Firefox 113+
- Safari 16.2+
Ältere Browser greifen auf den ursprünglichen Jam-Verlauf zurück und ignorieren deine gradient-Überschreibungen.
Häufige Rezepte
{
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Häufig bei redaktionell gestalteten Dokumentationen. Funktioniert mit jedem Theme.
{
"background": {
"gradient": {
"color": "#a855f7",
"opacity": 0.15
}
}
}Färbt den Jam-Verlauf um, ohne Größe oder Position zu ändern.
{
"background": {
"gradient": {
"size": "1200px",
"position": "top left",
"opacity": 0.2
}
}
}Breiterer, weicherer Verlauf, verankert in der oberen linken Ecke.
{
"background": {
"decoration": "grid"
}
}Zeichnet ein schwaches 24-px-Punktraster in der Primärfarbe deines Themes. Ändere die Punktfarbe mit colors.primary in docs.json.
{
"background": {
"decoration": "windows"
}
}Zwei weiche radiale Flecken in den oberen Ecken, am Viewport verankert. Die Fleckenfarbe kommt aus --color-primary.
{
"background": {
"color": {
"dark": "#0d0d12"
}
}
}Behält die Standardwerte des Themes im hellen Modus bei und setzt einen eigenen Hintergrund für den dunklen Modus.