Color Theming

Baseline Colors

CSS Classes #

Theme colors as text
Primary
Primary Light
Primary Dark
Secondary
Secondary Light
Secondary Dark
Theme colors as background
Primary
Primary Light
Primary Dark
Secondary
Secondary Light
Secondary Dark
Background
Light and dark tonal variants for extreme input luminance
Low Luminance
Light Variant
Dark Variant
High Luminance
Light Variant
Dark Variant
Text on background
Primary Secondary Hint Disabled favorite
Text on primary
Primary Secondary Hint Disabled favorite
Text on secondary
Primary Secondary Hint Disabled favorite
Text on user-defined light background
Primary Secondary Hint Disabled favorite
Text on user-defined dark background
Primary Secondary Hint Disabled favorite

Baseline Component Stickersheet

Button #

Enabled
Disabled

Card #

Title goes here

Subtitle here

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title

Subhead

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title

Checkbox #

Dialog #

Drawer #

Tap the menu icon (menu) in the toolbar at the top of the page to open the drawer.

Floating Action Button (FAB) #

Default
Secondary theme color
Mini
mdc-fab--mini

Icon Toggle #

Enabled

favorite_border

Disabled

favorite_border

Linear Progress #

Indeterminate
Buffer

Radio Button #

Ripple #

Bounded
Default
Primary Color
Secondary Color
Unbounded
Default
favorite
Primary Color
favorite
Secondary Color
favorite

Select #

Pick a food group
  • Pick a food group
  • Bread, Cereal, Rice, and Pasta
  • Vegetables
  • Fruit
  • Milk, Yogurt, and Cheese
  • Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts
  • Fats, Oils, and Sweets

Slider #

30

Switch #

Tabs #

Default
Primary Color
Secondary Color

Text Field #

Must provide a name