# Plugin Customization

Theme parameters in the Android SDK are used in many components of the system, so if you change one of them, it can affect many interface elements.

Customize the plugin's appearance according to your requirements. The Mobile SDK supports customization through a specially structured JSON object — theme. The theme is applied using the builder method withTheme.

# Platform-specific parameters

At the top level of theme, you can specify the platform to which the parameters apply:

• universal — for both platforms
• ios, android — for a specific platform (if specified, they override parameters from universal)

For each platform, parameters are grouped as follows:

• Colors colors

  A color can be specified as a single value or as a pair of light / dark values for light and dark themes.

  Color value format: #RRGGBBAA or 0xAARRGGBB (the alpha parameter is optional).

• Fonts fonts

  Fonts and images must be located in the www/ directory and linked in a .js- file (e.g., assets.js), which must then be included in the project. This is required for correctly adding resources to native applications.

  Fonts are additionally specified in theme in the fonts.assetssection. For each font, you must specify:
  - name — the font name (as specified in its metadata);
  - file — the path to the font file, starting from www/.
  

  After that, the font can be used by name and its size can be set.

• Images images

  Images are specified by path (starting from www/).
  For iOS, you can additionally specify:

  • scale — scale (logical size in points: points = pixels / scale);
    
  • rendering mode — display mode (template or original).

• Metrics metrics

  This section contains parameters for sizes and some style characteristics.

The full list of available settings is provided in the native SDK documentation:

iOS SDK → Android SDK →

# Example for React Native

Assume that font and image files are placed in the www directory of your project. Then the theme might look like this:

{
  "universal": {
    "fonts": {
      "assets": [
        {
          "name": "Scriptina",
          "file": "www/fonts/SCRIPTIN.ttf"
        }
      ],
      "headline1": {
        "name": "Scriptina",
        "size": 40
      },
      "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"
    }
  }
}

# Fonts

# body

"body": "Font Name"

Body text. Used for paragraphs, text fields, and other elements, mainly in combination with contentNeutral.
Default: System Regular, 14pt.

# caption

"caption": "Font Name"

Secondary text. Used for auxiliary captions, mainly in combination with contentWeak.
Default: System Regular, 12pt.

# headline1

"headline1": "Font Name"

Level 1 heading. Used for screen titles, mainly in combination with contentStrong.
Default: System Regular, 24pt.

# headline2

"headline2": "Font Name"

Level 2 heading. Used for section headings, mainly in combination with contentStrong.
Default: System Regular, 20pt.

# subtitle1

"subtitle1": "Font Name"

Level 1 subtitle. Used for subheadings, mainly in combination with contentStrong.
Default: System Semibold, 18pt.

# subtitle2

"subtitle2": "Font Name"

Level 2 subtitle. Used for subheadings, mainly in combination with contentNeutral.
Default: System Regular, 16pt.

# Colors

# Common parameters

# navigationBarItem

"navigationBarItem": "#RRGGBBAA"

Color of navigation bar items. Used only for the close button.
Default: #94A0B8 and #FFFFFF with 40% transparency in dark mode.

# alertTint

"alertTint": "#RRGGBBAA"

Color of buttons in system alerts and on the toolbar.
Default: #1693E9 and #1485D1 in dark mode.

# toolbarTint

"toolbarTint": "#RRGGBBAA"

Color of buttons on toolbars.
Default: #5C6B8A and #FFFFFF with 60% transparency in dark mode.

# toolbarBackground

"toolbarBackground": "#RRGGBBAA"

Background color for toolbars.
Default: nil, uses the system background color.

# Background colors

# backgroundCommon

"backgroundCommon": "#RRGGBBAA"

Primary background color. Used for all screens except the camera screen.
Default: #FFFFFF and #1E232E in dark mode.

# backgroundCritical

"backgroundCritical": "#RRGGBBAA"

Used as the background for verification step cards with critical issues and as the background for the verification failure message (images.pictureFailure icon).
Default: #F05C5C with 12% transparency and #F05C5C with 30% transparency in dark mode.

# backgroundInfo

"backgroundInfo": "#RRGGBBAA"

Currently not used.
Default: #E8F4FD and #072F4B in dark mode.

# backgroundNeutral

