A theme is a single stylesheet that re-declares i80's design tokens. Load it after the i80 CSS and everything built on the tokens follows: components, helpers and your own components. No JavaScript, no build step.
<link rel="stylesheet" href="https://design.i80.dk/v/0.5.2/components.css">
<link rel="stylesheet" href="https://design.i80.dk/v/0.5.2/theme-zplan.css">
| Theme | File | Turns on |
| - | - | - |
| i80 | – | The default: i80's colours and type. |
| zPlan | theme-zplan.css | zPlan's palette, Sora and IBM Plex, and rounder corners. |
| Dark | theme-dark.css | i80's colours on dark surfaces. |
The dark theme only applies where you ask for it, so you decide whether it covers the whole page or one part of it:
<html data-i80-theme="dark"> <!-- the whole page -->
<div class="i80-theme-dark"> <!-- one part of it -->
Follow the reader's own setting by setting the attribute from their operating system preference:
<script>
if (matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.setAttribute("data-i80-theme", "dark");
}
</script>
Seeing this site in a theme
The picker in the bottom-right corner shows this site in each theme, and the choice is
remembered. You can also link straight to it: ?theme=zplan or ?theme=dark.
/zplan/ opens the site in the zPlan theme.
Making a theme
Themes are generated, not written by hand. tools/build-theme.py reads the i80 tokens
and re-emits every token whose value comes from the palette:
tools/build-theme.py # the zPlan theme
tools/build-theme.py --theme dark # the dark theme
To add a product theme, give the script the product's colour ramps (and any fonts or radii) the way zPlan does, and it takes care of the rest. Check the result: a palette that works on white does not always keep enough contrast in every pairing, so run the theme through an accessibility check before shipping it.