Fundo
Escolha uma decoração (gradiente, grade de pontos, manchas foscas ou lisa), defina a cor de fundo por modo e ajuste o gradiente do Jam.
O bloco background em docs.json controla o fundo da página. Você pode escolher um de quatro tipos de decoração, substituir a cor base por modo e ajustar o gradiente padrão.
{
"theme": "jam",
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Todos os campos são opcionais. Omita todo o bloco background para usar os padrões do tema.
decoration
Escolha o tratamento do fundo para o modo claro do tema Jam. Cada valor renderiza um padrão distinto sobre a cor base --color-bg-primary; o modo escuro sempre renderiza um fundo sólido, independentemente do valor.
{
"background": {
"decoration": "grid"
}
}| Valor | Comportamento |
|---|---|
gradient (padrão) | Gradiente radial ancorado na parte superior. Ajustável pelo bloco gradient abaixo |
grid | Padrão sutil de grade de pontos: pontos de 1,5 px em --color-primary com 8% de opacidade e espaçamento de 24 px |
windows | Duas manchas radiais suaves nos cantos superiores, com aparência fosca no estilo do Windows 11 |
none | Preenchimento uniforme com --color-bg-primary, sem decoração |
decoration afeta apenas o modo claro do tema Jam. Nebula e Pulsar renderizam fundos sólidos independentemente do valor. No modo escuro do Jam, todos os valores renderizam um fundo sólido.
color
Substitua a cor de fundo da página por modo. Aceita qualquer cor CSS: hex, rgb(...), rgba(...) ou hsl(...).
{
"background": {
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}| Campo | Aplicação |
|---|---|
color.light | Fundo do corpo no modo claro |
color.dark | Fundo do corpo no modo escuro |
Ambos os campos são opcionais. Defina apenas light para substituir o modo claro e manter o padrão escuro do tema, ou vice-versa. Funciona em todos os temas (Jam, Nebula, Pulsar).
Combine decoration: "none" com uma substituição de color para obter um fundo uniforme com identidade visual. Isso é comum em documentações editoriais ou no estilo de marketing.
gradient
Ajuste o gradiente radial do modo claro do tema Jam. Todos os quatro campos são opcionais e aplicados de forma independente. Defina apenas color para alterar a cor ou apenas size para reduzir ou ampliar o gradiente.
{
"background": {
"gradient": {
"color": "#a855f7",
"size": "800px",
"position": "top center",
"opacity": 0.25
}
}
}| Campo | Padrão | Descrição |
|---|---|---|
color | Herda colors.primary | Cor do gradiente (qualquer cor CSS) |
size | 500px | Raio. Qualquer comprimento CSS (px, rem, %, vh) |
position | top center | Ponto central. Palavras-chave top/bottom/center/left/right, porcentagens ou coordenadas em pixels |
opacity | 0.12 | Opacidade máxima no centro. Número entre 0 e 1 |
gradient só se aplica quando decoration é gradient (ou não está definida). As decorações grid, windows e none ignoram este bloco: grid e windows usam --color-primary para a cor do padrão. Para personalizá-la, use o bloco colors.
Suporte dos navegadores
O gradiente paramétrico (uso de variáveis CSS) usa color-mix(), que requer:
- Chrome / Edge 111+
- Firefox 113+
- Safari 16.2+
Navegadores mais antigos usam como fallback o gradiente Jam original: renderizam o padrão da marca e ignoram suas substituições de gradient. O próprio fallback tem uma aparência limpa, mas não pode ser personalizado.
Receitas comuns
{
"background": {
"decoration": "none",
"color": {
"light": "#faf7f2",
"dark": "#0a0a0d"
}
}
}Comum em documentações de estilo editorial. Funciona em qualquer tema.
{
"background": {
"gradient": {
"color": "#a855f7",
"opacity": 0.15
}
}
}Altera a cor do gradiente Jam sem modificar seu tamanho ou posição.
{
"background": {
"gradient": {
"size": "1200px",
"position": "top left",
"opacity": 0.2
}
}
}Gradiente mais amplo e difuso, ancorado no canto superior esquerdo.
{
"background": {
"decoration": "grid"
}
}Desenha uma grade de pontos de 24 px na cor primária do seu tema. Usa --color-primary; para alterar a cor dos pontos, defina colors.primary em docs.json.
{
"background": {
"decoration": "windows"
}
}Duas manchas radiais suaves nos cantos superiores, ancoradas na janela de visualização. Usa --color-primary para a cor das manchas.
{
"background": {
"color": {
"dark": "#0d0d12"
}
}
}Mantém os padrões do tema no modo claro e escolhe um fundo personalizado para o modo escuro.