SDK language and UI customization

Start here

The Onfido SDKs have multiple customizable features that provide flexibility, while also being easy to integrate. Customizing the Onfido SDKs to match the look and feel of your application can help improve your user experience.

This guide provides an overview of the customization options available with the Onfido SDKs. This includes:

• language localization
• UI customization

For general technical documentation relating to our SDKs, follow the links on our main Developer Hub page.

Language localization

The Onfido SDKs allow for language customization across all platforms.

Supported languages

Onfido supports and maintains translations for 44 languages that can be implemented directly inside the SDK.

All of these languages are supported across Android, iOS and Web, under the following locales:

The screenshots above offer an illustration of several language localizations.

Each SDK platform has its own method of language localization. Further information can be found in our SDK reference documentation for iOS, Android and Web.

If no language is selected, the SDK will detect and use the end user's browser or device language setting. If the browser/device language is not supported, the SDK will default to English (en_US).

Custom translations and text

In addition to selecting a default language for the SDK session, the Onfido SDKs can also be initialized with custom text and translations for each required language.

Further information regarding specific implementation for each SDK platform can be found in our iOS, Android and Web reference documentation.

UI customization

The Onfido SDKs include a range of UI options that allow you to customize the look and feel of the SDKs to match your application (such as fonts, button colors, icon colors and text colors). This helps create a more seamless experience for your users. The available features are documented below.

Styling attributes

iOS

To customize the look and feel of the iOS SDK, you can pass the required CSS values to the Appearance object, in the root of the WorkflowConfiguration object. For specific implementation details, please refer to our SDK reference documentation.

The iOS SDK supports the following styling features:

• Colors
  • primaryColor: Defines the button color and back navigation button color
  • primaryTitleColor: Defines the primary button text color
  • secondaryTitleColor: Defines the secondary button text and border color
  • primaryBackgroundPressedColor: Defines the primary button pressed state color
  • secondaryBackgroundPressedColor: Defines the secondary button pressed state color
  • backgroundColor: Defines the screen's background color for non-capture views
    • light: Defines the backgroundColor in light mode
    • dark: Defines the backgroundColor in dark mode
  • captureSuccessColors: Defines the color values for the capture screen success auto capture state
    • borderColor: Defines the border color of the area of interest in capture screen
    • tickViewImageTintColor: Defines the tick icon's tint color shown in capture screen after auto capture happens
    • tickViewBackgroundColor: Defines the tick icon's background color shown in capture screen after auto capture happens
• Interface
  • borderCornerRadius: Defines border corner radius for all the buttons (default 5.0)
  • interfaceStyle: Defines the interface style
    • Note: This property is applicable only for Xcode 11 and above built apps and devices running on iOS 13 and above

The screenshots above illustrate some of the customization options available for iOS Android

In the Android SDK, you can customize colors and other appearance attributes by overriding Onfido themes (OnfidoLightTheme and OnfidoDarkTheme) in your themes.xml or styles.xml files. For specific implementation details, please refer to our SDK reference documentation.

When customizing fonts, all referenced fonts must be added to your project first. Further instructions for adding fonts can be found in the Android documentation.

The Android SDK supports the following styling features:

