Themes
Accessible first ships 2 themes: light, dark. Only semantic tokens change between themes; components never do.
How to switch
- Dark mode: add the class
darkto<html>.
Brands
- Accessible first (
default): The single brand: strong blue on true neutral, high contrast everywhere.
Key colors in each theme
The page, its main surface and text, the main action at rest and on hover, and the focus ring: the colors that show a theme at a glance. Each shows the primitive it points at, then its value.
- the neutral is
gray(pure). A pure gray adds no hue that could lower contrast or carry a meaning.
| Token | light | dark |
|---|---|---|
color.surface.canvas | Aagray.light.50via neutral.50 · #F7F7F7 | Aagray.dark.0via neutral.0 · #0A0A0A |
color.surface.default | Aagray.light.0via neutral.0 · #FFFFFF | Aagray.dark.50via neutral.50 · #141414 |
color.text.primary | Aagray.light.900via neutral.900 · #141414 | Aagray.dark.900via neutral.900 · #F7F7F7 |
color.action.primary | Aablue.light.600#0B4FC0 | Aablue.dark.600#8AB4F8 |
color.action.primary.hover | Aablue.light.700#013895 | Aablue.dark.700#A7C8FC |
color.border.focus | Aablue.light.600#0B4FC0 | Aablue.dark.600#8AB4F8 |