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.

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.

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

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.

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

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