• Colors

  • General
    • onfidoColorBackground: Background color of the non-capture screens
    • colorAccent: Defines alert dialogs' accent color, and text input fields' focused underline, cursor, and floating label color
  • Content
    • onfidoColorContentMain: Color of primary texts on screen, e.g. titles and regular body texts
    • onfidoColorContentMainDark: Color of the content on capture screens (those with dark backgrounds)
    • onfidoColorContentSecondary: Color of secondary texts on screen, e.g. subtitles
    • onfidoColorContentNegative: Color of error texts
  • Main buttons
    • onfidoColorActionMain: Background color of primary buttons
    • onfidoColorActionMainPressed: Background color of primary buttons when pressed
    • onfidoColorActionMainDisabled: Background color of primary buttons when disabled
    • onfidoColorContentOnAction: Text color of primary buttons
    • onfidoColorContentOnActionDisabled: Text color of primary buttons when disabled
  • Secondary buttons
    • onfidoColorActionSecondary: Background color of secondary buttons
    • onfidoColorActionSecondaryPressed: Background color of secondary buttons when pressed
    • onfidoColorActionSecondaryDisabled: Background color of secondary buttons when disabled
    • onfidoColorContentOnActionSecondary: Text color of secondary buttons
    • onfidoColorContentOnActionSecondaryDisabled: Text color of secondary buttons when disabled
    • onfidoColorActionSecondaryBorder: Border of the secondary buttons
    • onfidoColorActionSecondaryBorderDisabled: Border of the secondary buttons when disabled
  • Disclaimers
    • onfidoColorDisclaimerBackground: Background color of disclaimer boxes
    • onfidoColorContentDisclaimer: Text color of disclaimer boxes
    • onfidoColorIconDisclaimer: Icon color of disclaimer boxes
  • Toolbar and status bar
    • onfidoColorToolbarBackground: Background color of the Toolbar which guides the user through the flow
    • colorPrimaryDark: Color of the status bar (with system icons) above the Toolbar
    • onfidoColorContentToolbarTitle: Color of the Toolbar's title text
  • Icons
    • onfidoColorIconStroke: Stroke color of icons
    • onfidoColorIconStrokeNegative: Stroke color of error icons
    • onfidoColorIconFill: Fill color of icons
    • onfidoColorIconBackground: Background color of icons
    • onfidoColorIconAccent: Background color of accented icons
    • onfidoColorWatermark: Color of the Onfido logo and co-brand logo in the footer of non-capture screens
    • onfidoColorWatermarkDark: Color of the Onfido logo and co-brand logo in the footer of capture screens
  • Spinner / progress indicator
    • onfidoColorProgressTrack: Track color of progress indicators (background color)
    • onfidoColorProgressIndicator: Indicator color of progress indicators (foreground color)

• Widgets

  • You can customize the appearance of some widgets in your dimens.xml file by overriding:
    • onfidoButtonCornerRadius: Defines the radius dimension of all the corners of primary and secondary buttons

The screenshots above illustrate some of the customization options available for Android Web

To customize the appearance of the Web SDK, you can pass the corresponding CSS values to the config object within the theme object.

• config {Object} optional

For specific implementation details, please refer to our SDK reference documentation.

The Web SDK supports the following styling features:

Main container options

• colorBackgroundSurfaceModal: Change background color of SDK modal
• colorBorderSurfaceModal: Change color of SDK modal border
• borderWidthSurfaceModal: Change border width of SDK modal
• borderStyleSurfaceModal: Change border style of SDK modal
• borderRadiusSurfaceModal: Change border radius of SDK modal
• colorContentTitle: Change text color of the SDK screen titles
• colorContentSubtitle: Change text color of the SDK screen subtitles
• colorContentBody: Change text color of the SDK screen content

The screenshot above offers an illustration of some of the container customizations available for Web.

Button customization options

• Primary buttons

  • colorContentButtonPrimaryText: Change color of Primary Button text
  • colorBackgroundButtonPrimary: Change background color of Primary Button
  • colorBackgroundButtonPrimaryHover: Change background color of Primary Button on hover
  • colorBackgroundButtonPrimaryActive: Change background color of Primary Button on click/tap
  • colorBorderButtonPrimary: Change color of Primary Button border
  • colorBorderButtonPrimaryHover: Change color of Primary Button border on hover
  • colorBorderButtonPrimaryActive: Change color of Primary Button border on click/tap

• Secondary buttons

  • colorContentButtonSecondaryText: Change color of Secondary Button text
  • colorBackgroundButtonSecondary: Change background color of Secondary Button
  • colorBackgroundButtonSecondaryHover: Change background color of Secondary Button on hover
  • colorBackgroundButtonSecondaryActive: Change background color of Secondary Button on click/tap
  • colorBorderButtonSecondary: Change color of Secondary Button border
  • colorBorderButtonSecondaryHover: Change color of Secondary Button border on hover
  • colorBorderButtonSecondaryActive: Change color of Secondary Button border on click/tap

• Document type buttons

  • colorContentDocTypeButton: Change Document Type Button text color
  • colorBackgroundDocTypeButton: Change background color of Document Type Button
  • colorBackgroundDocTypeButtonHover: Change background color of Document Type Button on hover
  • colorBackgroundDocTypeButtonActive: Change background color of Document Type Button on click/tap
  • colorBorderDocTypeButton: Change color of Document Type Button border
  • colorBorderDocTypeButtonHover: Change color of Document Type Button border on hover
  • colorBorderDocTypeButtonActive: Change color of Document Type Button border on click/tap

• Shared buttons

  • borderRadiusButton (string): Change border radius value of Primary, Secondary and Document Type Option buttons
  • buttonGroupStacked (boolean, default: false): Display Primary, Secondary button group in Document and Face capture confirmation screens are in separate rows instead of inline by default

