Colours and dark mode

Your colours draw as you wrote them

These draw with the colours you give them, in the light and the dark theme:

• Flowcharts: classDef, class, :::, style and linkStyle, on every shape.
• State diagrams: classDef with class and :::.
• Class diagrams: style on a class.
• Sequence diagrams: a coloured box and a rect highlight.
• Colours inside a label written as HTML, such as <span style="color:red">Red</span>. Put such a label in double quotes.
• A diagram's own theme settings (%%{init: …}%% or front matter with theme, themeVariables or themeCSS). They win over the macro's theme.

Example:

flowchart LR
  classDef hot fill:#ff9966,stroke:#cc0000,color:#ffffff
  A[Start] --> B[Busy]:::hot
  style A fill:#00ff00
  linkStyle 0 stroke:#ff00ff,stroke-width:3px

Some limits come from Mermaid itself and are the same in any tool: in a class diagram, classDef with cssClass does not colour the shape; state diagrams have no style statement, and classDef does not reach start, end or composite states.

A style that would load a file or a web address, such as url(…) or @import, is refused with a message, because the app loads nothing from outside Confluence. See Limits.

Dark mode

The diagram, the error panel, the zoom buttons and the editing window follow the theme you chose in Confluence: light, dark, or matching your system. When you switch theme, open diagrams switch too, without a reload.

Keep one diagram light

Some diagrams are drawn for a white background. To keep one light in the dark theme:

1. Press Edit (the pencil) on the macro.
2. Tick Always light: keep this diagram light in Confluence's dark theme.
3. Press Save and publish.

That diagram then shows light, on a white box of its own, for every reader who uses the dark theme. The others still follow the theme.

If a diagram is hard to read in dark mode, tick Always light for it.

Exports

PDF exports always show diagrams in the light theme. Word exports show the diagram text, not the drawing; see PDF and Word export.