Customize Style and Themes for Android Universal Components

Auth0 Universal Components for Android use a design token model. Visual properties such as colors, typography, spacing, corner radii, and component sizes are each expressed as a token that you can override without changes to your layouts. Universal Components ship with a default Auth0 theme. You can provide your own theme to match your brand.

How theming works

Universal Components for Android use a Jetpack Compose theme that mirrors Material 3’s MaterialTheme pattern. You can wrap SDK content using Auth0Theme { ... } to provide tokens, or pass themeConfiguration directly to AuthenticatorSettingsComponent. You can read tokens inside any composable using Auth0Theme.colors, Auth0Theme.typography, Auth0Theme.shapes, Auth0Theme.dimensions, and Auth0Theme.sizes.

Zero configuration

If you do not configure a theme, Universal Components for Android render the Auth0 default theme. The following example displays the AuthenticatorSettingsComponent without any customization:

@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent()
}

No additional setup is required to load the Auth0 default theme. Universal Components apply it automatically when no custom theme is provided.

Override a subset of tokens

You can override specific tokens while Universal Components for Android render every other token using the Auth0 default theme. The following example overrides the tokens Auth0Color.light().copy(...), Auth0Color.dark(), or Auth0Typography.default().copy(...):

@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent(
        themeConfiguration = Auth0ThemeConfiguration(
            color = Auth0Color.light().copy(
                backgroundPrimary = Color(0xFFFF6B00),
                textOnPrimary = Color.White
            )
        )
    )
}

Force dark mode

To force dark mode, you can wrap the component in Auth0Theme(darkTheme = true) or pass the dark color scheme explicitly:

// Option 1: Force dark mode via Auth0Theme
@Composable
fun MFASettingsScreen() {
    Auth0Theme(darkTheme = true) {
        AuthenticatorSettingsComponent()
    }
}

// Option 2: Explicit dark color scheme
@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent(
        themeConfiguration = Auth0ThemeConfiguration(
            color = Auth0Color.dark()
        )
    )
}

Configure a full brand theme

Provide your own branding theme that combines colors, typography, and shapes into a single Auth0ThemeConfiguration configuration:

@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent(
        themeConfiguration = Auth0ThemeConfiguration(
            color = Auth0Color.light().copy(
                backgroundPrimary = Color(0xFF0066CC),
                textOnPrimary = Color.White,
                backgroundLayerBase = Color(0xFFF5F5F5),
                backgroundLayerMedium = Color.White,
                textBold = Color(0xFF1F1F1F),
                textDefault = Color(0xFF636363),
                backgroundError = Color(0xFFFF4444),
                backgroundSuccess = Color(0xFF00CC66),
                borderDefault = Color(0xFFE0E0E0)
            ),
            typography = Auth0Typography.default().copy(
                displayMedium = TextStyle(fontSize = 22.sp, fontWeight = FontWeight.Bold),
                body = TextStyle(fontSize = 18.sp)
            ),
            shapes = Auth0Shapes(
                none = RoundedCornerShape(0.dp),
                extraSmall = RoundedCornerShape(4.dp),
                small = RoundedCornerShape(8.dp),
                medium = RoundedCornerShape(12.dp),
                large = RoundedCornerShape(16.dp),
                extraLarge = RoundedCornerShape(24.dp),
                full = RoundedCornerShape(100.dp)
            )
        )
    )
}

Read theme tokens in your own composables

Access theme tokens inside an Auth0Theme { ... } composable using the accessor object:

@Composable
fun CustomAuthCard() {
    Card(
        shape = Auth0Theme.shapes.medium,
        colors = CardDefaults.cardColors(
            containerColor = Auth0Theme.colors.backgroundLayerMedium
        )
    ) {
        Column(modifier = Modifier.padding(Auth0Theme.dimensions.spacingMd)) {
            Text(
                text = "Authenticator",
                style = Auth0Theme.typography.title,
                color = Auth0Theme.colors.textBold
            )
            Text(
                text = "Enabled",
                style = Auth0Theme.typography.bodySmall,
                color = Auth0Theme.colors.textDefault
            )
        }
    }
}

Switch themes at runtime

