Documentation
Product VideosAPI ReferenceChangelogFAQDashboard

Plugins customization

Customize plugin appearance to match your preferences.

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

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

body

"body": "Font Name"

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

Platform support

AndroidiOS
✅✅

caption

"caption": "Font Name"

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

Platform support

AndroidiOS
✅✅

headline1

"headline1": "Font Name"

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

Platform support

AndroidiOS
✅✅

headline2

"headline2": "Font Name"

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

Platform support

AndroidiOS
✅✅

subtitle1

"subtitle1": "Font Name"

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

Platform support

AndroidiOS
✅✅

subtitle2

"subtitle2": "Font Name"

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

Platform support

AndroidiOS
✅✅

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

AndroidiOS
✅✅

alertTint

"alertTint": "#RRGGBBAA"

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

Platform support

AndroidiOS
✅✅

toolbarTint

"toolbarTint": "#RRGGBBAA"

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

Platform support

AndroidiOS
❌✅

toolbarBackground

"toolbarBackground": "#RRGGBBAA"

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

Platform support

AndroidiOS
❌✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅✅

backgroundInfo

"backgroundInfo": "#RRGGBBAA"

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

Platform support

AndroidiOS
❌✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅✅

bottomSheetBackground

"bottomSheetBackground": "#RRGGBBAA"

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

Platform support

AndroidiOS
✅✅

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

AndroidiOS
✅ (From version 1.26)✅

Content

cameraBackground

"cameraBackground": "#RRGGBBAA"

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

Platform support

AndroidiOS
✅✅

cameraBackgroundOverlay

"cameraBackgroundOverlay": "#RRGGBBAA"

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

Platform support

AndroidiOS
✅✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅ (From version 1.26)✅

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

AndroidiOS
✅ (From version 1.26)✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅✅

contentLink

"contentLink": "#RRGGBBAA"

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

Platform support

AndroidiOS
✅✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅ (From version 1.26)✅

fieldBorder

"fieldBorder": "#RRGGBBAA"

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

Platform support

AndroidiOS
✅✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅ (From version 1.26)✅

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

AndroidiOS
✅✅

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

AndroidiOS
✅ (From version 1.26)✅