IDnGO Documentation

# iOS SDK Theme Settings

Theme parameters in the iOS SDK are used across many components, so changing one may affect multiple UI elements.

# Fonts

# headline1

theme.fonts.headline1: UIFont

Level 1 heading. Used for screen titles, mainly with colors.contentStrong.
Default: System Bold, 24pt

# headline2

theme.fonts.headline2: UIFont

Level 2 heading. Used for section titles, mainly with colors.contentStrong.
Default: System Bold, 20pt

# subtitle1

theme.fonts.subtitle1: UIFont

Level 1 subtitle. Used for subtitles, mainly with colors.contentStrong.
Default: System Semibold, 18pt

# subtitle2

theme.fonts.subtitle2: UIFont

Level 2 subtitle. Used for subtitles, mainly with colors.contentNeutral.
Default: System Regular, 16pt

# body

theme.fonts.body: UIFont

Main text. Used for paragraphs, text fields, and other elements, mainly with colors.contentNeutral.
Default: System Regular, 14pt

# caption

theme.fonts.caption: UIFont

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

# Colors

# General

theme.colors.navigationBarItem: UIColor

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

# alertTint

theme.colors.alertTint: UIColor

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

# toolbarTint

theme.colors.toolbarTint: UIColor

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

# toolbarBackground

theme.colors.toolbarBackground: UIColor?

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

# Backgrounds

# backgroundCommon

theme.colors.backgroundCommon: UIColor

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

# backgroundNeutral

theme.colors.backgroundNeutral: UIColor

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

# backgroundInfo

theme.colors.backgroundInfo: UIColor

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

# backgroundSuccess

theme.colors.backgroundSuccess: UIColor

Used as background for verification step cards in a successful status and as a background for success messages (images.pictureSuccess).
Default: #18B494 with 12% opacity and #18B494 with 30% opacity in dark mode

# backgroundWarning

theme.colors.backgroundWarning: UIColor

# backgroundCritical

theme.colors.backgroundCritical: UIColor

Used as the background for verification step cards in a critical status and as the background for failure messages (images.pictureFailure).
Default: #F05C5C with 12% opacity and #F05C5C with 30% opacity in dark mode

# Content

theme.colors.contentLink: UIColor

Color for text links.
Default: #1693E9 and #1485D1 in dark mode

# contentStrong

theme.colors.contentStrong: UIColor

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

# contentNeutral

theme.colors.contentNeutral: UIColor

Color for main text, some subheadings, and auxiliary elements.
Default: #5C6B8A and #FFFFFF with 60% opacity in dark mode

# contentWeak

theme.colors.contentWeak: UIColor

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

# contentInfo

theme.colors.contentInfo: UIColor

Used only for the border of the video preview area.
Default: #1693E9 and #1485D1 in dark mode

# contentSuccess

theme.colors.contentSuccess: UIColor

Used for icons on verification step cards in a successful status, instructional text, the images.pictureSuccess icon, and the capture area border.
Default: #18B494

# contentWarning

theme.colors.contentWarning: UIColor

Color for warning text during verification and automatically generated images (images.pictureWarning and images.pictureSubmitted).
Default: #E6A00B

# contentCritical

theme.colors.contentCritical: UIColor

Color for text indicating critical issues during verification and images, including automatically generated images.pictureFailure.
Default: #F05C5C

# Основная кнопка

# primaryButtonBackground

theme.colors.primaryButtonBackground: UIColor

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

# primaryButtonBackgroundHighlighted

theme.colors.primaryButtonBackgroundHighlighted: UIColor

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

# primaryButtonBackgroundDisabled

theme.colors.primaryButtonBackgroundDisabled: UIColor

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

# primaryButtonContent

theme.colors.primaryButtonContent: UIColor

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

# primaryButtonContentHighlighted

theme.colors.primaryButtonContentHighlighted: UIColor

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

# primaryButtonContentDisabled

theme.colors.primaryButtonContentDisabled: UIColor

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

# Secondary Button

# secondaryButtonBackground

