Selecting a theme
You can tailor your Mermaid diagrams to match the colors of your site or documentation. Themes in Mermaid are a combination of different color settings for rendering a diagram.
In this section, we will cover how to select a pre-made theme in Mermaid for websites or individual diagrams. The default theme in Mermaid is fairly discrete but not completely neutral. There are a few themes to choose from that could match your needs. On top of that, customization is also an option.
In the configuration data you pass into Mermaid, the theme is set by a top-level variable called theme
.
Similar to other configurations, altering the theme
variable can be done for the whole site using an initialize
call, or just for one diagram by using a directive in the diagram.
We will look in more detail at how to select a theme using these two approaches in the upcoming subsections.
Changing the theme for a whole site
When you want to set a theme for a whole site, the configuration...