Temas
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.
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.
{
"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).
{
"theme": "jam"
}Tipografia
Cada tema inclui fontes carregadas do Google Fonts:
| Tema | Títulos | Corpo | Código |
|---|---|---|---|
| Jam | Inter | Inter | JetBrains Mono |
| Nebula | IBM Plex Mono | IBM Plex Mono | IBM Plex Mono |
| Pulsar | Inter | Inter | JetBrains Mono |
| Halo | 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:
{
"fonts": {
"family": "Lora"
}
}Use fontes separadas para títulos e corpo:
{
"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:
{
"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:
{
"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.
Cores personalizadas
Substitua a paleta padrão para combinar com a identidade da sua marca:
{
"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 ou Realtime Colors, para gerar uma paleta harmoniosa.
Precisa de mais do que cores? O 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:
{
"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:
- Abra as DevTools
- Pressione Cmd+Shift+P (Mac) ou Ctrl+Shift+P (Windows)
- Pesquise por "Emulate CSS prefers-color-scheme: dark"
Para um controle mais detalhado dos estilos do modo escuro, use Custom CSS.