Theme Colors (override)

Description

In this example we override the primary color hue angle to 200deg and the secondary colors angle to 330deg to have a Split-Complementary color scheme with left and right inverted.

1:root {
2  --color-primary-hue: 200deg;
3  --colors-secondary-hue-angle: 210deg;
4}

Baseline color scheme
Role	System token	Light scheme	Dark scheme
Primary
Primary	--color-primary
On primary	--color-on-primary
Primary container	--color-primary-container
On primary container	--color-on-primary-container
Inverse primary	--color-inverse-primary
On inverse primary	--color-on-inverse-primary
Secondary
Secondary	--color-secondary
On secondary	--color-on-secondary
Secondary container	--color-secondary-container
On secondary container	--color-on-secondary-container
Inverse secondary	--color-inverse-secondary
On inverse secondary	--color-on-inverse-secondary
Tertiary
Tertiary	--color-tertiary
On tertiary	--color-on-tertiary
Tertiary container	--color-tertiary-container
On tertiary container	--color-on-tertiary-container
Inverse tertiary	--color-inverse-tertiary
On inverse tertiary	--color-on-inverse-tertiary
Surface
Surface	--color-surface
On surface	--color-on-surface
Surface dim	--color-surface-dim
Surface bright	--color-surface-bright
Surface container lowest	--color-surface-container-lowest
Surface container low	--color-surface-container-low
Surface container	--color-surface-container
Surface container high	--color-surface-container-high
Surface container highest	--color-surface-container-highest
Surface variant	--color-surface-variant
On surface variant	--color-on-surface-variant
Inverse surface	--color-inverse-surface
Inverse on surface	--color-on-inverse-surface
Success
Success	--color-success
On success	--color-on-success
Success container	--color-success-container
On success container	--color-on-success-container
Inverse success	--color-inverse-success
On inverse success	--color-on-inverse-success
Warning
Warning	--color-warning
On warning	--color-on-warning
Warning container	--color-warning-container
On warning container	--color-on-warning-container
Inverse warning	--color-inverse-warning
On inverse warning	--color-on-inverse-warning
Error
Error	--color-error
On error	--color-on-error
Error container	--color-error-container
On error container	--color-on-error-container
Inverse error	--color-inverse-error
On inverse error	--color-on-inverse-error
Extra
Background	--color-background
On background	--color-on-background
Outline	--color-outline
Outline variant	--color-outline-variant
Light	--color-light
Shadow	--color-shadow
Surface tint	--color-primary-tint
Scrim	--color-scrim