"backgroundNeutral": "#RRGGBBAA"

Secondary background color. Used for verification step cards in neutral status and dropdown lists. The card background will be filled when using the .filled style.
Default: #F6F7F9 and #FFFFFF with 7% transparency in dark mode.

# backgroundSuccess

"backgroundSuccess": "#RRGGBBAA"

Used as the background for successful verification step cards and as the background for the verification success message (images.pictureSuccess icon).
Default: #18B494 with 12% transparency and #18B494 with 30% transparency in dark mode.

# backgroundWarning

"backgroundWarning": "#RRGGBBAA"

Used as the background for verification step cards with warnings, as the background for the data submission message (images.pictureSubmitted icon), and as the background for the network error message (images.pictureWarning icon).
Default: #F2AA0D with 12% transparency and #F2AA0D with 30% transparency in dark mode.

# bottomSheetBackground

"bottomSheetBackground": "#RRGGBBAA"

Background color for the bottom sheet.
Default: #FFFFFF and #333C4D for dark mode.

# bottomSheetHandle

"bottomSheetHandle": "#RRGGBBAA"

Foreground color for the bottom sheet handle. Note that the handle can be either inside (on the bottomSheetBackground background) or outside (on the backgroundCommon background).
Default: #D1D6E1 and #FFFFFF with 20% transparency for dark mode.

# Content

# cameraBackground

"cameraBackground": "#RRGGBBAA"

Background color of the camera screen.
Default: #1E232E.

# cameraBackgroundOverlay

"cameraBackgroundOverlay": "#RRGGBBAA"

Background color of the overlay on the camera screen.
Default: #1E232E with 75% transparency.

# cameraContent

"cameraContent": "#RRGGBBAA"

Color of interface elements on the camera screen: gallery button, capture button, etc.
Default: #FFFFFF.

# cardBorderedBackground

"cardBorderedBackground": "#RRGGBBAA"

Used as the background color for cards with the .bordered style.
Default: Android — null, iOS — nil.

# cardPlainBackground

"cardPlainBackground": "#RRGGBBAA"

Used as the background color for cards with the .plain style.
Default: Android — null, iOS — nil.

# contentCritical

"contentCritical": "#RRGGBBAA"

Text color for critical issues during verification and for automatically generated images.pictureFailure images.
Default: #F05C5C.

# contentInfo

"contentInfo": "#RRGGBBAA"

Used only for the border of the viewport on the video screen.
Default: #1693E9 and #1485D1 in dark mode.

# contentLink

"contentLink": "#RRGGBBAA"

Color of text links.
Default: #1693E9 в #1485D1 in dark mode.

# contentNeutral

"contentNeutral": "#RRGGBBAA"

Color of body text, some subheadings, and auxiliary elements.
Default: #5C6B8A and #FFFFFF with 60% transparency in dark mode.

# contentStrong

"contentStrong": "#RRGGBBAA"

Color of headings and some subheadings.
Default: #333C4D and #FFFFFF with 85% transparency in dark mode.

# contentSuccess

"contentSuccess": "#RRGGBBAA"

Used as the icon color for verification step cards in successful status, text color for instructions, color for the images.pictureSuccess icon, and color for the capture area border.
Default: #18B494.

# contentWarning

"contentWarning": "#RRGGBBAA"

Text color for warnings during verification and for automatically generated images.pictureWarning and images.pictureSubmitted images.
Default: #E6A00B.

# contentWeak

"contentWeak": "#RRGGBBAA"

Color of secondary text and auxiliary elements.
Default: #94A0B8 and #FFFFFF with 40% transparency in dark mode.

# Fields

# fieldBackground

"fieldBackground": "#RRGGBBAA"

Background color of text input fields.
Default: #F6F7F9 and #FFFFFF with 7% transparency in dark mode.

# fieldBackgroundInvalid

"fieldBackgroundInvalid": "#RRGGBBAA"

Background of input fields marked as invalid.
Default: colors.backgroundCritical.

# fieldBorder

"fieldBorder": "#RRGGBBAA"

Border color of input fields.
Default: transparent.

# fieldContent

"fieldContent": "#RRGGBBAA"

Color of entered text in input fields.
Default: #333C4D and #FFFFFF with 85% transparency in dark mode.

