Customize the SDK-provided screens to match your application's style

Localization and Copy

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

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.

let localizableStrings = SmileIDLocalizableStrings(bundle: Bundle.main, tableName: "Localizable")


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.

class CustomTheme: SmileIDTheme {
    var onDark: Color {
        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)

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


Last updated