Theming
Use CSS to apply colors, fonts, and other styles.
Pele returns SVG without a <style> block or inline styles. All fills, strokes, and fonts refer to custom properties such as --pele-surface and elements have semantic class names.
Because the SVG refers to CSS variables, diagrams automatically adapt to theme changes, such as switching between light and dark mode, without being re-rendered.
Tokens
Each token has a neutral default that is used when the property is not set.
| Token | Default | Used for |
|---|---|---|
--pele-bg | #ffffff | Background of edge labels and of the diagram when it is not transparent |
--pele-fg | #1f1f1f | Text |
--pele-muted | #6e6e6e | Secondary text |
--pele-line | #1f1f1f | Edges and arrowheads |
--pele-surface | #f3f3f3 | Node fill |
--pele-surface-alt | #e6e6e6 | Subgraph fill |
--pele-border | #8a8a8a | Node and subgraph borders |
--pele-accent | #5b7bd5 | Highlights |
--pele-font | sans-serif | Label font |
--pele-font-mono | monospace | Monospace labels |
--pele-radius | 4px | Corner radius of rounded shapes |
Series colors
Charts, and diagrams that tell categories apart by color, use eight more tokens. The first category takes --pele-series-1, the second --pele-series-2, and so on. A ninth category starts again at --pele-series-1.
| Token | Default |
|---|---|
--pele-series-1 | #4c78a8 |
--pele-series-2 | #f58518 |
--pele-series-3 | #54a24b |
--pele-series-4 | #e45756 |
--pele-series-5 | #72b7b2 |
--pele-series-6 | #eeca3b |
--pele-series-7 | #b279a2 |
--pele-series-8 | #9d755d |
What counts as a category depends on the diagram:
| Diagram | One color for each |
|---|---|
| Pie | Slice |
| Sankey | Node |
| Treemap | Top-level section |
| Venn | Set |
| XY chart, radar | Data series |
| Quadrant chart | The points, which all use the first color |
| Git graph | Branch |
| Mindmap | Branch from the root |
| Timeline | Section, or time period when there are no sections |
| User journey | Actor |
| Kanban | Priority |
| Cynefin | Domain |
| Event modeling | Kind of step |
| Agentflow | Kind of node |
Text that sits on a series color is drawn in --pele-bg, so choose series colors that contrast with the background. Mermaid’s own color settings, such as themeVariables, are not used.
Setting tokens
Set the tokens on the root <svg> or on any element that contains it. The root of every diagram has the class pele.
1.pele {2 --pele-bg: #fffcf0;3 --pele-fg: #100f0f;4 --pele-muted: #6f6e69;5 --pele-line: #100f0f;6 --pele-surface: #f2f0e5;7 --pele-surface-alt: #e6e4d9;8 --pele-border: #cecdc3;9 --pele-accent: #205ea6;10}1112@media (prefers-color-scheme: dark) {13 .pele {14 --pele-bg: #100f0f;15 --pele-fg: #cecdc3;16 --pele-muted: #878580;17 --pele-line: #cecdc3;18 --pele-surface: #1c1b1a;19 --pele-surface-alt: #282726;20 --pele-border: #403e3c;21 --pele-accent: #4385be;22 }23}Fonts
Set --pele-font to the font you want labels to use, and pass the same font to render() as the fontFamily option. Pele measures labels with fontFamily to size the nodes around them. If the two differ, text can overflow its node or leave extra space.
1const fontFamily = getComputedStyle(container).fontFamily;2container.innerHTML = render(source, { fontFamily }).svg;Classes
Elements in the SVG have class names. Use them to style one kind of element without changing a token.
| Class | Element |
|---|---|
pele | The root <svg> of every diagram |
pele-flowchart | The root <svg> of a flowchart |
pele-node | The group that holds a node’s shape and label |
pele-edge | The group that holds an edge’s line and markers |
pele-edge-label | The label on an edge |
pele-cluster | A subgraph |
pele-cluster-label | The title of a subgraph |
pele-label | The text of a node label |
pele-marker | An arrowhead or other edge marker |
pele-icon | The slot for an icon in a label |
Nodes, edges, and subgraphs also have a data-id attribute with their id from the diagram source, and class names assigned in the source with class or ::: are added to the element.
The SVG sets its defaults with presentation attributes, which have lower priority than any CSS rule. A selector with one class is enough to override them.
1.pele-edge-label {2 font-style: italic;3}45.pele-node[data-id="start"] .pele-label {6 fill: var(--pele-accent);7}The class names and the structure of the SVG are subject to change.
Styles in the diagram
Mermaid’s styling statements are part of the diagram source, so Pele honors them. style, classDef, class, the ::: shorthand, and linkStyle set styles directly on the elements they name, and those styles take precedence over the tokens.
1flowchart LR2 A[Draft] --> B[Review]:::warn --> C[Done]3 style C fill:#879a39,stroke:#66800b,color:#fffcf04 classDef warn fill:#d0a215,stroke:#ad83015 linkStyle 0 stroke:#878580,stroke-dasharray:4 4Colors set this way are fixed. They do not change with the theme.