Documentation
API ReferenceChangelogFAQDashboard

Theme API for iOS

Theme options are named to express their semantic and used in many different places across the iOS SDK, so be aware that changing them may affect many elements at once.

For 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

navigationBarItem

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.

toolbarTint

theme.colors.toolbarTint: UIColor

Used for the toolbars' buttons.

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

toolbarBackground

theme.colors.toolbarBackground: UIColor?

Used as a background color for the toolbars.

Default is nil, the system background color is applied.

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 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.

backgroundWarning

theme.colors.backgroundWarning: UIColor

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.

backgroundCritical

theme.colors.backgroundCritical: UIColor

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.

Content

contentLink

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 foreground 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 foreground 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 foreground 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.

Card

cardPlainBackground

theme.colors.cardPlainBackground: UIColor

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

Default is nil.

cardBorderedBackground

theme.colors.cardBorderedBackground: UIColor

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

Default is nil.

Camera

cameraBackground

theme.colors.cameraBackground: UIColor

The Camera Screen background color.

Default is ● #1E232E.

cameraBackgroundOverlay

theme.colors.cameraBackgroundOverlay: UIColor

The Camera Screen overlay background color.

Default is ● #1E232E with alpha 75%.

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 text fields.

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

fieldBackgroundInvalid

theme.colors.fieldBackgroundInvalid: UIColor

The background color of the input fields marked as invalid. Used for text fields.

Default is the colors.backgroundCritical color.

fieldBorder

theme.colors.fieldBorder: UIColor

The border color of the input fields. Used for text fields.

Default is the clear color.

fieldPlaceholder

theme.colors.fieldPlaceholder: UIColor

The placeholder color of the input fields. Used for text fields.

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 text fields.

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 text fields, checkboxes and radio buttons.

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.

iconBack

theme.images.iconBack: UIImage?

Used for the back bar button.

Default is a back arrow icon. Setting to nil forces the system back button to be used instead.

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.

iconDropdown

theme.images.iconDropdown: UIImage

Used for dropdown fields.

Default is a down arrow icon.

iconCalendar

theme.images.iconCalendar: UIImage

Used for date fields.

Default is a calendar icon.

iconAttachment

theme.images.iconAttachment: UIImage

Used for attachments fields when the field is empty.

Default is a clip icon.

iconPicture

theme.images.iconPicture: UIImage

Used for attachments fields when the document is attached.

Default is a picture icon.

iconBin

theme.images.iconBin: UIImage

Used for attachments fields when the document can be removed.

Default is a trash bin 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.

iconCameraToggle

theme.images.iconCameraToggle: UIImage

Used for the camera toggle button on the VideoIdent Screen.

Default is a rounded arrows icon.

iconRotate

theme.images.iconRotate: UIImage

Used for the rotation bar button on the Preview Screen.

Default is a photo rotation 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.

iconNotice

theme.images.iconNotice: UIImage

Used on the verification comment block at the Status Screen.

Default is an exclamation mark in the triangle of 24x24 pixels.

iconCheckboxOff

theme.images.iconCheckboxOff: UIImage

Used for unmarked checkboxes.

Default is an empty rectangle icon with colors.contentWeak border color.

iconCheckboxOn

theme.images.iconCheckboxOn: UIImage

Used for marked checkboxes.

Default is a white checkmark icon on a background rectangle with colors.fieldTint color.

iconRadioButtonOff

theme.images.iconRadioButtonOff: UIImage

Used for unselected radio buttons.

Default is an empty circle icon with colors.contentWeak border color.

iconRadioButtonOn

theme.images.iconRadioButtonOn: UIImage

Used for selected radio buttons.

Default is a white circle icon on a background circle with colors.fieldTint color.

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 and colors.backgroundSuccess colors.

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 and colors.backgroundWarning colors.

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 and colors.backgroundCritical colors.

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 and colors.backgroundWarning colors.

Default is nil.

pictureGeolocationOn

theme.images.pictureGeolocationOn: UIImage

Used as the image on the Geolocation Screen before the start of the geolocation detection.

Default is a geolocation pin icon.

pictureGeolocationOff

theme.images.pictureGeolocationOff: UIImage

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.

pictureAgreement

theme.images.pictureAgreement: UIImage?

Displayed at the top of the Agreement Screen.

Default is a globe decorated.

pictureDocumentFlip

theme.images.pictureDocumentFlip: UIImage?

Displayed at the Camera Screen before the back side of a document is going to be captured.

Default is an ID document with a rotating arrow below.

Content driven sets

verificationStepIcons

theme.images.verificationStepIcons: [SNSVerificationStepKey: UIImage]

theme.images.setIcon(UIImage?, forVerificationStep: SNSVerificationStepKey, andState: SNSVerificationStepState)

Verification steps icons.

One can assign an icon for a verification step either for all the verification states at once (as it's done by default) or more preciously if required.

Default icons are defined for the following keys: .identity, .selfie, .selfie2, .proofOfResidence, .proofOfResidence2, .applicantData, .emailVerification, .phoneVerification, .questionnaire and .ekyc.
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/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

Defines whether the fonts, images, metrics and layouts should be adjusted in order to respect the user's preferred content size category.

Default is true.

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.

preferredCloseBarItemStyle

theme.metrics.preferredCloseBarItemStyle: SNSCloseBarItemStyle

The preferred style of the close bar button. The options are .icon and .text.

Default is .icon.

preferredCloseBarItemAlignment

theme.metrics.preferredCloseBarItemAlignment: SNSCloseBarItemAlignment

The preferred alignment of the close bar button. The options are .right and .left.

Default is .right.

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.

Document Frame

documentFrameBorderWidth

theme.metrics.documentFrameBorderWidth: CGFloat

The document frame's border width.

Default is 2pt.

documentFrameCornerRadius

theme.metrics.documentFrameCornerRadius: CGFloat

The document frame's corner radius.

Default is 14pt.

Fields

fieldHeight

theme.metrics.fieldHeight: CGFloat

Used for the text input fields on Email/Phone Confirmation screens.

Default is 48pt.

fieldBorderWidth

theme.metrics.fieldBorderWidth: CGFloat

The text input fields border width.

Default is 0pt.

fieldCornerRadius

theme.metrics.fieldCornerRadius: CGFloat

The text input fields corner radius.

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 filled
    case bordered
}

verificationStepCardStyle

theme.metrics.verificationStepCardStyle: SNSCardStyle

The verification steps card style.

Default is .filled.

verificationCommentCardStyle

theme.metrics.verificationCommentCardStyle: SNSCardStyle

The style of a verification comment block that can be displayed when the applicant is temporarily declined.

Default is .bordered.

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 the cards with the .bordered card style only.

Default is 1pt.

Alignment

screenHeaderAlignment

theme.metrics.screenHeaderAlignment: NSTextAlignment

The alignment for the screen headers.

Default is .center

sectionHeaderAlignment

theme.metrics.sectionHeaderAlignment: NSTextAlignment

The alignment for the section headers.

Default is .natural

Updated 8 months ago