theming.md · grove

14.9 KB247 lines

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