Theming
watch() adds the class pa-scene to the container. That class gives the diagram its tinted panel and its colors. The
defaults are written with :where(), so any rule in your stylesheet wins without a specificity fight.
Variables
Set these on the container (or any ancestor):
| Variable | What it controls | Default (light) |
|---|---|---|
--pa-bg |
Panel background | #efeafa |
--pa-solid |
Strong color: lines, icon strokes, accents | #4F378B |
--pa-light |
Light fill: icon fills, group surfaces | #e4dcf6 |
--pa-stroke |
Stroke width of Tabler icons | 1.5 |
--pele-* |
Any of Pele's own variables (--pele-fg, --pele-surface, ...) |
Set from the --pa-* values |
.pa-scene {
--pa-bg: #f6f6f0;
--pa-solid: #0b5fff;
--pa-light: #dbe7ff;
--pa-stroke: 1.25;
}For the full list of --pele-* variables, see Pele's theming docs.
Dark mode
Dark colors apply when the system prefers dark, unless the page sets data-theme="light" on the root element. To force dark,
set data-theme="dark" on the root element. Both follow the same variables, so overriding --pa-solid and friends works in
either mode.
Reduced motion
With prefers-reduced-motion: reduce, the intro and the tokens do not play: the finished picture shows.
Scene frame
The panel, its padding and rounded corners come from .pa-scene. Override border-radius, padding or margin on it directly.