---
title: Temas
description: Escolha um tema (Jam, Nebula, Pulsar ou Halo) para controlar tipografia, layout, espaçamento e modo escuro. Personalize as cores para combinar com sua marca.
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
Defina `theme` em `docs.json` para controlar o layout, a tipografia, o espaçamento e o comportamento do modo escuro. Há quatro temas disponíveis: `jam` (padrão), `nebula`, `pulsar` e `halo`.
As capturas de tela mostram a interface em inglês.
```json docs.json
{
"theme": "jam"
}
```
## Temas disponíveis
O tema padrão. Layout com logotipo no cabeçalho e fundo com gradiente radial derivado da sua cor primária. Bordas arredondadas (6-24px).
[Ver exemplo ao vivo](https://jamdesk.com/docs/introduction)
```json
{
"theme": "jam"
}
```
Layout com logotipo no cabeçalho e IBM Plex Mono em toda a interface. Fundo creme quente (`#FEFCF9`) no modo claro. Raio de borda mínimo (2-8px).
[Ver exemplo ao vivo](https://nebula.jamdesk.com)
```json
{
"theme": "nebula"
}
```
Layout priorizando a barra lateral, com o logotipo na barra lateral e indicadores de navegação na borda esquerda. Largura total, com conteúdo centralizado de 780px. O cabeçalho fica oculto por padrão.
[Ver exemplo ao vivo](https://pulsar.jamdesk.com)
```json
{
"theme": "pulsar"
}
```
Layout com logotipo no cabeçalho e Figtree em toda a interface. Fundo de areia quente (`#F7F2E8`), com o conteúdo elevado sobre um cartão. Bordas muito arredondadas (8-28px).
[Ver exemplo ao vivo](https://halo.jamdesk.com)
```json
{
"theme": "halo"
}
```
## Tipografia
Cada tema inclui fontes carregadas do Google Fonts:
| Tema | Títulos | Corpo | Código |
|-------|----------|------|------|
| [Jam](https://jamdesk.com/docs/introduction) | Inter | Inter | JetBrains Mono |
| [Nebula](https://nebula.jamdesk.com) | IBM Plex Mono | IBM Plex Mono | IBM Plex Mono |
| [Pulsar](https://pulsar.jamdesk.com) | Inter | Inter | JetBrains Mono |
| [Halo](https://halo.jamdesk.com) | Figtree | Figtree | JetBrains Mono |
Recomendamos usar os padrões; eles são ajustados para cada tema. Se precisar de uma aparência diferente, defina `fonts` em `docs.json` para trocar todo o site por uma fonte do Google:
```json
{
"fonts": {
"family": "Lora"
}
}
```
Use fontes separadas para títulos e corpo:
```json
{
"fonts": {
"heading": { "family": "Space Grotesk" },
"body": { "family": "Inter" }
}
}
```
Qualquer fonte do Google funciona. Defina apenas `family` e o build fará o carregamento automaticamente. Para hospedar uma fonte personalizada, adicione `source` (URL ou caminho relativo a `/`) e `format`:
```json
{
"fonts": {
"family": "AcmeSans",
"source": "/fonts/acme-sans.woff2",
"format": "woff2"
}
}
```
Defina `weight` para um corpo mais leve (ou mais pesado). Isso é útil para fontes geométricas delicadas, como Geist:
```json
{
"fonts": {
"family": "Geist",
"weight": 200
}
}
```
`weight` define apenas o peso do texto do **corpo**; os títulos mantêm os pesos mais fortes de cada tema, preservando a hierarquia tipográfica. Ele também funciona no formato `body`: `"body": { "family": "Geist", "weight": 200 }`.
Para qualquer configuração além do campo `fonts` (substituir fontes de código, ajustar pesos por nível de título ou carregar fontes da Web que não sejam do Google), consulte [Custom CSS](/pt/customization/custom-css#fontes-externas).
## Cores personalizadas
Substitua a paleta padrão para combinar com a identidade da sua marca:
```json
{
"theme": "jam",
"colors": {
"primary": "#635BFF",
"light": "#7C75FF",
"dark": "#4F46E5"
}
}
```
| Cor | Uso |
|-------|-------|
| `primary` | Links, botões e destaques |
| `light` | Estados ao passar o mouse e realces |
| `dark` | Estados ativos e destaques do modo escuro |
As cores entram em vigor após o próximo build. No desenvolvimento local, reinicie o servidor de desenvolvimento para ver as alterações.
Use uma ferramenta de cores, como [Coolors](https://coolors.co) ou [Realtime Colors](https://realtimecolors.com), para gerar uma paleta harmoniosa.
**Precisa de mais do que cores?** O [Custom CSS](/pt/customization/custom-css) permite substituir fontes, espaçamento, largura do conteúdo, raios das bordas, estilos de chamadas e detalhes no nível dos componentes. Os temas definem os padrões; o Custom CSS é a alternativa para tudo que o CSS pode alterar.
## Modo escuro
Todos os temas incluem modo escuro. Por padrão, o Jamdesk segue a preferência do sistema do usuário e oferece um alternador na barra de navegação. Sua paleta de cores se adapta automaticamente.
Fixe o site em um modo específico usando `appearance` em `docs.json`:
```json
{
"appearance": {
"default": "dark",
"strict": true
}
}
```
| Campo | Valores | Padrão | Descrição |
|-------|--------|---------|-------------|
| `default` | `"system"` \| `"light"` \| `"dark"` | `"system"` | Modo inicial para visitantes que acessam pela primeira vez |
| `strict` | boolean | `false` | Quando `true`, oculta o alternador da barra de navegação para que os visitantes permaneçam em `default` |
Defina apenas `default` para sugerir um modo inicial e ainda permitir que os usuários alternem. Adicione `strict: true` para remover totalmente o alternador e bloquear o site nesse modo.
Para testar o modo escuro durante o desenvolvimento, use o alternador da barra de navegação ou simule-o nas DevTools:
1. Abra as DevTools
2. Pressione Cmd+Shift+P (Mac) ou Ctrl+Shift+P (Windows)
3. Pesquise por "Emulate CSS prefers-color-scheme: dark"
Para um controle mais detalhado dos estilos do modo escuro, use [Custom CSS](/pt/customization/custom-css).
## O que vem a seguir?
Personalize logotipos, cores e favicons
Substitua os estilos do tema pelo seu próprio CSS
Configure abas, grupos e a estrutura das páginas