Theming

Every canvas reads its glyph colour from CSS color, so your Tailwind text utilities and shadcn tokens theme it. No props, no extra variables. When the theme class on <html> changes, canvases repaint.

<AsciiDonut className="text-primary" />
<AsciiDonut className="text-foreground" />
<AsciiDonut className="text-muted-foreground" />
<AsciiBackground className="text-primary/40" />  // alpha works too

Light and dark

Photos flip automatically. With ink="auto" (the default), light pixels become glyphs when the ink is light and dark pixels when it is dark, so a portrait reads correctly in both themes. Force it with ink="light" or ink="dark".

Source colours

color="source" paints each glyph with its sampled pixel instead of the theme colour.

Fonts

Glyphs use the canvas's computed font-family, font-mono by default. Swap it with a class, e.g. className="font-[JetBrains_Mono]". The grid is measured from the font, so any monospace face lines up.