Many aspects of the UI components can be changed and customized. For example, it's possible to change:

• Colors
• Text appearances
• Backgrounds of views
• Icons

Use a Material3 theme

All Nabla UI components will inherit the theme you specify for their container, this is usually the Application or Activity’s theme.

📘

The theme should inherit from Theme.Material3.* by Material3 for Nabla UI components to behave correctly.

Customize colors, icons, backgrounds, and text appearances

Nabla UI components will, by default, use the provided Material3 theme attributes to give a coherent look with the rest of your app. Thus, you can rely on attributes like colorPrimary, colorSurface, colorError or textAppearanceBodyMedium to act as a central source of theming for both your app UI components and Nabla ones.

Yet, if you wish to override a specific color, icon, background drawable or text appearance you can use customization attributes. Override those you’re interested in within a style with Nabla.ThemeOverlay.Messaging as parent:

<style name="MyNablaOverlays" parent="Nabla.ThemeOverlay.Messaging">
    <item name="nablaMessaging_conversationPatientMessageAppearance">@style/MyTextAppearance</item>
    <item name="nablaMessaging_unreadMessagesIndicatorDrawable">@drawable/ic_my_custom_unread_indicator</item>
</style>

Then reference that style as nablaMessagingThemeOverlay in your Application/Activity theme:

<style name="MyAppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    ...

    <item name="nablaMessagingThemeOverlay">@style/MyNablaOverlays</item>
</style>

Here's the list of items you can customize: