Skip to content

Theme Configuration

Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.

Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the initialize call is used. For diagram specific customization, the init directive is used.

Available Themes

  1. default - This is the default theme for all diagrams.

  2. neutral - This theme is great for black and white documents that will be printed.

  3. dark - This theme goes well with dark-colored elements or dark-mode.

  4. forest - This theme contains shades of green.

  5. base - This is the only theme that can be modified. Use this theme as the base for customizations.

Site-wide Theme

To customize themes site-wide, call the initialize method on the mermaidAPI.

Example of initialize call setting theme to base:

  securityLevel: 'loose',
  theme: 'base',

Diagram-specific Themes

To customize the theme of an individual diagram, use the init directive.

Example of init directive setting the theme to forest:

Reminder: the only theme that can be customized is the base theme. The following section covers how to use themeVariables for customizations.

Customizing Themes with themeVariables

To make a custom theme, modify themeVariables via init.

You will need to use the base theme as it is the only modifiable theme.

themeVariablesModifiable with the init directiveObjectprimaryColor, primaryTextColor, lineColor (see full list)

Example of modifying themeVariables using the init directive:

Color and Color Calculation

To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, primaryBorderColor is derived from the primaryColor variable. So if the primaryColor variable is customized, Mermaid will adjust primaryBorderColor automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.

The theming engine will only recognize hex colors and not color names. So, the value #ff0000 will work, but red will not.

Theme Variables

VariableDefault valueDescription
darkModefalseAffects how derived colors are calculated. Set value to true for dark mode.
background#f4f4f4Used to calculate color for items that should either be background colored or contrasting to the background
fontFamilytrebuchet ms, verdana, arial
fontSize16pxFont size in pixels
primaryColor#fff4ddColor to be used as background in nodes, other colors will be derived from this
primaryTextColorcalculated from darkMode #ddd/#333Color to be used as text color in nodes using primaryColor
secondaryColorcalculated from primaryColor
primaryBorderColorcalculated from primaryColorColor to be used as border in nodes using primaryColor
secondaryBorderColorcalculated from secondaryColorColor to be used as border in nodes using secondaryColor
secondaryTextColorcalculated from secondaryColorColor to be used as text color in nodes using secondaryColor
tertiaryColorcalculated from primaryColor
tertiaryBorderColorcalculated from tertiaryColorColor to be used as border in nodes using tertiaryColor
tertiaryTextColorcalculated from tertiaryColorColor to be used as text color in nodes using tertiaryColor
noteBkgColor#fff5adColor used as background in notes
noteTextColor#333Text color in note rectangles
noteBorderColorcalculated from noteBkgColorBorder color in note rectangles
lineColorcalculated from background
textColorcalculated from primaryTextColorText in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram
mainBkgcalculated from primaryColorBackground in flowchart objects like rects/circles, class diagram classes, sequence diagram etc
errorBkgColortertiaryColorColor for syntax error message
errorTextColortertiaryTextColorColor for syntax error message

Flowchart Variables

VariableDefault valueDescription
nodeBorderprimaryBorderColorNode Border Color
clusterBkgtertiaryColorBackground in subgraphs
clusterBordertertiaryBorderColorCluster Border Color
defaultLinkColorlineColorLink Color
titleColortertiaryTextColorTitle Color
edgeLabelBackgroundcalculated from secondaryColor
nodeTextColorprimaryTextColorColor for text inside Nodes

Sequence Diagram Variables

VariableDefault valueDescription
actorBkgmainBkgActor Background Color
actorBorderprimaryBorderColorActor Border Color
actorTextColorprimaryTextColorActor Text Color
actorLineColorgreyActor Line Color
signalColortextColorSignal Color
signalTextColortextColorSignal Text Color
labelBoxBkgColoractorBkgLabel Box Background Color
labelBoxBorderColoractorBorderLabel Box Border Color
labelTextColoractorTextColorLabel Text Color
loopTextColoractorTextColorLoop Text Color
activationBorderColorcalculated from secondaryColorActivation Border Color
activationBkgColorsecondaryColorActivation Background Color
sequenceNumberColorcalculated from lineColorSequence Number Color

Pie Diagram Variables

VariableDefault valueDescription
pie1primaryColorFill for 1st section in pie diagram
pie2secondaryColorFill for 2nd section in pie diagram
pie3calculated from tertiaryFill for 3rd section in pie diagram
pie4calculated from primaryColorFill for 4th section in pie diagram
pie5calculated from secondaryColorFill for 5th section in pie diagram
pie6calculated from tertiaryColorFill for 6th section in pie diagram
pie7calculated from primaryColorFill for 7th section in pie diagram
pie8calculated from primaryColorFill for 8th section in pie diagram
pie9calculated from primaryColorFill for 9th section in pie diagram
pie10calculated from primaryColorFill for 10th section in pie diagram
pie11calculated from primaryColorFill for 11th section in pie diagram
pie12calculated from primaryColorFill for 12th section in pie diagram
pieTitleTextSize25pxTitle text size
pieTitleTextColortaskTextDarkColorTitle text color
pieSectionTextSize17pxText size of individual section labels
pieSectionTextColortextColorText color of individual section labels
pieLegendTextSize17pxText size of labels in diagram legend
pieLegendTextColortaskTextDarkColorText color of labels in diagram legend
pieStrokeColorblackBorder color of individual pie sections
pieStrokeWidth2pxBorder width of individual pie sections
pieOuterStrokeWidth2pxBorder width of pie diagram's outer circle
pieOuterStrokeColorblackBorder color of pie diagram's outer circle
pieOpacity0.7Opacity of individual pie sections

State Colors

VariableDefault valueDescription
altBackgroundtertiaryColorUsed for background in deep composite states

Class Colors

VariableDefault valueDescription
classTexttextColorColor of Text in class diagrams

User Journey Colors

VariableDefault valueDescription
fillType0primaryColorFill for 1st section in journey diagram
fillType1secondaryColorFill for 2nd section in journey diagram
fillType2calculated from primaryColorFill for 3rd section in journey diagram
fillType3calculated from secondaryColorFill for 4th section in journey diagram
fillType4calculated from primaryColorFill for 5th section in journey diagram
fillType5calculated from secondaryColorFill for 6th section in journey diagram
fillType6calculated from primaryColorFill for 7th section in journey diagram
fillType7calculated from secondaryColorFill for 8th section in journey diagram