# Personaliza el tema

Esta guía muestra cómo ajustar la paleta de colores de las pantallas del SDK a tu marca, sin reemplazar la UI. Este es el nivel mínimo de personalización (consulta [Modelo de personalización](/es/getnet-toolbox/sdk-white-label/core-concept-sdk/customization-model)).

## Cómo funciona

Defines los colores en el Builder con `customizeColors` y asignas un color a cada área semántica de la UI. Las áreas que no definas mantienen el valor predeterminado del SDK. Los colores usan el formato `0xAARRGGBB`.

## Define los colores

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

Para mantener la paleta organizada y reutilizable, define una extensión en `CustomizationScope` y llámala 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 color

| Área | Se aplica a |
| :--- | :--- |
| `Background` | Fondo de la pantalla (contenedor del Scaffold). |
| `Surface` | Superficies blancas — tarjetas, recibos, barras inferiores y encabezados. |
| `OnBackground` | Textos e iconos principales sobre `Background`. |
| `OnSurface` | Textos e iconos principales sobre `Surface`. |
| `FinalizeButton` | Color de énfasis de los botones de finalización en las pantallas finales. |
| `ErrorContainer` | Fondo de las pantallas de error. |
| `WarningContainer` | Fondo de las pantallas de advertencia. |
| `SuccessContainer` | Fondo de las pantallas de éxito. |
| `AnimationPrimary` | Trazo/relleno principal de las animaciones. |
| `AnimationSecondary` | Tono secundario de las animaciones (sombras, profundidad). |
| `AnimationBackground` | Fondo de las animaciones. |

## Buenas prácticas

* Sobrescribe solo las áreas que necesitas — los cambios amplios afectan la consistencia y pueden romper el contraste y la accesibilidad.
* Revisa visualmente las pantallas de éxito, error y advertencia — juntas definen la percepción final del flujo.
* Evita los colores reservados para estados de error o éxito en áreas neutras (por ejemplo, rojo en `Background`) — los usuarios asocian esos colores con estados específicos.

## Siguientes pasos

* [Inserta pantallas con Slots](/es/getnet-toolbox/sdk-white-label/how-to-guides-sdk/insert-screens-with-slots) — agrega una pantalla entre dos pasos.
* [Sobrescribe las pantallas del SDK](/es/getnet-toolbox/sdk-white-label/how-to-guides-sdk/override-sdk-screens) — reemplaza la apariencia de una pantalla.