# Tema e aparência do app

Ajuste as cores e o raio das bordas do app inteiro pelo painel Tema, sem gastar créditos, e saiba quando pedir mudanças visuais ao agente.

Fonte: https://guides.adapta.org/guias/skip/recursos-do-skip/tema/

**TL;DR** · O botão **Editar tema do app** abre o painel **Tema** no lugar do chat. Ele controla as cores que compõem o tema do app inteiro (fundo, texto e, nas opções avançadas, texto secundário, texto de cartões e cor de foco) e o **Raio das bordas**. Nada muda até você clicar em **Aplicar**; **Cancelar** descarta. Mudanças de layout, componentes e estilo de uma tela específica continuam sendo pedidos ao agente pelo chat.

![Gravação do builder do Skip: o botão Editar tema do app abre o painel Tema no lugar do chat, Mostrar opções avançadas revela Muted text, Card text e Ring, e o controle Raio das bordas fica logo abaixo, com Cancelar e Aplicar no rodapé.](https://guides.adapta.org/media/screenshots/skip/tema-2026-09-22/skip-tema-2026-09-22.gif)

*Abra o painel, expanda as opções avançadas e confira o raio antes de decidir entre Cancelar e Aplicar; nada muda no app até o clique em Aplicar.*

## O que o painel controla

Na barra superior do builder, clique em **Editar tema do app** (o ícone de paleta). O painel **Tema** substitui a coluna do chat e avisa: estas cores compõem o tema do seu app, e as mudanças aplicam em todos os lugares. Ele tem duas abas: **Cores**, ativa, e **Fontes**, marcada com cadeado e "em breve".

|  Controle |  O que muda |  Valor no projeto de exemplo |
| --- | --- | --- |

|  **Fundo** |  A cor de fundo das telas |  `#F4F4F5` |

|  **Texto** |  A cor principal do texto |  `#0F1729` |

|  **Muted text** (opções avançadas) |  Textos secundários, legendas e placeholders |  `#65758B` |

|  **Card text** (opções avançadas) |  O texto dentro de cartões |  `#0F1729` |

|  **Ring** (opções avançadas) |  A cor de foco e destaque de campos e botões |  `#3C83F6` |

|  **Raio das bordas** |  O arredondamento de cartões, campos e botões, em pixels |  12px |

Cada cor mostra o código hexadecimal e uma amostra ao lado. **Mostrar opções avançadas** expande as três cores extras; o contador ao lado ("3 cores") indica quantas estão ali.

## Aplique uma mudança com segurança

1. **Anote os valores atuais**

    Antes de mexer, copie os códigos das cores e o raio. O rodapé do painel mostra "Tema sincronizado" quando o que está na tela corresponde ao tema salvo.

![Painel Tema recém-aberto no builder do Skip, com Fundo #F4F4F5 e Texto #0F1729, o controle Raio das bordas em 12px e o rodapé Tema sincronizado.](https://guides.adapta.org/media/screenshots/skip/tema-2026-09-22/tema-valores-2026-09-22.png)

    *O que anotar: **1** os códigos hexadecimais de Fundo e Texto, **2** o valor do raio e **3** o rodapé Tema sincronizado, que confirma que a tela reflete o tema salvo.*

2. **Troque uma cor de cada vez**

    Altere primeiro **Fundo** e **Texto** e observe o preview antes de mexer nas opções avançadas; **Ring** é a cor de foco e destaque, o lugar natural para a cor da marca.

![Painel Tema com Mostrar opções avançadas expandido: além de Fundo e Texto, aparecem Muted text #65758B, Card text #0F1729 e Ring #3C83F6, cada um com amostra de cor.](https://guides.adapta.org/media/screenshots/skip/tema-2026-09-22/tema-cores-2026-09-22.png)

    *Ordem de trabalho: **1** Fundo e Texto primeiro, **2** Mostrar opções avançadas para chegar às três cores extras e **3** Ring, a cor de foco, onde entra a cor da marca.*

3. **Ajuste o raio das bordas**

    Arraste o controle **Raio das bordas**: valores baixos deixam o app mais quadrado e sóbrio; valores altos, mais arredondado e leve.

![Painel Tema com o cursor sobre o controle deslizante Raio das bordas, marcado em 12px, abaixo das opções avançadas.](https://guides.adapta.org/media/screenshots/skip/tema-2026-09-22/tema-raio-2026-09-22.png)

    *O raio: **1** o controle deslizante, que muda cartões, campos e botões de uma vez, e **2** o valor atual em pixels, para anotar antes de arrastar.*

4. **Aplique ou cancele**

    Clique em **Aplicar** para gravar o tema no projeto ou em **Cancelar** para voltar ao estado anterior. Confira o resultado em mais de uma rota do app pelo seletor de rota.

![Rodapé do painel Tema com o cursor sobre Cancelar, o botão Aplicar ao lado e o texto Tema sincronizado à esquerda.](https://guides.adapta.org/media/screenshots/skip/tema-2026-09-22/tema-botoes-2026-09-22.png)

    *A decisão: **1** Cancelar descarta o que você mexeu, **2** Aplicar grava o tema no projeto e **3** Tema sincronizado volta a aparecer quando tela e tema salvo coincidem.*

## O que continua sendo pedido ao agente

O painel muda cores e arredondamento do tema global. Para o resto, use o chat, de preferência com uma referência visual anexada:

- estrutura de uma tela (posição da barra lateral, ordem dos cartões, colunas de uma tabela);

- tipografia, enquanto a aba **Fontes** não estiver disponível;

- logotipo e imagens (anexe o arquivo e use **Selecionar elemento como anexo** para apontar onde entra);

- variações de tema, como um modo escuro.

Anexe o arquivo, aponte o lugar e feche com a restrição:

````
Troque a logo do cabeçalho pela imagem anexada. Não altere mais nada.

````

O método está em [Chat com o agente e modos de execução](https://guides.adapta.org/guias/skip/recursos-do-skip/chat-do-agente/).

Cores muito próximas entre **Fundo** e **Texto** ou entre **Muted text** e **Fundo** deixam o app ilegível para parte das pessoas. Depois de aplicar, abra uma página com tabela e formulário e confira o contraste antes de publicar.

**Dica do curso:** em *Os 10 Mandamentos do Skip*, Romário Melo recomenda anexar já no primeiro pedido um print de um sistema que você admira e escrever "siga o design system da imagem anexada". Assim o agente nasce com a identidade certa, e o painel Tema fica só para o ajuste fino das cores.

## O que conferir

- **Aplicou sem querer?** Reaplique os valores anotados no passo 1 e clique em **Aplicar** de novo.

- **Cor da marca:** mantenha o código hexadecimal oficial à mão; o painel aceita o valor exato.

- **Selo e metadados:** identidade visual do link compartilhado (favicon, imagem Open Graph) fica em [Configurações do projeto](https://guides.adapta.org/guias/skip/recursos-do-skip/configuracoes-do-projeto/), não no Tema.