Theme Colors
Theme colors provide semantic meaning and are used consistently across components.
Ocean
Forest
Spring
Summer
Autumn
Winter
Material
Dark Mode
Primary
primary-10
primary-10
primary-30
primary-30
primary-50
var(--mtrl-sys-color-primary)
primary-70
primary-70
primary-90
primary-90
Secondary
secondary-10
secondary-10
secondary-30
secondary-30
secondary-50
var(--mtrl-sys-color-secondary)
secondary-70
secondary-70
secondary-90
secondary-90
Tertiary
tertiary-10
tertiary-10
tertiary-30
tertiary-30
tertiary-50
var(--mtrl-sys-color-tertiary)
tertiary-70
tertiary-70
tertiary-90
tertiary-90
Error
error-10
error-10
error-30
error-30
error-50
var(--mtrl-sys-color-error)
error-70
error-70
error-90
error-90
Theme Colors
Theme colors provide semantic meaning and are used consistently across components. Use these tokens to maintain visual consistency and accessibility.
Primaryvar(--mtrl-sys-color-primary)
On Primaryvar(--mtrl-sys-color-on-primary)
Primary Containervar(--mtrl-sys-color-primary-container)
On Primary Containervar(--mtrl-sys-color-on-primary-container)
Secondaryvar(--mtrl-sys-color-secondary)
On Secondaryvar(--mtrl-sys-color-on-secondary)
Secondary Containervar(--mtrl-sys-color-secondary-container)
On Secondary Containervar(--mtrl-sys-color-on-secondary-container)
Tertiaryvar(--mtrl-sys-color-tertiary)
On Tertiaryvar(--mtrl-sys-color-on-tertiary)
Tertiary Containervar(--mtrl-sys-color-tertiary-container)
On Tertiary Containervar(--mtrl-sys-color-on-tertiary-container)
Errorvar(--mtrl-sys-color-error)
On Errorvar(--mtrl-sys-color-on-error)
Neutral Colors
Surfacevar(--mtrl-sys-color-surface)
On Surfacevar(--mtrl-sys-color-on-surface)
On Surface Variantvar(--mtrl-sys-color-on-surface-variant)
Surface Dimvar(--mtrl-sys-color-surface-dim)
Surface Brightvar(--mtrl-sys-color-surface-bright)
Container Lowestvar(--mtrl-sys-color-surface-container-lowest)
Container Lowvar(--mtrl-sys-color-surface-container-low)
Containervar(--mtrl-sys-color-surface-container)
Container Highvar(--mtrl-sys-color-surface-container-high)
Container Highestvar(--mtrl-sys-color-surface-container-highest)
Outlinevar(--mtrl-sys-color-outline)
Outline Variantvar(--mtrl-sys-color-outline-variant)
State Colors
State colors communicate the status of components and provide visual feedback for interactions.
Hover
Hover State
Applied when the cursor hovers over an interactive element.
Focus
Focus State
Applied when an element receives keyboard focus.
Active
Active State
Applied during the active/pressed state of an element.
Disabled
Disabled State
Applied to elements that are currently not interactive.