theme.colors.secondaryButtonBackground: UIColor

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

# secondaryButtonBackgroundHighlighted

theme.colors.secondaryButtonBackgroundHighlighted: UIColor

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

# secondaryButtonBackgroundDisabled

theme.colors.secondaryButtonBackgroundDisabled: UIColor

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

# secondaryButtonContent

theme.colors.secondaryButtonContent: UIColor

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

# secondaryButtonContentHighlighted

theme.colors.secondaryButtonContentHighlighted: UIColor

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

# secondaryButtonContentDisabled

theme.colors.secondaryButtonContentDisabled: UIColor

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

# Cards

# cardPlainBackground

theme.colors.cardPlainBackground: UIColor

Used as the background color for cards with the .plain style.
Default: nil

# cardBorderedBackground

theme.colors.cardBorderedBackground: UIColor

Used as the background color for cards with the .bordered style.
Default: nil

# Camera

# cameraBackground

theme.colors.cameraBackground: UIColor

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

# cameraBackgroundOverlay

theme.colors.cameraBackgroundOverlay: UIColor

Background color for the overlay shading on the camera screen.
Default: #1E232E with 75% opacity

# cameraContent

theme.colors.cameraContent: UIColor

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

# Fields

# fieldBackground

theme.colors.fieldBackground: UIColor

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

# fieldBackgroundInvalid

theme.colors.fieldBackgroundInvalid: UIColor

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

# fieldBorder

theme.colors.fieldBorder: UIColor

Border color of input fields.
Default: transparent

# fieldPlaceholder

theme.colors.fieldPlaceholder: UIColor

Color of placeholder text in input fields.
Default: #94A0B8 and #FFFFFF with 40% opacity in dark mode

# fieldContent

theme.colors.fieldContent: UIColor

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

# fieldTint

theme.colors.fieldTint: UIColor

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

# List

# listSeparator

theme.colors.listSeparator: UIColor

Color of the list separator.
Default: #D1D6E1 and #FFFFFF with 20% opacity in dark mode

# listSelectedItemBackground

theme.colors.listSelectedItemBackground: UIColor

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

# Bottom sheet

# bottomSheetHandle

theme.colors.bottomSheetHandle: UIColor

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

# bottomSheetBackground

theme.colors.bottomSheetBackground: UIColor

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

# Images

# Icons

# iconClose

theme.images.iconClose: UIImage

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

# iconBack

theme.images.iconBack: UIImage?

Icon for the «Back» button on the panel.
Default: an arrow-shaped icon. If the value is set to nil, the system «Back» button is used

# iconSearch

theme.images.iconSearch: UIImage

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

# iconDisclosure

theme.images.iconDisclosure: UIImage

Used to indicate expandability.
Default: an icon in the form of an expanding arrow

# iconDropdown

theme.images.iconDropdown: UIImage

Used for dropdown fields.
Default: an icon in the form of a downward arrow

# iconCalendar

theme.images.iconCalendar: UIImage

Used for date fields.
Default: an icon in the form of a calendar

# iconAttachment

theme.images.iconAttachment: UIImage

Used for attachments when the field is empty.
Default: an icon in the form of a paperclip

# iconPicture

theme.images.iconPicture: UIImage

Used for attachments when a document is attached.
Default: an icon in the form of a photo

# iconBin

theme.images.iconBin: UIImage

Used for attachment fields when a document can be deleted.
Default: an icon in the form of a trash bin

# iconTorchOn

theme.images.iconTorchOn: UIImage

Used for the flashlight toggle button on the camera screen.
Default: an icon in the form of a flash

# iconTorchOff

theme.images.iconTorchOff: UIImage

Used for the flashlight off button on the camera screen.
Default: an outlined flash icon

# iconGallery

theme.images.iconGallery: UIImage

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

# iconCameraToggle

theme.images.iconCameraToggle: UIImage

Used for the camera switch button.
Default: a circular arrows icon

# iconRotate

theme.images.iconRotate: UIImage

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

# iconMail

