#ffffff · Card: rgba(255,255,255,0.08)Both themes
What is a colour scheme or theme?
A theme is a named set of design tokens — background, surface, text, secondary text, border and accent — that every component reads instead of hard-coded colours. Switching from dark to light swaps the token values once and the whole interface follows, which is why a single accent change can restyle an entire app.
Worked example: the dark scheme pairs white text (#ffffff) with the background #0f2027, and the light scheme pairs #1a1a2e with #f5f7fa. Computing relative luminance gives a contrast ratio of about 16.7:1 in dark and 15.9:1 in light — both far above the WCAG AA minimum of 4.5:1 for body text. Secondary text is intentionally weaker (about 7.7:1 in dark and 4.4:1 in light).
How to use the theme preview
- Toggle between dark and light to see both token sets side by side.
- Compare the background, surface and text swatches that make up each scheme.
- Read the accent colour that drives buttons, links and highlights.
- Use the same tokens in your own CSS so the preview matches your build.
Themes and contrast — frequently asked questions
What is a design token?
A design token is a named value, such as --text or --surface, that components reference instead of literals. Changing the token once updates every place that uses it, which is what makes a theme switch instant.
Why does contrast matter for a theme?
Text must stay readable on every background. WCAG AA asks for at least 4.5:1 for body text and 3:1 for large text, so each token set should be checked rather than assumed.
Why is dark mode not pure black?
Very dark greys such as #0f2027 reduce smearing on OLED panels and keep a little depth, so surfaces can still be distinguished without harsh pure-black edges.
