Cores
Trocar a cor primária e o tema claro/escuro do app.
Cores vivem no design system: mudou num lugar, muda no app inteiro (web + nativo).
Implementação
Pelo MCP (recomendado): peça ao assistente "muda a cor principal do app pra #6750A4". Ele roda set_primary_color por você. Veja MCP do Kasy.
-
Rode (ou peça pro assistente rodar):
kasy color --primary "#6750A4"Define a cor principal pros dois modos de uma vez. Pra valores diferentes em claro/escuro:
kasy color --primary-light "#0485F7" --primary-dark "#2563EB"A cor principal aparece em botões, links, ícones selecionados e a barra inferior. O foreground (texto sobre o botão) é calculado automaticamente. O comando já atualiza
lib/core/theme/colors.dartnos dois modos.Evite
Color(0xFF...)direto nas telas. Usecontext.colors.primarypara herdar o token. Assim a cor muda em todo o app com a troca acima. -
Para forçar um tema específico em vez de seguir o sistema, edite em
main.dart:ThemeMode.system // padrão, segue o SO ThemeMode.light // sempre claro ThemeMode.dark // sempre escuroO usuário também pode trocar nas Configurações do app (se o toggle estiver ligado no template).
Para rebrand completo com Figma (cores, fonte, claro/escuro), veja Figma (rebrand e telas) ou peça ao assistente com o MCP (rebrand_project).
Informações
Referência rápida de tokens
| Token | Uso | Acesso no código |
|---|---|---|
primary | Botões, links, seleção | context.colors.primary |
foreground | Texto principal | context.colors.foreground |
foregroundMuted | Texto secundário | context.colors.foregroundMuted |
surface | Fundo de cards | context.colors.surface |
border | Bordas e divisórias | context.colors.border |
overlay | Popups, tooltips | context.colors.overlay |
Só a cor principal é sua escolha
O colors.dart guarda apenas a primary. O texto que fica sobre ela, o estado de hover e os preenchimentos suaves são derivados dela automaticamente, escolhendo entre claro e escuro pelo contraste. Por isso trocar a marca é mexer em um valor só.
Não crave esses derivados na mão. Já aconteceu de um foreground escuro fixo sobre uma cor de luminância média deixar o botão ilegível. Você escolhe a cor; o resto deriva.
Editar direto no código
kasy color cobre a cor principal. Pra ajustar outro token do design system (não só a primary), edite lib/core/theme/colors.dart diretamente, ou peça pro assistente, com o MCP ligado, que ele já sabe onde cada token vive.
Atualizado em 03/11/2026