# iOS SDK Theme API

All the Theme options are named to express their semantic and used in many different places across the iOS SDK, so be aware that changing them could affect many elements at once. Please use Visual Guide to determine.

For the convenience the options are split into the corresponding sections:

# Fonts

# headline1

theme.fonts.headline1: UIFont

Used for screen titles in conjunction with colors.contentStrong mostly.

Default is System Bold, 24pt.

# headline2

theme.fonts.headline2: UIFont

Used for section titles in conjunction with colors.contentStrong mostly.

Default is System Bold, 20pt.

# subtitle1

theme.fonts.subtitle1: UIFont

Used for subtitles in conjunction with colors.contentStrong mostly.

Default is System Semibold, 18pt.

# subtitle2

theme.fonts.subtitle2: UIFont

Used for subtitles in conjunction with colors.contentNeutral mostly.

Default is System Regular, 16pt.

# body

theme.fonts.body: UIFont

Used for paragraphs, text fields, etc. in conjunction with colors.contentNeutral mostly.

Default is System Regular, 14pt.

# caption

theme.fonts.caption: UIFont

Used for minor captions in conjunction with colors.contentWeak mostly.

Default is System Regular, 12pt.

# Colors

# Common

theme.colors.navigationBarItem: UIColor

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.

# alertTint

theme.colors.alertTint: UIColor

Used for the system alert actions and the toolbar buttons.

Default is #1693E9 and #1485D1 for the dark appearance.

# Backgrounds

# backgroundCommon

theme.colors.backgroundCommon: UIColor

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.

# backgroundNeutral

theme.colors.backgroundNeutral: UIColor

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.

# backgroundInfo

theme.colors.backgroundInfo: UIColor

Not used at the moment.

Default is #E8F4FD and #072F4B for the dark appearance.

# backgroundSuccess

theme.colors.backgroundSuccess: UIColor

Used as a background state color for the verification steps.

Default is #18B494 with alpha 12% and #18B494 with alpha 30% for the dark appearance.

# backgroundWarning

theme.colors.backgroundWarning: UIColor

Used as a background state color for the verification steps.

Default is #F2AA0D with alpha 13% and #F2AA0D with alpha 30% for the dark appearance.

# backgroundCritical

theme.colors.backgroundCritical: UIColor

Used as a background state color for the verification steps.

Default is #F05C5C with alpha 12% and #F05C5C with alpha 30% for the dark appearance.

# Content

theme.colors.contentLink: UIColor

Used for the text links.

Default is #1693E9 and #1485D1 for the dark appearance.

# contentStrong

theme.colors.contentStrong: UIColor

Used as a foreground color for the headlines and some subtitles.

Default is #333C4D and #FFFFFF with alpha 85% for the dark appearance.

# contentNeutral

theme.colors.contentNeutral: UIColor

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.

# contentWeak

theme.colors.contentWeak: UIColor

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.

# contentInfo

theme.colors.contentInfo: UIColor

Used for the Video Screen's viewport border only at the moment.

Default is #1693E9 and #1485D1 for the dark appearance.

# contentSuccess

theme.colors.contentSuccess: UIColor

Used as a foreground state color for the verification steps and as a base color for the auto-generated images.pictureSuccess.

Default is #18B494.

# contentWarning

theme.colors.contentWarning: UIColor

Used as a foreground state color for the verification steps and as a base color for the auto-generated images.pictureWarning and images.pictureSubmitted.

Default is #E6A00B.

# contentCritical

theme.colors.contentCritical: UIColor

Used as a foreground state color for the verification steps and as a base color for the auto-generated images.pictureFailure.

Default is #F05C5C.

# Primary Button

# primaryButtonBackground

theme.colors.primaryButtonBackground: UIColor

The primary button background color in the normal state.

Default is #1693E9 and #1485D1 for the dark appearance.

# primaryButtonBackgroundHighlighted

theme.colors.primaryButtonBackgroundHighlighted: UIColor

The primary button background color in the highlighted state.

Default is #1485D1 and #0B4A75 for the dark appearance.

# primaryButtonBackgroundDisabled

theme.colors.primaryButtonBackgroundDisabled: UIColor

The primary button background color in the disabled state.

Default is #A1D2F7 and #072F4B for the dark appearance.

# primaryButtonContent

theme.colors.primaryButtonContent: UIColor

The primary button foreground color in the normal state.

Default is #FFFFFF and #FFFFFF with alpha 85% for the dark appearance.

# primaryButtonContentHighlighted

theme.colors.primaryButtonContentHighlighted: UIColor

The primary button foreground color in the highlighted state.

Default is #FFFFFF and #FFFFFF with alpha 85% for the dark appearance.

# primaryButtonContentDisabled

theme.colors.primaryButtonContentDisabled: UIColor

The primary button foreground color in the disabled state.

Default is #FFFFFF and #0B4A75 for the dark appearance.

# Secondary Button

