Skip to main content

Theme config

Theme mode

Color palette

Grays

Border radii/radiuses/radiopedes/you know
Border radius
Field border radius
Button border radius
All
Components
Guides
API
Recent

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

Color Palette

Grays

Border Radius
Field Border Radius
Button Border Radius

Preview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

default
tonal
filled
elevated

Card

Cards use border radius and surface colors.

theme.css

@layer theme {
  /* Tweak the controls to generate your theme.css */
}