From 49ca2e358897ab366ac008b89603025fcf188aa0 Mon Sep 17 00:00:00 2001 From: BD103 <59022059+BD103@users.noreply.github.com> Date: Mon, 5 Dec 2022 17:41:30 -0500 Subject: [PATCH 1/3] feat: add links to theme listing --- packages/mermaid/src/docs/config/theming.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md index 78f3546cc..b9c5d0850 100644 --- a/packages/mermaid/src/docs/config/theming.md +++ b/packages/mermaid/src/docs/config/theming.md @@ -10,15 +10,15 @@ Themes follow and build upon the Levels of Configuration, and employ `directives The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls. -1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes. +1. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes. -2. **forest**- A theme full of light greens that is easy on the eyes. +2. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - A theme full of light greens that is easy on the eyes. -3. **dark**- A theme that would go well with other dark-colored elements. +3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - A theme that would go well with other dark-colored elements. -4. **default**- The default theme for all diagrams. +4. [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - The default theme for all diagrams. -5. **neutral**- The theme to be used for black and white printing. +5. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - The theme to be used for black and white printing. ## Site-wide Themes From 992d1623a7168d98894452ef4932dca9f7e6e123 Mon Sep 17 00:00:00 2001 From: BD103 <59022059+BD103@users.noreply.github.com> Date: Thu, 15 Dec 2022 09:46:00 -0500 Subject: [PATCH 2/3] chore: update docs folder --- docs/config/theming.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/config/theming.md b/docs/config/theming.md index cfd86caa0..ee5831fbb 100644 --- a/docs/config/theming.md +++ b/docs/config/theming.md @@ -16,15 +16,15 @@ Themes follow and build upon the Levels of Configuration, and employ `directives The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls. -1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes. +1. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes. -2. **forest**- A theme full of light greens that is easy on the eyes. +2. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - A theme full of light greens that is easy on the eyes. -3. **dark**- A theme that would go well with other dark-colored elements. +3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - A theme that would go well with other dark-colored elements. -4. **default**- The default theme for all diagrams. +4. [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - The default theme for all diagrams. -5. **neutral**- The theme to be used for black and white printing. +5. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - The theme to be used for black and white printing. ## Site-wide Themes From e2b05d3cf68ba1f89b163bc51d4109167b59c0a5 Mon Sep 17 00:00:00 2001 From: BD103 Date: Thu, 15 Dec 2022 18:24:23 +0000 Subject: [PATCH 3/3] Update docs --- docs/config/theming.md | 78 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) diff --git a/docs/config/theming.md b/docs/config/theming.md index 3fcd1cda1..8ccab7804 100644 --- a/docs/config/theming.md +++ b/docs/config/theming.md @@ -3,6 +3,12 @@ > ## 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). +> +> **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 @@ -53,6 +59,18 @@ Example of `init` directive setting the `theme` to `forest`: 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. ## Customizing Themes with `themeVariables` @@ -127,6 +145,66 @@ Example of modifying `themeVariables` using the `init` directive: 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 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.