Overview

Theming is configured via a JSON string passed as the themeConfiguration parameter to startSDK() or showTransfer(). 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": "sf pro"
  },
  "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	#42CB91	#42CB91
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	#001C2A	#E3E3E3
colorTextSecondary	Secondary text color used for supporting or lower-emphasis text	#5E636B	#B0B0B0
colorTextLink	Color applied to hyperlink text displayed within body copy	#006F94	#4E83A6
colorForeground	Surface color used for containers and section backgrounds	#FFFFFF	#1F1F1F
colorBackground	Base background color for the overall interface	#F4F5F6	#111111
colorDivider	Color used for divider lines that separate content sections	#E2E2E2	#313131
colorSuccess	Color used to indicate success states or positive outcomes	#008761	#008761
colorWarning	Color used to represent warning or cautionary states	#FEF8DB	#6C560D
colorDanger	Color applied to error states or destructive actions	#AA220F	#ED7083
colorDangerTint	A lighter variant of the danger color, used for subtle error-related accents	Calculated	Calculated

Note: colorPrimaryTint 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	`"sf pro"`	The font family used throughout the SDK

Values:

Value	Description
`"sf pro"`	SF Pro (default on iOS)
`"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": "none",
  "buttonPrimaryTextShadow": false,
  "buttonRadius": 100
}

Property	Type	Default	Description
buttonPrimaryBackgroundColor	Color	#00766C / #20948A	Background color for primary buttons
buttonPrimaryTextColor	Color	#FFFFFF / #FFFFFF	Text color displayed on primary buttons
buttonSecondaryBorderColor	Color	#006F94 / #4E83A6	Border color applied to secondary button styles
buttonSecondaryTextColor	Color	#006F94 / #4E83A6	Text color displayed on secondary buttons
buttonTextCase	String	`"none"`	Defines the text case style applied to all button labels (Primary, Secondary, Tertiary, and Ghost). Values: `"none"`, `"capitalize"`, `"uppercase"`, `"lowercase"`
buttonPrimaryTextShadow	Bool	`false`	Enables or disables a text shadow on primary button labels for WCAG AA contrast compliance
buttonRadius	Double	`100`	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	#858585 / #505050	Border color applied to all input field types, including text fields, dropdowns, and search fields
inputBackgroundColor	Color	#F8F8F8 / #0C0C0C	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	#004C5B / #03282F	Background color displayed on loading screens
loadingTextColor	Color	#FFFFFF / #FFFFFF	Text color used on loading screens
loadingSpinnerColor	Color	#42CB91 / #42CB91	Color of the loading spinner displayed on loading screens

Back Link

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

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	`"none"`	Controls the text case for back link labels. Values: `"none"`, `"capitalize"`, `"uppercase"`, `"lowercase"`

Content

"content": {
  "contentHomepageHeadline": "International and domestic transfers",
  "contentHomepageDescription": "Send money to friends and family in other countries"
}

Property	Type	Default	Description
contentHomepageHeadline	String	`"International and domestic transfers"`	Sets the headline text displayed on the SDK homepage
contentHomepageDescription	String	`"Send money to friends and family in other countries"`	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": "#42CB91",
      "dark": "#42CB91"
    },
    "colorTextPrimary": {
      "light": "#001C2A",
      "dark": "#E3E3E3"
    },
    "colorTextSecondary": {
      "light": "#5E636B",
      "dark": "#B0B0B0"
    },
    "colorTextLink": {
      "light": "#006F94",
      "dark": "#4E83A6"
    },
    "colorForeground": {
      "light": "#FFFFFF",
      "dark": "#1F1F1F"
    },
    "colorBackground": {
      "light": "#F4F5F6",
      "dark": "#111111"
    },
    "colorDivider": {
      "light": "#E2E2E2",
      "dark": "#313131"
    },
    "colorSuccess": {
      "light": "#008761",
      "dark": "#008761"
    },
    "colorWarning": {
      "light": "#FEF8DB",
      "dark": "#6C560D"
    },
    "colorDanger": {
      "light": "#AA220F",
      "dark": "#ED7083"
    },
    "fontFamily": "sf pro"
  },
  "components": {
    "button": {
      "buttonPrimaryBackgroundColor": {
        "light": "#00766C",
        "dark": "#20948A"
      },
      "buttonPrimaryTextColor": {
        "light": "#FFFFFF",
        "dark": "#FFFFFF"
      },
      "buttonSecondaryBorderColor": {
        "light": "#006F94",
        "dark": "#4E83A6"
      },
      "buttonSecondaryTextColor": {
        "light": "#006F94",
        "dark": "#4E83A6"
      },
      "buttonTextCase": "none",
      "buttonPrimaryTextShadow": false,
      "buttonRadius": 100
    },
    "inputFields": {
      "inputBorderColor": {
        "light": "#858585",
        "dark": "#505050"
      },
      "inputBackgroundColor": {
        "light": "#F8F8F8",
        "dark": "#0C0C0C"
      },
      "inputRadius": 8
    },
    "loading": {
      "loadingBackgroundColor": {
        "light": "#004C5B",
        "dark": "#03282F"
      },
      "loadingTextColor": {
        "light": "#FFFFFF",
        "dark": "#FFFFFF"
      },
      "loadingSpinnerColor": {
        "light": "#42CB91",
        "dark": "#42CB91"
      }
    },
    "backLink": {
      "backIconType": "chevron",
      "backTextCase": "none"
    },
    "content": {
      "contentHomepageHeadline": "International and domestic transfers",
      "contentHomepageDescription": "Send money to friends and family in other countries"
    }
  }
}

Sample Usages

let themeConfiguration = """
{
  "foundations": {
    "colorPrimary": { "light": "#FF5733", "dark": "#C70039" }
  }
}
"""

ReadyRemit.shared.startSDK(
    themeConfiguration: themeConfiguration,
    fetchAccessTokenDetails: fetchAccessTokenDetails,
    verifyFundsAndCreateTransfer: verifyFundsAndCreateTransfer,
    onLoad: { sdkView in
        // navigate to sdkView
    }
)

let themeConfiguration = """
{
  "foundations": {
    "colorPrimary": { "light": "#42CB91", "dark": "#42CB91" },
    "colorBackground": { "light": "#F4F5F6", "dark": "#111111" },
    "fontFamily": "inter"
  },
  "components": {
    "button": {
      "buttonPrimaryBackgroundColor": { "light": "#00766C", "dark": "#20948A" },
      "buttonRadius": 8,
      "buttonTextCase": "uppercase"
    },
    "loading": {
      "loadingBackgroundColor": { "light": "#004C5B", "dark": "#03282F" },
      "loadingSpinnerColor": { "light": "#42CB91", "dark": "#42CB91" }
    },
    "content": {
      "contentHomepageHeadline": "Send money internationally",
      "contentHomepageDescription": "Send funds to your recipients with convenience and flexibility."
    }
  }
}
"""

ReadyRemit.shared.startSDK(
    themeConfiguration: themeConfiguration,
    fetchAccessTokenDetails: fetchAccessTokenDetails,
    verifyFundsAndCreateTransfer: verifyFundsAndCreateTransfer,
    onLoad: { sdkView in
        // navigate to sdkView
    }
)