LucraClient Theming/Appearance

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

Font Family

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"),
    )
  )
)

Note

Only specific sections of the UI will leverage the custom font passed into the LucraClient. These are for display purposes to fit the branding of the client app.