Merge pull request #3890 from BD103/patch-1

Add links to theme listing
2025-09-19 07:19:41 +02:00 · 2022-12-16 00:24:15 +05:30
parent ff7ed7f49f e2b05d3cf6
commit d6fad1bbd8
2 changed files with 131 additions and 11 deletions
--- 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

@@ -12,15 +18,15 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di

 ## 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

@@ -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.
--- a/packages/mermaid/src/docs/config/theming.md
+++ b/packages/mermaid/src/docs/config/theming.md
@@ -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

 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

-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

@@ -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`:

-```mmd
+```mermaid-example
+%%{init: {'theme':'forest'}}%%
+  graph TD
+    a --> b
+```
+
+```mermaid
 %%{init: {'theme':'forest'}}%%
  graph TD
    a --> b
@@ -85,6 +97,36 @@ 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.