> For the complete documentation index, see [llms.txt](/llms.txt) # SDK language and UI customization ## Start here > ⚠️ **Warning:** For integration and customization of the new Entrust IDV SDK, introduced in > 2025, please refer to its dedicated [SDK UI Customization > guide](/sdk/sdk-ui-customization). This guide provides an overview of the customization options available with the Onfido Smart Capture SDKs. This includes: - language localization - UI customization For general technical documentation relating to our SDKs, follow the links on our [main Developer Hub page](/sdk/). ## Language localization The Entrust Identity Verification SDKs allow for language customization across all platforms. ### Supported languages Entrust 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: | Language | Android | iOS | Web | | ---------------------------------------------------------------------------------- | ------- | ---------------- | --- | | Arabic (ar) | ✔ | ✔ | ✔ | | Armenian (hy) | ✔ | ✔ | ✔ | | Bulgarian (bg) | ✔ | ✔ | ✔ | | Chinese (Simplified) (`zh_CN` for **Android** and **Web**, `zh_Hans` for **iOS**) | ✔ | ✔ | ✔ | | Chinese (Traditional) (`zh_TW` for **Android** and **Web**, `zh_Hant` for **iOS**) | ✔ | ✔ | ✔ | | Croatian (hr) | ✔ | ✔ | ✔ | | Czech (cs) | ✔ | ✔ | ✔ | | Danish (da) | ✔ | ✔ | ✔ | | Dutch (nl) | ✔ | ✔ | ✔ | | English (United Kingdom) (`en_GB`) | ✔ | ✔ | ✔ | | English (United States) (`en_US`) | ✔ | ✔ | ✔ | | Estonian (et) | ✔ | ✔ | ✔ | | Finnish (fi) | ✔ | ✔ | ✔ | | French (fr) | ✔ | ✔ | ✔ | | French (Canadian) (`fr_CA`) | ✔ | ✔ | ✔ | | German (de) | ✔ | ✔ | ✔ | | Greek (el) | ✔ | ✔ | ✔ | | Hebrew (he) | ✔ | ✔ | ✔ | | Hindi (hi) | ✔ | ✔ | ✔ | | Hungarian (hu) | ✔ | ✔ | ✔ | | Indonesian (id) | ✔ | ✔ | ✔ | | Italian (it) | ✔ | ✔ | ✔ | | Japanese (ja) | ✔ | ✔ | ✔ | | Korean (ko) | ✔ | ✔ | ✔ | | Latvian (lv) | ✔ | ✔ | ✔ | | Lithuanian (lt) | ✔ | ✔ | ✔ | | Malay (ms) | ✔ | ✔ | ✔ | | Norwegian (nb) | ✔ | ✔ | ✔ | | Persian (fa) | ✔ | ✔ | ✔ | | Polish (pl) | ✔ | ✔ | ✔ | | Portuguese (pt) | ✔ | ✔ | ✔ | | Portuguese (Brazil) (`pt_BR`) | ✔ | ✔ | ✔ | | Romanian (ro) | ✔ | ✔ | ✔ | | Russian (ru) | ✔ | ✔ | ✔ | | Serbian (`sr_Latn` for **Android** and **iOS**, sr for **Web**) | ✔ | ✔ | ✔ | | Slovak (sk) | ✔ | ✔ | ✔ | | Slovenian (sl) | ✔ | ✔ | ✔ | | Spanish (es) | ✔ | ✔ | ✔ | | Spanish (Latin America) (`es_419`) | ✔ | ✔ | ✔ | | Swedish (sv) | ✔ | ✔ | ✔ | | Thai (th) | ✔ | ✔ | ✔ | | Turkish (tr) | ✔ | ✔ | ✔ | | Ukrainian (uk) | ✔ | ✔ | ✔ | | Vietnamese (vi) | ✔ | ✔ | ✔ |
_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](/sdk/ios/#language-localization), [Android](/sdk/android/#language-localization) and [Web](/sdk/web/#language-selection). 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 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](/sdk/ios/#custom-translations-and-text), [Android](/sdk/android/#language-localization) and [Web](/sdk/web/#custom-translations-and-text) reference documentation. ## UI customization The Entrust Identity Verification 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. ### iOS SDK #### iOS styling attributes 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](/sdk/ios/#styling-customization). 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 ![iOS UI customization](./ui-ios.png) _The screenshots above illustrate some of the customization options available for iOS_ #### iOS typography and fonts 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](/sdk/ios/#ui-customization). 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 #### iOS dark mode Entrust's Identity Verification SDK for iOS supports dark mode customization. By default, the user's active device theme will automatically be applied to the SDK flow. 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. 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. ![Dark mode screens iOS](./dark-mode-ios.png) _The example selection screens above illustrate dark mode for iOS._ For specific implementation details, please refer to our [SDK reference documentation](/sdk/ios/#dark-theme). ### Android SDK 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](/sdk/android/#ui-customization). 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](https://developer.android.com/develop/ui/views/text-and-emoji/fonts-in-xml). #### Android styling attributes 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 ![Android UI customization](./ui-android.png) _The screenshots above illustrate some of the customization options available for Android_ #### Android typography and fonts For the Android SDK, you can customize typography by providing [font XML resources](https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml) 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 #### Android dark mode Entrust's Identity Verification SDK for Android supports dark mode customization. By default, the user's active device theme will automatically be applied to the SDK flow. 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. Dark mode is available for the Android SDK starting from version [19.1.0](/sdk/android/#no--1900---1910). 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)` ![Document selection in dark mode](./doc-screens-dark-mode.png) _The example selection screens above illustrate dark mode for Android._ ### Web SDK 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](/sdk/web/#styling-customization). #### Web SDK styling attribute 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 - `colorContentBody`: Change text color of the SDK screen content - `colorBackgroundMediaContainer`: Change the background color on screens with media/illustrations on top (such as module intro screens) - `colorBackgroundDocHelpMediaContainer`: Change the background color of the document help media container - `colorBorderInput`: Change the border color of input and dropdown fields - `colorBackgroundInput`: Change the background color of input fields - `colorContentInput`: Change the content color of input fields ![Web SDK customization](./web-template-1.png) _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 - `colorContentButtonPrimaryTextHover`: Change color of Primary Button text on hover - `colorContentButtonPrimaryTextActive`: Change color of Primary Button text on click/tap - `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 - `colorBorderButtonPrimaryFocus`: Change the border color on the focus state of primary buttons - **Secondary buttons** - `colorContentButtonSecondaryText`: Change color of Secondary Button text - `colorContentButtonSecondaryTextHover`: Change color of Secondary Button text on hover - `colorContentButtonSecondaryTextActive`: Change color of Secondary Button text on click/t - `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 - `colorBorderButtonSecondaryFocus`: Change the border color on the focus state of Secondary Buttons - **Tertiary buttons** - `colorContentButtonTertiaryText`: Change color of Tertiary Button text - `colorContentButtonTertiaryTextHover`: Change color of Tertiary Button text on hover - `colorContentButtonTertiaryTextActive`: Change color of Tertiary Button - `colorBackgroundButtonTertiary`: Change background color of Tertiary Button - `colorBackgroundButtonTertiaryHover`: Change background color of Tertiary Button on hover - `colorBackgroundButtonTertiaryActive`: Change background color of Tertiary Button on click/tap - `colorBorderButtonTertiary`: Change color of Tertiary Button border - `colorBorderButtonTertiaryHover`: Change color of Tertiary Button border on hover state - `colorBorderButtonTertiaryActive`: Change color of Tertiary Button border on active state - `colorBorderButtonTertiaryFocus`: Change the border color on the focus state of Tertiary Buttons - **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 - `colorBorderDocTypeButtonFocus`: Change the border color on the focus state of Document Type Buttons - `borderRadiusDocTypeButton`: Change border radius value of Document Type buttons - **Shared buttons** - `borderRadiusButton` (string): Change border radius value of Primary, Secondary and Document Type Option buttons - **Icon buttons** - `colorBackgroundButtonIcon`: Change background color of Back, Close Modal 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 - `colorBorderButtonIcon`: Change border color of Back, Close Modal icon buttons - `colorBorderButtonIconHover`: Change border color of Back, Close Modal icon buttons on hover - `colorBorderButtonIconActive`: Change border color of Back, Close Modal icon buttons on click/tap - `borderRadiusButtonIcon` (string): Change border radius of Back, Close Modal icon buttons - **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 - **Latest document capture experience primary buttons** ("start scan" / "need help" buttons) - `colorBackgroundButtonCapturePrimary`: Change background color of the primary button - `colorContentButtonCapturePrimaryText`: Change text color of the primary button - `colorBorderButtonCapturePrimary`: Change border color of the primary button - `colorBackgroundButtonCapturePrimaryActive`: Change background color of the primary button on click/tap - `colorContentButtonCapturePrimaryActive`: Change text color of the primary button on click/tap - `colorBackgroundButtonCapturePrimaryDisabled`: Change background color of the primary button in disabled state - `colorContentButtonCapturePrimaryDisabled`: Change text color of the primary button in disabled state - **Latest document capture experience secondary buttons** ("start scan" / "need help" buttons) - `colorBorderButtonCaptureSecondary`: Change border color of the secondary button - `colorContentButtonCaptureSecondaryText`: Change text color of the secondary button - `colorBorderButtonCaptureSecondaryActive`: Change border color of the secondary button on click/tap - `colorBorderButtonCaptureSecondaryDisabled`: Change border color of the secondary button in disabled state - `colorContentButtonCaptureSecondaryDisabled`: Change text color of the secondary button in disabled state ![Web SDK customization](./web-template-6.png) _The screenshot above offers an illustration of some of the button customizations available for Web._ ##### Selector options - `colorBackgroundSelector`: Change Selector background color - `borderRadiusSelector`: Change the border radius of the input - `colorBackgroundDropdownItemHover`: Change Selector items background color in hover state - `colorBackgroundDropdownItemActive`: Change Selector items background color in active state ##### Icon options - `colorIcon`: Change color of the colored (blue) small icons - `colorInputOutline`: Change color of outline around certain input fields - `colorBackgroundIcon`: Change icons background color ![Web SDK customization](./web-template-2.png) _The screenshot above offers an illustration of the link and icon customizations available for Web._ ##### Popup options - `borderRadiusAlert`: Change border radius of popups ##### Warning popup options - `colorContentAlertInfo`: Change warning popup text color - `colorBackgroundAlertInfo`: Change warning popup background color - `colorIconAlertInfo`: Change warning popup icon color - `colorBackgroundAlertInfoLinkHover`: Change warning popup fallback Link background on hover - `colorBackgroundAlertInfoLinkActive`: Change warning popup fallback Link background on click/tap - `borderColorAlertInfo`: Change warning popup border color ![Web SDK customization](./web-template-3.png) _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 - `borderColorAlertError`: Change error popup border color ![Web SDK customization](./web-customization-5.png) _The screenshot above offers an illustration of the error popup customizations available for Web._ ##### Links - `colorContentLinkTextHover`: Change the text color of hyperlinks in hover state - `colorBorderLinkUnderline`: Change the underline color of hyperlinks - `colorBackgroundLinkHover`: Change the background color of hyperlinks in hover state - `colorBackgroundLinkActive`: Change the background color of hyperlinks in active state - `colorBackgroundLinkFocus`: Change the background color of hyperlinks in focus state ##### Spinner - `colorProgressTrack`: Change the circle color of the loading spinner - `colorProgressIndicator`: Change the path color of the loading spinner ##### Watermark - `colorWatermark`: Change the background color of the branding logos in footer in light mode - `colorWatermarkDark`: Change the background color of the branding logos in footer in dark mode ![Web SDK customization](./web-template-5.png) _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 #### Web SDK typography and fonts 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](/sdk/web/#styling-customization). The Web SDK supports the following typography features: - `fontFamilyTitle`: Change font family of the SDK screen titles - `fontFamilyBody`: Change font family of the SDK screen content - `fontSizeTitle`: Change font size of the SDK screen titles - `fontWeightTitle`: Change font weight of the SDK screen titles (number format only, e.g. 400, 600) - `fontWeightBody`: Change font weight of the SDK screen content (number format only, e.g. 400, 600) - `fontSizeBody`: Change the font size of the content **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. ```javascript theme: { name: "light", // or "dark", config: { "googleFonts": ["Overpass"], "fontFamilyTitle": "'Overpass', sans-serif", } } ``` The following Google Fonts can be used: - [Arimo](https://fonts.google.com/specimen/Arimo) - [Figtree](https://fonts.google.com/specimen/Figtree) - [Fira Sans](https://fonts.google.com/specimen/Fira+Sans) - [Inter](https://fonts.google.com/specimen/Inter) - [Kanit](https://fonts.google.com/specimen/Kanit) - [Lato](https://fonts.google.com/specimen/Lato) - [Lexend](https://fonts.google.com/specimen/Lexend) - [Lora](https://fonts.google.com/specimen/Lora) - [Merriweather](https://fonts.google.com/specimen/Merriweather) - [Montserrat](https://fonts.google.com/specimen/Montserrat) - [Neuton](https://fonts.google.com/specimen/Neuton) - [Noto Sans](https://fonts.google.com/specimen/Noto+Sans) - [Noto Sans Osmanya](https://fonts.google.com/specimen/Noto+Sans+Osmanya) - [Nunito](https://fonts.google.com/specimen/Nunito) - [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans) - [Open Sans](https://fonts.google.com/specimen/Open+Sans) - [Oswald](https://fonts.google.com/specimen/Oswald) - [Overpass](https://fonts.google.com/specimen/Overpass) - [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) - [Poppins](https://fonts.google.com/specimen/Poppins) - [PT Sans](https://fonts.google.com/specimen/PT+Sans) - [Public Sans](https://fonts.google.com/specimen/Public+Sans) - [Questrial](https://fonts.google.com/specimen/Questrial) - [Source Sans 3](https://fonts.google.com/specimen/Source+Sans+3) - [Raleway](https://fonts.google.com/specimen/Raleway) - [Red Hat Display](https://fonts.google.com/specimen/Red+Hat+Display) - [Roboto](https://fonts.google.com/specimen/Roboto) - [Roboto Condensed](https://fonts.google.com/specimen/Roboto+Condensed) - [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono) - [Roboto Slab](https://fonts.google.com/specimen/Roboto+Slab) - [Rubik](https://fonts.google.com/specimen/Rubik) - [Single Day](https://fonts.google.com/specimen/Single+Day) - [Titillium Web](https://fonts.google.com/specimen/Titillium+Web) - [Ubuntu](https://fonts.google.com/specimen/Ubuntu) - [Wix Madefor Text](https://fonts.google.com/specimen/Wix+Madefor+Text) - [Work Sans](https://fonts.google.com/specimen/Work+Sans) To request support for additional fonts, please reach out to your Customer Support Manager or email Entrust's [Customer Support](mailto:identity-support@entrust.com)\* **\*The fonts are hosted by Entrust and won't be loaded from Google's servers.** ![Web SDK customization](./web-template-4.png) _The screenshot above offers an illustration of the typography customizations available for Web._ #### Web SDK dark mode Entrust's Identity Verification SDK for Web supports dark mode customization, meaning the default light customization can be overridden with a dark theme. 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](/sdk/web/#styling-customization). ### React Native SDK The React Native SDK supports the customization of colors and other appearance attributes used in the SDK flow on iOS and Android. #### iOS styling attributes 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](/sdk/react-native/#styling-customization). #### Dark mode for iOS 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** #### Android styling attributes 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](/sdk/react-native/#styling-customization). 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](/sdk/react-native/#customizing-dimensions). #### Dark mode for Android 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](/sdk/react-native/#dark-theme). ![React Native UI customization](./react-native-ui.png) _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 styling attributes You can use the `IOSAppearance` object to customize the iOS application. For specific implementation details, please refer to our [SDK reference documentation](/sdk/flutter/#styling-customization). 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 for iOS 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 styling attributes 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](/sdk/android/#ui-customization). ### 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 Workflow Studio - can be customized in your [Dashboard](https://dashboard.onfido.com/hosted-sdk-settings/theme). Details regarding the customization options available can be found in our Smart Capture Link [guide](/getting-started/smart-capture-link#theme-customization).