Theming

Modes and brands.

Accessible first has 2 modes and 1 brand. A mode swaps the colors; corners and type stay the same in every mode.

Light

Accessible firstA person with low vision zooms to 200% and applies for a benefit with a screen magnifier.CompletedCheck your answersContinueGo back

Dark

Accessible firstA person with low vision zooms to 200% and applies for a benefit with a screen magnifier.CompletedCheck your answersContinueGo back

What a mode changes

Job	Light	Dark
Surface · 7
surface.canvas	gray.light.50 · via neutral.50	gray.dark.0 · via neutral.0
surface.default	gray.light.0 · via neutral.0	gray.dark.50 · via neutral.50
surface.raised	gray.light.0 · via neutral.0	gray.dark.100 · via neutral.100
surface.sunken	gray.light.100 · via neutral.100	gray.dark.100 · via neutral.100
surface.selected	blue.light.100	blue.dark.100
surface.inverse	gray.light.900 · via neutral.900	gray.dark.900 · via neutral.900
surface.scrim	black.light.scrim	black.dark.scrim
Text · 7
text.primary	gray.light.900 · via neutral.900	gray.dark.900 · via neutral.900
text.secondary	gray.light.700 · via neutral.700	gray.dark.600 · via neutral.600
text.muted	gray.light.500 · via neutral.500	gray.dark.500 · via neutral.500
text.inverse	gray.light.0	gray.light.900
text.on-action	gray.light.0	gray.light.900
text.link	blue.light.700	blue.dark.700
text.on-danger	gray.light.0	gray.light.900
Border · 4
border.default	gray.light.200 · via neutral.200	gray.dark.100 · via neutral.100
border.strong	gray.light.500 · via neutral.500	gray.dark.500 · via neutral.500
border.focus	blue.light.600	blue.dark.600
border.selected	blue.light.600	blue.dark.600
Action · 6
action.primary	blue.light.600	blue.dark.600
action.primary.hover	blue.light.700	blue.dark.700
action.secondary	gray.light.0 · via neutral.0	gray.dark.50 · via neutral.50
action.secondary.hover	gray.light.100 · via neutral.100	gray.dark.100 · via neutral.100
action.danger	red.light.600	red.dark.600
action.danger.hover	red.light.700	red.dark.700
Status · 8
status.info	teal.light.600	teal.dark.600
status.info.subtle	teal.light.100	teal.dark.100
status.success	green.light.600	green.dark.600
status.success.subtle	green.light.100	green.dark.100
status.warning	amber.light.600	amber.dark.600
status.warning.subtle	amber.light.100	amber.dark.100
status.danger	red.light.600	red.dark.600
status.danger.subtle	red.light.100	red.dark.100
Category · 10
category.1	blue.light.600	blue.dark.600
category.1.subtle	blue.light.100	blue.dark.100
category.2	teal.light.600	teal.dark.600
category.2.subtle	teal.light.100	teal.dark.100
category.3	green.light.600	green.dark.600
category.3.subtle	green.light.100	green.dark.100
category.4	amber.light.600	amber.dark.600
category.4.subtle	amber.light.100	amber.dark.100
category.5	gray.light.500 · via neutral.500	gray.dark.700 · via neutral.700
category.5.subtle	gray.light.100 · via neutral.100	gray.dark.100 · via neutral.100
Disabled · 3
disabled.text	gray.light.500 · via neutral.500	gray.dark.500 · via neutral.500
disabled.surface	gray.light.100 · via neutral.100	gray.dark.100 · via neutral.100
disabled.border	gray.light.200 · via neutral.200	gray.dark.200 · via neutral.200
Card · 1
card	0px 0px 0px 0px #00000000	0px 0px 0px 0px #00000000
Overlay · 1
overlay	0px 0px 0px 0px #00000000	0px 0px 0px 0px #00000000

What stays the same in every mode

Corners

control · 0.375rem (6px)badge · 0.25rem (4px)container · 0.5rem (8px)

Type families

Display, Title, Heading, Body, Label, Caption, DataAtkinson Hyperlegible

The five answers

Question	Answer	Why
What can a theme change?	Mode only	One brand, so only the mode changes.
How many themes ship?	Two	Light and dark.
How are brands handled?	One brand	One service, one brand.
Which modes ship?	Light and dark	Light and dark ship as standard; both hold AAA text.
What changes when the theme changes?	Colors only	Only colors change.

When to use what

Situation	Use	Not	Why
Someone switches to dark	The dark semantic mode, or high contrast	One mode only	People pick the mode they can read.