| 6dd74de | | | 1 | > **Warning** |
| 6dd74de | | | 2 | > |
| 6dd74de | | | 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 6dd74de | | | 4 | > |
| 6dd74de | | | 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/theming.md](../../packages/mermaid/src/docs/config/theming.md). |
| 6dd74de | | | 6 | |
| 6dd74de | | | 7 | # Theme Configuration |
| 6dd74de | | | 8 | |
| 6dd74de | | | 9 | Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0. |
| 6dd74de | | | 10 | |
| 6dd74de | | | 11 | 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, frontmatter config is used. |
| 6dd74de | | | 12 | |
| 6dd74de | | | 13 | ## Available Themes |
| 6dd74de | | | 14 | |
| 6dd74de | | | 15 | 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. |
| 6dd74de | | | 16 | |
| 6dd74de | | | 17 | 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. |
| 6dd74de | | | 18 | |
| 6dd74de | | | 19 | 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. |
| 6dd74de | | | 20 | |
| 6dd74de | | | 21 | 4. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green. |
| 6dd74de | | | 22 | |
| 6dd74de | | | 23 | 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. |
| 6dd74de | | | 24 | |
| 6dd74de | | | 25 | ## Site-wide Theme |
| 6dd74de | | | 26 | |
| 6dd74de | | | 27 | To customize themes site-wide, call the `initialize` method on the `mermaid`. |
| 6dd74de | | | 28 | |
| 6dd74de | | | 29 | Example of `initialize` call setting `theme` to `base`: |
| 6dd74de | | | 30 | |
| 6dd74de | | | 31 | ```javascript |
| 6dd74de | | | 32 | mermaid.initialize({ |
| 6dd74de | | | 33 | securityLevel: 'loose', |
| 6dd74de | | | 34 | theme: 'base', |
| 6dd74de | | | 35 | }); |
| 6dd74de | | | 36 | ``` |
| 6dd74de | | | 37 | |
| 6dd74de | | | 38 | ## Diagram-specific Themes |
| 6dd74de | | | 39 | |
| 6dd74de | | | 40 | To customize the theme of an individual diagram, use frontmatter config. |
| 6dd74de | | | 41 | |
| 6dd74de | | | 42 | Example of frontmatter config setting the `theme` to `forest`: |
| 6dd74de | | | 43 | |
| 6dd74de | | | 44 | ```mermaid-example |
| 6dd74de | | | 45 | --- |
| 6dd74de | | | 46 | config: |
| 6dd74de | | | 47 | theme: 'forest' |
| 6dd74de | | | 48 | --- |
| 6dd74de | | | 49 | graph TD |
| 6dd74de | | | 50 | a --> b |
| 6dd74de | | | 51 | ``` |
| 6dd74de | | | 52 | |
| 6dd74de | | | 53 | ```mermaid |
| 6dd74de | | | 54 | --- |
| 6dd74de | | | 55 | config: |
| 6dd74de | | | 56 | theme: 'forest' |
| 6dd74de | | | 57 | --- |
| 6dd74de | | | 58 | graph TD |
| 6dd74de | | | 59 | a --> b |
| 6dd74de | | | 60 | ``` |
| 6dd74de | | | 61 | |
| 6dd74de | | | 62 | > **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations. |
| 6dd74de | | | 63 | |
| 6dd74de | | | 64 | ## Customizing Themes with `themeVariables` |
| 6dd74de | | | 65 | |
| 6dd74de | | | 66 | To make a custom theme, modify `themeVariables` via frontmatter config. |
| 6dd74de | | | 67 | |
| 6dd74de | | | 68 | You will need to use the [base](#available-themes) theme as it is the only modifiable theme. |
| 6dd74de | | | 69 | |
| 6dd74de | | | 70 | | Parameter | Description | Type | Properties | |
| 6dd74de | | | 71 | | -------------- | ---------------------------------- | ------ | ----------------------------------------------------------------------------------- | |
| 6dd74de | | | 72 | | themeVariables | Modifiable with frontmatter config | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) | |
| 6dd74de | | | 73 | |
| 6dd74de | | | 74 | Example of modifying `themeVariables` using frontmatter config: |
| 6dd74de | | | 75 | |
| 6dd74de | | | 76 | ```mermaid-example |
| 6dd74de | | | 77 | --- |
| 6dd74de | | | 78 | config: |
| 6dd74de | | | 79 | theme: 'base' |
| 6dd74de | | | 80 | themeVariables: |
| 6dd74de | | | 81 | primaryColor: '#BB2528' |
| 6dd74de | | | 82 | primaryTextColor: '#fff' |
| 6dd74de | | | 83 | primaryBorderColor: '#7C0000' |
| 6dd74de | | | 84 | lineColor: '#F8B229' |
| 6dd74de | | | 85 | secondaryColor: '#006100' |
| 6dd74de | | | 86 | tertiaryColor: '#fff' |
| 6dd74de | | | 87 | --- |
| 6dd74de | | | 88 | graph TD |
| 6dd74de | | | 89 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 90 | B --> C{Let me think} |
| 6dd74de | | | 91 | B --> G[/Another/] |
| 6dd74de | | | 92 | C ==>|One| D[Laptop] |
| 6dd74de | | | 93 | C -->|Two| E[iPhone] |
| 6dd74de | | | 94 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 95 | subgraph section |
| 6dd74de | | | 96 | C |
| 6dd74de | | | 97 | D |
| 6dd74de | | | 98 | E |
| 6dd74de | | | 99 | F |
| 6dd74de | | | 100 | G |
| 6dd74de | | | 101 | end |
| 6dd74de | | | 102 | ``` |
| 6dd74de | | | 103 | |
| 6dd74de | | | 104 | ```mermaid |
| 6dd74de | | | 105 | --- |
| 6dd74de | | | 106 | config: |
| 6dd74de | | | 107 | theme: 'base' |
| 6dd74de | | | 108 | themeVariables: |
| 6dd74de | | | 109 | primaryColor: '#BB2528' |
| 6dd74de | | | 110 | primaryTextColor: '#fff' |
| 6dd74de | | | 111 | primaryBorderColor: '#7C0000' |
| 6dd74de | | | 112 | lineColor: '#F8B229' |
| 6dd74de | | | 113 | secondaryColor: '#006100' |
| 6dd74de | | | 114 | tertiaryColor: '#fff' |
| 6dd74de | | | 115 | --- |
| 6dd74de | | | 116 | graph TD |
| 6dd74de | | | 117 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 118 | B --> C{Let me think} |
| 6dd74de | | | 119 | B --> G[/Another/] |
| 6dd74de | | | 120 | C ==>|One| D[Laptop] |
| 6dd74de | | | 121 | C -->|Two| E[iPhone] |
| 6dd74de | | | 122 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 123 | subgraph section |
| 6dd74de | | | 124 | C |
| 6dd74de | | | 125 | D |
| 6dd74de | | | 126 | E |
| 6dd74de | | | 127 | F |
| 6dd74de | | | 128 | G |
| 6dd74de | | | 129 | end |
| 6dd74de | | | 130 | ``` |
| 6dd74de | | | 131 | |
| 6dd74de | | | 132 | ## Color and Color Calculation |
| 6dd74de | | | 133 | |
| 6dd74de | | | 134 | 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. |
| 6dd74de | | | 135 | |
| 6dd74de | | | 136 | The theming engine will only recognize hex colors and not color names. So, the value `#ff0000` will work, but `red` will not. |
| 6dd74de | | | 137 | |
| 6dd74de | | | 138 | ## Theme Variables |
| 6dd74de | | | 139 | |
| 6dd74de | | | 140 | | Variable | Default value | Description | |
| 6dd74de | | | 141 | | -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | |
| 6dd74de | | | 142 | | darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | |
| 6dd74de | | | 143 | | background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background | |
| 6dd74de | | | 144 | | fontFamily | trebuchet ms, verdana, arial | Font family for diagram text | |
| 6dd74de | | | 145 | | fontSize | 16px | Font size in pixels | |
| 6dd74de | | | 146 | | primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this | |
| 6dd74de | | | 147 | | primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` | |
| 6dd74de | | | 148 | | secondaryColor | calculated from primaryColor | | |
| 6dd74de | | | 149 | | primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | |
| 6dd74de | | | 150 | | secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | |
| 6dd74de | | | 151 | | secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | |
| 6dd74de | | | 152 | | tertiaryColor | calculated from primaryColor | | |
| 6dd74de | | | 153 | | tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | |
| 6dd74de | | | 154 | | tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | |
| 6dd74de | | | 155 | | noteBkgColor | #fff5ad | Color used as background in notes | |
| 6dd74de | | | 156 | | noteTextColor | #333 | Text color in note rectangles | |
| 6dd74de | | | 157 | | noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | |
| 6dd74de | | | 158 | | lineColor | calculated from background | | |
| 6dd74de | | | 159 | | 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 | |
| 6dd74de | | | 160 | | mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | |
| 6dd74de | | | 161 | | errorBkgColor | tertiaryColor | Color for syntax error message | |
| 6dd74de | | | 162 | | errorTextColor | tertiaryTextColor | Color for syntax error message | |
| 6dd74de | | | 163 | |
| 6dd74de | | | 164 | ## Flowchart Variables |
| 6dd74de | | | 165 | |
| 6dd74de | | | 166 | | Variable | Default value | Description | |
| 6dd74de | | | 167 | | ------------------- | ------------------------------ | --------------------------- | |
| 6dd74de | | | 168 | | nodeBorder | primaryBorderColor | Node Border Color | |
| 6dd74de | | | 169 | | clusterBkg | tertiaryColor | Background in subgraphs | |
| 6dd74de | | | 170 | | clusterBorder | tertiaryBorderColor | Cluster Border Color | |
| 6dd74de | | | 171 | | defaultLinkColor | lineColor | Link Color | |
| 6dd74de | | | 172 | | titleColor | tertiaryTextColor | Title Color | |
| 6dd74de | | | 173 | | edgeLabelBackground | calculated from secondaryColor | | |
| 6dd74de | | | 174 | | nodeTextColor | primaryTextColor | Color for text inside Nodes | |
| 6dd74de | | | 175 | |
| 6dd74de | | | 176 | ## Sequence Diagram Variables |
| 6dd74de | | | 177 | |
| 6dd74de | | | 178 | | Variable | Default value | Description | |
| 6dd74de | | | 179 | | --------------------- | ------------------------------ | --------------------------- | |
| 6dd74de | | | 180 | | actorBkg | mainBkg | Actor Background Color | |
| 6dd74de | | | 181 | | actorBorder | primaryBorderColor | Actor Border Color | |
| 6dd74de | | | 182 | | actorTextColor | primaryTextColor | Actor Text Color | |
| 6dd74de | | | 183 | | actorLineColor | actorBorder | Actor Line Color | |
| 6dd74de | | | 184 | | signalColor | textColor | Signal Color | |
| 6dd74de | | | 185 | | signalTextColor | textColor | Signal Text Color | |
| 6dd74de | | | 186 | | labelBoxBkgColor | actorBkg | Label Box Background Color | |
| 6dd74de | | | 187 | | labelBoxBorderColor | actorBorder | Label Box Border Color | |
| 6dd74de | | | 188 | | labelTextColor | actorTextColor | Label Text Color | |
| 6dd74de | | | 189 | | loopTextColor | actorTextColor | Loop Text Color | |
| 6dd74de | | | 190 | | activationBorderColor | calculated from secondaryColor | Activation Border Color | |
| 6dd74de | | | 191 | | activationBkgColor | secondaryColor | Activation Background Color | |
| 6dd74de | | | 192 | | sequenceNumberColor | calculated from lineColor | Sequence Number Color | |
| 6dd74de | | | 193 | |
| 6dd74de | | | 194 | ## Pie Diagram Variables |
| 6dd74de | | | 195 | |
| 6dd74de | | | 196 | | Variable | Default value | Description | |
| 6dd74de | | | 197 | | ------------------- | ------------------------------ | ------------------------------------------ | |
| 6dd74de | | | 198 | | pie1 | primaryColor | Fill for 1st section in pie diagram | |
| 6dd74de | | | 199 | | pie2 | secondaryColor | Fill for 2nd section in pie diagram | |
| 6dd74de | | | 200 | | pie3 | calculated from tertiary | Fill for 3rd section in pie diagram | |
| 6dd74de | | | 201 | | pie4 | calculated from primaryColor | Fill for 4th section in pie diagram | |
| 6dd74de | | | 202 | | pie5 | calculated from secondaryColor | Fill for 5th section in pie diagram | |
| 6dd74de | | | 203 | | pie6 | calculated from tertiaryColor | Fill for 6th section in pie diagram | |
| 6dd74de | | | 204 | | pie7 | calculated from primaryColor | Fill for 7th section in pie diagram | |
| 6dd74de | | | 205 | | pie8 | calculated from primaryColor | Fill for 8th section in pie diagram | |
| 6dd74de | | | 206 | | pie9 | calculated from primaryColor | Fill for 9th section in pie diagram | |
| 6dd74de | | | 207 | | pie10 | calculated from primaryColor | Fill for 10th section in pie diagram | |
| 6dd74de | | | 208 | | pie11 | calculated from primaryColor | Fill for 11th section in pie diagram | |
| 6dd74de | | | 209 | | pie12 | calculated from primaryColor | Fill for 12th section in pie diagram | |
| 6dd74de | | | 210 | | pieTitleTextSize | 25px | Title text size | |
| 6dd74de | | | 211 | | pieTitleTextColor | taskTextDarkColor | Title text color | |
| 6dd74de | | | 212 | | pieSectionTextSize | 17px | Text size of individual section labels | |
| 6dd74de | | | 213 | | pieSectionTextColor | textColor | Text color of individual section labels | |
| 6dd74de | | | 214 | | pieLegendTextSize | 17px | Text size of labels in diagram legend | |
| 6dd74de | | | 215 | | pieLegendTextColor | taskTextDarkColor | Text color of labels in diagram legend | |
| 6dd74de | | | 216 | | pieStrokeColor | black | Border color of individual pie sections | |
| 6dd74de | | | 217 | | pieStrokeWidth | 2px | Border width of individual pie sections | |
| 6dd74de | | | 218 | | pieOuterStrokeWidth | 2px | Border width of pie diagram's outer circle | |
| 6dd74de | | | 219 | | pieOuterStrokeColor | black | Border color of pie diagram's outer circle | |
| 6dd74de | | | 220 | | pieOpacity | 0.7 | Opacity of individual pie sections | |
| 6dd74de | | | 221 | |
| 6dd74de | | | 222 | ## State Colors |
| 6dd74de | | | 223 | |
| 6dd74de | | | 224 | | Variable | Default value | Description | |
| 6dd74de | | | 225 | | ------------- | ---------------- | -------------------------------------------- | |
| 6dd74de | | | 226 | | labelColor | primaryTextColor | | |
| 6dd74de | | | 227 | | altBackground | tertiaryColor | Used for background in deep composite states | |
| 6dd74de | | | 228 | |
| 6dd74de | | | 229 | ## Class Colors |
| 6dd74de | | | 230 | |
| 6dd74de | | | 231 | | Variable | Default value | Description | |
| 6dd74de | | | 232 | | --------- | ------------- | ------------------------------- | |
| 6dd74de | | | 233 | | classText | textColor | Color of Text in class diagrams | |
| 6dd74de | | | 234 | |
| 6dd74de | | | 235 | ## User Journey Colors |
| 6dd74de | | | 236 | |
| 6dd74de | | | 237 | | Variable | Default value | Description | |
| 6dd74de | | | 238 | | --------- | ------------------------------ | --------------------------------------- | |
| 6dd74de | | | 239 | | fillType0 | primaryColor | Fill for 1st section in journey diagram | |
| 6dd74de | | | 240 | | fillType1 | secondaryColor | Fill for 2nd section in journey diagram | |
| 6dd74de | | | 241 | | fillType2 | calculated from primaryColor | Fill for 3rd section in journey diagram | |
| 6dd74de | | | 242 | | fillType3 | calculated from secondaryColor | Fill for 4th section in journey diagram | |
| 6dd74de | | | 243 | | fillType4 | calculated from primaryColor | Fill for 5th section in journey diagram | |
| 6dd74de | | | 244 | | fillType5 | calculated from secondaryColor | Fill for 6th section in journey diagram | |
| 6dd74de | | | 245 | | fillType6 | calculated from primaryColor | Fill for 7th section in journey diagram | |
| 6dd74de | | | 246 | | fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram | |