Skip to content

Theme tokens and CSS

LIGHT and DARK are the single source for every theme colour. Each maps a Token to a hex colour. FONTS holds the display, body, mono and hand stacks.

themeCss() returns a stylesheet that declares each token and font as a custom property named after it, such as --ink and --display. Light is on :root. Dark is under @media (prefers-color-scheme: dark) on :root:not([data-theme="light"]), and again under :root[data-theme="dark"], so a page can force either theme with a data-theme attribute. Dark repeats only the tokens whose value differs from light. on-bolt and pen-on-storm are tokens with the same value in both themes.

tokenColor(token) returns var(--token) as a Color, so a drawing painted with it follows the theme.

docs/examples/theme.ts
import { DARK, LIGHT, themeCss } from "@draw/brand";


export const css: string = themeCss();
export const lightInk: string = LIGHT.ink;
export const darkInk: string = DARK.ink;