mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
25 lines
816 B
Markdown
25 lines
816 B
Markdown
|
# Theming
|
||
|
|
|
||
|
|
Mermaid as a system for theming in place. With it a site integrator can override a vast majority of attributes used when rendering a diagram.
|
||
|
|
|
||
|
|
The settings for a thime can be set globally for the site with the initialize call. The example below highlights how that can look:
|
||
|
|
|
||
|
|
```
|
||
|
|
// example
|
||
|
|
```
|
||
|
|
|
||
|
|
It is also possible to override theme settings locally in a diagram using directives.
|
||
|
|
|
||
|
|
```
|
||
|
|
// example
|
||
|
|
```
|
||
|
|
|
||
|
|
The easiest way to make a custom theme is to start with the base theme, the theme named base and just modify these three variables:
|
||
|
|
* primaryColor - the base color for the theme
|
||
|
|
* secondaryColor - A compliment color to the primary color. This color is made lighter and used as background in subgraphs for instance
|
||
|
|
|
||
|
|
More specific color variables it is åpossible to change:
|
||
|
|
* lineColor
|
||
|
|
* textColor
|
||
|
|
|