marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-06 17:16:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

docs(theme): document fontFamily customization in themeVariables

Browse Source
This commit is contained in:
nourhenta
2025-04-28 23:06:02 +01:00
parent 1d6a55a311
commit 379559c992
2 changed files with 48 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
docs/config/theming.md
View File

@@ -207,29 +207,30 @@ The theming engine will only recognize hex colors and not color names. So, the v
## Theme Variables ## Theme Variables
| Variable | Default value | Description | | Variable | Default value | Description |
| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | ---------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------- |
| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | | 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 | | background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background |
| fontFamily | trebuchet ms, verdana, arial | | | fontFamily | trebuchet ms, verdana, arial | Font family for diagram text; can be customized via `themeVariables`. |
| fontSize | 16px | Font size in pixels |
| primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this | \| fontSize | 16px | Font size in pixels |
| primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` | \| primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this |
| secondaryColor | calculated from primaryColor | | \| primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` |
| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | \| secondaryColor | calculated from primaryColor | |
| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | \| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` |
| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | \| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` |
| tertiaryColor | calculated from primaryColor | | \| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` |
| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | \| tertiaryColor | calculated from primaryColor | |
| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | \| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` |
| noteBkgColor | #fff5ad | Color used as background in notes | \| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` |
| noteTextColor | #333 | Text color in note rectangles | \| noteBkgColor | #fff5ad | Color used as background in notes |
| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | \| noteTextColor | #333 | Text color in note rectangles |
| lineColor | calculated from background | | \| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles |
| 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 | \| lineColor | calculated from background | |
| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | \| 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 |
| errorBkgColor | tertiaryColor | Color for syntax error message | \| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc |
| errorTextColor | tertiaryTextColor | Color for syntax error message | \| errorBkgColor | tertiaryColor | Color for syntax error message |
\| errorTextColor | tertiaryTextColor | Color for syntax error message |
## Flowchart Variables ## Flowchart Variables

47
packages/mermaid/src/docs/config/theming.md
View File

@@ -129,29 +129,30 @@ The theming engine will only recognize hex colors and not color names. So, the v
## Theme Variables ## Theme Variables
| Variable | Default value | Description | | Variable | Default value | Description |
| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | ---------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------- |
| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. | | 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 | | background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background |
| fontFamily | trebuchet ms, verdana, arial | | | fontFamily | trebuchet ms, verdana, arial | Font family for diagram text; can be customized via `themeVariables`. |
| fontSize | 16px | Font size in pixels |
| primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this | | fontSize | 16px | Font size in pixels |
| primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` | | primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this |
| secondaryColor | calculated from primaryColor | | | primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` |
| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` | | secondaryColor | calculated from primaryColor | |
| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` | | primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` |
| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` | | secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` |
| tertiaryColor | calculated from primaryColor | | | secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` |
| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` | | tertiaryColor | calculated from primaryColor | |
| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` | | tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` |
| noteBkgColor | #fff5ad | Color used as background in notes | | tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` |
| noteTextColor | #333 | Text color in note rectangles | | noteBkgColor | #fff5ad | Color used as background in notes |
| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles | | noteTextColor | #333 | Text color in note rectangles |
| lineColor | calculated from background | | | noteBorderColor | calculated from noteBkgColor | Border color in note rectangles |
| 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 | | lineColor | calculated from background | |
| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc | | 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 |
| errorBkgColor | tertiaryColor | Color for syntax error message | | mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc |
| errorTextColor | tertiaryTextColor | Color for syntax error message | | errorBkgColor | tertiaryColor | Color for syntax error message |
| errorTextColor | tertiaryTextColor | Color for syntax error message |
## Flowchart Variables ## Flowchart Variables