# fieldPlaceholder

"fieldPlaceholder": "#RRGGBBAA"

Placeholder color in input fields.
Default: #94A0B8 and #FFFFFF with 40% transparency in dark mode.

# fieldTint

"fieldTint": "#RRGGBBAA"

Tint color of input fields. Used for text fields, checkboxes, and switches.
Default: #1693E9 and #1485D1 in dark mode.

# List

# listSelectedItemBackground

"listSelectedItemBackground": "#RRGGBBAA"

Background color for a selected list item.
Default: #F6F7F9 and #FFFFFF with 7% transparency for dark mode.

# listSeparator

"listSeparator": "#RRGGBBAA"

List separator color.
Default: #D1D6E1 and #FFFFFF with 20% transparency for dark mode.

# Primary Button

# primaryButtonBackground

"primaryButtonBackground": "#RRGGBBAA"

Background color of the primary button in the normal state.
Default: #1693E9 and #1485D1 in dark mode.

# primaryButtonBackgroundDisabled

"primaryButtonBackgroundDisabled": "#RRGGBBAA"

Background color of the primary button in the disabled state.
Default: #A1D2F7 and #072F4B in dark mode.

# primaryButtonBackgroundHighlighted

"primaryButtonBackgroundHighlighted": "#RRGGBBAA"

Background color of the primary button in the highlighted state.
Default: #1485D1 and #0B4A75 in dark mode.

# primaryButtonContent

"primaryButtonContent": "#RRGGBBAA"

Text color of the primary button in the normal state.
Default: #FFFFFF and #FFFFFF with 85% transparency in dark mode.

# primaryButtonContentDisabled

"primaryButtonContentDisabled": "#RRGGBBAA"

Content color of the primary button in the disabled state.
Default: #FFFFFF and #0B4A75 in dark mode.

# primaryButtonContentHighlighted

"primaryButtonContentHighlighted": "#RRGGBBAA"

Content color of the primary button in the highlighted state.
Default: #FFFFFF and #FFFFFF with 85% transparency in dark mode.

# Secondary Button

# secondaryButtonBackground

"secondaryButtonBackground": "#RRGGBBAA"

Background color of the secondary button in the normal state.
Default: transparent.

# secondaryButtonBackgroundDisabled

"secondaryButtonBackgroundDisabled": "#RRGGBBAA"

Background color of the secondary button in the disabled state.
Default: transparent.

# secondaryButtonBackgroundHighlighted

"secondaryButtonBackgroundHighlighted": "#RRGGBBAA"

Background color of the secondary button in the highlighted state.
Default: #E8F4FD and #072F4B in dark mode.

# secondaryButtonContent

"secondaryButtonContent": "#RRGGBBAA"

Content color of the secondary button in the normal state.
Default: #1693E9 and #1485D1 in dark mode.

# secondaryButtonContentDisabled

"secondaryButtonContentDisabled": "#RRGGBBAA"

Content color of the secondary button in the disabled state.
Default: #A1D2F7 and #0B4A75 in dark mode.

# secondaryButtonContentHighlighted

"secondaryButtonContentHighlighted": "#RRGGBBAA"

Content color of the secondary button in the highlighted state.
Default: #1693E9 and #1485D1 in dark mode.

# Platform Elements

# statusBarColor

"statusBarColor": "#RRGGBBAA"

# Images

# Icons

# iconAttachment

"iconAttachment": "www/image_path"

Used for attachments when the field is empty.
Default: paperclip icon.

# iconBack

"iconBack": "www/image_path"

Icon for the "Back" button on the navigation bar.
Default: arrow icon. When set to nil the system «Back» button is used.

# iconBin

"iconBin": "www/image_path"

Used for attachment fields when a document can be deleted.
Default: trash bin icon.

# iconCalendar

"iconCalendar": "www/image_path"

Used for date fields.
Default: calendar icon.

# iconCameraToggle

"iconCameraToggle": "www/image_path"

Used for the camera toggle button.
Default: circular arrows icon.

# iconCheckboxOff

"iconCheckboxOff": "www/image_path"

Used for unchecked checkboxes.
Default: empty rectangle with border color contentWeak.

# iconCheckboxOn