theme.images.iconMail: UIImage

Used for the default support element for email.
Default: a mail icon

# iconPlay

theme.images.iconPlay: UIImage

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

# iconNotice

theme.images.iconNotice: UIImage

Used in the comments block on the status screen for verification.
Default: an exclamation mark inside a triangle, 24x24 pixels in size

# iconCheckboxOff

theme.images.iconCheckboxOff: UIImage

Used for unchecked checkboxes.
Default: an empty rectangle with a border color of colors.contentWeak

# iconCheckboxOn

theme.images.iconCheckboxOn: UIImage

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

# iconRadioButtonOff

theme.images.iconRadioButtonOff: UIImage

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

# iconRadioButtonOn

theme.images.iconRadioButtonOn: UIImage

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

# iconSuccess

theme.images.iconSuccess: UIImage

Used for generating the pictureSuccess automatically.
Default: a checkmark icon

# iconWarning

theme.images.iconWarning: UIImage

Used for the warning bottom sheet and for generating the pictureWarning automatically.
Default: an exclamation mark in a triangle

# iconFailure

theme.images.iconFailure: UIImage

Used for generating the pictureFailure automatically.
Default: a cross icon

# iconSubmitted

theme.images.iconSubmitted: UIImage

Used for generating the pictureSubmitted automatically.
Default: a cloud upload icon

# Images

Can be used if you want to replace large images generated from the corresponding icons.

# pictureSuccess

theme.images.pictureSuccess: UIImage?

"Success" image. Can be used to replace the automatically generated one. The auto-generated image looks like the iconSuccess icon inside a circle, composed using the colors colors.contentSuccess and colors.backgroundSuccess.
Default: nil

# pictureWarning

theme.images.pictureWarning: UIImage?

"Warning" image. Can be used to replace the auto-generated one.

The auto-generated image looks like the iconWarning icon inside a circle, composed using the colors colors.contentWarning and colors.backgroundWarning.
Default: nil

# pictureFailure

theme.images.pictureFailure: UIImage?

"Failure" image. Can be used to replace the auto-generated one. The auto-generated image looks like the iconFailure icon inside a circle, composed using the colors colors.contentCritical and colors.backgroundCritical.
Default: nil

# pictureSubmitted

theme.images.pictureSubmitted: UIImage?

"Submitted" image. Can be used to replace the auto-generated one. The auto-generated image looks like the iconSubmitted icon inside a circle, composed using the colors colors.contentWarning and colors.backgroundWarning.
Default: nil

# pictureGeolocationOn

theme.images.pictureGeolocationOn: UIImage

Used as an image on the geolocation screen before geolocation is determined.
Default: geolocation pin icon

# pictureGeolocationOff

theme.images.pictureGeolocationOff: UIImage

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

# pictureAgreement

theme.images.pictureAgreement: UIImage?

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

# pictureDocumentFlip

theme.images.pictureDocumentFlip: UIImage?

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

# Image sets

# verificationStepIcons

theme.images.verificationStepIcons: [CBRVerificationStepKey: UIImage]
theme.images.setIcon(UIImage?, forVerificationStep: CBRVerificationStepKey, andState: CBRVerificationStepState)

Icons for verification steps.

You can assign an icon for a verification step for all verification states at once (as done by default) or more precisely if needed.

Default icons are defined for the following keys:

  • .identity
  • .selfie
  • .selfie2
  • .proofOfResidence
  • .proofOfResidence2
  • .applicantData
  • .emailVerification
  • .phoneVerification
  • .questionnaire
  • .ekyc

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

# documentTypeIcons

theme.images.documentTypeIcons: [CBRDocumentTypeKey: UIImage]

Document type icons.
Default icons are defined for the following keys:

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

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

# instructionsImages

theme.images.instructionsImages: [String: UIImage]

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 an image in instructionsImages for the corresponding text key.

Feel free to add your own images or use the pre-installed ones:

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

# Metrics

# Content size

# respectsPreferredContentSizeCategory

