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 |
