---
title: CSS personalizado
description: Adicione CSS personalizado para substituir estilos do tema, ajustar a tipografia ou aplicar a identidade da marca usando variáveis CSS do Jamdesk.
---

> **For AI agents:** the complete documentation index is at [llms.txt](https://jamdesk.com/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Os temas do Jamdesk oferecem configurações padrão adequadas, mas você pode adicionar CSS personalizado para combinar com sua marca ou ajustar estilos específicos.

## Adicionar CSS personalizado

Crie um arquivo `style.css` na raiz do projeto (na mesma pasta que `docs.json`). O Jamdesk aplica esse arquivo automaticamente a todas as páginas; não é necessário adicioná-lo ao `docs.json`.

Qualquer arquivo `.css` na raiz do projeto funciona, não apenas `style.css`, o que é útil ao migrar de outra ferramenta. Se houver vários arquivos, o Jamdesk os combina em ordem alfabética pelo nome.

Execute `jamdesk dev` para pré-visualizar o resultado localmente. O comando renderiza o CSS personalizado da mesma forma que no site publicado.

```css style.css
/* Your custom styles */
article h1 {
  font-size: 2.5rem;
}
```

Para ver um passo a passo mais detalhado sobre como mudar a cor do cabeçalho e adicionar um botão flutuante, consulte [Exemplos de CSS e JS](https://jamdesk.com/docs/pt/customization/custom-code-examples).

## Variáveis CSS

As cores e os raios dos cantos são definidos por variáveis CSS. Substitua os valores em `:root` para atualizar todos os componentes que os utilizam:

```css style.css
:root {
  /* Page and text colors */
  --color-bg-primary: #ffffff;      /* page background */
  --color-bg-secondary: #f8fafc;    /* inputs, subtle panels */
  --color-text-primary: #0a0a0a;    /* headings */
  --color-text-secondary: #404144;  /* body text */
  --color-text-muted: #737373;      /* captions and hints */
  --color-border: #e2e8f0;

  /* Corner radius for cards, buttons and panels */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}
```

Os valores acima são os padrões do tema Jam. Outros temas começam com seus próprios valores, que você pode consultar nas ferramentas de desenvolvimento do navegador, no elemento `<html>`.

As cores da sua marca devem ser definidas em `docs.json`, não aqui. O Jamdesk transforma `colors.primary` na cor de destaque usada em links, botões e no item ativo da barra lateral. Consulte [Cores personalizadas](https://jamdesk.com/docs/pt/customization/theming#cores-personalizadas).

As fontes também devem ser definidas em `docs.json`. O campo `fonts` carrega uma fonte do Google Fonts ou um arquivo de fonte próprio e a aplica em todo o site. Definir `font-family` no CSS só funciona com `!important`, porque os temas definem fontes com seletores mais específicos. Consulte [Tipografia](https://jamdesk.com/docs/pt/customization/theming#tipografia).

## Personalizações comuns

### Alterar a fonte do código

Os blocos de código mantêm a fonte monoespaçada do tema, a menos que você a substitua com `!important`:

```css
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

article pre,
article pre code,
article code {
  font-family: 'Fira Code', monospace !important;
  font-variant-ligatures: common-ligatures;
}
```

### Personalizar os estilos dos links

Os links no corpo da página sempre têm classes. Portanto, selecione-os pelo local onde aparecem, não com `a:not([class])`:

```css
article .prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

article .prose a:hover {
  text-decoration-thickness: 2px;
}
```

### Ajustar o espaçamento dos títulos

```css
article .prose h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

article .prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
```

### Estilizar blocos de aviso

Os blocos de aviso obtêm suas cores de variáveis terminadas em `-bg`, `-border` e `-text`:

| Bloco de aviso | Prefixo da variável |
|---------|-----------------|
| `<Note>` | `--color-note-` |
| `<Info>` | `--color-info-` |
| `<Warning>` | `--color-warning-` |
| `<Tip>`, `<Check>` | `--color-success-` |
| `<Danger>` | `--color-error-` |

```css
/* Warmer Note callouts */
:root {
  --color-note-bg: #fef3c7;
  --color-note-border: #f59e0b;
}
```

### Estilizar a aba ativa

```css
article [role="tab"][aria-selected="true"] {
  border-bottom-width: 3px;
}
```

## Modo escuro

No modo escuro, o Jamdesk adiciona a classe `dark` ao elemento `<html>`. Coloque as substituições do modo escuro em `html.dark`:

```css
/* Light mode */
:root {
  --color-bg-primary: #fffdf7;
}

.custom-banner {
  background: #f0f4ff;
  color: #1e3a5f;
}

/* Dark mode */
html.dark {
  --color-bg-primary: #14110f;
}

html.dark .custom-banner {
  background: #1e293b;
  color: #e2e8f0;
}
```

<Warning>
`[data-theme="dark"]` nunca corresponde a nenhum elemento. O atributo `data-theme` em `<body>` contém o nome do tema (`jam`, `nebula` e assim por diante), não indica se o modo é claro ou escuro.
</Warning>

## Seletores a usar

Os nomes de classe do Jamdesk vêm do Tailwind e podem mudar em qualquer versão. Estes seletores são estáveis:

| Seletor | Corresponde a |
|----------|---------|
| `html.dark` | A página quando o modo escuro está ativado |
| `body[data-theme="jam"]` | O tema ativo, pelo nome |
| `header[data-has-tabs]` | O cabeçalho do site |
| `article` | A página atual, incluindo o título |
| `article .prose` | O conteúdo do corpo da página |
| `#content-scroll-container` | A coluna de conteúdo da página |
| `[role="tab"][aria-selected="true"]` | A aba selecionada em um grupo `<Tabs>` |

## Fontes externas

Sempre que possível, carregue as fontes por meio de `docs.json`. O campo [`fonts`](https://jamdesk.com/docs/pt/customization/theming#tipografia) aceita Google Fonts e arquivos hospedados por você, incluindo arquivos `.woff2` no seu repositório, e aplica as fontes aos títulos e ao texto do corpo.

Use CSS como alternativa para fontes que não são cobertas por `fonts`, como a fonte do código mostrada acima ou uma fonte diferente em um único elemento. Carregue a fonte com `@import` ou `@font-face` e, em seguida, defina-a com `!important`:

```css
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

article .prose blockquote {
  font-family: 'CustomFont', serif !important;
}
```

## Estilos responsivos

Use consultas de mídia para ajustar os estilos ao tamanho da tela:

```css
/* Phones */
@media (max-width: 768px) {
  article h1 {
    font-size: 1.75rem;
  }
}
```

## Depuração

Clique com o botão direito em um elemento e escolha **Inspect** para identificar o que deve ser selecionado. Prefira os seletores em [Seletores a usar](#seletores-a-usar), funções como `role="tab"` e variáveis CSS em vez de nomes longos de classes do Tailwind. Se uma regra não for aplicada, confira o painel **Styles** para identificar uma regra do tema que prevaleça por especificidade ou use `!important`.

## Limitações

- O CSS é aplicado globalmente; use seletores específicos para evitar conflitos
- Alguns estilos do tema, incluindo fontes e o fundo do cabeçalho do Jam, usam `!important` ou seletores muito específicos. Talvez seja necessário usar `!important` para substituí-los
- Na pré-visualização local (`jamdesk dev`), as alterações nos arquivos CSS são aplicadas quando você atualiza o navegador; no site publicado, elas entram em vigor na próxima compilação

## Próximos passos

<Columns cols={2}>
  <Card title="Temas" icon="palette" href="/pt/customization/theming">
    Escolha e configure temas
  </Card>
  <Card title="Exemplos de CSS e JS" icon="wand-magic-sparkles" href="/pt/customization/custom-code-examples">
    Um cabeçalho com a identidade da marca e um botão flutuante Pergunte à IA
  </Card>
</Columns>