• Icon buttons

  • colorBackgroundButtonIconHover: Change background color of Back, Close Modal icon buttons on hover
  • colorBackgroundButtonIconActive: Change background color of Back, Close Modal icon buttons on click/tap

• Camera shutter button

  • colorBackgroundButtonCameraHover: Change background color of Live Selfie/Document Capture screens's Camera button on hover
  • colorBackgroundButtonCameraActive: Change background color of Live Selfie/Document Capture screen's Camera button on click/tap

The screenshot above offers an illustration of some of the button customizations available for Web.

Selector options

• colorBackgroundSelector: Change Selector background color

Icon options

• colorBackgroundIcon: Change color of the background circle of pictogram icons in the SDK
• colorIcon: Change color of the colored (blue) small icons
• colorInputOutline: Change color of outline around certain input fields

Link options

• colorContentLinkTextHover: Change Link text color on hover
• colorBorderLinkUnderline: Change Link underline color
• colorBackgroundLinkHover: Change Link background color on hover
• colorBackgroundLinkActive: Change Link background color on click/tap

The screenshot above offers an illustration of the link and icon customizations available for Web.

Warning popup options

• colorContentAlertInfo: Change warning popup text color
• colorBackgroundAlertInfo: Change warning popup background color
• colorBackgroundAlertInfoLinkHover: Change warning popup fallback Link background on hover
• colorBackgroundAlertInfoLinkActive: Change warning popup fallback Link background on click/tap

The screenshot above offers an illustration of the warning popup customizations available for Web.

Error popups

• colorContentAlertError: Change error popup text color
• colorBackgroundAlertError: Change error popup background color
• colorContentAlertErrorLinkHover: Change error popup fallback Link background on hover
• colorContentAlertErrorLinkActive: Change error popup fallback Link background on click/tap

The screenshot above offers an illustration of the error popup customizations available for Web.

Info Header/Highlight Pills

• colorBackgroundInfoPill: Change background color of Cross Device, Camera/Mic Permissions screens' information header pill
• colorContentInfoPill: Change text color of Cross Device, Camera/Mic Permissions screens' information header pill

The screenshot above offers an illustration of the header and highlight customizations available for Web.

Cross-device

• colorBackgroundQRCode: Change background color of the QR code on the Cross device screen

Typography and fonts

iOS

To customize typography in the iOS SDK, you can pass the required CSS values to the Appearance object, in the root of the WorkflowConfiguration object. For specific implementation details, please refer to our SDK reference documentation.

The iOS SDK supports the following typography features:

• fontRegular: Defines the custom font name for the regular style labels
• fontBold: Defines the custom font name for the bold style labels Android

Android

For the Android SDK, you can customize typography by providing font XML resources to the theme by setting OnfidoLightTheme to one of the following:

• onfidoFontFamilyTitle: Defines the fontFamily attribute that is used for text which has typography type Title
• onfidoFontFamilyBody: Defines the fontFamily attribute that is used for text which has typography type Body
• onfidoFontFamilySubtitle: Defines the fontFamily attribute that is used for text which has typography type Subtitle
• onfidoFontFamilyButton: Defines the fontFamily attribute that is applied to all primary and secondary buttons
• onfidoFontFamilyToolbarTitle: Defines the fontFamily attribute that is applied to the title and subtitle displayed inside the Toolbar
• onfidoFontFamilyDialogButton: Defines the fontFamily attribute that is applied to the buttons inside AlertDialog and BottomSheetDialog Web

Web

To customize the Web SDK typography, you can pass the corresponding CSS values to the config object within the theme object.

• config {Object} optional

For specific implementation details, please refer to our SDK reference documentation.

The Web SDK supports the following typography features:

• fontFamilyTitle: Change font family of the SDK screen titles
• fontFamilySubtitle: Change font family of the SDK screen subtitles
• fontFamilyBody: Change font family of the SDK screen content
• fontSizeTitle: Change font size of the SDK screen titles
• fontSizeSubtitle: Change font size of the SDK screen subtitles
• fontWeightTitle: Change font weight of the SDK screen titles (number format only, e.g. 400, 600)
• fontWeightSubtitle: Change font weight of the SDK screen subtitles (number format only, e.g. 400, 600)
• fontWeightBody: Change font weight of the SDK screen content (number format only, e.g. 400, 600) Note: If you're using a scalable font size unit such as em/rem, the SDK's base font size is 16px. This is currently not customizable.

