---
title: Theming
date: '2025-06-27'
description:  The UI Kit comes with a central Theme which is used to style all components consistently.
---

To customize the theme, simply update the mapped `ThemeToken` to the value you want.

Here you can find all specified Theme Properties along with their assigned Theme Tokens.

## Colors

| Token           | Description                                                                   |
|-----------------|-------------------------------------------------------------------------------|
| `background`    | The color of the entire screen.                                               |
| `onBackground`  | The content color for items that sit directly on top of the background color. |
| `accent`        | The accent color used for interactive elements and highlights.                 |
| `onAccent`      | The content color for items sitting on top of the accent color.               |
| `primary`       | The primary brand color of your app.                                          |
| `onPrimary`     | The content color for items sitting on top of the primary color.              |
| `secondary`     | The secondary brand color of your app.                                        |
| `onSecondary`   | The content color for items sitting on top of the secondary color.            |
| `card`          | Color for cards and card like surfaces (such as dialogs).                     |
| `onCard`        | Content color for items sitting on top of the card color.                     |
| `destructive`   | Color for destructive actions and error states.                               |
| `onDestructive` | Content color for items on top of the destructive color.                      |
| `outline`       | Color for borders and outlines.                                               |
| `focusRing`     | Color for focus indicators.                                                   |
| `navigation`    | Background color for navigation elements (such as appbars).                   |
| `onNavigation`  | Content color for items sitting on top of the navigation color.               |
| `scrim`         | Semi-transparent overlay color for modals and dialogs.                        |

## Text Styles

| Token     | Description                                  |
|-----------|----------------------------------------------|
| `title`   | Text for headings and titles                 |
| `body`    | Standard text style for main content         |
| `caption` | Smaller text style for captions and metadata |

## Shapes

| Token         | Description                                  |
|---------------|----------------------------------------------|
| `small`       | Shape for smaller items such as buttons.     |
| `medium`      | Shape for smaller items such as dialogs.     |
| `bottomSheet` | The shape used for bottom sheets.            |

## Indications

| Token    | Description                                       |
|----------|---------------------------------------------------|
| `bright` | High contrast indication for primary interactions |
| `dim`    | Subtle indication for secondary interactions      |

## Shadows

| Token      | Description                             |
|------------|-----------------------------------------|
| `subtle`   | Light shadow for subtle elevation       |
| `elevated` | Stronger shadow for prominent elevation |
| `modal`    | Shadow for modal dialogs and overlays   |