Getnet DocsGetnet Docs

Personalize o tema

View as MarkdownView this page as plain textOpen in ChatGPTAsk questions about this pageOpen in ClaudeAsk questions about this pageOpen in PerplexityAsk questions about this page
Connect to CursorUse these docs in CursorConnect to VS CodeUse these docs in VS Code

Este guia mostra como ajustar a paleta de cores das telas do SDK à sua marca, sem substituir a UI. Este é o nível mínimo de personalização (consulte Modelo de personalização).

Como funciona

Você define as cores no Builder com customizeColors, atribuindo uma cor a cada área semântica da UI. As áreas que você não definir mantêm o padrão do SDK. As cores usam o formato 0xAARRGGBB.

Defina as cores

ApoloSdk.Builder(applicationContext)
    // ...
    .customizeColors {
        setColor(ColorArea.FinalizeButton, Color(0xFF0066CC))
        setColor(ColorArea.Background, Color(0xFFF0F0F0))
    }
    .build()

Para manter a paleta organizada e reutilizável, defina uma extensão em CustomizationScope e chame-a dentro de customizeColors:

ApoloSdk.Builder(context)
    // ...
    .customizeColors { applyPalette() }
    .build()

fun CustomizationScope.applyPalette() {
    setColor(ColorArea.Background, Color(0xFFFFF7DB))
    setColor(ColorArea.Surface, Color(0xFFFFFFFF))
    setColor(ColorArea.OnBackground, Color(0xFF1A1A1A))
    setColor(ColorArea.OnSurface, Color(0xFF1A1A1A))
    setColor(ColorArea.FinalizeButton, Color(0xFF1565C0))
    setColor(ColorArea.AnimationPrimary, Color(0xFF1565C0))
    setColor(ColorArea.AnimationSecondary, Color(0xFFFFCB33))
    setColor(ColorArea.AnimationBackground, Color(0xFFCFE3FF))
}

Áreas de cor

ÁreaAplica-se a
BackgroundFundo da tela (contêiner do Scaffold).
SurfaceSuperfícies brancas — cards, recibos, barras inferiores e cabeçalhos.
OnBackgroundTextos e ícones principais sobre Background.
OnSurfaceTextos e ícones principais sobre Surface.
FinalizeButtonCor de destaque dos botões de finalização nas telas finais.
ErrorContainerFundo das telas de erro.
WarningContainerFundo das telas de aviso.
SuccessContainerFundo das telas de sucesso.
AnimationPrimaryTraço/preenchimento principal das animações.
AnimationSecondaryTom secundário das animações (sombras, profundidade).
AnimationBackgroundFundo das animações.

Boas práticas

  • Sobrescreva somente as áreas de que você precisa — mudanças amplas prejudicam a consistência e podem quebrar o contraste e a acessibilidade.
  • Verifique visualmente as telas de sucesso, erro e aviso — juntas, elas formam a percepção final do fluxo.
  • Evite cores reservadas para estados de erro ou sucesso em áreas neutras (por exemplo, vermelho em Background) — os usuários associam essas cores a estados específicos.

Próximos passos