Theming and Appearance

Lucra UI can be themed through the theme object passed to LucraSDK.init. Use this to align Lucra screens with your app's colors and typography.

Theme Properties

All color values are hex strings.

• primary, secondary, tertiary

• onPrimary, onSecondary, onTertiary

Fonts

fontFamily now uses a single object shape on both iOS and Android. Provide the PostScript family names on iOS and asset paths on Android. All four keys are required:

• normal

• medium

• semibold

• bold

Example

import { Platform } from 'react-native';

const theme = {
  primary: '#09E35F',
  secondary: '#5E5BD0',
  tertiary: '#9C99FC',
  onPrimary: '#001448',
  onSecondary: '#FFFFFF',
  onTertiary: '#FFFFFF',
  fontFamily: {
    normal:
      Platform.OS === 'ios'
        ? 'Inter Regular'
        : 'fonts/Inter-Regular.ttf',
    medium:
      Platform.OS === 'ios'
        ? 'Inter Medium'
        : 'fonts/Inter-Medium.ttf',
    semibold:
      Platform.OS === 'ios'
        ? 'Inter SemiBold'
        : 'fonts/Inter-SemiBold.ttf',
    bold:
      Platform.OS === 'ios'
        ? 'Inter Bold'
        : 'fonts/Inter-Bold.ttf',
  },
};