Customization

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 https://github.com/smileidentity/ios/blob/main/Sources/SmileID/Resources/Localization/en.lproj/Localizable.strings.

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")
SmileID.apply(localizableStrings)

Theming

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

SmileID.apply(CustomTheme())