"iconCheckboxOn": "www/image_path"

Used for checked checkboxes.
Default: white checkmark on a rectangle background with color fieldTint.

# iconClose

"iconClose": "www/image_path"

Icon for the close button on all screens.
Default: cross icon.

# iconDisclosure

"iconDisclosure": "www/image_path"

Used to indicate expandability.
Default: disclosure arrow icon.

# iconDropdown

"iconDropdown": "www/image_path"

Used for dropdown fields.
Default: down arrow icon.

# iconFailure

"iconFailure": "www/image_path"

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

# iconGallery

"iconGallery": "www/image_path"

Used for the gallery button on the camera screen.
Default: stack of photos icon.

# iconMail

"iconMail": "www/image_path"

Used for the default support item for email.
Default: mail icon.

# iconPicture

"iconPicture": "www/image_path"

Used for attachments when a document is attached.
Default: photo icon.

# iconPlay

"iconPlay": "www/image_path"

Used for the play button on the preview screen.
Default: play icon inside a circle.

# iconRadioButtonOff

"iconRadioButtonOff": "www/image_path"

Used for unselected radio buttons.
Default: empty circle with border color contentWeak.

# iconRadioButtonOn

"iconRadioButtonOn": "www/image_path"

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

# iconRotate

"iconRotate": "www/image_path"

Used for the rotate button on the preview screen.
Default: photo rotation icon.

# iconSearch

"iconSearch": "www/image_path"

Used for the search bar.
Default: magnifying glass icon.

# iconSubmitted

"iconSubmitted": "www/image_path"

Used to compose the auto-generated pictureSubmitted.
Default: cloud upload icon.

# iconSuccess

"iconSuccess": "www/image_path"

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

# iconTorchOff

"iconTorchOff": "www/image_path"

Used for the torch off button on the camera screen.
Default: flash icon.

# iconTorchOn

"iconTorchOn": "www/image_path"

Used for the torch on button on the camera screen.
Default: flash icon.

# iconWarning

"iconWarning": "www/image_path"

Used for the warning bottom sheet and to compose the auto-generated pictureWarning.
Default: exclamation mark in a triangle.

# Content-dependent image sets

# instructionsImages

"instructionsImages": "www/image_path"

Instruction images. When an image is requested with one of the following text keys:

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

The SDK will look for the image in instructionsImages for the corresponding text key. Feel free to add your own images or use the presetsе:

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

# verificationStepIcons

"verificationStepIcons": "www/image_path"

Verification step icons. Defaults are set for the keys:

• .identity
• .selfie
• .selfie2
• .proofOfResidence
• .proofOfResidence2
• .applicantData
• .emailVerification
• .phoneVerification
• .questionnaire The .default key uses the .identity icon.
  

# documentTypeIcons

"documentTypeIcons": "www/image_path"

Document type icons.
Icons are defined by default for the following keys:

• .idCard
• .passport
• .drivers
• .residencePermit

The .default key is filled with the .idCard icon.

# Pictures

# pictureFailure

"pictureFailure": "www/image_path"

«Failure» picture. Can be used to replace the auto-generated one.
Default: nil.

# pictureGeolocationOff

"pictureGeolocationOff": "www/image_path"

Used as the image on the geolocation screen when the app does not have geolocation permissions.
Default: crossed-out geolocation pin icon.

# pictureGeolocationOn

"pictureGeolocationOn": "www/image_path"

Used as the image on the geolocation screen before geolocation starts.
Default: geolocation pin icon.

# pictureAgreement

"pictureAgreement": "www/image_path"

Displayed at the top of the agreement screen.
Default: globe image.

# pictureDocumentFlip

"pictureDocumentFlip": "www/image_path"

Displayed on the camera screen before taking a picture of the back side of the document.
Default: document image with a rotating arrow below.

# pictureSubmitted

"pictureSubmitted": "www/image_path"

«Submitted» picture. Can be used to replace the auto-generated one.
Default: nil.

# pictureSuccess

"pictureSuccess": "www/image_path"

«Success» picture. Can be used to replace the auto-generated one.
Default: nil.

# pictureWarning

"pictureWarning": "www/image_path"

«Warning» picture. Can be used to replace the auto-generated one.
Default: nil.

# Metrics

