Theme colors

Material Style comes designed with a baseline theme that is adaptive to color modes and can be used as-is, straight out of the box or customized as per your need.

Theme colors are adaptive to color modes, meaning they change according to the color mode (for example, dark and light mode). Try switching to dark/light mode from the top navigation bar.

Primary
Secondary
Tertiary
Success
Info
Warning
Danger
Light
Dark

Each theme color has additional color variants:

  • Hover and active colors for the theme color.
  • A subtle variant of the theme color.
  • Hover and active colors for the subtle variant.
  • Emphasis variant of the theme color for high contrast.
  • Hover color for the emphasis variant.
  • Text on theme: Color of text on the theme-colored background.
  • Subtle border color.

We use these color variants across our components, which allows us to change the theme colors using CSS variables.


Primary

The primary color is used to derive roles for key components across the UI, such as the hyperlinks, prominent buttons, focus and active states.

primary --bs-primary --bs-primary-rgb
 
primary hover --bs-primary-hover
 
primary active --bs-primary-active
 
primary subtle --bs-primary-subtle
 
primary subtle hover --bs-primary-subtle-hover
 
primary subtle active --bs-primary-subtle-active
 
primary emphasis --bs-primary-emphasis
 
primary emphasis hover --bs-primary-emphasis-hover
 
Text on primary --bs-text-on-primary
 
primary Border subtle --bs-primary-border-subtle

Secondary

The secondary color is used for less prominent components in the UI.

secondary --bs-secondary --bs-secondary-rgb
 
secondary hover --bs-secondary-hover
 
secondary active --bs-secondary-active
 
secondary subtle --bs-secondary-subtle
 
secondary subtle hover --bs-secondary-subtle-hover
 
secondary subtle active --bs-secondary-subtle-active
 
secondary emphasis --bs-secondary-emphasis
 
secondary emphasis hover --bs-secondary-emphasis-hover
 
Text on secondary --bs-text-on-secondary
 
secondary Border subtle --bs-secondary-border-subtle

Tertiary

The tertiary color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element.

tertiary --bs-tertiary --bs-tertiary-rgb
 
tertiary hover --bs-tertiary-hover
 
tertiary active --bs-tertiary-active
 
tertiary subtle --bs-tertiary-subtle
 
tertiary subtle hover --bs-tertiary-subtle-hover
 
tertiary subtle active --bs-tertiary-subtle-active
 
tertiary emphasis --bs-tertiary-emphasis
 
tertiary emphasis hover --bs-tertiary-emphasis-hover
 
Text on tertiary --bs-text-on-tertiary
 
tertiary Border subtle --bs-tertiary-border-subtle

Success

The success color is used for positive or successful actions and information.

success --bs-success --bs-success-rgb
 
success hover --bs-success-hover
 
success active --bs-success-active
 
success subtle --bs-success-subtle
 
success subtle hover --bs-success-subtle-hover
 
success subtle active --bs-success-subtle-active
 
success emphasis --bs-success-emphasis
 
success emphasis hover --bs-success-emphasis-hover
 
Text on success --bs-text-on-success
 
success Border subtle --bs-success-border-subtle

Info

The info color is used for neutral and informative content.

info --bs-info --bs-info-rgb
 
info hover --bs-info-hover
 
info active --bs-info-active
 
info subtle --bs-info-subtle
 
info subtle hover --bs-info-subtle-hover
 
info subtle active --bs-info-subtle-active
 
info emphasis --bs-info-emphasis
 
info emphasis hover --bs-info-emphasis-hover
 
Text on info --bs-text-on-info
 
info Border subtle --bs-info-border-subtle

Warning

The warning color is used for non-destructive warning messages.

warning --bs-warning --bs-warning-rgb
 
warning hover --bs-warning-hover
 
warning active --bs-warning-active
 
warning subtle --bs-warning-subtle
 
warning subtle hover --bs-warning-subtle-hover
 
warning subtle active --bs-warning-subtle-active
 
warning emphasis --bs-warning-emphasis
 
warning emphasis hover --bs-warning-emphasis-hover
 
Text on warning --bs-text-on-warning
 
warning Border subtle --bs-warning-border-subtle

Danger

The danger color is used for errors and dangerous actions.

danger --bs-danger --bs-danger-rgb
 
danger hover --bs-danger-hover
 
danger active --bs-danger-active
 
danger subtle --bs-danger-subtle
 
danger subtle hover --bs-danger-subtle-hover
 
danger subtle active --bs-danger-subtle-active
 
danger emphasis --bs-danger-emphasis
 
danger emphasis hover --bs-danger-emphasis-hover
 
Text on danger --bs-text-on-danger
 
danger Border subtle --bs-danger-border-subtle

Light

light --bs-light --bs-light-rgb
 
light hover --bs-light-hover
 
light active --bs-light-active
 
light subtle --bs-light-subtle
 
light subtle hover --bs-light-subtle-hover
 
light subtle active --bs-light-subtle-active
 
light emphasis --bs-light-emphasis
 
light emphasis hover --bs-light-emphasis-hover
 
Text on light --bs-text-on-light
 
light Border subtle --bs-light-border-subtle

Dark

dark --bs-dark --bs-dark-rgb
 
dark hover --bs-dark-hover
 
dark active --bs-dark-active
 
dark subtle --bs-dark-subtle
 
dark subtle hover --bs-dark-subtle-hover
 
dark subtle active --bs-dark-subtle-active
 
dark emphasis --bs-dark-emphasis
 
dark emphasis hover --bs-dark-emphasis-hover
 
Text on dark --bs-text-on-dark
 
dark Border subtle --bs-dark-border-subtle

More colors

Body

 
Background color --bs-body-bg
--bs-body-bg-rgb
 
Text color --bs-body-color
--bs-body-color-rgb

Surface

 
Background color --bs-surface-bg
--bs-surface-bg-rgb
 
Background hover color --bs-surface-bg-hover
 
Text color --bs-surface-color
--bs-surface-color-rgb

Emphasis

For higher contrast text. Not applicable for backgrounds.

 
Emphasis --bs-emphasis-color
--bs-emphasis-color-rgb

Muted

 
Muted --bs-muted-color

Border

For component borders, dividers, and rules. Use --bs-border-color-translucent to blend with backgrounds with an rgba() value.

 
Border --bs-border-color
Material Style Logo
Theme Builder
Personalize Material Style to reflect your product's brand identity.