Skip to content
Skip design navigation
Etesie Alpha
Loading account
← Back to Customize
Colors · Learn · Guide

Light, dark & contrast

Light and dark are not two color sets — they're the same roles, each reading a tone per scheme from the same palettes. Dark mode is free once you stop hard-coding hex values.

light scheme
Project settings
Control who can access this workspace.
Save Invite Cancel
dark scheme
Project settings
Control who can access this workspace.
Save Invite Cancel
Same role, a tone per scheme
RoleLightDark
primary tone 40tone 80
on-primary tone 100tone 20
primary-container tone 90tone 30
on-primary-container tone 30tone 90
surface tone 98tone 6
on-surface tone 10tone 90

Spot the swaps in this theme: 40↔80, 100↔20, 90↔30, 30↔90, 98↔6, 10↔90. The roles stay the same in both schemes, and the engine checks that every on-role meets 4.5:1 on its fill in each.

Contrast levels

A user-side setting, not a redesign: at medium and high contrast, Material solves every role against a higher contrast minimum, so roles move to meet it — not always further apart. Your tokens don't change — their resolved values do.

standard primary container outline
medium primary container outline
high primary container outline