theme.metrics.respectsPreferredContentSizeCategory: Bool

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

# Common

# commonStatusBarStyle

theme.metrics.commonStatusBarStyle: UIStatusBarStyle

The status bar style on all screens.
Default: .default

# activityIndicatorStyle

theme.metrics.activityIndicatorStyle: UIActivityIndicatorViewStyle

Loading indicator style.
Default: .medium for iOS 13+ and .gray for earlier versions

# preferredCloseBarItemStyle

theme.metrics.preferredCloseBarItemStyle: CBRCloseBarItemStyle

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

# preferredCloseBarItemAlignment

theme.metrics.preferredCloseBarItemAlignment: CBRCloseBarItemAlignment

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

# Content

# screenHorizontalMargin

theme.metrics.screenHorizontalMargin: CGFloat

Horizontal padding of the screen content.
Default: 16pt

# Buttons

# buttonHeight

theme.metrics.buttonHeight: CGFloat

Height of primary and secondary buttons.
Default: 48pt

# buttonCornerRadius

theme.metrics.buttonCornerRadius: CGFloat

Corner radius of buttons.
Default: 8pt

# buttonBorderWidth

theme.metrics.buttonBorderWidth: CGFloat

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

# Camera

# cameraStatusBarStyle

theme.metrics.cameraStatusBarStyle: UIStatusBarStyle

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

# Document frame

# documentFrameBorderWidth

theme.metrics.documentFrameBorderWidth: CGFloat

Border width of the document frame.
Default: 2pt

# documentFrameCornerRadius

theme.metrics.documentFrameCornerRadius: CGFloat

Corner radius of the document frame.
Default: 14pt

# Input fields

# fieldHeight

theme.metrics.fieldHeight: CGFloat

Height of text input fields.
Default: 48pt

# fieldBorderWidth

theme.metrics.fieldBorderWidth: CGFloat

Border width of text input fields.
Default: 0pt

# fieldCornerRadius

theme.metrics.fieldCornerRadius: CGFloat

Corner radius of text input fields.
Default: 8pt

# Viewport

# viewportBorderWidth

theme.metrics.viewportBorderWidth: CGFloat

Border width of the selfie viewport.
Default: 8pt

# Bottom sheet

# bottomSheetCornerRadius

theme.metrics.bottomSheetCornerRadius: CGFloat

Corner radius of the bottom sheet.
Default: 16pt

# bottomSheetHandleSize

theme.metrics.bottomSheetHandleSize: CGSize

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

# Card style

# CBRCardStyle

enum  CBRCardStyle {
    case  plain
    case  filled
    case  bordered
}

Styles:

  • plain – no border or background (see colors.cardPlainBackground).
  • filled – with background fill.
  • bordered – with border (see colors.cardBorderedBackground).

# verificationStepCardStyle

theme.metrics.verificationStepCardStyle: CBRCardStyle

Verification step card style.
Default: .filled

# verificationCommentCardStyle

theme.metrics.verificationCommentCardStyle: CBRCardStyle

Verification comment card style, shown for temporary denials. Default: .bordered

# supportItemCardStyle

theme.metrics.supportItemCardStyle: CBRCardStyle

Support item card style.
Default: .bordered

# documentTypeCardStyle

theme.metrics.documentTypeCardStyle: CBRCardStyle

Document type card style.
Default: .filled

# selectedCountryCardStyle

theme.metrics.selectedCountryCardStyle: CBRCardStyle

Selected country card style.
Default: .filled

# cardCornerRadius

theme.metrics.cardCornerRadius: CGFloat

Card corner radius.
Default: 8pt

# cardBorderWidth

theme.metrics.cardBorderWidth: CGFloat

Card border width (used only for .bordered style).
Default: 1pt

# Alignment

# screenHeaderAlignment

theme.metrics.screenHeaderAlignment: NSTextAlignment

Alignment for screen headers.
Default: .center

# sectionHeaderAlignment

theme.metrics.sectionHeaderAlignment: NSTextAlignment

Alignment for section headers.
Default: .natural