Customizing a theme using theme variables
In this section, we will explore the process of creating your own custom theme for Mermaid.
If you find that none of the pre-made themes look good with the colors on your site, then you can create your own custom tailor-made theme using the dynamic theming engine in Mermaid. The same thing is true if you think that some colors are off when writing a particular diagram.
In the following example, we make configuration changes using directives, but you can of course set the custom theme on a site level using a mermaid.initialize call.
Start by setting the theme to base, using the highlighted directive in the following example:
%%{init:{"theme":"base"}}%%
flowchart LR
Batter --> Baking
subgraph Batter
a[Whip eggs and milk] -- whipped --> b[Add flour and salt<br/>and whip the batter]
b-->d
d{Smooth?} -- yes...
