> ## Documentation Index
> Fetch the complete documentation index at: https://chatcli.edilsonfreitas.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sistema de Tema (Cores)

> Paleta de cores unificada do ChatCLI: 11 temas (dark, light + 9 da comunidade), markdown temático e degradação graciosa por capacidade do terminal.

A partir da **v1.125**, todas as cores do ChatCLI vêm de uma única fonte da verdade: o pacote `ui/theme`. Ele define uma **paleta semântica** (cores nomeadas por papel, não por matiz), detecta a **capacidade de cor do terminal** e expõe **11 temas prontos** (`dark`, `light` + 9 da comunidade) que reskinam a interface inteira — chat, cards do `/coder` e `/agent`, bordas, markdown, code blocks e spinners — sem precisar reiniciar.

<Info>
  O tema é **estado global do processo**. Trocar de tema vale na **próxima renderização**, sem restart. Diferente do `CHATCLI_CODER_UI` (estilo de timeline), que o renderer relê do ambiente a cada chamada.
</Info>

***

## Trocar de tema em runtime

```bash theme={"system"}
/config ui                     # mostra o tema ativo + perfil de cor detectado
/config ui theme               # mesma coisa (forma explícita)
/config ui theme dark          # troca para o tema escuro
/config ui theme dracula       # troca para qualquer tema pelo nome
/config ui theme tokyo-night   # nomes com hífen funcionam normalmente

/config theme dracula          # atalho equivalente a /config ui theme dracula
```

<Tip>
  Autocomplete completo: digite `/config ui theme <TAB>` (ou `/config theme <TAB>`) e aparecem todos os temas: `dark · light · dracula · nord · tokyo-night · solarized-dark · solarized-light · gruvbox · catppuccin-mocha · monokai · one-dark`.
</Tip>

O painel de status (`/config ui`) mostra o tema ativo, a **origem** do valor (variável de ambiente vs. padrão), o **perfil de cor** detectado e a lista de temas com o ativo marcado por `→`.

***

## Temas disponíveis

São **11 temas** no total. Cada faixa mostra o nome e as **cores reais** da paleta, na ordem **modelo · accent (raciocínio) · ok · aviso · erro**:

<img src="https://mintcdn.com/encom/jHEV2Aj5E_4oDf2A/images/themes/dark.svg?fit=max&auto=format&n=jHEV2Aj5E_4oDf2A&q=85&s=815f91edaaed571de10d41049e7ae6da" alt="Tema dark" width="420" height="40" data-path="images/themes/dark.svg" /> — padrão, terminais de fundo escuro

<img src="https://mintcdn.com/encom/jHEV2Aj5E_4oDf2A/images/themes/light.svg?fit=max&auto=format&n=jHEV2Aj5E_4oDf2A&q=85&s=a00feadc08705d24c4211d92a52b2165" alt="Tema light" width="420" height="40" data-path="images/themes/light.svg" /> — terminais de fundo claro

<img src="https://mintcdn.com/encom/jHEV2Aj5E_4oDf2A/images/themes/dracula.svg?fit=max&auto=format&n=jHEV2Aj5E_4oDf2A&q=85&s=415cbc3ebad4e8672681f7a3acee5cda" alt="Tema dracula" width="420" height="40" data-path="images/themes/dracula.svg" /> — alto contraste roxo/rosa/ciano

<img src="https://mintcdn.com/encom/jHEV2Aj5E_4oDf2A/images/themes/nord.svg?fit=max&auto=format&n=jHEV2Aj5E_4oDf2A&q=85&s=5bb6bc1c2f16890f8d9b90a1bc69d958" alt="Tema nord" width="420" height="40" data-path="images/themes/nord.svg" /> — ártico frio, baixa saturação

<img src="https://mintcdn.com/encom/jHEV2Aj5E_4oDf2A/images/themes/tokyo-night.svg?fit=max&auto=format&n=jHEV2Aj5E_4oDf2A&q=85&s=78effb64f88e8f59da6a4494e23ce853" alt="Tema tokyo-night" width="420" height="40" data-path="images/themes/tokyo-night.svg" /> — azul-noturno moderno

<img src="https://mintcdn.com/encom/jHEV2Aj5E_4oDf2A/images/themes/solarized-dark.svg?fit=max&auto=format&n=jHEV2Aj5E_4oDf2A&q=85&s=0d63cd2c30533298636cf692a44dee49" alt="Tema solarized-dark" width="420" height="40" data-path="images/themes/solarized-dark.svg" /> — Solarized na base escura

<img src="https://mintcdn.com/encom/jHEV2Aj5E_4oDf2A/images/themes/solarized-light.svg?fit=max&auto=format&n=jHEV2Aj5E_4oDf2A&q=85&s=c80ffc90a7bb5f8336b9a7e2e8e44c71" alt="Tema solarized-light" width="420" height="40" data-path="images/themes/solarized-light.svg" /> — mesmos tons em fundo claro

