Overview

Theming is configured via a JSON string and passed to the SDK. All properties are optional — omitted values fall back to defaults.

A WYSIWYG Configuration Editor is available for download to visually customize and generate the JSON:

ConfigurationEditor.html

JSON Schema

The theme configuration JSON has two top-level sections: foundations and components.

{
  "foundations": {
    "colorPrimary": { "light": "#hex", "dark": "#hex" },
    "colorTextPrimary": { "light": "#hex", "dark": "#hex" },
    "colorTextSecondary": { "light": "#hex", "dark": "#hex" },
    "colorTextLink": { "light": "#hex", "dark": "#hex" },
    "colorForeground": { "light": "#hex", "dark": "#hex" },
    "colorBackground": { "light": "#hex", "dark": "#hex" },
    "colorDivider": { "light": "#hex", "dark": "#hex" },
    "colorSuccess": { "light": "#hex", "dark": "#hex" },
    "colorWarning": { "light": "#hex", "dark": "#hex" },
    "colorDanger": { "light": "#hex", "dark": "#hex" },
    "fontFamily": "roboto"
  },
  "components": {
    "button": { ... },
    "inputFields": { ... },
    "loading": { ... },
    "backLink": { ... },
    "content": { ... }
  }
}

Foundations

Foundation tokens define the core visual identity of the SDK.

Colors

Each color token accepts an object with light and dark hex values.

Token	Description	Light Default	Dark Default
colorPrimary	Defines the core brand color used throughout the SDK	#4451F6	#7B86FF
colorPrimaryTint	A lighter variant of the primary brand color, used for subtle accents and supporting UI elements	Calculated	Calculated
colorTextPrimary	Primary text color used for main content and high-emphasis text	#120F0D	#F5F3F0
colorTextSecondary	Secondary text color used for supporting or lower-emphasis text	#63615E	#9A968F
colorTextLink	Color applied to hyperlink text displayed within body copy	#F45858	#F87474
colorForeground	Surface color used for containers and section backgrounds	#FEFDFC	#1C1B1A
colorBackground	Base background color for the overall interface	#F8F6F3	#121110
colorDivider	Color used for divider lines that separate content sections	#E7E5E2	#2A2927
colorSuccess	Color used to indicate success states or positive outcomes	#008761	#3DBA92
colorSuccessTint	A lighter variant of the success color, used for subtle positive-state accents	Calculated	Calculated
colorWarning	Color used to represent warning or cautionary states	#F5B900	#FFCB33
colorWarningTint	A lighter variant of the warning color, used for subtle cautionary-state accents	Calculated	Calculated
colorDanger	Color applied to error states or destructive actions	#AA220F	#E5614F
colorDangerTint	A lighter variant of the danger color, used for subtle error-related accents	Calculated	Calculated

Note: colorPrimaryTint, colorSuccessTint, colorWarningTint, and colorDangerTint are calculated automatically by the SDK and are not included in the theme configuration JSON.

Font Family

Property	Type	Default	Description
fontFamily	String	`"roboto"`	The font family used throughout the SDK

Values:

Value	Description
`"roboto"`	Roboto (default on Android)
`"inter"`	Inter
`"source sans 3"`	Source Sans 3

Components

Component tokens control the appearance of specific UI elements.

Button

"button": {
  "buttonPrimaryBackgroundColor": { "light": "#hex", "dark": "#hex" },
  "buttonPrimaryTextColor": { "light": "#hex", "dark": "#hex" },
  "buttonSecondaryBorderColor": { "light": "#hex", "dark": "#hex" },
  "buttonSecondaryTextColor": { "light": "#hex", "dark": "#hex" },
  "buttonTextCase": "capitalize",
  "buttonPrimaryTextShadow": false,
  "buttonRadius": 8
}

Property	Type	Default	Description
buttonPrimaryBackgroundColor	Color	#1F1093 / #5C68FF	Background color for primary buttons
buttonPrimaryTextColor	Color	#FEFDFC / #FEFDFC	Text color displayed on primary buttons
buttonSecondaryBorderColor	Color	#F45858 / #F87474	Border color applied to secondary button styles
buttonSecondaryTextColor	Color	#F45858 / #F87474	Text color displayed on secondary buttons
buttonTextCase	String	`"capitalize"`	Defines the text case style applied to all button labels (Primary, Secondary, Tertiary, and Ghost). Values: `"none"`, `"capitalize"`, `"uppercase"`, `"lowercase"`
buttonPrimaryTextShadow	Boolean	`false`	Enables or disables a text shadow on primary button labels for WCAG AA contrast compliance
buttonRadius	Double	`8`	Defines the corner radius applied to all button types (Primary, Secondary, Tertiary, and Ghost)

Input Fields

"inputFields": {
  "inputBorderColor": { "light": "#hex", "dark": "#hex" },
  "inputBackgroundColor": { "light": "#hex", "dark": "#hex" },
  "inputRadius": 8
}

Property	Type	Default	Description
inputBorderColor	Color	#BFBDBA / #3A3937	Border color applied to all input field types, including text fields, dropdowns, and search fields
inputBackgroundColor	Color	#FEFDFC / #1C1B1A	Background color applied to all input field types, including text fields, dropdowns, and search fields
inputRadius	Double	`8`	Corner radius applied to all input field types, including text fields, dropdowns, and search fields

Loading

"loading": {
  "loadingBackgroundColor": { "light": "#hex", "dark": "#hex" },
  "loadingTextColor": { "light": "#hex", "dark": "#hex" },
  "loadingSpinnerColor": { "light": "#hex", "dark": "#hex" }
}

