diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md index 5643dc7fb..f9afb15b8 100644 --- a/packages/mermaid/src/docs/config/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -41,12 +41,6 @@ Example of `init` directive setting the `theme` to `forest`: a --> b ``` -```mermaid -%%{init: {'theme':'forest'}}%% - graph TD - a --> b -``` - > **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations. ## Customizing Themes with `themeVariables` @@ -91,36 +85,6 @@ Example of modifying `themeVariables` using the `init` directive: 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 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.