One of the defining features of this theme is its color palette. It's generated from a few swatches using lots of (human-written ) algebra in the Oklab LCh color space.
| $i | GREY | PINK | PURPLE | BLUE | TEAL | GREEN | YELLOW | ORANGE | RED |
|---|---|---|---|---|---|---|---|---|---|
| 9 | |||||||||
| 8 | |||||||||
| 7 | |||||||||
| 6 | |||||||||
| 5 | |||||||||
| 4 | |||||||||
| 3 | |||||||||
| 2 | |||||||||
| 1 |
The palette is exposed as CSS
variables where each direct color variable has a name like
--(hue)[-$i]. But there are also several more convenient
aliases...
Instead of $i = 2, 5, or 8 you can use dk
(dark), hi (highlight), or lt (light).
For elements to adapt to the browser's preference of light or dark
mode, use the form --(bg|fg)-(hue)[-$i]. With this usage,
bg will refer to the lighter half in light mode, or the
darker half in dark mode; fg is the same in reverse.
$i can range from 1 to 4 where lower numbers are the
extremities, but you can leave it off and it will default to
1.
You can also add -rgb to the end of any of these to get
comma-separated RGB channels, useful for adding transparency. For
example: rgba(var(--bg-pink-2-rgb) 0.8)
There are CSS classes for setting foreground and background colors of
elements which you can use like class="{bg|fg}-{hue}[-$i]".
In this case, fg sets the color property and
bg sets the background-color property. It
follows the same --(bg|fg)-* usage from above, so it can be
a number from 1 to 4, or empty for the default. Class names also
supports -(dk|hi|lt) in the rare case you need it.
You have a lot of colors to pick from, so choose wisely! Always make sure your conbinations meet WCAG AA Contrast (AAA is even better!).
Examples
#my-box {
background-color: var(--bg-purple);
color: var(--fg-grey);
border: var(--border-dashed);
}
This is my box!
<div class="bg-green-2 fg-blue">Thing one</div>
<div class="fg-red-hi">Thing two</div>
Thing one
Thing two