<img src="https://mintcdn.com/encom/jHEV2Aj5E_4oDf2A/images/themes/gruvbox.svg?fit=max&auto=format&n=jHEV2Aj5E_4oDf2A&q=85&s=6b83325929fc354c6dc8762a1e360398" alt="Tema gruvbox" width="420" height="40" data-path="images/themes/gruvbox.svg" /> — retrô, quente, alto contraste

<img src="https://mintcdn.com/encom/jHEV2Aj5E_4oDf2A/images/themes/catppuccin-mocha.svg?fit=max&auto=format&n=jHEV2Aj5E_4oDf2A&q=85&s=f6f36a9c166e04ad7ec1f21a288f3f6f" alt="Tema catppuccin-mocha" width="420" height="40" data-path="images/themes/catppuccin-mocha.svg" /> — pastel suave (Mocha)

<img src="https://mintcdn.com/encom/jHEV2Aj5E_4oDf2A/images/themes/monokai.svg?fit=max&auto=format&n=jHEV2Aj5E_4oDf2A&q=85&s=e9c649b29429c286ebcb456301a96fd4" alt="Tema monokai" width="420" height="40" data-path="images/themes/monokai.svg" /> — clássico de editor sobre carvão

<img src="https://mintcdn.com/encom/jHEV2Aj5E_4oDf2A/images/themes/one-dark.svg?fit=max&auto=format&n=jHEV2Aj5E_4oDf2A&q=85&s=87f6d59d1d880c76d475f1dd3fdc2058" alt="Tema one-dark" width="420" height="40" data-path="images/themes/one-dark.svg" /> — azul/cinza do Atom, accents suaves

<Note>
  `dark` e `light` são variantes calibradas do ChatCLI; os outros nove são adaptações das paletas clássicas da comunidade mapeadas nos papéis semânticos do ChatCLI (mesma estrutura, cores diferentes). Todos degradam para 256 e 16 cores mantendo os papéis distinguíveis.
</Note>

A troca aplica a paleta a **tudo de uma vez** porque `Colorize` e o conversor `ansiColorToLip` roteiam pelo tema ativo — não há churn nos call-sites.

***

## Paleta semântica

As cores são nomeadas pelo **papel** que cumprem, não pelo matiz. É isso que permite trocar o tema inteiro mexendo só na paleta:

| Grupo            | Campo                 | Uso                                        |
| ---------------- | --------------------- | ------------------------------------------ |
| Marca/Hierarquia | `Primary`             | nome do modelo, ações primárias            |
|                  | `Secondary`           | multi-agent, batch, badges secundários     |
|                  | `Accent`              | ênfase de raciocínio / cognitiva           |
|                  | `Muted`               | bordas neutras, texto secundário, defaults |
| Estado semântico | `Success`             | sucesso de tool, habilitado                |
|                  | `Warning`             | avisos, desabilitado                       |
|                  | `Danger`              | erros, falha de tool                       |
|                  | `Info`                | notas / explicações                        |
| Estrutural       | `Border`              | borda padrão dos cards                     |
|                  | `Text` / `TextStrong` | corpo de texto / negrito e títulos         |
|                  | `Background`          | fundo dos code blocks                      |

***

## Markdown temático

O markdown é renderizado pelo glamour com um `StyleConfig` **derivado da paleta** (substituindo o antigo `glamour.WithStandardStyle("dark")`), então as cores do markdown e dos code blocks compartilham os tons da UI. Realce de sintaxe via **chroma** e uma **chip de linguagem** acima de cada bloco de código. O documento é renderizado **inteiro** (não bloco a bloco), de modo que reference links, footnotes e espaçamento de parágrafo resolvem corretamente.

***

## Perfil de cor e degradação graciosa

O ChatCLI detecta a capacidade do terminal e degrada com elegância. Em pipes, CI ou terminais `dumb`, a saída vira **texto limpo sem códigos de cor**.

| Perfil      | Significado                                       |
| ----------- | ------------------------------------------------- |
| `TrueColor` | terminal 24-bit                                   |
| `ANSI256`   | terminal 8-bit (256 cores)                        |
| `ANSI`      | terminal clássico de 16 cores (SGR 30–37 / 90–97) |
| `ASCII`     | sem cor — `NO_COLOR`, `dumb`, pipe/redirect       |

A detecção honra os sinais usuais (`NO_COLOR`, `CLICOLOR_FORCE`, `TERM`, `COLORTERM`). O tema `dark` mantém o índice **ANSI16 = 10** para o verde, então terminais de 16 cores ficam idênticos ao comportamento legado.

***

## Persistência

A troca em runtime vale só para o **processo atual**. Para fixar um padrão entre sessões, adicione ao seu `.env`:

```bash theme={"system"}
CHATCLI_THEME=light
```

O mutator emite essa dica logo após cada troca. O ChatCLI **nunca reescreve seu `.env`** sozinho. Veja [`CHATCLI_THEME`](/pt/reference/environment-variables) na referência de variáveis de ambiente.

<Note>
  Mudança paralela na v1.125: o envelope de resposta do chat ganhou um **footer** com custo por turno e uso de contexto, e os spinners foram unificados em um único spinner braille temático, exibido só quando há terminal.
</Note>
