The mobile SDK allows for customization through the use of a specially formatted JSON object, known as the "theme". The theme can be applied using the withTheme builder's method.

Platform specific options

On the top level of the theme, you can specify the platform the corresponding options should be applied to:

• universal - for both platforms
• ios, android - for the specific platform (the specific options will overwrite the universal ones if defined)

For each platform, the options are organized into the following groups:

• colors
• fonts
• images
• metrics

Color parameters

The colors can be defined either as a single value or as a pair of light/dark values for light and dark mode correspondingly.
The value of a color can be set either as #RRGGBBAA or as 0xAARRGGBB (alpha is optional).

Fonts & Images

• The fonts and images should be placed under the www/ folder and be required in a .js file (assets.js on the screenshot) that should then be included in the project somewhere. This is to ensure that the resources are bundled into the native apps.
• The fonts also need to be listed in the theme under fonts.assets. For each one, you provide the name (the font’s name as it is written in its metadata) and file (the font’s filepath starting from to www/). Then you will be able to refer to the fonts by name and specify their size.
• The images can be referred to by its filepath (starting from www/). For iOS, it is also possible to specify the scale (adjusts the logical size in points, points=pixels/scale) and rendering mode (“template” or “original”)

Metric parameters

Some sizes and styles.

Full list of possible params

For the full list of possible customizations you can use, please see the native SDKs documentation

• For iOS
• For Android

Example

React Native example

Let's assume that the appropriate files of fonts and pictures are located in www directory of your project.

Then we can use them in the theme like this:

{
  "universal": {
    "fonts": {
      "assets": [
        // refers to the ttf/otf files (ios needs them to register fonts before they could be used)
        {
          "name": "Scriptina",
          "file": "www/fonts/SCRIPTIN.ttf"
        }
      ],
      "headline1": {
        "name": "Scriptina", // use ttf's `Full Name` or the name of any system font installed, or omit the key to keep the default font-face
        "size": 40 // in points
      },
      "caption": {
        "name": "GoodTimesRg-Regular",
        "size": 9
      }
    },
    "images": {
      "iconMail": "www/img/mail-icon.png",
      "verificationStepIcons": {
        "identity": {
          "image": "www/img/robot-icon.png",
          "scale": 3
        }
      }
    },
    "colors": {
      "navigationBarItem": {
        "light": "#FF000080",
        "dark": "0x80FF0000"
      },
      "alertTint": "#FF000080"
    }
  },
  "ios": {
    "metrics": {
      "commonStatusBarStyle": "default"
    }
  }
}

List of possible parameters

• Fonts
• Colors
• Images
• Metrics

Fonts

body

"body": "Font Name"

Used for paragraphs, text fields, and so on, in conjunction with contentNeutral mostly.
Default is System Regular, 14pt.

Platform support

caption

"caption": "Font Name"

Used for minor captions in conjunction with contentWeak mostly.
Default is System Regular, 12pt.

Platform support

headline1

"headline1": "Font Name"

Used for screen titles in conjunction with contentStrong mostly.
Default is System Bold, 24pt.

Platform support

headline2

"headline2": "Font Name"

Used for section titles in conjunction with contentStrong mostly.
Default is System Bold, 20pt.

Platform support

subtitle1

"subtitle1": "Font Name"

Used for subtitles in conjunction with contentStrong mostly.
Default is System Semibold, 18pt.

Platform support

subtitle2

"subtitle2": "Font Name"

Used for subtitles in conjunction with contentNeutral mostly.
Default is System Regular, 16pt.

Platform support

Colors

Common

navigationBarItem

"navigationBarItem": "#RRGGBBAA"

Navigation bar items tinting color. Used for the close button only at the moment.
Default is ● #94A0B8 and ● #FFFFFF with alpha 40% for the dark appearance.

Platform support

alertTint

"alertTint": "#RRGGBBAA"

Used for the system alert actions and the toolbar buttons.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

Platform support

toolbarTint

"toolbarTint": "#RRGGBBAA"

