SDK UI Customization Guide

The latest Entrust IDV SDKs for mobile bring an updated design system for the SDKs' UI, which offers new customization options to integrators.

This guide lists the customization options offered via the SDK's theme interface.

Preface - features not yet available

The SDK UI customization framework will introduce additional capabilities over time, with the following features shortlisted for upcoming releases in 2026:

• Font and text style customization
• Ability to align text and components across the screen
• Ability to set individual left/right/up/bottom padding and border on text and components
• Ability to change default images and icons
• Ability to provide a custom spinner (currently only colors can be modified)

How to customize the SDK's UI

The SDK UI customization framework described in this guide has expanded its scope compared to its predecessor and introduces the following key features:

• The same UI customization tokens can be used uniformly across all Entrust IDV SDKs (iOS, Android, React Native)
• To simplify integration, UI customization tokens are affecting all related SDK screen elements
• A comprehensive structure is provided to avoid undue duplication of keys and values

The framework will be extended to also apply to the Onfido Web and Flutter SDKs later in 2026.

The theme interface

Until a dedicated customization dashboard is introduced in Workflow Studio in 2026, the UI customization framework can be used via the SDK's theme configuration interface. This configuration object currently consists of the following major and optional parts:

• mode: optionally set to either Light or Dark. Used to pre-select the SDK UI's theme
• lightColors / darkColors: centralized color references that can automatically be used across the SDK's screens

Android

iOS

React Native

1override fun onCreate(savedInstanceState: Bundle?) {
2  ...
3  EntrustIdv.start(
4  ...
5    configuration = Configuration(
6      ...
7      theme = Theme(
8        ...
9        mode = ThemeMode.Light,
10        lightColors = mapOf(
11          ColorTokens.BackgroundColorBrandDefault to "#FF00FF85",
12          ColorTokens.ContentColorBase to "#0B1B0B",
13        ),
14        darkColors = mapOf(
15          ColorTokens.BackgroundColorBrandDefault to "#0000FF85",
16          ColorTokens.ContentColorBase to "#FF1CFF",
17        ),
18    ))
19  )
20}

1EntrustIdv(
2    ...
3    configuration: .init(
4      ...
5      theme: .init(
6        ...
7        mode: ThemeMode.light,
8        lightColors: [
9          ColorTokens.backgroundColorBrandDefault: "#FF00FF85",
10          ColorTokens.contentColorBase: "#0B1B0B"
11        ],
12        darkColors: [
13          ColorTokens.backgroundColorBrandDefault: "#0000FF85",
14          ColorTokens.contentColorBase: "#FF1CFF"
15          ],
16    ))
17  )

1entrustIdv.start({
2  ...
3  configuration: {
4    ...
5    theme: {
6      ...
7      mode: ThemeMode.Light,
8      lightColors: {
9        backgroundColorBrandDefault: '#FF00FF85',
10        contentColorBase: '#0b1c0b'
11      },
12      darkColors: {
13        backgroundColorBrandDefault: '#0000FF85',
14        contentColorBase: '#FF1cFF'
15      }
16    },
17  }
18});

Details are provided in the Entrust IDV SDK integration guide.

Base color selection and themes (lightColors / darkColors)

To avoid repeating color override across multiple UI components, the SDK's lightColors / darkColors interface can be used to configure colors centrally. By modifying a color value in both colors sets, all component-level tokens derived from them will be affected. Integrators would then only need to use the component-specific overrides for exceptions to standard coloring patterns, such as for extra brand emphasis.

For example, modifying the color set for the backgroundColorBrandDefault token in the lightColors and darkColors will apply that color to all component-specific tokens that are assigned the backgroundColorBrandDefault token, such as the background color of the primary button and spinner's main color. The mapping between the base tokens and component-specific areas is listed in the Components section below.

The full list of available lightColors / darkColors tokens is listed in the Base colors section below.

Base colors

Base colors are divided in three categories:

• content-color: affects the 'foreground' color of a component such as its text or icon
• background-color: affects the color of the background or surface area of a component
• border-color: affects the color of the outer line of a component

Loading...

Note:

• Each token can be assigned a color value in hex format (e.g. '#FFFFFF' for white). Colors can also be provided as 8-character values to account for transparency (e.g. '#FFFFFF85' for white with 50% opacity/transparency)
• Colors assigned to both light and dark themes should provide sufficient contrast for accessibility purposes. It is also recommended to provide sufficient differentiation for the hover and active color variants

General Screen Background, Text & Border

The overall screen background, overlay and border colors can be customized by modifying the base color tokens defined in the table below.

#22262C

#FFFFFF

#E9ECF0

#636670

#0A0D11CC

#0A0D11CC

Additionally, the color of the main text elements can be customized by modifying the following base color tokens:

