Merge pull request #348 from bonanitech/mermaid-theme

Add configuration examples for themes in Mermaid diagrams

Author: knolleary

docs/api/ui/themes/index.md

@@ -12,9 +12,10 @@ The appearance of the editor can be customised using themes. Themes are packaged
 and installed as Node-RED plugins, and then selected via the `editorTheme.theme`
 property in the settings file.
 
- - [Creating theme CSS](#creating-theme-css)
- - [Packaging as a Theme Plugin](#packaging-as-a-theme-plugin)
- - [Theming the Monaco editor](#theming-the-monaco-editor)
+- [Creating theme CSS](#creating-theme-css)
+- [Packaging as a Theme Plugin](#packaging-as-a-theme-plugin)
+- [Theming the Monaco editor](#theming-the-monaco-editor)
+- [Theming the Mermaid diagrams](#theming-the-mermaid-diagrams)
 
 ### Creating theme CSS
 
@@ -241,3 +242,21 @@ RED.plugins.registerPlugin("my-custom-theme", {
 ```
 
 The specific details of how to create a Monaco theme is beyond the scope of our documentation.
+
+### Theming the Mermaid diagrams
+
+A theme plugin can also set the theme for the Mermaid diagramming and charting tool.
+
+Mermaid comes with a number of built-in themes available. The full list is [here](https://mermaid.js.org/config/theming.html#available-themes).
+
+The name of the theme can be provided in the plugin settings:
+
+```javascript
+RED.plugins.registerPlugin("my-custom-theme", {
+   type: "node-red-theme",
+   css: "style.css",
+   mermaid: {
+     theme: "dark" //Mermaid theme name
+   }
+ })
+ ```

docs/user-guide/runtime/configuration.md

@@ -237,6 +237,9 @@ The theme of the editor can be changed by using the following settings object. A
                 // The following only apply if the editor is set to "monaco"
                 theme: "vs", // Select a color theme for the text editor component. Must match the file name of a theme in packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme
             }
+        },
+        mermaid: {
+            theme: "default" // Select a color theme for the Mermaid diagramming and charting tool. Must match the name of a theme in https://mermaid.js.org/config/theming.html#available-themes
         }
     },