# MD for: https://www.mercadopago.com.ar/developers/es/docs/checkout-api-orders/additional-settings/mobile/visual-customizations.md

\# Card Payment visual customizations The mobile checkout flow via Card Payment was built in a modular way. Its foundation follows UX best practices to give the buyer the best experience without you having to worry about design details. When you want to align the checkout with your app's identity, the SDK uses tokenized components in atomic design: changing a token is automatically reflected across components, screens, and states. :::::AccordionComponent{title="Configuring the appearance" pill="client-side"} ::::TabsComponent :::TabComponent{title="Android"} All visual customization starts from \`MPCheckoutAppearance\`, which you pass to the checkout Builder. It defines the applied theme (\`theme\`) and how the app switches between light and dark modes (\`style\`). 

kotlin 

kotlin

```
data class MPCheckoutAppearance(
    val theme: MercadoPagoThemeConfiguration = MercadoPagoThemes.Default,
    val style: MercadoPagoUserInterfaceStyle = MercadoPagoUserInterfaceStyle.System,
)
```

| Parameter | Description | Example | |-----------|-------------|---------| | \`theme: MercadoPagoThemeConfiguration\` | Set of light and dark themes that define the token values. Without customization, it uses \`MercadoPagoThemes.Default\`. | \`myTheme\` | | \`style: MercadoPagoUserInterfaceStyle\` | How the app switches between themes: dark only, light only, or following the device. | \`MercadoPagoUserInterfaceStyle.System\` | ::: :::TabComponent{title="iOS"} All visual customization starts from \`MPCheckoutAppearance\`, which you pass to the checkout Builder. There you define how the app switches between light and dark modes (\`style\`) and the theme applied in each mode (\`light\` and \`dark\`). 

swift 

swift

```
MercadoPagoCheckout.Builder(
    checkoutType: ...,
    checkoutAppearance: .init(
        style: .automatic,
        light: MPLightTheme(),
        dark: MPDarkTheme()
    )
)
```

| Parameter | Description | Example | |-----------|-------------|---------| | \`style\` | How the app switches between themes: dark only, light only, or following the device. | \`.automatic\` | | \`light\` | Theme applied in light mode. Without customization, it uses \`MPLightTheme()\`. | \`MyLightTheme()\` | | \`dark\` | Theme applied in dark mode. Without customization, it uses \`MPDarkTheme()\`. | \`MyDarkTheme()\` | ::: :::: ::::: :::::AccordionComponent{title="Defining the theme tokens" pill="client-side"} ::::TabsComponent :::TabComponent{title="Android"} A theme is a set of tokens grouped by category. Each mode — light and dark — is a \`MercadoPagoThemeProvider\`, where you define the value of each category. It is what fills the \`theme\` of \`MPCheckoutAppearance\`. 

kotlin 

kotlin

```
val lightTheme = MercadoPagoThemeProvider.Default(
    color = lightColors,
    spacing = lightSpacings,
    radius = lightRadius,
    borderWidth = lightBorderWidth,
    shape = lightShape,
    typography = lightTypography,
)
```

| Token | Description | Example | |-------|-------------|---------| | \`color: MercadoPagoColor\` | Colors of components, screens, backgrounds, etc. | \`lightColors\` | | \`spacing: MercadoPagoSpacing\` | Spacing. | \`lightSpacings\` | | \`radius: MercadoPagoRadius\` | Border radii. | \`lightRadius\` | | \`borderWidth: MercadoPagoBorderWidth\` | Border widths. | \`lightBorderWidth\` | | \`shape: MercadoPagoShape\` | Component shapes. | \`lightShape\` | | \`typography: MercadoPagoTypography\` | Typography. | \`lightTypography\` | ::: :::TabComponent{title="iOS"} A theme implements the \`MPTheme\` protocol. Each token category is a protocol, and your theme provides an implementation for each one. That theme is what you pass in \`light\` and \`dark\` of \`MPCheckoutAppearance\`. 

swift 

swift

```
struct MyTheme: MPTheme {
    var colors: MPColors
    var spacings: MPSpacings
    var borderRadius: MPBorderRadius
    var borderWidth: MPBorderWidth
    var typography: MPTypography
}
```

| Category | Protocol | Example | |----------|----------|---------| | Colors | \`MPColors\` | \`MyLightColors()\` | | Spacing | \`MPSpacings\` | \`LightSpacings()\` | | Radius | \`MPBorderRadius\` | \`LightBorderRadius()\` | | Borders | \`MPBorderWidth\` | \`LightBorderWidth()\` | | Typography | \`MPTypography\` | \`LightTypography()\` | ::: :::: ::::: :::::AccordionComponent{title="Creating your own theme" pill="client-side"} ::::TabsComponent :::TabComponent{title="Android"} You build a \`MercadoPagoThemeConfiguration\` — with one provider for light mode and another for dark mode — and assign it to the \`theme\` of \`MPCheckoutAppearance\`. You can create a full theme or start from the default theme and override only what you need. | Approach | When to use it | |----------|----------------| | Full theme | You define all the theme tokens. | | Override tokens | You start from the default theme and change only the tokens you need. | Full theme: 

kotlin 

kotlin

```
val myTheme = MercadoPagoThemeConfiguration(
    lightTheme = lightTheme,
    darkTheme = darkTheme,
)

val appearance = MPCheckoutAppearance(theme = myTheme)
```

Override tokens — start from the default theme with \`copy\`: 

kotlin 

kotlin

```
val myTheme = MercadoPagoThemeConfiguration(
    lightTheme = MercadoPagoDefaultLightTheme.copy(
        color = lightColors
    ),
    darkTheme = MercadoPagoDefaultDarkTheme.copy(
        color = darkColors
    )
)
```

::: :::TabComponent{title="iOS"} For a full theme, implement the \`MPTheme\` protocol with your tokens and pass it to \`MPCheckoutAppearance\`. If you want to change only some tokens, start from the default theme and override what you need. | Approach | When to use it | |----------|----------------| | Full theme | You implement \`MPTheme\` defining all the tokens. | | Override tokens | You start from the default theme and change only the tokens you need. | Full theme: 

swift 

swift

```
struct MyLightTheme: MPTheme {
    var colors: MPColors = MyLightColors()
    var spacings: MPSpacings = LightSpacings()
    var borderRadius: MPBorderRadius = LightBorderRadius()
    var borderWidth: MPBorderWidth = LightBorderWidth()
    var typography: MPTypography = LightTypography()
    var buttons: MPButtons = MPLightTheme().buttons
    var textFields: MPTextFields = MPLightTheme().textFields
}

let appearance = MPCheckoutAppearance(
    style: .automatic,
    light: MyLightTheme(),
    dark: MyDarkTheme()
)
```

Override tokens — start from the default theme and change what you need: 

swift 

swift

```
var themeLight = MPLightTheme()
themeLight.colors.text.accent = .red

var darkTheme = MPLightTheme()
darkTheme.colors.text.accent = .red

let app = MPCheckoutAppearance(theme: .init(light: themeLight, dark: darkTheme))

let builder = MercadoPagoCheckout.Builder(
    checkoutType: .saveCard,
    checkoutAppearance: app
)
.build()
```

::: :::: :::::