How to build a theme

Build your own custom Material theme by remixing and styling these themeable components.

Modify the variables in your project's my-theme.scss, my-components.scss, and my-theme.js files to see your custom styles applied across Material Components for the web.

Options

Enable Right-to-Left

Color Scheme

$mdc-theme-primary

$mdc-theme-on-primary

$mdc-theme-secondary

$mdc-theme-on-secondary

$mdc-theme-error

$mdc-theme-on-error

$mdc-theme-surface

$mdc-theme-on-surface

$mdc-theme-background

Shape System

$mdc-shape-small-component-radius:

S

$mdc-shape-medium-component-radius:

M

$mdc-shape-large-component-radius:

L

Typography Scale

$mdc-typography--font-family:
          ;

See on Google Fonts

$mdc-typography--headline1

H1

$mdc-typography--headline2

H2

$mdc-typography--headline3

H3

$mdc-typography--headline4

H4

$mdc-typography--headline5

H5

$mdc-typography--headline6

H6

$mdc-typography--subtitle1

Subtitle 1

$mdc-typography--subtitle2

Subtitle 2

$mdc-typography--body1

Body 1

$mdc-typography--body2

Body 2

$mdc-typography--button

Button

$mdc-typography--caption

Caption

$mdc-typography--overline

Overline

Build a Material Theme

Button

Top App Bar

Headline 6

Drawer

Short App Bar

Linear Progress

Switch

Checkbox

Radio Button

Icon Button

Chips

Body 2

Select

Label

List

Subtitle 1 Body 2

Subtitle 1 Body 2

Subtitle 1 Body 2

FAB

Card

Overline

Headline 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text field

Label

Assistive text

Label

Assistive text

Tabs

Slider

Snackbar

Marked as favorite.

Dialog

Image List