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

TokenDescription
backgroundThe color of the entire screen.
onBackgroundThe content color for items that sit directly on top of the background color.
primaryThe primary brand color of your app.
onPrimaryThe content color for items sitting on top of the primary color.
secondaryThe secondary brand color of your app.
onSecondaryThe content color for items sitting on top of the secondary color.
cardColor for cards and card like surfaces (such as dialogs).
onCardContent color for items sitting on top of the card color.
destructiveColor for destructive actions and error states.
onDestructiveContent color for items on top of the destructive color.
outlineColor for borders and outlines.
focusRingColor for focus indicators.
navigationBackground color for navigation elements (such as appbars).
onNavigationContent color for items sitting on top of the navigation color.
scrimSemi-transparent overlay color for modals and dialogs.

Text Styles

TokenDescription
titleText for headings and titles
bodyStandard text style for main content
captionSmaller text style for captions and metadata

Shapes

TokenDescription
smallShape for smaller items such as buttons.
mediumShape for smaller items such as dialogs.
bottomSheetThe shape used for bottom sheets.

Indications

TokenDescription
brightHigh contrast indication for primary interactions
dimSubtle indication for secondary interactions

Shadows

TokenDescription
subtleLight shadow for subtle elevation
elevatedStronger shadow for prominent elevation