# Mobile SDK plugins customization

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 into 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’s written it its metadata) and file (the font’s filepath starting from to www/). Then you will be able to refer the fonts by name and specify their size.
• The images can be referred by its filepath (starting from www/). For iOS, it’s 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, etc. 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

# 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

# cameraContent

"cameraContent": "#RRGGBBAA"

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

# Platform support

# cardBorderedBackground

"cardBorderedBackground": "#RRGGBBAA"

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

# Platform support

# cardPlainBackground

"cardPlainBackground": "#RRGGBBAA"

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

# 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 attachments 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 photos stack icon.

# Platform support

# iconMail

"iconMail": "www/image_path"

Used for the default E-Mail support item. Default is a letter icon.

# Platform support

# iconPicture

"iconPicture": "www/image_path"

Used for attachments 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 backround 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:

@textblock

• sns_step_{STEP}_{scene}_instructions_image
• sns_step_{STEP}_{scene}_instructions_doImage
• sns_step_{STEP}_{scene}_instructions_dontImage @/textblock

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:

@textblock

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

# 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'd 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

# pictureSubmitted

"pictureSubmitted": "www/image_path"

The "submitted" image. Could be used if you'd 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'd like to override the auto-generated one. Default is nil

# Platform support

# Metrics

# Common

# activityIndicatorStyle

"activityIndicatorStyle": "medium"

The loading spinner style. Default is medium for iOS 13+ and .gray for previous ones.

# 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 corners 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

# Card Style

# cardBorderWidth

"cardBorderWidth": "1"

The cards' border width. Default is 1pt.

# Platform support

# cardCornerRadius

"cardCornerRadius": "8"

The cards' corners radius. Default is 8pt.

# Platform support

# documentTypeCardStyle

"documentTypeCardStyle": "filled"

The document types card style. Default is .filled

# Platform support

# selectedCountryCardStyle

"selectedCountryCardStyle": "filled"

The selected country card style. Default is .filled

# Platform support

# supportItemCardStyle

"supportItemCardStyle": "bordered"

The support items card style. Default is .bordered

# Platform support

# verificationStepCardStyle

"verificationStepCardStyle": "filled"

The verification steps card style. Default is .filled

# 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 fields corner radius. Used for the search bar only at the moment. Default is 8pt.

# Platform support

# fieldHeight

"fieldHeight": "48"

The input fields height. Default is 48pt.

# Platform support

# Content

# screenHorizontalMargin

"screenHorizontalMargin": "16"

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

# Platform support

# Alignment

# screenHeaderAlignment

"screenHeaderAlignment": "center"

The alignment for the screen headers. Default is .center

# Platform support

# sectionHeaderAlignment

"sectionHeaderAlignment": "natural"

The alignment for the section headers. Default is .natural

# Platform support

# Viewport

# viewportBorderWidth

"viewportBorderWidth": "8"

The selfie viewport border width. Default is 8pt.

# Platform support