UX Theming

The Lucra SDK theme can be overridden to make the sdk flows feel more inline with your core app design. Support for light and dark modes is now also included.

To override the default theme: pass in a ClientTheme object containing the DynamicColorSet for each respective theme you wish to override to the LucraClient initializer. You can choose to provide a separate theme for Light and Dark mode by calling, or you can choose to pass in a universal theme.

You can override all or only some of the colors by just omitting the ones you want to use the defaults for.

// UNIVERSAL THEME EXAMPLE

let universalTheme = DynamicColorSet(primary: "#09E35F",
                                     secondary: "#5E5BD0",
                                     tertiary: "#9C99FC",
                                     onPrimary: "#001448",
                                     onSecondary: "#FFFFFF",
                                     onTertiary: "#FFFFFF")

let theme = ClientTheme(universalTheme: universalTheme,
                        fontFamilyName: "<Your App Font>")

let client = LucraClient(config: .init(environment: .init(authenticationClientID: <Your API Key>,
                                                          environment: <.sandbox, .production>,
                                                          urlScheme: <Your App URL Scheme>),
                                                          appearance: theme))

// LIGHT/DARK MODE THEME EXAMPLE


let lightTheme = DynamicColorSet(primary: "#09E35F",
                                 secondary: "#5E5BD0",
                                 tertiary: "#9C99FC",
                                 onPrimary: "#001448",
                                 onSecondary: "#FFFFFF",
                                 onTertiary: "#FFFFFF")

let darkTheme = DynamicColorSet(primary: "#09E35F",
                                secondary: "#5E5BD0",
                                tertiary: "#9C99FC",
                                onPrimary: "#001448",
                                onSecondary: "#FFFFFF",
                                onTertiary: "#FFFFFF")

let theme = ClientTheme(lightTheme: lightTheme,
                        darkTheme: darkTheme,        
                        fontFamilyName: "<Your App Font>")

let client = LucraClient(config: .init(environment: .init(authenticationClientID: <Your API Key>,
                                                          environment: <.sandbox, .production>,
                                                          urlScheme: <Your App URL Scheme>),
                                                          appearance: theme))