UX Theming

The Lucra SDK theme can be overridden to make the sdk flows feel more inline with your core app design.

UI styling

Requires :sdk-ui*

Your can customize your Lucra implementation with your own color scheme and fonts by providing the ClientTheme object to LucraClient.

The ClientTheme class has three nested classes, lightColorStyle, darkColorStyle, and FontFamily.

ColorStyle

Represents the 6 different colors your can provide to the SDK. Each field in this class is an hexadecimal string value.

The colors used are Primary, Secondary, Tertiary, OnPrimary, OnSecondary, OnTertiary

FontFamily

Represents a collection of the 4 different font styles that the SDK uses(mediumFont, normalFont, semiBoldFont, boldFont). The name of the font style field corresponds with the font weight associated with the imported font file. Each text style is represented by a Font object.

Font

Each Font object requires you to specify the fontAssetFilePath.

The fontAssetFilePath is the exact file path of your custom font(ex: /fonts/wingding.ttf). The root directory is your assets directory (main/assets/). All font files must be included in assets. These fonts are imported through Reach Native.

LucraClient.initialize(
  /*...*/
  clientTheme = ClientTheme(
    lightColorStyle = ColorStyle(
      primary = "#1976D2",
      secondary = "#F57C00",
      tertiary = "#388E3C",
      onPrimary = "#FFFFFF",
      onSecondary = "#FFFFFF",
      onTertiary = "#FFFFFF",
    ),
    darkColorStyle = ColorStyle(
      primary = "#09E35F",
      secondary = "#5E5BD0",
      tertiary = "#9C99FC",
      onPrimary = "#001448",
      onSecondary = "#FFFFFF",
      onTertiary = "#FFFFFF",
    ),
    fontFamily = FontFamily(
      mediumFont = Font("my_medium_font.ttf"),
      normalFont = Font("my_regular_font.ttf"),
      semiBoldFont = Font("my_semi_bold_font.ttf"),
      boldFont = Font("my_bold_font.ttf"),
    )
  )
)