There are 2 options for customizing the colours of the screens presented by the SDK: via Jetpack Compose or XML Resources.
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, Dark/Light mode, etc). The default SmileIdentityColorScheme picks its colours from resources.
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.
import androidx.compose.runtime.Composableimport androidx.compose.ui.graphics.Colorimport com.smileidentity.SmileIDimport com.smileidentity.compose.theme.colorSchemeimport com.smileidentity.compose.SmartSelfieRegistration@ComposablefunColorSchemeThemingExample() {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.
import androidx.compose.material3.MaterialThemeimport androidx.compose.runtime.Composableimport androidx.compose.ui.text.TextStyleimport androidx.compose.ui.unit.spimport com.smileidentity.SmileIDimport com.smileidentity.compose.theme.typographyimport com.smileidentity.compose.SmartSelfieRegistration@ComposablefunTypographyThemingExample() {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)}
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.
Any or all of these can be overridden by your own values
<?xml version="1.0" encoding="utf-8"?><resources><!-- Overarching Theme Colors --><!-- Replace the "..." with your own color --> <colorname="si_color_on_dark">...</color> <colorname="si_color_on_light">...</color> <colorname="si_color_accent">...</color> <colorname="si_color_success">...</color> <colorname="si_color_error">...</color> <colorname="si_color_background_dark">...</color> <colorname="si_color_background_main">...</color> <colorname="si_color_background_light">...</color> <colorname="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 version="1.0" encoding="utf-8"?><resources><!-- Material Theme Colors --><!-- Replace the "..." with your own color --> <colorname="si_color_material_primary">...</color> <colorname="si_color_material_on_primary">...</color> <colorname="si_color_material_primary_container">...</color> <colorname="si_color_material_on_primary_container">...</color> <colorname="si_color_material_inverse_primary">...</color> <colorname="si_color_material_secondary">...</color> <colorname="si_color_material_on_secondary">...</color> <colorname="si_color_material_secondary_container">...</color> <colorname="si_color_material_on_secondary_container">...</color> <colorname="si_color_material_tertiary">...</color> <colorname="si_color_material_on_tertiary">...</color> <colorname="si_color_material_tertiary_container">...</color> <colorname="si_color_material_on_tertiary_container">...</color> <colorname="si_color_material_background">...</color> <colorname="si_color_material_on_background">...</color> <colorname="si_color_material_surface">...</color> <colorname="si_color_material_on_surface">...</color> <colorname="si_color_material_surface_variant">...</color> <colorname="si_color_material_on_surface_variant">...</color> <colorname="si_color_material_surface_tint">...</color> <colorname="si_color_material_inverse_surface">...</color> <colorname="si_color_material_inverse_on_surface">...</color> <colorname="si_color_material_error">...</color> <colorname="si_color_material_on_error">...</color> <colorname="si_color_material_error_container">...</color> <colorname="si_color_material_on_error_container">...</color> <colorname="si_color_material_outline">...</color> <colorname="si_color_material_outline_variant">...</color> <colorname="si_color_material_scrim">...</color></resources>