> For the complete documentation index, see [llms.txt](https://legacy-docs.usesmileid.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://legacy-docs.usesmileid.com/integration-options/mobile/theming.md).

# Customization

{% hint style="info" %}
On Flutter and React Native, please follow the customization guides provided for Android and iOS.
{% endhint %}

## Localization and Copy

{% tabs %}
{% tab title="Android " %}
All Composables taken in the standard Jetpack Compose `Modifier` parameter, which can be used to further customize the screen as needed.

You may override specific strings by defining new values for the XML string resources defined in the SDK. The full list of string resources is available here: [Localization](/integration-options/mobile/theming/localization.md#android-string-resources-february-4-2026)

For example, to update the Smart Selfie instructions, you can override the `si_smart_selfie_instructions` XML resource in your own `strings.xml` file

```xml
<string name="si_smart_selfie_instructions">Your custom instruction</string>
```

To provide translations, create a new values folder specific to the language (i.e. `values-fr`) and create a `strings.xml` overriding all values. For further information, refer to <https://developer.android.com/guide/topics/resources/localization>.
{% endtab %}

{% tab title="iOS" %}
You may override specific strings by defining new values in your own `Localizable.strings` file. The full list of string resources that can be overridden is available at [Localization](/integration-options/mobile/theming/localization.md#ios-string-resources-february-4-2026).

Once you have your translated strings defined, you can apply them by calling `SmileID.apply()` with an instance of `SmileIDLocalizableStrings`. `SmileIDLocalizableStrings` requires the bundle and tablename of your strings.

```swift
let localizableStrings = SmileIDLocalizableStrings(bundle: Bundle.main, tableName: "Localizable")
SmileID.apply(localizableStrings)
```

{% endtab %}

{% tab title="React Native" %}
To use translated strings on iOS, define them in your iOS app's `Localizable.strings` files (using the keys listed at [Localization](/integration-options/mobile/theming/localization.md#ios-string-resources-february-4-2026)). Then call `SmileID.applyLocalization()` after initializing the SDK so it uses your app's strings instead of the SDK's bundled English defaults.

```typescript
import { SmileID } from "@smile_identity/react-native";

SmileID.applyLocalization();
```

On Android, no helper is needed — override the `si_*` string resources in your app's `android/app/src/main/res/values/strings.xml` (or `values-<lang>/strings.xml` for each locale) following the Android tab above.
{% endtab %}
{% endtabs %}

## Theming

{% tabs %}
{% tab title="Android " %}
There are 2 options for customizing the colours of the screens presented by the SDK: via Jetpack Compose or XML Resources.

{% hint style="info" %}
**Note:** If you're using Jetpack Compose, you may choose to use XML Resources or the native Compose approach, as per your preference. However, the Compose approach *is* the best practice in case of a dynamic theme (i.e. [Material You Dynamic Color Scheme](https://m3.material.io/styles/color/dynamic-color/overview), Dark/Light mode, etc). The default `SmileIdentityColorScheme` picks its colours from resources.
{% endhint %}

{% tabs %}
{% tab title="Jetpack Compose" %}
**Colour Scheme**

When invoking a Composable function, the colour scheme and typography can be customized by the values passed to the `colorScheme` and `typography` parameters, respectively.

The default theme is publicly exposed as `SmileID.colorScheme` and can be copied and modified.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import com.smileidentity.SmileID
import com.smileidentity.compose.theme.colorScheme
import com.smileidentity.compose.SmartSelfieRegistration

@Composable
fun ColorSchemeThemingExample() {
    val colorScheme = SmileID.colorScheme.copy(primary = Color.Green)
    // Alternatively, if you already have your own MaterialTheme.colorScheme, you can use that:
    // val colorScheme = MaterialTheme.colorScheme
    SmileID.SmartSelfieRegistration(colorScheme = colorScheme)
}
```

**Typography**

Additionally, you may also customize the typography in a similar fashion via the `typography` parameter to all Composables.

The default typography is exposed as `SmileID.typography` and can be copied and modified.

```kotlin
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.sp
import com.smileidentity.SmileID
import com.smileidentity.compose.theme.typography
import com.smileidentity.compose.SmartSelfieRegistration

@Composable
fun TypographyThemingExample() {
    val typography = SmileID.typography.copy(displayLarge = TextStyle(fontSize = 24.sp))
    // Alternatively, if you already have your own MaterialTheme.typography, you can use that:
    // val typography = MaterialTheme.typography
    SmileID.SmartSelfieRegistration(typography = typography)
}
```

{% endtab %}

{% tab title="XML Resources" %}
Colours in XML Resources are defined at 2 levels, the overarching theme colours and the Material Theme colours. The overarching theme colours are a more limited set of colour definitions which are automatically assigned to the corresponding Material Theme colours as appropriate. For more granular control, the Material Theme values can be overridden directly.

<https://github.com/smileidentity/android/blob/main/lib/src/main/res/values/colors.xml>

**Overarching Theme Colors**

Any or all of these can be overridden by your own values

```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--  Overarching Theme Colors  -->
    <!--  Replace the "..." with your own color  -->
    <color name="si_color_on_dark">...</color>
    <color name="si_color_on_light">...</color>
    <color name="si_color_accent">...</color>
    <color name="si_color_success">...</color>
    <color name="si_color_error">...</color>
    <color name="si_color_background_dark">...</color>
    <color name="si_color_background_main">...</color>
    <color name="si_color_background_light">...</color>
    <color name="si_color_background_lightest">...</color>
</resources>
```

**Granular Material Theme Colors**

For *even* finer control, any or all of these can be overridden with your own values

```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--  Material Theme Colors  -->
    <!--  Replace the "..." with your own color  -->
    <color name="si_color_material_primary">...</color>
    <color name="si_color_material_on_primary">...</color>
    <color name="si_color_material_primary_container">...</color>
    <color name="si_color_material_on_primary_container">...</color>
    <color name="si_color_material_inverse_primary">...</color>
    <color name="si_color_material_secondary">...</color>
    <color name="si_color_material_on_secondary">...</color>
    <color name="si_color_material_secondary_container">...</color>
    <color name="si_color_material_on_secondary_container">...</color>
    <color name="si_color_material_tertiary">...</color>
    <color name="si_color_material_on_tertiary">...</color>
    <color name="si_color_material_tertiary_container">...</color>
    <color name="si_color_material_on_tertiary_container">...</color>
    <color name="si_color_material_background">...</color>
    <color name="si_color_material_on_background">...</color>
    <color name="si_color_material_surface">...</color>
    <color name="si_color_material_on_surface">...</color>
    <color name="si_color_material_surface_variant">...</color>
    <color name="si_color_material_on_surface_variant">...</color>
    <color name="si_color_material_surface_tint">...</color>
    <color name="si_color_material_inverse_surface">...</color>
    <color name="si_color_material_inverse_on_surface">...</color>
    <color name="si_color_material_error">...</color>
    <color name="si_color_material_on_error">...</color>
    <color name="si_color_material_error_container">...</color>
    <color name="si_color_material_on_error_container">...</color>
    <color name="si_color_material_outline">...</color>
    <color name="si_color_material_outline_variant">...</color>
    <color name="si_color_material_scrim">...</color>
</resources>
```

{% endtab %}
{% endtabs %}
{% endtab %}

{% tab title="iOS" %}
To customise the colors and typography of the SDK screens, you need to create a class that conforms to `SmileIdTheme` protocol. This protocol exposes the cutomisable UI elements on the SDK.

You can initialize the `Color` values in various ways, including using hex values, named colors, RGB values etc.

<pre class="language-swift"><code class="lang-swift">
class CustomTheme: SmileIdTheme {
<strong>    var onDark: Color {
</strong>        Color(hex: "#F6EDE4")
    }

    var onLight: Color {
        Color(hex: "#2D2B2A")
    }

    var backgroundDark: Color {
        Color(hex: "#C0C0A5")
    }

    var backgroundMain: Color {
        Color(hex: "#FFFFFF")
    }

    var backgroundLightest: Color {
        Color(hex: "#F9F0E7")
    }

    var backgroundLight: Color {
        Color(hex: "#E2DCD5")
    }

    var success: Color {
        Color(hex: "#2CC05C")
    }

    var error: Color {
        Color(hex: "#91190F")
    }

    var accent: Color {
        Color(hex: "#001096")
    }

    var tertiary: Color {
        Color(hex: "#2D2B2A)")
    }

    var header1: Font {
        EpilogueFont.bold(with: 32)
    }

    var header2: Font {
        EpilogueFont.bold(with: 20)
    }

    var header4: Font {
        EpilogueFont.bold(with: 16)
    }

    var header5: Font {
        EpilogueFont.medium(with: 12)
    }

    var button: Font {
       return header4
    }

    var body: Font {
        EpilogueFont.medium(with: 14)
    }
}
</code></pre>

After implementing the custom theme, it can be applied using the following snippet

```swift
SmileID.apply(CustomTheme())
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://legacy-docs.usesmileid.com/integration-options/mobile/theming.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.