Theming with tokens and dark mode

1. Single-tone icons follow currentColor, so they take your text colour.
2. Illustrations expose named CSS variables with fallbacks, so each main colour can be set.
3. Dark mode follows prefers-color-scheme by default, and you can override it.

Single-tone icons paint with currentColor, taken from the file's own --illo-ink variable. Set the variable on the icon or any parent.

.icon {
  --illo-ink: var(--color-text-primary);
}

Illustrations use a small set of named variables, each with a fallback to the authored colour, so a file with nothing defined looks exactly as drawn. The variable names are still being finalised; this page will list them when they are fixed.

Without any code, single-tone icons switch to light ink when the visitor's system is in dark mode. If your site has its own theme switch, set --illo-ink from that switch instead, so the icon follows your choice and not the system's.

:root[data-theme="dark"] .icon {
  --illo-ink: #ffffff;
}

Meaningful graphics need at least 3:1 against their background (WCAG 1.4.11). The published colourways are checked. If you pick your own colours, check them yourself.

• Using SVGs with alt text
• Choosing decorative or informative images