# secondaryButtonBackground

theme.colors.secondaryButtonBackground: UIColor

The secondary button background color in the normal state.

Default is the clear color.

# secondaryButtonBackgroundHighlighted

theme.colors.secondaryButtonBackgroundHighlighted: UIColor

The secondary button background color in the highlighted state.

Default is #E8F4FD and #072F4B for the dark appearance.

# secondaryButtonBackgroundDisabled

theme.colors.secondaryButtonBackgroundDisabled: UIColor

The secondary button background color in the disabled state.

Default is the clear color.

# secondaryButtonContent

theme.colors.secondaryButtonContent: UIColor

The secondary button foreground color in the normal state.

Default is #1693E9 and #1485D1 for the dark appearance.

# secondaryButtonContentHighlighted

theme.colors.secondaryButtonContentHighlighted: UIColor

The secondary button foreground color in the highlighted state.

Default is #1693E9 and #1485D1 for the dark appearance.

# secondaryButtonContentDisabled

theme.colors.secondaryButtonContentDisabled: UIColor

The secondary button foreground color in the disabled state.

Default is #A1D2F7 and #0B4A75 for the dark appearance.

# Camera

# cameraBackground

theme.colors.cameraBackground: UIColor

The Camera Screen background color.

Default is #1E232E.

# cameraContent

theme.colors.cameraContent: UIColor

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.

# Fields

# fieldBackground

theme.colors.fieldBackground: UIColor

The background color of the input fields. Used for the search bar only at the moment.

Default is #F6F7F9 and #FFFFFF with alpha 7% for the dark appearance.

# fieldBorder

theme.colors.fieldBorder: UIColor

The border color of the input fields. Used for the search bar only at the moment.

Default is the clear color.

# fieldPlaceholder

theme.colors.fieldPlaceholder: UIColor

The placeholder color of the input fields. Used for the search bar only at the moment.

Default is #94A0B8 and #FFFFFF with alpha 40% for the dark appearance.

# fieldContent

theme.colors.fieldContent: UIColor

The content color of the input fields. Used for the search bar only at the moment.

Default is #333C4D and #FFFFFF with alpha 85% for the dark appearance.

# fieldTint

theme.colors.fieldTint: UIColor

The tint color of the input fields. Used for the search bar only at the moment.

Default is #1693E9 and #1485D1 for the dark appearance.

# List

# listSeparator

theme.colors.listSeparator: UIColor

The list separator color.

Default is #D1D6E1 and #FFFFFF with alpha 20% for the dark appearance.

# listSelectedItemBackground

theme.colors.listSelectedItemBackground: UIColor

The background color of the selected list item.

Default is #F6F7F9 and #FFFFFF with alpha 7% for the dark appearance.

# Bottom Sheet

# bottomSheetHandle

theme.colors.bottomSheetHandle: UIColor

The foreground color of the bottom sheet handle.

Note that the handle can be both inside (on bottomSheetBackground color) and outside (on the backgroundCommon color) of the bottom sheet.

Default is #D1D6E1 and #FFFFFF with alpha 20% for the dark appearance.

# bottomSheetBackground

theme.colors.bottomSheetBackground: UIColor

The background color of the bottom sheet.

Default is #FFFFFF and #333C4D for the dark appearance.

# Images

# Icons

# iconClose

theme.images.iconClose: UIImage

Used for the close bar button across all the screens.

Default is a cross icon.

# iconSearch

theme.images.iconSearch: UIImage

Used for the search bar.

Default is a magnifying glass icon.

# iconDisclosure

theme.images.iconDisclosure: UIImage

Used to indicate the disclosability.

Default is a simple disclosing arrow icon.

# iconTorchOn

theme.images.iconTorchOn: UIImage

Used for the turned-on flashlight button on the Camera Screen.

Default is a filled flash icon.

# iconTorchOff

theme.images.iconTorchOff: UIImage

Used for the turned-off flashlight button on the Camera Screen.

Default is an outlined flash icon.

# iconGallery

theme.images.iconGallery: UIImage

Used for the gallery button on the Camera Screen.

Default is a photos stack icon.

# iconMail

theme.images.iconMail: UIImage

Used for the default E-Mail support item.

Default is a letter icon.

# iconPlay

theme.images.iconPlay: UIImage

Used the play button on the Preview screen.

Default is a play icon in the circle.

# iconSuccess

theme.images.iconSuccess: UIImage

Used to compose the auto-generated pictureSuccess.

Default is a checkmark icon.

# iconWarning

theme.images.iconWarning: UIImage

Used for the warnings bottom sheet and to compose the auto-generated pictureWarning.

Default is an exclamation mark in the triangle.

# iconFailure

theme.images.iconFailure: UIImage

Used to compose the auto-generated pictureFailure.

Default is a cross icon.

# iconSubmitted

theme.images.iconSubmitted: UIImage

Used to compose the auto-generated pictureSubmitted.

