Theming Pele diagrams
Pele diagrams are coloured by CSS variables. Set --pele-bg, --pele-fg, --pele-accent and friends on the diagram or any parent, and every diagram inside follows, without being redrawn.
The variables
| Variable | Default | Colours |
|---|---|---|
--pele-bg |
#ffffff |
Background |
--pele-fg |
#1f1f1f |
Text |
--pele-muted |
#6e6e6e |
Secondary text |
--pele-line |
#1f1f1f |
Lines and arrowheads |
--pele-surface |
#f3f3f3 |
Box fill |
--pele-surface-alt |
#e6e6e6 |
Group (subgraph) fill |
--pele-border |
#8a8a8a |
Box and group borders |
--pele-accent |
#5b7bd5 |
Highlights |
--pele-critical |
#e45756 |
Critical Gantt tasks, high-priority kanban cards |
--pele-error |
#e45756 |
Errors shown by mount() |
--pele-font |
measured | Label font |
--pele-font-mono |
measured | Monospace labels |
--pele-radius |
4px |
Corner radius of rounded shapes |
--pele-series-1 … -8 |
a palette | Pie slices, chart series, git branches |
There are also --pele-title-weight, --pele-heading-weight and --pele-bold-weight. The full reference is in the official theming docs.
Light and dark mode
.pele {
--pele-bg: #ffffff; --pele-fg: #111111; --pele-line: #111111; --pele-accent: #d52b1e;
}
@media (prefers-color-scheme: dark) {
.pele { --pele-bg: #121417; --pele-fg: #f2f2ef; --pele-line: #f2f2ef; --pele-accent: #f04a3c; }
}
Because the drawing only points at the variables, switching modes is instant and needs no JavaScript. This site does exactly this: switch your system to dark mode and every diagram follows.
Fonts are the exception
Pele measures label text to lay a diagram out, so a new font means new widths. With mount(), call diagram.refresh() after changing fonts. With render(), pass fontFamily and render again.
Coming from Mermaid themes
Mermaid's theme and themeVariables settings don't apply in Pele. Map the colours you used onto the variables above once, in CSS, and you're done. Play with it in the theme lab.