Theming

This page matches Grona’s components to your app. You pass a GronaTheme in your options once, at launch. Every banner, progress bar, offer and message then uses your fonts, colours and corner radius. Decisions you render yourself are not affected, because your own views draw them.

Set a theme

import ai.grona.sdk.GronaOptions
import ai.grona.sdk.GronaTheme
import androidx.core.content.ContextCompat
import androidx.core.content.res.ResourcesCompat

val theme = GronaTheme.Builder()
    .fonts(
        ResourcesCompat.getFont(this, R.font.acme_sans_regular),
        ResourcesCompat.getFont(this, R.font.acme_sans_bold),
    )
    .primary(ContextCompat.getColor(this, R.color.acme_primary))
    .onPrimary(ContextCompat.getColor(this, R.color.acme_on_primary))
    .accent(ContextCompat.getColor(this, R.color.acme_accent))
    .cornerRadiusDp(12f)
    .build()

val options = GronaOptions.Builder("acme-market")
    .theme(theme)
    // ...
    .build()

Colours are ARGB Int values, as ContextCompat.getColor returns them.

Theme tokens

Builder method	Default	Used for
`fonts(regular, bold)`	`null`, `null`	Component text. A `null` regular font uses the platform default; a `null` bold font uses the bold style of the regular font.
`primary(color)`	`0xFF054B3A`	Banner background, the progress bar’s fill before a tier is met, and icon colour in messages
`onPrimary(color)`	`0xFFFFFFFF`	Text on banners
`accent(color)`	`0xFF6FCF97`	Banner accents, the progress bar’s fill once a tier is met, and the tint of offers and message icons
`surface(color)`	`0xFFFFFFFF`	Background of progress bars, and the base of offer and message backgrounds
`text(color)`	`0xFF1A1C1A`	Body text on progress bars, offers and messages
`mutedText(color)`	`0xFF6B706C`	Secondary text, such as footnotes
`cornerRadiusDp(radius)`	`14`	Corner radius of component cards, in dp. Values are kept between 0 and 32.

How campaign styles combine with your theme

A campaign can set its own background, text and accent colours for one component, for example a weekend breakfast banner in a seasonal colour. Those override your theme for that component only. Everything else comes from your theme.

Whatever the source, the SDK checks text against its background. When the preferred text colour does not reach WCAG AA contrast on that background, the SDK uses white or near-black text, whichever reads better.

Limits

The theme is fixed at Grona.init. There is no call to change it at runtime, so a theme switch while the app runs, such as a change to dark mode, does not reach Grona components until the app process starts again.
Components use Android Views, not Jetpack Compose. Compose theming does not reach them.

Next steps

Test and debug your integration.