Getnet DocsGetnet Docs

Personaliza el 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

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).

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

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:

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

ÁreaSe aplica a
BackgroundFondo de la pantalla (contenedor del Scaffold).
SurfaceSuperficies blancas — tarjetas, recibos, barras inferiores y encabezados.
OnBackgroundTextos e iconos principales sobre Background.
OnSurfaceTextos e iconos principales sobre Surface.
FinalizeButtonColor de énfasis de los botones de finalización en las pantallas finales.
ErrorContainerFondo de las pantallas de error.
WarningContainerFondo de las pantallas de advertencia.
SuccessContainerFondo de las pantallas de éxito.
AnimationPrimaryTrazo/relleno principal de las animaciones.
AnimationSecondaryTono secundario de las animaciones (sombras, profundidad).
AnimationBackgroundFondo 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