You can keep the theme configuration in state to swap between light and dark (or brand variants) without recreating the screen:

@Composable
fun MFASettingsScreen() {
    var isDarkMode by remember { mutableStateOf(false) }

    val themeConfig = Auth0ThemeConfiguration(
        color = if (isDarkMode) Auth0Color.dark() else Auth0Color.light()
    )

    Column {
        Switch(checked = isDarkMode, onCheckedChange = { isDarkMode = it })
        AuthenticatorSettingsComponent(themeConfiguration = themeConfig)
    }
}

Token reference

Colors — Auth0Color

To customize colors use Auth0Color.light() and Auth0Color.dark() factories as starting points and .copy(...) to override specific tokens.

Token	Usage
`backgroundPrimary`, `backgroundPrimarySubtle`, `backgroundInverse`, `backgroundAccent`	CTA and accent surfaces
`backgroundLayerTop`, `backgroundLayerMedium`, `backgroundLayerBase`	Overlay, card, and app-background layers
`backgroundError`, `backgroundErrorSubtle`, `backgroundSuccess`, `backgroundSuccessSubtle`	Feedback surfaces
`borderBold`, `borderDefault`, `borderSubtle`, `borderShadow`	Emphasis and elevation borders
`textBold`, `textDefault`, `textDisabled`	Heading, body, and disabled text
`textOnPrimary`, `textOnSuccess`, `textOnError`	Text on colored surfaces

Typography — Auth0Typography

To customize typography use the compose token TextStyle. You can override it with Auth0Typography.default().copy(...).

Token	Usage
`displayMedium`, `display`	Hero and major screen headings
`titleLarge`, `title`	Screen titles, in-content titles
`body`, `bodySmall`	Descriptions, body copy, footnotes
`label`	Button labels, form field labels
`helper`, `overline`	Captions, helper text, category labels

Shapes — Auth0Shapes

Token	Usage
`none`	No rounding
`extraSmall`, `small`, `medium`, `large`, `extraLarge`	Standard rounding scale
`full`	Fully rounded (pill)

Dimensions — Auth0Dimensions

Spacing defaults to a 4 dp grid. Access spacing tokens with Auth0Theme.dimensions.*.

Token	Default	Description
`spacingXxs`	4 dp	Minimal gap between tightly coupled elements
`spacingXs`	8 dp	Small gap between grouped elements
`spacingSm`	12 dp	Medium internal padding
`spacingMd`	16 dp	Standard component and container padding
`spacingLg`	24 dp	Larger padding for major sections
`spacingXl`	32 dp	Extra-large padding
`spacingXxl`	48 dp	Double-extra-large padding

Sizes — Auth0Sizes

Access component dimensions with Auth0Theme.sizes.*.

Token	Default	Usage
`buttonHeight`	56 dp	All primary and secondary action buttons
`inputHeight`	68 dp	Text and phone-number input fields
`otpFieldWidth`	52 dp	Width of a single OTP digit input field
`otpFieldHeight`	60 dp	Height of a single OTP digit input field
`codeContainerHeight`	56 dp	Recovery code display containers
`iconSmall`	16 dp	Small icons—chevrons, info indicators, checkmarks
`iconMedium`	24 dp	Standard icons—authentication-method images
`iconLarge`	32 dp	Large icons—three-dots menu
`padding`	16 dp	Default component padding
`paddingLarge`	24 dp	Larger component padding

Web Components

iOS Components

Android Components

Customize Style and Themes for Android Universal Components

How theming works

Zero configuration

Override a subset of tokens

Force dark mode

Configure a full brand theme

Read theme tokens in your own composables

Switch themes at runtime

Token reference

Learn more

Install the Android SDK

Build a Self-Service Account Security Interface

​How theming works

​Zero configuration

​Override a subset of tokens

​Force dark mode

​Configure a full brand theme

​Read theme tokens in your own composables

​Switch themes at runtime

​Token reference

​Learn more

Install the Android SDK

Build a Self-Service Account Security Interface

How theming works

Zero configuration

Override a subset of tokens

Force dark mode

Configure a full brand theme

Read theme tokens in your own composables

Switch themes at runtime

Token reference

Learn more