Skip to content
On this page

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:

%%{init: {'theme':'forest'}}%%
  graph TD
    a --> b

Reminder: the only theme that can be customed 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:

  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#BB2528',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#7C0000',
      'lineColor': '#F8B229',
      'secondaryColor': '#006100',
      'tertiaryColor': '#fff'
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section

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
primaryBorderColorcalculated from primaryColorColor to be used as border in nodes using primaryColor
primaryBorderColorcalculated from primaryColorColor to be used as border in nodes using primaryColor
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
primaryBorderColorcalculated from primaryColorColor to be used as border in nodes using primaryColor
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

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