Google Fonts

A range of Google Fonts is available for use in the Web SDK, passed in using the googleFonts property of the config object within the theme object.

1theme: {
2  name: "light", // or "dark",
3  config: {
4    "googleFonts": ["Overpass"],
5    "fontFamilyTitle": "'Overpass', sans-serif",
6  }
7}

The following Google Fonts can be used:

• Arimo
• Fira Sans
• Inter
• Kanit
• Lato
• Lexend
• Lora
• Merriweather
• Montserrat
• Neuton
• Noto Sans
• Noto Sans Osmanya
• Nunito
• Nunito Sans
• Open Sans
• Oswald
• Overpass
• Playfair Display
• Poppins
• PT Sans
• Questrial
• Source Sans 3
• Raleway
• Red Hat Display
• Roboto
• Roboto Condensed
• Roboto Mono
• Roboto Slab
• Rubik
• Single Day
• Ubuntu
• Wix Madefor Text
• Work Sans

To request support for additional fonts, please reach out to your Customer Support Manager or email Onfido's Customer Support*

*The fonts are hosted by Onfido and won't be loaded from Google's servers.

The screenshot above offers an illustration of the typography customizations available for Web.

Dark mode

Onfido's iOS, Android and Web SDKs support dark mode customization.

For iOS and Android, the user's active device theme will be automatically applied to the SDK flow by default. However, you can opt out from dynamic theme switching at run time and set a theme statically at build time. In this case, the flow will always be in displayed in the selected theme regardless of the user's device setting.

For Web, the default light customization can be overridden with a dark theme.

iOS

The interfaceStyle attribute in the iOS SDK allows you to force light or dark mode via .dark and .light respectively, or follow the system's interface style with .unspecified. The value is .unspecified by default.

Note: The previous attribute supportDarkMode is now deprecated. Please use interfaceStyle instead.

The example selection screens above illustrate dark mode for iOS.

For specific implementation details, please refer to our SDK reference documentation.

Android

Dark mode is available for the Android SDK starting from version 19.1.0.

To force select dark theme:

onfidoConfigBuilder.withTheme(OnfidoTheme.DARK)

To force select light theme:

onfidoConfigBuilder.withTheme(OnfidoTheme.LIGHT)

You can also automatically use the user's device theme:

onfidoConfigBuilder.withTheme(OnfidoTheme.AUTOMATIC)

The example selection screens above illustrate dark mode for Android.

Web

For the Web SDK, dark mode can be configured using the name object within the theme object.

• name {Object} - optional

  The theme's name object allows for dark mode customization by setting the value to light or dark. By default, this value is set to light.

For specific implementation details, please refer to our SDK reference documentation.

React Native

The React Native SDK supports the customization of colors and other appearance attributes used in the SDK flow on iOS and Android.

iOS

You can customize the SDK for iOS by adding a colors.json file to your Xcode project as a bundle resource. The file should contain a single json object with the desired keys and values.

The React Native SDK for iOS supports the following styling features:

