Skip to main content
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

To customize colors use Auth0Color.light() and Auth0Color.dark() factories as starting points and .copy(...) to override specific tokens.
TokenUsage
backgroundPrimary, backgroundPrimarySubtle, backgroundInverse, backgroundAccentCTA and accent surfaces
backgroundLayerTop, backgroundLayerMedium, backgroundLayerBaseOverlay, card, and app-background layers
backgroundError, backgroundErrorSubtle, backgroundSuccess, backgroundSuccessSubtleFeedback surfaces
borderBold, borderDefault, borderSubtle, borderShadowEmphasis and elevation borders
textBold, textDefault, textDisabledHeading, body, and disabled text
textOnPrimary, textOnSuccess, textOnErrorText on colored surfaces
To customize typography use the compose token TextStyle. You can override it with Auth0Typography.default().copy(...).
TokenUsage
displayMedium, displayHero and major screen headings
titleLarge, titleScreen titles, in-content titles
body, bodySmallDescriptions, body copy, footnotes
labelButton labels, form field labels
helper, overlineCaptions, helper text, category labels
TokenUsage
noneNo rounding
extraSmall, small, medium, large, extraLargeStandard rounding scale
fullFully rounded (pill)
Spacing defaults to a 4 dp grid. Access spacing tokens with Auth0Theme.dimensions.*.
TokenDefaultDescription
spacingXxs4 dpMinimal gap between tightly coupled elements
spacingXs8 dpSmall gap between grouped elements
spacingSm12 dpMedium internal padding
spacingMd16 dpStandard component and container padding
spacingLg24 dpLarger padding for major sections
spacingXl32 dpExtra-large padding
spacingXxl48 dpDouble-extra-large padding
Access component dimensions with Auth0Theme.sizes.*.
TokenDefaultUsage
buttonHeight56 dpAll primary and secondary action buttons
inputHeight68 dpText and phone-number input fields
otpFieldWidth52 dpWidth of a single OTP digit input field
otpFieldHeight60 dpHeight of a single OTP digit input field
codeContainerHeight56 dpRecovery code display containers
iconSmall16 dpSmall icons—chevrons, info indicators, checkmarks
iconMedium24 dpStandard icons—authentication-method images
iconLarge32 dpLarge icons—three-dots menu
padding16 dpDefault component padding
paddingLarge24 dpLarger component padding

​
Learn more

Install the Android SDK

Platform prerequisites and installation for Android.

Build a Self-Service Account Security Interface

Initialize the SDK and wire the token provider to your Auth0 tenant.