Property	Type	Default	Description
loadingBackgroundColor	Color	#1F1093 / #5C68FF	Background color displayed on loading screens
loadingTextColor	Color	#FFFFFF / #FEFDFC	Text color used on loading screens
loadingSpinnerColor	Color	#4451F6 / #7B86FF	Color of the loading spinner displayed on loading screens

Back Link

"backLink": {
  "backIconType": "chevron",
  "backTextCase": "capitalize"
}

Property	Type	Default	Description
backIconType	String	`"chevron"`	Determines the style of the back arrow icon displayed in the navigation's back link. Values: `"arrow"`, `"chevron"`
backTextCase	String	`"capitalize"`	Controls the text case for back link labels. Values: `"none"`, `"capitalize"`, `"uppercase"`, `"lowercase"`

Content

"content": {
  "contentHomepageHeadline": "Global transfer",
  "contentHomepageDescription": "Send funds to your recipients with convenience and flexibility."
}

Property	Type	Default	Description
contentHomepageHeadline	String	`"Global transfer"`	Sets the headline text displayed on the SDK homepage
contentHomepageDescription	String	`"Send funds to your recipients with convenience and flexibility."`	Sets the supporting body text displayed on the SDK homepage

Headline values:

Value
`"Global transfer"`
`"International and domestic transfers"`
`"International transfers"`
`"Send money internationally"`

Description values:

Value
`"Send funds to your recipients with convenience and flexibility."`
`"Send money to friends and family in other countries"`

Default Configuration

{
  "foundations": {
    "colorPrimary": {
      "light": "#4451F6",
      "dark": "#7B86FF"
    },
    "colorTextPrimary": {
      "light": "#120F0D",
      "dark": "#F5F3F0"
    },
    "colorTextSecondary": {
      "light": "#63615E",
      "dark": "#9A968F"
    },
    "colorTextLink": {
      "light": "#F45858",
      "dark": "#F87474"
    },
    "colorForeground": {
      "light": "#FEFDFC",
      "dark": "#1C1B1A"
    },
    "colorBackground": {
      "light": "#F8F6F3",
      "dark": "#121110"
    },
    "colorDivider": {
      "light": "#E7E5E2",
      "dark": "#2A2927"
    },
    "colorSuccess": {
      "light": "#008761",
      "dark": "#3DBA92"
    },
    "colorWarning": {
      "light": "#F5B900",
      "dark": "#FFCB33"
    },
    "colorDanger": {
      "light": "#AA220F",
      "dark": "#E5614F"
    },
    "fontFamily": "roboto"
  },
  "components": {
    "button": {
      "buttonPrimaryBackgroundColor": {
        "light": "#1F1093",
        "dark": "#5C68FF"
      },
      "buttonPrimaryTextColor": {
        "light": "#FEFDFC",
        "dark": "#FEFDFC"
      },
      "buttonSecondaryBorderColor": {
        "light": "#F45858",
        "dark": "#F87474"
      },
      "buttonSecondaryTextColor": {
        "light": "#F45858",
        "dark": "#F87474"
      },
      "buttonTextCase": "capitalize",
      "buttonPrimaryTextShadow": false,
      "buttonRadius": 8
    },
    "inputFields": {
      "inputBorderColor": {
        "light": "#BFBDBA",
        "dark": "#3A3937"
      },
      "inputBackgroundColor": {
        "light": "#FEFDFC",
        "dark": "#1C1B1A"
      },
      "inputRadius": 8
    },
    "loading": {
      "loadingBackgroundColor": {
        "light": "#1F1093",
        "dark": "#5C68FF"
      },
      "loadingTextColor": {
        "light": "#FFFFFF",
        "dark": "#FEFDFC"
      },
      "loadingSpinnerColor": {
        "light": "#4451F6",
        "dark": "#7B86FF"
      }
    },
    "backLink": {
      "backIconType": "chevron",
      "backTextCase": "capitalize"
    },
    "content": {
      "contentHomepageHeadline": "Global transfer",
      "contentHomepageDescription": "Send funds to your recipients with convenience and flexibility."
    }
  }
}

Sample Usages

val themeConfiguration = """
{
  "foundations": {
    "colorPrimary": { "light": "#FF5733", "dark": "#C70039" }
  }
}
""".trimIndent()

val sdkConfiguration = PayMittoConfiguration(
    appearance = themeConfiguration,
    ...
    ...
)

PayMitto.startSdk(
    activity = this@MainActivity,
    configuration = sdkConfiguration
)

val themeConfiguration = """
{
  "foundations": {
    "colorPrimary": { "light": "#4451F6", "dark": "#7B86FF" },
    "colorBackground": { "light": "#F8F6F3", "dark": "#121110" },
    "fontFamily": "inter"
  },
  "components": {
    "button": {
      "buttonPrimaryBackgroundColor": { "light": "#1F1093", "dark": "#5C68FF" },
      "buttonRadius": 8,
      "buttonTextCase": "uppercase"
    },
    "loading": {
      "loadingBackgroundColor": { "light": "#1F1093", "dark": "#5C68FF" },
      "loadingSpinnerColor": { "light": "#4451F6", "dark": "#7B86FF" }
    },
    "content": {
      "contentHomepageHeadline": "Send money internationally",
      "contentHomepageDescription": "Send funds to your recipients with convenience and flexibility."
    }
  }
}
""".trimIndent()

val sdkConfiguration = PayMittoConfiguration(
    appearance = themeConfiguration,
    ...
    ...
)

PayMitto.startSdk(
    activity = this@MainActivity,
    configuration = sdkConfiguration
)