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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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, não no Tema.