marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 15:30:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3890 from BD103/patch-1

Browse Source 
Add links to theme listing
This commit is contained in:
Sidharth Vinod
2022-12-16 00:24:15 +05:30
committed by GitHub
parent ff7ed7f49f e2b05d3cf6
commit d6fad1bbd8
2 changed files with 131 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
docs/config/theming.md
View File

@@ -3,6 +3,12 @@
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. > ## 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). > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/theming.md](../../packages/mermaid/src/docs/config/theming.md).
>
> **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 # Theme Configuration
@@ -12,15 +18,15 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di
## Available Themes ## Available Themes
1. **default** - This is the default theme for all diagrams. 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** - This theme is great for black and white documents that will be printed. 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** - This theme goes well with dark-colored elements or dark-mode. 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** - This theme contains shades of green. 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** - This is the only theme that can be modified. Use this theme as the base for customizations. 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 ## Site-wide Theme
@@ -53,6 +59,18 @@ Example of `init` directive setting the `theme` to `forest`:
a --> b 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 customed is the `base` theme. The following section covers how to use `themeVariables` for customizations. > **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` ## Customizing Themes with `themeVariables`
@@ -127,6 +145,66 @@ Example of modifying `themeVariables` using the `init` directive:
end 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 ## 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. 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.

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

@@ -1,3 +1,9 @@
> **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 # Theme Configuration
Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0. Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.
@@ -6,15 +12,15 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di
## Available Themes ## Available Themes
1. **default** - This is the default theme for all diagrams. 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.
1. **neutral** - This theme is great for black and white documents that will be printed. 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.
1. **dark** - This theme goes well with dark-colored elements or dark-mode. 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.
1. **forest** - This theme contains shades of green. 4. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green.
1. **base** - This is the only theme that can be modified. Use this theme as the base for customizations. 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 ## Site-wide Theme
@@ -35,7 +41,13 @@ To customize the theme of an individual diagram, use the `init` directive.
Example of `init` directive setting the `theme` to `forest`: Example of `init` directive setting the `theme` to `forest`:
```mmd ```mermaid-example
%%{init: {'theme':'forest'}}%%
graph TD
a --> b
```
```mermaid
%%{init: {'theme':'forest'}}%% %%{init: {'theme':'forest'}}%%
graph TD graph TD
a --> b a --> b
@@ -85,6 +97,36 @@ Example of modifying `themeVariables` using the `init` directive:
end 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 ## 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. 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.