Stop 3 on the Pele line
Theme lab
Pele diagrams take their colours from CSS variables, so restyling needs no redraw. Pick a look or drag the colour pickers; the counters show how often each library redrew.
Live demo: restyle diagrams with CSS variables
Pele redrew times colours only change CSS
Mermaid.js redrew times its colours live inside the drawing
Show the Mermaid.js version
Your CSS
What you just saw
Pele draws each diagram once. Its colours point at CSS variables such as --pele-bg and --pele-accent, so changing a colour is a style change: the browser repaints and Pele does nothing at all. That is why light and dark mode can switch without a flicker.
Mermaid.js bakes colours into the drawing through themeVariables, so a new colour means a new render.
Changing the font is the one case where Pele works again: new letters have new widths, so mount() measures the text and lays each diagram out once more.
With Pele, diagrams follow your site's theme the way the rest of your CSS does.
The CSS under the demo is real; paste it into your stylesheet. Every variable is listed in the theming guide.