The SDK supports customization of the following UI elements:

• Colors – Customize backgrounds, borders, typography, and icon colors
• Images – Replace icons or illustrations shown in each screen
• Copies – Override default text content such as labels, titles, and messages
• Fonts – Apply custom font families

These can be customized using two complementary approaches:

1. XML-Based Theming: Define themes in XML and apply them globally. This method ensures consistent theming across the entire application.
2. Dynamic Theming: Apply styles dynamically using predefined theme classes. This method allows injecting styles into individual UI components at runtime.

📘

Copies and Images customization is only possible via Dynamic Theming, while Fonts can only be customized via XML.

Choosing the Right Approach

The best approach depends on your app's needs and level of customization.

We recommend using XML-Based Theming to define a consistent global theme and then leveraging Dynamic Theming for fine-tuned styling at the screen or component level — especially when customizing copies or images.

XML-Based Theming

XML theming allows you to define global styles for:

• Colors
• Fonts

Colors

Defining a Theme

To define a custom theme, extend either:

• DigitalIdentity.BaseTheme.Light
• DigitalIdentity.BaseTheme.Dark

Then override the desired color and font attributes in your styles.xml:

<style name="BlueThemeLight" parent="DigitalIdentity.BaseTheme.Light">
    <item name="digital_identity_typography_active" category="color">#0057D9</item>
    <item name="digital_identity_border_active" category="color">#0066EE</item>
    <item name="digital_identity_fill_active_primary" category="color">#0066EE</item>
    <item name="digital_identity_fill_active_secondary" category="color">#E0F0FF</item>
    <item name="digital_identity_icon_dynamic_active" category="color">#0066EE</item>
</style>

Applying the Theme

Apply your theme globally using:

digitalIdentitySdk.setTheme(R.style.BlueThemeLight)

Fonts

Custom fonts can be applied globally by overriding the following font attributes in your theme:

<item name="digital_identity_font_thin" type="font">@font/my_custom_thin</item>
<item name="digital_identity_font_regular" type="font">@font/my_custom_regular</item>
<item name="digital_identity_font_bold" type="font">@font/my_custom_bold</item>

Font files must be placed in your res/font/ directory and referenced using @font/ syntax.

Dynamic Theming

Dynamic theming provides fine-grained control by allowing you to override styles for specific screens or components at runtime. This is done by passing theme objects when launching SDK flows.

Dynamic theming supports customization of:

• Colors
• Images
• Copies

Each flow (e.g. KTP Scan, Liveness) has its own FlowTheme class, which contains nested theme definitions for its screens (e.g. onboarding, confirmation, result).

Example:

digitalIdentitySdk.launchKtpScan(
    theme = DigitalIdentityKTPOCRFlowTheme(
        onboardingScreen = DigitalIdentityOnboardingScreenTheme(
                ktpCard = DigitalIdentityOnboardingCard(
                    cardBackground = DigitalIdentityBackground(
                        color = ContextCompat.getColor(context, R.color.blue)
                    ),
                    title = DigitalIdentityText(text = "Title"),
                    image = DigitalIdentityImage(
                        image = R.drawable.image
                    ),
                )
            )
    )
)