Default is an uploading-to-the-cloud icon.

# Pictures

Could be used if you'd like to override the large images composed on the basis of the corresponding icons.

# pictureSuccess

theme.images.pictureSuccess: UIImage

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

The auto-generated image looks like the iconSuccess icon in the circles composed on the basis of the colors.contentSuccess color.

Default is nil.

# pictureWarning

theme.images.pictureWarning: UIImage

The "warning" image. Could be used if you'd like to override the auto-generated one.

The auto-generated image looks like the iconWarning icon in the circles composed on the basis of the colors.contentWarning color.

Default is nil.

# pictureFailure

theme.images.pictureFailure: UIImage

The "failure" image. Could be used if you'd like to override the auto-generated one.

The auto-generated image looks like the iconFailure icon in the circles composed on the basis of the colors.contentCritical color.

Default is nil.

# pictureSubmitted

theme.images.pictureSubmitted: UIImage

The "submitted" image. Could be used if you'd like to override the auto-generated one.

The auto-generated image looks like the iconSubmitted icon in the circles composed on the basis of the colors.contentWarning color.

Default is nil.

# Content driven sets

# verificationStepIcons

theme.images.verificationStepIcons: [SNSVerificationStepKey: UIImage]

Verification steps icons.

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

# documentTypeIcons

theme.images.documentTypeIcons: [SNSDocumentTypeKey: UIImage]

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.

# instructionsImages

theme.images.instructionsImages: [String: UIImage]

Instructions 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

# Metrics

# Common

# commonStatusBarStyle

theme.metrics.commonStatusBarStyle: UIStatusBarStyle

The status bar style on all the screens.

Default is .default.

# activityIndicatorStyle

theme.metrics.activityIndicatorStyle: UIActivityIndicatorViewStyle

The loading spinner style.

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

# Content

# screenHorizontalMargin

theme.metrics.screenHorizontalMargin: CGFloat

The horizontal margins of the screen content.

Default is 16pt.

# Buttons

# buttonHeight

theme.metrics.buttonHeight: CGFloat

The primary and secondary buttons height.

Default is 48pt.

# buttonCornerRadius

theme.metrics.buttonCornerRadius: CGFloat

The primary and secondary buttons corner radius.

Default is 8pt.

# buttonBorderWidth

theme.metrics.buttonBorderWidth: CGFloat

The secondary button border width. Bordered primary buttons are not supported at the moment.

Default is 1pt.

# Camera

# cameraStatusBarStyle

theme.metrics.cameraStatusBarStyle: UIStatusBarStyle

The status bar style on the Camera Screen. Not used at the moment.

Default is .default.

# Fields

# fieldHeight

theme.metrics.fieldHeight: CGFloat

The input fields height. Not used at the moment.

Default is 48pt.

# fieldBorderWidth

theme.metrics.fieldBorderWidth: CGFloat

The input fields border width. Used for the search bar only at the moment.

Default is 0pt.

# fieldCornerRadius

theme.metrics.fieldCornerRadius: CGFloat

The input fields corner radius. Used for the search bar only at the moment.

Default is 8pt.

# Viewport

# viewportBorderWidth

theme.metrics.viewportBorderWidth: CGFloat

The selfie viewport border width.

Default is 8pt.

# Bottom Sheet

# bottomSheetCornerRadius

theme.metrics.bottomSheetCornerRadius: CGFloat

The bottom sheet corners radius.

Default is 16pt.

# bottomSheetHandleSize

theme.metrics.bottomSheetHandleSize: CGSize

The bottom sheet handle size.

Default is 36pt x 4pt.

# Card Style

# SNSCardStyle

enum SNSCardStyle {
    case plain
    case filed
    case bordered
}
  • With .plain style neither border nor background will be rendered.
  • With .filled style the background will be filled out.
  • With .bordered style to a border will be rendered around the card.

# verificationStepCardStyle

theme.metrics.verificationStepCardStyle: SNSCardStyle

The verification steps card style.

Default is .filled.

# supportItemCardStyle

theme.metrics.supportItemCardStyle: SNSCardStyle

The support items card style.

Default is .bordered.

# documentTypeCardStyle

theme.metrics.documentTypeCardStyle: SNSCardStyle

The document types card style.

Default is .filled.

# selectedCountryCardStyle

theme.metrics.selectedCountryCardStyle: SNSCardStyle

The selected country card style.

Default is .filled.

# cardCornerRadius

theme.metrics.cardCornerRadius: CGFloat

The cards' corners radius.

Default is 8pt.

# cardBorderWidth

theme.metrics.cardBorderWidth: CGFloat

The cards' border width. Used for cards with the .bordered card style only.

Default is 1pt.

# List

# listSectionTitleAlignment

theme.metrics.listSectionTitleAlignment: NSTextAlignment

The alignment for the list section titles.

Default is .natural.

Last Updated: 8/24/2021, 1:50:49 PM