Used for the toolbars' buttons.
Default is ● #5C6B8A and ● #FFFFFF with alpha 60% for the dark appearance.

Platform support

toolbarBackground

"toolbarBackground": "#RRGGBBAA"

Used as a background color for the toolbars.
Default is nil, the system background color is applied.

Platform support

Backgrounds

backgroundCommon

"backgroundCommon": "#RRGGBBAA"

Used for almost all the screens as the background color (the exception is the Camera Screen, see cameraBackground .
Default is ● #FFFFFF and ● #1E232E for the dark appearance.

Platform support

backgroundCritical

"backgroundCritical": "#RRGGBBAA"

Used as a background state color for the verification steps and as a background color for the auto-generated images.pictureFailure
Default is ● #F05C5C with alpha 12% and ● #F05C5C with alpha 30% for the dark appearance.

Platform support

backgroundInfo

"backgroundInfo": "#RRGGBBAA"

Not used at the moment.
Default is ● #E8F4FD and ● #072F4B for the dark appearance.

Platform support

backgroundNeutral

"backgroundNeutral": "#RRGGBBAA"

Used as a background state color for the verification steps and as a main background color for the .filled style cards.
Default is ● #F6F7F9 and ● #FFFFFF with alpha 7% for the dark appearance.

Platform support

backgroundSuccess

"backgroundSuccess": "#RRGGBBAA"

Used as a background state color for the verification steps and as a background color for the auto-generated images.pictureSuccess
Default is ● #18B494 with alpha 12% and ● #18B494 with alpha 30% for the dark appearance.

Platform support

backgroundWarning

"backgroundWarning": "#RRGGBBAA"

Used as a background state color for the verification steps and as a background color for the auto-generated images.pictureWarning and images.pictureSubmitted
Default is ● #F2AA0D with alpha 13% and ● #F2AA0D with alpha 30% for the dark appearance.

Platform support

bottomSheetBackground

"bottomSheetBackground": "#RRGGBBAA"

The background color of the bottom sheet.
Default is ● #FFFFFF and ● #333C4D for the dark appearance.

Platform support

bottomSheetHandle

"bottomSheetHandle": "#RRGGBBAA"

The foreground color of the bottom sheet handle.
Default is ● #D1D6E1 and ● #FFFFFF with alpha 20% for the dark appearance.

Platform support

Content

cameraBackground

"cameraBackground": "#RRGGBBAA"

The Camera Screen background color.
Default is ● #1E232E.

Platform support

cameraBackgroundOverlay

"cameraBackgroundOverlay": "#RRGGBBAA"

The Camera Screen's overlay background color.
Default is ● #1E232E with alpha 75%.

Platform support

cameraContent

"cameraContent": "#RRGGBBAA"

Used as a tint color for the elements placed on the Camera Screen such as the gallery button, the touch button, and so on.
Default is ● #FFFFFF.

Platform support

cardBorderedBackground

"cardBorderedBackground": "#RRGGBBAA"

Used as a background color for the cards with bordered card style.

iOS

Default is nil

Android

Default is null

Platform support

cardPlainBackground

"cardPlainBackground": "#RRGGBBAA"

Used as a background color for the cards with plain card style.

iOS

Default is nil

Android

Default is null

Platform support

contentCritical

"contentCritical": "#RRGGBBAA"

Used as a foreground state color for the verification steps and as a foreground color for the auto-generated images.pictureFailure
Default is ● #F05C5C.

Platform support

contentInfo

"contentInfo": "#RRGGBBAA"

Used for the Video Screen's viewport border only at the moment.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

Platform support

contentLink

"contentLink": "#RRGGBBAA"

Used for the text links.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

Platform support

contentNeutral

"contentNeutral": "#RRGGBBAA"

Used as a foreground color for the text body, some subtitles and the accessory elements.
Default is ● #5C6B8A and ● #FFFFFF with alpha 60% for the dark appearance.

Platform support

contentStrong

"contentStrong": "#RRGGBBAA"

Used as a foreground color for the headlines and some subtitles.
Default is ● #333C4D and ● #FFFFFF with alpha 85% for the dark appearance.

Platform support

contentSuccess

"contentSuccess": "#RRGGBBAA"

Used as a foreground state color for the verification steps and as a foreground color for the auto-generated images.pictureSuccess
Default is ● #18B494.

Platform support

contentWarning

"contentWarning": "#RRGGBBAA"

Used as a foreground state color for the verification steps and as a foreground color for the auto-generated images.pictureWarning and images.pictureSubmitted
Default is ● #E6A00B.

Platform support

contentWeak

"contentWeak": "#RRGGBBAA"

Used as a foreground color for the minor captions and the light accessory elements.
Default is ● #94A0B8 and ● #FFFFFF with alpha 40% for the dark appearance.

Platform support

Fields

fieldBackground

"fieldBackground": "#RRGGBBAA"

The background color of the input fields. Used for text fields.
Default is ● #F6F7F9 and ● #FFFFFF with alpha 7% for the dark appearance.

Platform support

fieldBackgroundInvalid

"fieldBackgroundInvalid": "#RRGGBBAA"

The background color of the input fields marked as invalid. Used for text fields.
Default is equal to the backgroundCritical color.

Platform support

fieldBorder

"fieldBorder": "#RRGGBBAA"

The border color of the input fields. Used for text fields.
Default is the clear color.

Platform support

fieldContent

"fieldContent": "#RRGGBBAA"

The content color of the input fields. Used for text fields.
Default is ● #333C4D and ● #FFFFFF with alpha 85% for the dark appearance.

Platform support

fieldPlaceholder

"fieldPlaceholder": "#RRGGBBAA"

The placeholder color of the input fields. Used for text fields.
Default is ● #94A0B8 and ● #FFFFFF with alpha 40% for the dark appearance.

Platform support

fieldTint

"fieldTint": "#RRGGBBAA"

The tint color of the input fields. Used for text fields, checkboxes and radio buttons.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

Platform support

List

listSelectedItemBackground

"listSelectedItemBackground": "#RRGGBBAA"

The background color of the selected list item.
Default is ● #F6F7F9 and ● #FFFFFF with alpha 7% for the dark appearance.

Platform support

listSeparator

"listSeparator": "#RRGGBBAA"

The list separator color.
Default is ● #D1D6E1 and ● #FFFFFF with alpha 20% for the dark appearance.

Platform support

Primary Button

primaryButtonBackground

"primaryButtonBackground": "#RRGGBBAA"

The primary button background color in the normal state.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

Platform support

primaryButtonBackgroundDisabled

"primaryButtonBackgroundDisabled": "#RRGGBBAA"

The primary button background color in the disabled state.
Default is ● #A1D2F7 and ● #072F4B for the dark appearance.

Platform support

primaryButtonBackgroundHighlighted

"primaryButtonBackgroundHighlighted": "#RRGGBBAA"

The primary button background color in the highlighted state.
Default is ● #1485D1 and ● #0B4A75 for the dark appearance.

Platform support

primaryButtonContent

"primaryButtonContent": "#RRGGBBAA"

The primary button foreground color in the normal state.
Default is ● #FFFFFF and ● #FFFFFF with alpha 85% for the dark appearance.

Platform support

primaryButtonContentDisabled

"primaryButtonContentDisabled": "#RRGGBBAA"

The primary button foreground color in the disabled state.
Default is ● #FFFFFF and ● #0B4A75 for the dark appearance.

Platform support

primaryButtonContentHighlighted

"primaryButtonContentHighlighted": "#RRGGBBAA"

The primary button foreground color in the highlighted state.
Default is ● #FFFFFF and ● #FFFFFF with alpha 85% for the dark appearance.

Platform support

secondaryButtonBackground

"secondaryButtonBackground": "#RRGGBBAA"

The secondary button background color in the normal state.
Default is the clear color.

Platform support

Secondary Button

secondaryButtonBackgroundDisabled

"secondaryButtonBackgroundDisabled": "#RRGGBBAA"

The secondary button background color in the disabled state.
Default is the clear color.

Platform support

secondaryButtonBackgroundHighlighted

"secondaryButtonBackgroundHighlighted": "#RRGGBBAA"

The secondary button background color in the highlighted state.
Default is ● #E8F4FD and ● #072F4B for the dark appearance.

Platform support

secondaryButtonContent

"secondaryButtonContent": "#RRGGBBAA"

The secondary button foreground color in the normal state.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

Platform support

secondaryButtonContentDisabled

"secondaryButtonContentDisabled": "#RRGGBBAA"

The secondary button foreground color in the disabled state.
Default is ● #A1D2F7 and ● #0B4A75 for the dark appearance.

Platform support

secondaryButtonContentHighlighted

"secondaryButtonContentHighlighted": "#RRGGBBAA"

The secondary button foreground color in the highlighted state.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

Platform support

Platform elements

statusBarColor

"statusBarColor": "#RRGGBBAA"

Platform support

Images

Icons

iconAttachment

"iconAttachment": "www/image_path"

Used for attachments fields when the field is empty.
Default is a clip icon.

Platform support

iconBack

"iconBack": "www/image_path"

Used for the back bar button.
Default is a back arrow icon. Setting to nil forces the system back button to be used instead.

Platform support

iconBin

"iconBin": "www/image_path"

Used for attachment fields when the document can be removed.
Default is a trash bin icon.

Platform support

iconCalendar

"iconCalendar": "www/image_path"

Used for date fields.
Default is a calendar icon.

Platform support

iconCameraToggle

"iconCameraToggle": "www/image_path"

Used for the camera toggle button on the VideoIdent Screen.
Default is a rounded arrows icon.

Platform support

iconCheckboxOff

"iconCheckboxOff": "www/image_path"

Used for unmarked checkboxes.
Default is an empty rectangle icon with contentWeak border color.

Platform support

iconCheckboxOn

"iconCheckboxOn": "www/image_path"

Used for marked checkboxes.
Default is a white checkmark icon on a background rectangle with fieldTint color.

Platform support

iconClose

"iconClose": "www/image_path"

Used for the close bar button across all the screens.
Default is a cross icon.

Platform support

iconDisclosure

"iconDisclosure": "www/image_path"

Used to indicate the disclosability.
Default is a simple disclosing arrow icon.

Platform support

iconDropdown

"iconDropdown": "www/image_path"

Used for dropdown fields.
Default is a down arrow icon.

Platform support

iconFailure

"iconFailure": "www/image_path"

Used to compose the auto-generated pictureFailure
Default is a cross icon.

Platform support

iconGallery

"iconGallery": "www/image_path"

Used for the gallery button on the Camera Screen.
Default is a photo stack icon.

Platform support

iconMail

"iconMail": "www/image_path"

Used for the default email support item.
Default is a letter icon.

Platform support

iconPicture

"iconPicture": "www/image_path"

Used for attachment fields when the document is attached.
Default is a picture icon.

Platform support

iconPlay

"iconPlay": "www/image_path"

Used the play button on the Preview screen.
Default is a play icon in the circle.

Platform support

iconRadioButtonOff

"iconRadioButtonOff": "www/image_path"

Used for unselected radio buttons.
Default is an empty circle icon with contentWeak border color.

Platform support

iconRadioButtonOn

"iconRadioButtonOn": "www/image_path"

Used for selected radio buttons.
Default is a white circle icon on a background circle with fieldTint color.

Platform support

iconRotate

"iconRotate": "www/image_path"

Used for the rotation bar button on the Preview Screen.
Default is a photo rotation icon.

Platform support

iconSearch

"iconSearch": "www/image_path"

Used for the search bar.
Default is a magnifying glass icon.

Platform support

iconSubmitted

"iconSubmitted": "www/image_path"

Used to compose the auto-generated pictureSubmitted
Default is an uploading-to-the-cloud icon.

Platform support

iconSuccess

"iconSuccess": "www/image_path"

Used to compose the auto-generated pictureSuccess
Default is a checkmark icon.

Platform support

iconTorchOff

"iconTorchOff": "www/image_path"

Used for the turned-off flashlight button on the Camera Screen.
Default is an outlined flash icon.

Platform support

iconTorchOn

"iconTorchOn": "www/image_path"

Used for the turned-on flashlight button on the Camera Screen.
Default is a filled flash icon.

Platform support

iconWarning

"iconWarning": "www/image_path"

Used for the warnings bottom sheet and to compose the auto-generated pictureWarning
Default is an exclamation mark in the triangle.

Platform support

Content-driven sets

instructionsImages

"instructionsImages": "www/image_path"

Instruction pictures.

When an image is referred with one of the following text keys:

• sns_step_{STEP}_{scene}_instructions_image
• sns_step_{STEP}_{scene}_instructions_doImage
• sns_step_{STEP}_{scene}_instructions_dontImage

the SDK will look through instructionsImages for the corresponding image object.
At that, it takes the value of the text key and uses it as a key for instructionsImages dictionary.

Feel free to add your own pictures or use the predefined ones:

• default/facescan
• default/do_idCard
• default/dont_idCard
• default/do_passport
• default/dont_passport
• default/do_idCard_backSide
• default/dont_idCard_backSide

Platform support

verificationStepIcons

"verificationStepIcons": "www/image_path"

Verification steps icons.

Default icons are defined for the following keys: .identity, .selfie, .selfie2, .proofOfResidence, .proofOfResidence2, .applicantData, .emailVerification,.phoneVerification and .questionnaire.
Also the .default key is filled with the .identity icon.

Platform support

documentTypeIcons

"documentTypeIcons": "www/image_path"

Document types icons.

Default icons are defined for the following keys: .idCard, .passport, .drivers and .residencePermit.
Also the .default key is filled with the .idCard icon.

Platform support

Pictures

pictureFailure

"pictureFailure": "www/image_path"

The "failure" image. Could be used if you would like to override the auto-generated one.
Default is nil

Platform support

pictureGeolocationOff

"pictureGeolocationOff": "www/image_path"

Used as the image on the Geolocation Screen when the app has no permissions to get the geolocation.
Default is a crossed geolocation pin icon.

Platform support

pictureGeolocationOn

"pictureGeolocationOn": "www/image_path"

Used as the image on the Geolocation Screen before the start of the geolocation detection.
Default is a geolocation pin icon.

Platform support

pictureAgreement

"pictureAgreement": "www/image_path"

Displayed at the top of the Agreement Screen.
Default is a globe decorated.

Platform support

pictureDocumentFlip

"pictureDocumentFlip": "www/image_path"

Displayed on the Camera Screen before the back side of a document is going to be captured.
Default is an ID document with a rotating arrow below.

Platform support

pictureSubmitted

"pictureSubmitted": "www/image_path"

The "submitted" image. Could be used if you would like to override the auto-generated one.
Default is nil

Platform support

pictureSuccess

"pictureSuccess": "www/image_path"

The "success" image. Could be used if you'd like to override the auto-generated one.
Default is nil

Platform support

pictureWarning

"pictureWarning": "www/image_path"

The "warning" image. Could be used if you would like to override the auto-generated one.
Default is nil

Platform support

Metrics

Content Size

respectsPreferredContentSizeCategory

"respectsPreferredContentSizeCategory": true

Defines whether the fonts, images, metrics, and layouts should be adjusted in order to respect the user's preferred content size category on the iOS platform.
Default is true

Platform support

Common

activityIndicatorStyle

"activityIndicatorStyle": "medium"

The loading spinner style.

iOS

Default is medium for iOS 13+ and .gray for previous ones.

Android

Default is medium. Supported values are small, medium and large.

Platform support

commonStatusBarStyle

"commonStatusBarStyle": "default"

The status bar style on all the screens.
Default is .default

Platform support

preferredCloseBarItemAlignment

"preferredCloseBarItemAlignment": "right"

The preferred alignment of the close bar button. The options are .right and .left
Default is .right

Platform support

preferredCloseBarItemStyle

"preferredCloseBarItemStyle": "icon"

The preferred style of the close bar button. The options are .icon and .text
Default is .icon

Platform support

Bottom Sheet

bottomSheetCornerRadius

"bottomSheetCornerRadius": "16"

The bottom sheet's corner radius.
Default is 16pt.

Platform support

bottomSheetHandleSize

"bottomSheetHandleSize": {"width": 36, "height": 4}

The bottom sheet handle size.
Default is 36pt x 4pt.

Platform support

Buttons

buttonBorderWidth

"buttonBorderWidth": "1"

The secondary button border width.
Default is 1pt.

Platform support

buttonCornerRadius

"buttonCornerRadius": "8"

The primary and secondary buttons' corner radius.
Default is 8pt.

Platform support

buttonHeight

"buttonHeight": "48"

The primary and secondary buttons' height.
Default is 48pt.

Platform support

Camera

cameraStatusBarStyle

"cameraStatusBarStyle": "default"

The status bar style on the Camera Screen.
Default is .default

Platform support

Document Frame

documentFrameBorderWidth

"documentFrameBorderWidth": "2"

The document frame's border width.
Default is 2pt.

Platform support

documentFrameCornerRadius

"documentFrameCornerRadius": "14"

The document frame's corner radius.
Default is 14pt.

Platform support

Card Style

cardBorderWidth

"cardBorderWidth": "1"

The cards' border width.
Default is 1pt.

Platform support

cardCornerRadius

"cardCornerRadius": "8"

The cards' corner radius.
Default is 8pt.

Platform support

documentTypeCardStyle

"documentTypeCardStyle": "filled"

The document type card style.

iOS

Default is .filled

Android

Default is default. Supported values are default, bordered and plain.

Platform support

selectedCountryCardStyle

"selectedCountryCardStyle": "filled"

The selected country card style.

iOS

Default is .filled

Android

Default is default. Supported values are default, bordered and plain.

Platform support

supportItemCardStyle

"supportItemCardStyle": "bordered"

The support items card style.

iOS

Default is .bordered

Android

Default is default. Supported values are default, bordered and plain.

Platform support

verificationStepCardStyle

"verificationStepCardStyle": "filled"

The verification steps card style.

iOS

Default is .filled

Android

Default is default. Supported values are default, bordered and plain.

Platform support

Fields

fieldBorderWidth

"fieldBorderWidth": "0"

The input fields' border width. Used for the search bar only at the moment.
Default is 0pt.

Platform support

fieldCornerRadius

"fieldCornerRadius": "8"

The input field's corner radius. Used for the search bar only at the moment.
Default is 8pt.

Platform support

fieldHeight

"fieldHeight": "48"

The input field's height.
Default is 48pt.

Platform support

Content

screenHorizontalMargin

"screenHorizontalMargin": "16"

The horizontal margins of the screen content.
Default is 16pt.

Platform support

List separator

listSeparatorHeight

"listSeparatorHeight": "1"

The list separator thickness.
Default is 1pt.

Platform support

listSeparatorMarginLeft

"listSeparatorMarginLeft": "0"

The list separator left margin.
Default is 0pt.

Platform support

listSeparatorMarginRight

"listSeparatorMarginRight": "0"

The list separator right margin.
Default is 0pt.

Platform support

Alignment

screenHeaderAlignment

"screenHeaderAlignment": "center"

The alignment for the screen headers.

iOS

Default is .center

Android

Default is center. Supported values are left, center and right.

Platform support

sectionHeaderAlignment

"sectionHeaderAlignment": "natural"

The alignment for the section headers.

iOS

Default is .natural

Android

Default is left. Supported values are left, center and right.

Platform support

Viewport

viewportBorderWidth

"viewportBorderWidth": "8"

The selfie viewport border width.
Default is 8pt.

Platform support