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

Update theming.md

Browse Source
This commit is contained in:
Neil Cuzon
2020-07-28 18:56:17 -07:00
committed by GitHub
parent db03b5b102
commit 2ecda17618
1 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/theming.md
View File

@@ -11,11 +11,8 @@ Examples of Initalize
'securityLevel': 'loose', 'theme': 'base' 'securityLevel': 'loose', 'theme': 'base'
}); });
``` ```
The settings for a theme can be set globally for the site with the initialize call. The example below highlights how that can look: **Notes**: Only site owners can use the `mermaidAPI.initialize` call to set values. Site-Users will have to use `%%init%%` to modify configurations.
```
// example
```
## Themes at the Local or Current Level ## Themes at the Local or Current Level
When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array. When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
@@ -27,7 +24,7 @@ When Generating a diagram using on a webpage that supports mermaid. It is also p
``` ```
Here is an example of a showcase flowchart with theme set to base, with the default variables set: Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default:
```mermaid ```mermaid
%%{init: {'theme':'base'}}%% %%{init: {'theme':'base'}}%%
graph TD graph TD
@@ -46,16 +43,21 @@ Here is an example of a showcase flowchart with theme set to base, with the defa
end end
``` ```
# Making a Custom Theme # Making a Custom Theme with `themeVariables`
The easiest way to make a custom theme is to start with the base theme, the theme named `base` and just modify theme variables through `themeVariables`, via `%%init%%.
* primaryColor - the base color for the theme The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
More specific color variables it is possible to change: | Parameter | Description |Type | Required | Objects contained|
* lineColor | --- | --- | --- | --- | --- |
* textColor |themeVariables | Array containing objects, modifiable with the `%%init%%` directive| Array | Required | primaryColor, lineColor, textColor|
Here is an example of overriding the primary color and giving everything a little different look, using `%%init%%`. **Notes**:
Leaving it empty will set the values to default
* primaryColor- the base color for the theme
* lineColor- the line color for the theme
* textColor-the text color for the theme
**Here is an example of overriding `primaryColor` and giving everything a ifferent look, using `%%init%%`.
``` ```
mermaid mermaid
%%{init: {'theme':'base', 'themeVariables': {primaryColor: '#ff0000'}}%% %%{init: {'theme':'base', 'themeVariables': {primaryColor: '#ff0000'}}%%
@@ -78,8 +80,8 @@ The Theming Engine does not admit color codes and will only accept proper color
# Examples: # Examples:
When adjusting a theme it might be helpful to look at the theme with these diagrams to evaluate that everything is visiable and looks good. When adjusting a theme it might be helpful to look at the theme with these diagrams to evaluate that everything is visible and looks good.
In the following examples, the directive `init` is used, with the `theme` being declared as `base`. for more information on this, read the [8.6.0documentation](/8.6.0_docs.md) In the following examples, the directive `init` is used, with the `theme` being declared as `base`. for more information on this, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
### Flowchart ### Flowchart
``` ```