Guide
Theme generator
Tweak the controls below to customize the design tokens. Pick which mode
you're editing — Light, Dark, or Both at once. When the edited mode matches
the site's current mode, the rest of the docs updates live too. Your
changes persist between visits and can also be copied as a stand-alone
theme.css.
Theme controls
Preview
Palette
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Grays
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Surfaces
default
tonal
filled
elevated
Examples
Card
Cards use border radius and surface colors.
theme.css
@layer theme {
/* Tweak the controls to generate your theme.css */
}