• onfidoPrimaryColor: Background color of views such as capture confirmation buttons, back navigation button, and play and pause buttons in liveness/video capture intro
• backgroundColor: Background color used for all non-capture views. Can be defined for both light and dark mode
• onfidoPrimaryButtonTextColor: Text color of labels included in views such as capture confirmation buttons
• onfidoPrimaryButtonColorPressed: Defines the background color of capture confirmation buttons when pressed
• interfaceStyle: Defines the supported interface styles ("unspecified" by default, which follows the sytem's interface style)
• secondaryTitleColor: Secondary button text and border color
• secondaryBackgroundPressedColor: Secondary button pressed state color
• buttonCornerRadius: Border corner radius for all buttons (default value is 5.0)
• fontFamilyTitle: Name of the font used for title texts
• fontFamilyBody: Name of the font used for body/content texts

For specific implementation details, please refer to our SDK reference documentation.

Dark mode

The React Native SDK for iOS supports dark mode customization.

The interfaceStyle property in the colors.json file allows you to force light or dark mode via dark and light respectively, or follow the system's interface style with unspecified.

Note: The usage of onfidoIosSupportDarkMode in the color.json is now deprecated. Please use interfaceStyle instead. Android

You can customize the SDK for Android by overriding Onfido themes in your themes.xml or styles.xml files.

For specific implementation details, please refer to our SDK reference documentation.

The React Native SDK for Android supports the following styling features:

• onfidoColorToolbarBackground: Background color of the Toolbar which guides the user through the flow
• colorPrimaryDark: Color of the status bar (with system icons) above the Toolbar
• onfidoColorContentToolbarTitle: Color of the Toolbar's title text
• onfidoColorContentMain: Color of primary texts on screen, e.g. titles and regular body texts
• onfidoColorContentSecondary: Color of secondary texts on screen, e.g. subtitles
• onfidoColorContentNegative: Color of error texts
• onfidoColorActionMain: Background color of primary buttons
• onfidoColorActionMainPressed: Background color of primary buttons when pressed
• onfidoColorActionMainDisabled: Background color of primary buttons when disabled
• onfidoColorContentOnAction: Text color of primary buttons
• onfidoColorContentOnActionDisabled: Text color of primary buttons when disabled
• onfidoColorActionSecondary: Background color of secondary buttons
• onfidoColorActionSecondaryPressed: Background color of secondary buttons when pressed
• onfidoColorActionSecondaryDisabled: Background color of secondary buttons when disabled
• onfidoColorContentOnActionSecondary: Text color of secondary buttons
• onfidoColorContentOnActionSecondaryDisabled: Text color of secondary buttons when disabled
• onfidoColorActionSecondaryBorder: Border of the secondary buttons
• onfidoColorActionSecondaryBorderDisabled: Border of the secondary buttons when disabled
• onfidoColorProgressTrack: Track color of progress indicators (background color)
• onfidoColorProgressIndicator: Indicator color of progress indicators (foreground color)
• colorAccent: Defines alert dialogs' accent color, and text input fields' focused underline, cursor, and floating label color
• onfidoColorWatermark: Color of the Onfido logo and co-brand logo in the footer of screens
• onfidoColorDisclaimerBackground: Background color of disclaimer boxes
• onfidoColorContentDisclaimer: Text color of disclaimer boxes
• onfidoColorIconDisclaimer: Icon color of disclaimer boxes
• onfidoColorIconStroke: Stroke color of icons
• onfidoColorIconFill: Fill color of icons
• onfidoColorIconBackground: Background color of icons
• onfidoColorIconAccent: Background color of accented icons Note: The usage of color.json and the updateColors command is now deprecated for Android. Please provide the theme attributes in your styles.xml or themes.xml.

The React Native SDK for Android also supports limited dimension customization, via the onfidoButtonCornerRadius attribute. For specific implementation details, please refer to our SDK reference documentation.

Dark mode

The React Native SDK for Android supports dark mode customization.

To set a static theme, use the theme parameter in the SDK initialization config. The value type should be OnfidoTheme. Valid values in OnfidoTheme are: AUTOMATIC (default value), LIGHT, DARK.

For specific implementation details, please refer to our SDK reference documentation.

The screenshots above illustrate the customization options available for React Native

Flutter

The Flutter SDK supports the customization of colors and other appearance attributes used in the SDK flow on iOS and Android.

iOS

You can use the IOSAppearance object to customize the iOS application.

For specific implementation details, please refer to our SDK reference documentation.

The Flutter SDK for iOS supports the following styling features:

• fontBold: Defines the custom font name for the bold style labels
• fontRegular: Defines the custom font name for the regular style labels
• secondaryTitleColor: Defines the secondary button text and border color
• primaryColor: Defines the button color and back navigation button color
• buttonCornerRadius: Border corner radius for all buttons
• primaryTitleColor: Defines the primary button text color
• primaryBackgroundPressedColor: Defines the primary button pressed state color
• secondaryBackgroundPressedColor: Defines the secondary button pressed state color
• backgroundColor: Defines the screen's background color for non-capture views

Dark mode

The Flutter SDK for iOS supports dark mode customization.

The onfidoTheme property in the IOSAppearance object allows you to force light or dark mode via DARK and LIGHT respectively, or follow the system's interface style with AUTOMATIC (the default value).

Note:: The usage of supportDarkMode in IOSAppearance is now deprecated. Please use onfidoTheme instead. Android

Customization for Android (including dark mode) in the Flutter SDK is implemented in the the same way as native Android.

Please refer to the applicable Android documentation in this guide, as well as the Android SDK reference.

Smart Capture Link theme customization

The look and feel of identity verification flows hosted using Smart Capture Link - our low- to no-code frontend solution complementing Onfido Studio - can be customized in your Dashboard.

Details regarding the customization options available can be found in our Smart Capture Link guide.