> **Warning** > > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. > > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/theming.md](../../packages/mermaid/src/docs/config/theming.md). # 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**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams. 2. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed. 3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode. 4. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green. 5. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - 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 `mermaid`. Example of `initialize` call setting `theme` to `base`: ```javascript mermaid.initialize({ 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`: ```mermaid-example %%{init: {'theme':'forest'}}%% graph TD a --> b ``` ```mermaid %%{init: {'theme':'forest'}}%% graph TD a --> b ``` ```mermaid-example %%{init: {'theme':'forest'}}%% graph TD a --> b ``` ```mermaid %%{init: {'theme':'forest'}}%% graph TD a --> b ``` > **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](#available-themes) theme as it is the only modifiable theme. | Parameter | Description | Type | Properties | | -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- | | themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) | Example of modifying `themeVariables` using the `init` directive: ```mermaid-example %%{ 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 C D E F G end ``` ```mermaid %%{ 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 C D E F G end ``` ```mermaid-example %%{ 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 C D E F G end ``` ```mermaid %%{ 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 C D E F G end ``` ## 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 | Variable | Default value | Description | | -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | | background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background | | fontFamily | trebuchet ms, verdana, arial | | | fontSize | 16px | Font size in pixels | | primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this | | primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` | | secondaryColor | calculated from primaryColor | | | primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | | secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | | secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | | tertiaryColor | calculated from primaryColor | | | tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | | tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | | noteBkgColor | #fff5ad | Color used as background in notes | | noteTextColor | #333 | Text color in note rectangles | | noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | | lineColor | calculated from background | | | textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram | | mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | | errorBkgColor | tertiaryColor | Color for syntax error message | | errorTextColor | tertiaryTextColor | Color for syntax error message | ## Flowchart Variables | Variable | Default value | Description | | ------------------- | ------------------------------ | --------------------------- | | nodeBorder | primaryBorderColor | Node Border Color | | clusterBkg | tertiaryColor | Background in subgraphs | | clusterBorder | tertiaryBorderColor | Cluster Border Color | | defaultLinkColor | lineColor | Link Color | | titleColor | tertiaryTextColor | Title Color | | edgeLabelBackground | calculated from secondaryColor | | | nodeTextColor | primaryTextColor | Color for text inside Nodes | ## Sequence Diagram Variables | Variable | Default value | Description | | --------------------- | ------------------------------ | --------------------------- | | actorBkg | mainBkg | Actor Background Color | | actorBorder | primaryBorderColor | Actor Border Color | | actorTextColor | primaryTextColor | Actor Text Color | | actorLineColor | actorBorder | Actor Line Color | | signalColor | textColor | Signal Color | | signalTextColor | textColor | Signal Text Color | | labelBoxBkgColor | actorBkg | Label Box Background Color | | labelBoxBorderColor | actorBorder | Label Box Border Color | | labelTextColor | actorTextColor | Label Text Color | | loopTextColor | actorTextColor | Loop Text Color | | activationBorderColor | calculated from secondaryColor | Activation Border Color | | activationBkgColor | secondaryColor | Activation Background Color | | sequenceNumberColor | calculated from lineColor | Sequence Number Color | ## Pie Diagram Variables | Variable | Default value | Description | | ------------------- | ------------------------------ | ------------------------------------------ | | pie1 | primaryColor | Fill for 1st section in pie diagram | | pie2 | secondaryColor | Fill for 2nd section in pie diagram | | pie3 | calculated from tertiary | Fill for 3rd section in pie diagram | | pie4 | calculated from primaryColor | Fill for 4th section in pie diagram | | pie5 | calculated from secondaryColor | Fill for 5th section in pie diagram | | pie6 | calculated from tertiaryColor | Fill for 6th section in pie diagram | | pie7 | calculated from primaryColor | Fill for 7th section in pie diagram | | pie8 | calculated from primaryColor | Fill for 8th section in pie diagram | | pie9 | calculated from primaryColor | Fill for 9th section in pie diagram | | pie10 | calculated from primaryColor | Fill for 10th section in pie diagram | | pie11 | calculated from primaryColor | Fill for 11th section in pie diagram | | pie12 | calculated from primaryColor | Fill for 12th section in pie diagram | | pieTitleTextSize | 25px | Title text size | | pieTitleTextColor | taskTextDarkColor | Title text color | | pieSectionTextSize | 17px | Text size of individual section labels | | pieSectionTextColor | textColor | Text color of individual section labels | | pieLegendTextSize | 17px | Text size of labels in diagram legend | | pieLegendTextColor | taskTextDarkColor | Text color of labels in diagram legend | | pieStrokeColor | black | Border color of individual pie sections | | pieStrokeWidth | 2px | Border width of individual pie sections | | pieOuterStrokeWidth | 2px | Border width of pie diagram's outer circle | | pieOuterStrokeColor | black | Border color of pie diagram's outer circle | | pieOpacity | 0.7 | Opacity of individual pie sections | ## State Colors | Variable | Default value | Description | | ------------- | ---------------- | -------------------------------------------- | | labelColor | primaryTextColor | | | altBackground | tertiaryColor | Used for background in deep composite states | ## Class Colors | Variable | Default value | Description | | --------- | ------------- | ------------------------------- | | classText | textColor | Color of Text in class diagrams | ## User Journey Colors | Variable | Default value | Description | | --------- | ------------------------------ | --------------------------------------- | | fillType0 | primaryColor | Fill for 1st section in journey diagram | | fillType1 | secondaryColor | Fill for 2nd section in journey diagram | | fillType2 | calculated from primaryColor | Fill for 3rd section in journey diagram | | fillType3 | calculated from secondaryColor | Fill for 4th section in journey diagram | | fillType4 | calculated from primaryColor | Fill for 5th section in journey diagram | | fillType5 | calculated from secondaryColor | Fill for 6th section in journey diagram | | fillType6 | calculated from primaryColor | Fill for 7th section in journey diagram | | fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram |