Theming
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.
Full Theming documentation →
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. |
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 |