# Content Size

# respectsPreferredContentSizeCategory

"respectsPreferredContentSizeCategory": true

Determines whether fonts, images, metrics, and layouts should adapt according to the user's preferred content size category.
Default: true.

# General

# activityIndicatorStyle

"activityIndicatorStyle": "medium"

Style of the activity indicator. Supported values: small, medium, large.
Default: .medium for iOS 13+ and .gray for earlier versions.

# commonStatusBarStyle

"commonStatusBarStyle": "default"

Status bar style on all screens.
Default: .default.

# preferredCloseBarItemAlignment

"preferredCloseBarItemAlignment": "right"

Preferred alignment of the close button. Available options: .right and .left.
Default: .right.

# preferredCloseBarItemStyle

"preferredCloseBarItemStyle": "icon"

Preferred style of the close button. Available options: .icon and .text.
Default: .icon.

# Bottom Sheet

# bottomSheetCornerRadius

"bottomSheetCornerRadius": 16

Corner radius of the bottom sheet.
Default: 16pt.

# bottomSheetHandleSize

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

Size of the bottom sheet handle indicator.
Default: 36pt x 4pt.

# Buttons

# buttonBorderWidth

"buttonBorderWidth": 1

Border width of the secondary button. Primary buttons with borders are not yet supported.
Default: 1pt.

# buttonCornerRadius

"buttonCornerRadius": 8

Corner radius of buttons.
Default: 8pt.

# buttonHeight

"buttonHeight": 48

Height of primary and secondary buttons.
Default: 48pt.

# Camera

# cameraStatusBarStyle

"cameraStatusBarStyle": "default"

Status bar style on the camera screen. Currently not used.
Default: .default.

# Document Frame

# documentFrameBorderWidth

"documentFrameBorderWidth": 2

Border width of the document frame.
Default: 2pt.

# documentFrameCornerRadius

"documentFrameCornerRadius": 14

Corner radius of the document frame.
Default: 14pt.

# Card Style

# cardBorderWidth

"cardBorderWidth": 1

Border width of cards.
Default: 1pt.

# cardCornerRadius

"cardCornerRadius": 8

Corner radius of cards.
Default: 8pt.

# documentTypeCardStyle

"documentTypeCardStyle": "filled"

Style of the document type card.
Default: iOS — .filled. Android — default (Supported values: default, bordered, plain).

# selectedCountryCardStyle

"selectedCountryCardStyle": "filled"

Style of the selected country card.
Default: iOS — .filled. Android — default (Supported values: default, bordered, plain).

# supportItemCardStyle

"supportItemCardStyle": "bordered"

Style of the support item card.
Default: iOS — .bordered. Android — default (Supported values: default, bordered, plain).

# verificationStepCardStyle

"verificationStepCardStyle": "filled"

Style of the verification step card.
Default: iOS — .filled. Android — default (Supported values: default, bordered, plain).

# Fields

# fieldBorderWidth

"fieldBorderWidth": 0

Border width of text input fields.
Default: 0pt.

# fieldCornerRadius

"fieldCornerRadius": 8

Corner radius of text input fields.
Default: 8pt.

# fieldHeight

"fieldHeight": 48

Height of text input fields.
Default: 48pt.

# Content

# screenHorizontalMargin

"screenHorizontalMargin": 16

Horizontal margins of screen content.
Default: 16pt.

# List Separator

# listSeparatorHeight

"listSeparatorHeight": 1

Thickness of the list separator.
Default: 1dp.

# listSeparatorMarginLeft

"listSeparatorMarginLeft": 0

Left margin of the list separator.
Default: 0dp.

# listSeparatorMarginRight

"listSeparatorMarginRight": 0

Right margin of the list separator.
Default: 0dp.

# Alignment

# screenHeaderAlignment

"screenHeaderAlignment": "center"

Alignment of screen headers.
Default: iOS — .center. Android — center (Supported values: left, center, right).

# sectionHeaderAlignment

"sectionHeaderAlignment": "natural"

Alignment of section headers.
Default: iOS — .natural. Android — left (Supported values: left, center, right).

# Viewport

# viewportBorderWidth

"viewportBorderWidth": 8

Border thickness of the photo viewport.
Default: 8dp.