Temas

Defina theme em docs.json para controlar o layout, a tipografia, o espaçamento e o comportamento do modo escuro. Há cinco temas disponíveis: jam (padrão), nebula, pulsar, halo e dusk.

As capturas de tela mostram a interface em inglês.

{
  "theme": "jam"
}

Temas disponíveis

JamNebulaPulsarHaloDusk

O tema padrão. Layout com logotipo no cabeçalho e fundo com gradiente radial derivado da cor principal. Bordas arredondadas (6-24px).

Ver exemplo ao vivo

{
  "theme": "jam"
}

Tipografia

Cada tema inclui fontes carregadas do Google Fonts:

Recomendamos usar as opções padrão, ajustadas para cada tema. Para mudar a aparência, defina fonts em docs.json para usar uma fonte do Google em todo o site:

{
  "fonts": {
    "family": "Lora"
  }
}

Use fontes separadas para títulos e corpo:

{
  "fonts": {
    "heading": { "family": "Space Grotesk" },
    "body": { "family": "Inter" }
  }
}

Qualquer fonte do Google funciona. Basta definir family para que o build a carregue 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 deixar o texto do 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. Também funciona na configuração body: "body": { "family": "Geist", "weight": 200 }.

Para personalizar 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 CSS personalizado.

Cores personalizadas

Substitua a paleta padrão para refletir a identidade da sua marca:

{
  "theme": "jam",
  "colors": {
    "primary": "#635BFF",
    "light": "#7C75FF",
    "dark": "#4F46E5"
  }
}

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 controle para alternar o modo na barra de navegação. A paleta de cores se adapta automaticamente.

Fixe o site em um modo específico com appearance em docs.json:

{
  "appearance": {
    "default": "dark",
    "strict": true
  }
}

Defina apenas default para sugerir um modo inicial e ainda permitir que os usuários alternem entre os modos. Adicione strict: true para remover totalmente o controle e fixar o site nesse modo.

Para testar o modo escuro durante o desenvolvimento, use o controle da barra de navegação ou simule-o no DevTools:

1. Abra o DevTools
2. Pressione Cmd+Shift+P (Mac) ou Ctrl+Shift+P (Windows)
3. Pesquise "Emulate CSS prefers-color-scheme: dark"

Para controlar detalhadamente os estilos do modo escuro, use CSS personalizado.

O que vem a seguir?