Hintergrund
Wählen Sie Verlauf, Punktraster, Milchglasflächen oder eine flache Füllung, legen Sie Farben je Modus fest und passen Sie den Jam-Verlauf an.
Der background-Block in docs.json steuert den Seitenhintergrund. Sie können eine von vier Dekorationsvarianten auswählen, die Grundfarbe je Modus überschreiben und den Standardverlauf anpassen.
{
"theme": "jam",
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Alle Felder sind optional. Lassen Sie den gesamten background-Block weg, um die Standardwerte des Themes zu verwenden.
Dekoration
Wählen Sie die Hintergrunddekoration für den hellen Modus des Jam-Themes. Jeder Wert rendert ein eigenes Muster über der Grundfarbe --color-bg-primary; im dunklen Modus wird unabhängig vom Wert immer eine einfarbige Fläche gerendert.
{
"background": {
"decoration": "grid"
}
}| Wert | Verhalten |
|---|---|
gradient (Standard) | Radialer Verlauf, oben verankert. Über den folgenden gradient-Block anpassbar |
grid | Dezentes Punktraster: 1,5-Pixel-Punkte in --color-primary mit 8 % Transparenz und 24 Pixel Abstand |
windows | Zwei weiche radiale Flächen in den oberen Ecken (milchglasartige Darstellung im Stil von Windows 11) |
none | Einfarbige Fläche mit --color-bg-primary, ohne Dekoration |
decoration wirkt sich nur auf den hellen Modus des Jam-Themes aus. Nebula und Pulsar rendern unabhängig davon einfarbige Hintergründe. Im dunklen Modus von Jam werden alle Werte einfarbig gerendert.
Farbe
Überschreiben Sie die Seitenhintergrundfarbe je Modus. Akzeptiert jede CSS-Farbe: Hexadezimalwert, rgb(...), rgba(...) oder hsl(...).
{
"background": {
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}| Feld | Gilt für |
|---|---|
color.light | Hintergrund des Seiteninhalts im hellen Modus |
color.dark | Hintergrund des Seiteninhalts im dunklen Modus |
Beide Felder sind optional. Setzen Sie nur light, um den hellen Modus zu überschreiben und den dunklen Standardwert des Themes beizubehalten, oder umgekehrt. Funktioniert mit allen Themes (Jam, Nebula, Pulsar).
Kombinieren Sie decoration: "none" mit einer Farbüberschreibung, um einen einfarbigen Hintergrund mit eigener Markenfarbe zu erhalten. Dies ist bei redaktionellen oder Marketing-Dokumentationen üblich.
Verlauf
Passen Sie den radialen Verlauf des Jam-Themes im hellen Modus an. Alle vier Felder sind optional und werden unabhängig voneinander angewendet. Setzen Sie nur color, um die Farbe zu ändern, oder nur size, um den Verlauf zu verkleinern oder zu vergrößern.
{
"background": {
"gradient": {
"color": "#a855f7",
"size": "800px",
"position": "top center",
"opacity": 0.25
}
}
}| Feld | Standardwert | Beschreibung |
|---|---|---|
color | Übernimmt colors.primary | Verlaufsfarbe (jede CSS-Farbe) |
size | 500px | Radius. Jede CSS-Längeneinheit (px, rem, %, vh) |
position | top center | Mittelpunkt. Schlüsselwörter wie top/bottom/center/left/right, Prozentwerte oder Pixelkoordinaten |
opacity | 0.12 | Maximale Transparenz im Mittelpunkt. Zahl zwischen 0 und 1 |
gradient wird nur angewendet, wenn decoration auf gradient gesetzt oder nicht festgelegt ist. Die Dekorationen grid, windows und none ignorieren diesen Block: grid und windows verwenden --color-primary als Musterfarbe. Passen Sie diese stattdessen über den colors-Block an.
Browser-Unterstützung
Der parametrische Verlauf (Verwendung von CSS-Variablen) nutzt color-mix(), was Folgendes voraussetzt:
- Chrome / Edge 111+
- Firefox 113+
- Safari 16.2+
Ältere Browser verwenden den ursprünglichen Jam-Verlauf: Sie rendern den Markenstandard und ignorieren Ihre gradient-Überschreibungen. Der Fallback sieht trotzdem sauber aus, kann aber nicht angepasst werden.
Häufige Rezepte
{
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Üblich bei redaktionellen Dokumentationen. Funktioniert mit jedem Theme.
{
"background": {
"gradient": {
"color": "#a855f7",
"opacity": 0.15
}
}
}Ändert die Farbe des Jam-Verlaufs, ohne seine Größe oder Position zu verändern.
{
"background": {
"gradient": {
"size": "1200px",
"position": "top left",
"opacity": 0.2
}
}
}Breiterer, diffuserer Verlauf, der an der oberen linken Ecke verankert ist.
{
"background": {
"decoration": "grid"
}
}Zeichnet ein dezentes Punktraster mit 24 Pixel Abstand in der primären Farbe Ihres Themes. Es verwendet --color-primary; ändern Sie die Punktfarbe, indem Sie colors.primary in docs.json festlegen.
{
"background": {
"decoration": "windows"
}
}Zwei weiche radiale Flächen in den oberen Ecken, am Ansichtsfenster verankert. Die Farbe der Flächen wird aus --color-primary übernommen.
{
"background": {
"color": {
"dark": "#0d0d12"
}
}
}Behält die Standardwerte des Themes im hellen Modus bei und verwendet einen eigenen Hintergrund im dunklen Modus.