Fondo
Elige una decoración (gradiente, cuadrícula de puntos, manchas esmeriladas o plano), anula el color de fondo por modo, o ajusta el color, tamaño, posición y opacidad del gradiente Jam.
El bloque background en docs.json controla el fondo de la página: permite elegir entre cuatro tratamientos de decoración (gradiente predeterminado, cuadrícula de puntos, manchas esmeriladas estilo Windows 11 o plano), anular el color base por modo, y ajustar el color, tamaño, posición y opacidad del gradiente predeterminado.
{
"theme": "jam",
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Todos los campos son opcionales. Omite el bloque background completo para usar los valores predeterminados del tema.
decoration
Elige el tratamiento de fondo para el modo claro del tema Jam. Cada valor renderiza un patrón distinto sobre el color base --color-bg-primary; el modo oscuro siempre renderiza sólido independientemente del valor.
{
"background": {
"decoration": "grid"
}
}| Valor | Comportamiento |
|---|---|
gradient (predeterminado) | Gradiente radial anclado en la parte superior. Ajustable mediante el bloque gradient a continuación |
grid | Cuadrícula de puntos sutil: puntos de 1.5px en --color-primary con 8% de opacidad, espaciado de 24px |
windows | Dos manchas radiales suaves en las esquinas superiores (aspecto esmerilado estilo Windows 11) |
none | Relleno plano --color-bg-primary, sin decoración |
decoration solo afecta el modo claro del tema Jam. Nebula y Pulsar renderizan fondos sólidos independientemente. En el modo oscuro de Jam, todos los valores renderizan sólido.
color
Anula el color de fondo de la página por modo. Acepta cualquier color CSS: hex, rgb(...), rgba(...) o hsl(...).
{
"background": {
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}| Campo | Se aplica a |
|---|---|
color.light | Fondo del cuerpo en modo claro |
color.dark | Fondo del cuerpo en modo oscuro |
Ambos campos son opcionales. Define solo light para anular el modo claro y conservar el valor oscuro predeterminado del tema, o viceversa. Funciona en todos los temas (Jam, Nebula, Pulsar).
Combina decoration: "none" con un valor color personalizado para un fondo plano con identidad de marca — habitual en documentación de estilo editorial o marketing.
gradient
Ajusta el gradiente radial del modo claro del tema Jam. Los cuatro campos son opcionales y se aplican de forma independiente. Define solo color para cambiar el color, o solo size para reducir o ampliar.
{
"background": {
"gradient": {
"color": "#a855f7",
"size": "800px",
"position": "top center",
"opacity": 0.25
}
}
}| Campo | Predeterminado | Descripción |
|---|---|---|
color | Hereda colors.primary | Color del gradiente (cualquier color CSS) |
size | 500px | Radio. Cualquier longitud CSS (px, rem, %, vh) |
position | top center | Punto central. Palabras clave top/bottom/center/left/right, porcentajes o coordenadas en píxeles |
opacity | 0.12 | Opacidad máxima en el centro. Número entre 0 y 1 |
gradient solo se aplica cuando decoration es gradient (o no está definido). Las decoraciones grid, windows y none ignoran este bloque — grid y windows leen --color-primary para el color del patrón, por lo que personalízalo mediante el bloque colors en su lugar.
Compatibilidad con navegadores
El gradiente paramétrico (consumo de variables CSS) utiliza color-mix(), que requiere:
- Chrome / Edge 111+
- Firefox 113+
- Safari 16.2+
Los navegadores más antiguos usan como alternativa el gradiente Jam original: renderizan el valor predeterminado de marca e ignoran los ajustes de gradient. El fallback tiene buen aspecto por sí solo; simplemente no puede personalizarse.
Recetas comunes
{
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Habitual en documentación de estilo editorial. Funciona en cualquier tema.
{
"background": {
"gradient": {
"color": "#a855f7",
"opacity": 0.15
}
}
}Cambia el color del gradiente Jam sin modificar su tamaño ni posición.
{
"background": {
"gradient": {
"size": "1200px",
"position": "top left",
"opacity": 0.2
}
}
}Gradiente más amplio y difuso anclado en la esquina superior izquierda.
{
"background": {
"decoration": "grid"
}
}Pinta una cuadrícula de puntos tenue de 24px en el color primario del tema. Lee --color-primary, así que cambia el color de los puntos definiendo colors.primary en docs.json.
{
"background": {
"decoration": "windows"
}
}Dos manchas radiales suaves en las esquinas superiores, ancladas al viewport. Lee --color-primary para el color de las manchas.
{
"background": {
"color": {
"dark": "#0d0d12"
}
}
}Conserva los valores predeterminados del tema en modo claro y aplica un fondo personalizado en modo oscuro.