# Personalize o tema

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](/pt/getnet-toolbox/sdk-white-label/core-concept-sdk/customization-model)).

## 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

```kotlin
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`:

```kotlin
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

| Área | Aplica-se a |
| :--- | :--- |
| `Background` | Fundo da tela (contêiner do Scaffold). |
| `Surface` | Superfícies brancas — cards, recibos, barras inferiores e cabeçalhos. |
| `OnBackground` | Textos e ícones principais sobre `Background`. |
| `OnSurface` | Textos e ícones principais sobre `Surface`. |
| `FinalizeButton` | Cor de destaque dos botões de finalização nas telas finais. |
| `ErrorContainer` | Fundo das telas de erro. |
| `WarningContainer` | Fundo das telas de aviso. |
| `SuccessContainer` | Fundo das telas de sucesso. |
| `AnimationPrimary` | Traço/preenchimento principal das animações. |
| `AnimationSecondary` | Tom secundário das animações (sombras, profundidade). |
| `AnimationBackground` | Fundo 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

* [Insira telas com Slots](/pt/getnet-toolbox/sdk-white-label/how-to-guides-sdk/insert-screens-with-slots) — adicione uma tela entre dois passos.
* [Sobrescreva telas do SDK](/pt/getnet-toolbox/sdk-white-label/how-to-guides-sdk/override-sdk-screens) — substitua a aparência de uma tela.