Theming and Appearance (iOS)

Lucra’s iOS SDK is designed to blend seamlessly into your existing app experience. It supports light/dark mode, semantic colors, component-level themes, and global override options.

---

Overview

Lucra theming gives you control over:

• Primary and secondary brand colors

• Surface/background colors

• On-surface text/icon colors

• Component-specific colors (e.g., Convert to Credit)

Lucra UI attempts to inherit system appearance first, then apply your overrides.

---

Global Theme Application

The LucraSDK supports theming, this is an optional value that you pass in during the initialization of the LucraClient.

let universalTheme = ClientTheme(universalTheme: .init(primary: "#F8730D",
                                                       secondary: "#16189B",
                                                       tertiary: "#FD00CD",
                                                       onPrimary: "#09090A",
                                                       onSecondary: "#FDFEFF",
                                                       onTertiary: "#FFFFFF"))

If you would like to supply a custom Font, register the Font in your application and pass that font name to the LucraSDK initializer.

let theme: ClientTheme = .init(lightTheme: lightTheme,
                               darkTheme: darkTheme,
                               fontFamily: FontFamily(mediumFontName: "custom-font Medium",
                                                      regularFontName: "custom-font Regular",
                                                      semiBoldFontName: "custom-font SemiBold",
                                                      boldFontName: "custom-font Bold")))

Typography

Lucra uses iOS text styles (body, headline, caption, etc.) using the .lucraFont modifier.

    Text("Pick one of the quick options, or type in the game ID (Case insensitive).")
        .lucraFont(.H5(weight: .bold))

The LucraSDK allows overriding of specific font types: [.largeTitle, .headline, .sectionHeader, .pageTitle] Register your custom Font by passing in the name of the font in ClientTheme's fontFamily.

    Text("Pick one of the quick options, or type in the game ID (Case insensitive).")
        .lucraFont(.pageTitle) // This will inherit the custom fontFamily if passed in.

---

Recommended Theming Workflow

1. Begin with Lucra defaults

2. Apply global brand colors

3. Test across flows (Onboarding, Verify Identity, Add Funds, etc.)

4. Style component-specific themes like C2C

5. Validate accessibility & dynamic type

---

Next Steps

Proceed to:

Deeplinks

Deeplinks

Push Notifications

Push Notifications

Lucra Flows

Lucra Flows