#0A0D11

#FFFFFF

#53565C

#FFD25C

#D31127

#FEC9C4

#63676D

#92959B

Note: The color of text or icons within particular components such as buttons or banners is driven by potentially more specific color tokens as defined in the following sections of this guide.

Key Components

This section presents the components available across the Entrust IDV SDK screens. If you require customization capabilities beyond the scope described in this document, please contact your Customer Success Manager.

Buttons

While the behavior of buttons is consistent across screens and platforms, colors are driven by a button's 'variant':

Variant	Example
Primary
Secondary
Tertiary
Negative Secondary
Negative Tertiary

The buttons are currently used in the following parts of the UI:

Note: In the current SDK iteration, it is not possible to replace 'transparent' colors

Loading...

Button Dock

The button-dock is the container at the bottom of most screens that contains either one or two buttons. In addition to customizing the buttons as defined in the section above, the Button Dock has the following customization options:

#FFFFFF

#22262C

#E9EBEF

#53565C

Note: The relative position of buttons (stacked or side-by-side) is automatically controlled by the width of the available screen area

Navigation Bar

The navigation-bar is the container at the top of screens that may contain the Back and Exit buttons. In addition to customizing the bottom as defined in the Buttons section, the Navigation Bar has the following customization options:

#FFFFFF

#22262C

#E9EBEF

#53565C

Banner

The banner component is used to callout key instructions or live feedback to the user across the UI flow.

Variant	Use Case
info	User callout on introduction or instruction screens
warning	User warning appearing during the capture experience or in confirmation screens
error	User error appearing during the capture experience or in confirmation screens

Notes:

• The icons currently used within the Banner component cannot be changed
• Capture screens (live camera feeds) are always displayed in dark mode to provide an optimal user experience

The banner component is composed of an overall border, a message and an optional icon.

Loading...

Spinner

The spinner component is present on all loading and waiting screens of the SDK.

#4462E4

#4462E4

#E9EBEF

#3F454F

#53565C

#D6D8DB

Note: On Android, the spinner component of the first loading screen (when the SDK is being initialized) only contains a 'progress' section.

Status Icon Tile

The icon-tile component is the large icon present on status screens. It exists in three main variants:

Use Case	Description	Variant	Example
Confirmation Screen	'Green tick' when the user has successfully completed a task	positive
Permissions Screen	Icon representing the required permission type	neutral
Error Screen	'Red exclamation mark' shown on error screens	negative

The icon and background colors can be customized for each variant:

#D7F6C8

#225123

#36860F

#B2ED73

#E9EBEF

#3F454F

#53565C

#D6D8DB

#FFE4E1

#942C2C

#D31127

#FEC9C4

Country Selector

The country-select component is present on multiple screens to allow the end user to select a country from a dropdown list or by starting to type in the main input field. It is also used to select the phone number country prefix.

Loading...

Note: The country flags cannot be edited or replaced.

Selection List

The selection-list component is a custom button list intended to provide end users with multiple choices.

Note: The individual icons present in the list cannot currently be customized

Text Input Field

The text-input component is used across any screen or component that requires the user to provide a typed value.

Loading...

Checkbox

The checkbox component is a composite element that contains the following sub-components:

• The container which corresponds to the overall checkbox, offering the customization of the overall border and background colors
• The checkbox itself. It is referred to by its two main states/variants: selected and unselected
• The icon that corresponds to the 'tick' within the container
• The label of the overall component
• The description of the overall component

The component itself also follows the standard input states of default, active, hover, disabled and invalid

Overall container

#FFFFFF

#22262C

#FFFFFF

#1F2328

#FFFFFF

#21242A

#FFFFFF

#22262C

#FFFFFF

#22262C

#E9EBEF

#53565C

#E9EBEF

#53565C

#E9EBEF

#53565C

#E9EBEF

#53565C

#E9EBEF

#53565C

selected and unselected Checkbox

#4462E4

#4462E4

#2F51E1

#2F51E1

#3A59E2

#3A59E2

#E9EBEF

#53565C

#D31127

#D31127

#4462E4

#4462E4

#4462E4

#4462E4

#4462E4

#4462E4

#E9EBEF

#53565C

#D31127

#D31127

#FFFFFF

#22262C

#FFFFFF

#22262C

#FFFFFF

#22262C

#FFFFFF

#22262C

#FFFFFF

#22262C

#92959B

#6F7277

#85898F

#66696D

#8C8F95

#6B6D72

#E9EBEF

#53565C

#D31127

#D31127

icon sub-component

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#92959B

#6F7277

label sub-component

#0A0D11

#FFFFFF

#92959B

#6F7277

description sub-component

#53565C

#D6D8DB

#92959B

#6F7277