> ## Documentation Index
> Fetch the complete documentation index at: https://auth0-chore-management-api-autoupdate.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize Style and Themes for Android Universal Components

> Learn how to customize style and themes for Universal Components on Android.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "Early Access"
  };
  const stageText = stageTextMap[stage] || "a product release stage";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>This feature is available for {linkify(`${plans} plans`, "https://auth0.com/pricing")}. </>}
            {contact && "To participate, contact " + contact + ". "}
            {terms && <>By using this feature, you agree to the applicable Free Trial terms in Okta's {linkify("Master Subscription Agreement", "https://www.okta.com/legal")}.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>The {feature} feature is in {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="beta" terms="true" contact="Auth0 Support" />

Auth0 [Universal Components for Android](https://github.com/auth0/ui-components-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:

```kotlin wrap lines theme={null}
@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent()
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  No additional setup is required to load the Auth0 default theme. Universal Components apply it automatically when no custom theme is provided.
</Callout>

### 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(...)`:

```kotlin wrap lines theme={null}
@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:

```kotlin wrap lines theme={null}
// 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:

```kotlin wrap lines theme={null}
@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:

```kotlin wrap lines theme={null}
@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:

```kotlin wrap lines theme={null}
@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

<Accordion title="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                 |
</Accordion>

<Accordion title="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 |
</Accordion>

<Accordion title="Shapes — Auth0Shapes">
  | **Token**                                              | **Usage**               |
  | ------------------------------------------------------ | ----------------------- |
  | `none`                                                 | No rounding             |
  | `extraSmall`, `small`, `medium`, `large`, `extraLarge` | Standard rounding scale |
  | `full`                                                 | Fully rounded (pill)    |
</Accordion>

<Accordion title="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                   |
</Accordion>

<Accordion title="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                          |
</Accordion>

## Learn more

<CardGroup cols={2}>
  <Card title="Install the Android SDK" icon="download" href="/docs/get-started/universal-components/android/android-overview">
    Platform prerequisites and installation for Android.
  </Card>

  <Card title="Build a Self-Service Account Security Interface" icon="key" href="/docs/get-started/universal-components/android/components/my-account-overview">
    Initialize the SDK and wire the token provider to your Auth0 tenant.
  </Card>
</CardGroup>