Merge branch 'node-red:master' into feature/sq_p4nr

Author: biancode

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
 
@@ -130,7 +131,7 @@ Monaco editor options including what theme it should use.
 
 #### Setting the Monaco theme by name
 
-Monaco comes with a number of built-in themes available. The full list is [here](https://github.com/node-red/node-red/tree/master/packages/node_modules/%40node-red/editor-client/src/vendor/monaco/dist/theme). Additional settings for Monaco options can be found [here](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html).
+Monaco comes with a number of built-in themes available. The full list is [here](https://github.com/node-red/node-red/tree/master/packages/node_modules/%40node-red/editor-client/src/vendor/monaco/dist/theme). Additional settings for Monaco options can be found [here](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html).
 
 The name of the theme can be provided in the plugin settings:
 
@@ -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
         }
     },
 

index.html

@@ -7,7 +7,7 @@
             <div class="content">
                 <h1>Node-RED</h1>
                 <h2>Low-code programming for event-driven applications</h2>
-                <p>Latest version: <a href="https://www.npmjs.com/package/node-red"><span class="node-red-latest-version">v3.1.7</span> (npm)</a></p>
+                <p>Latest version: <a href="https://www.npmjs.com/package/node-red"><span class="node-red-latest-version">v3.1.8</span> (npm)</a></p>
                 <!-- <img src="images/node-red-title-flow.png" /> -->
             </div>
         </div>
@@ -120,6 +120,7 @@ <h4>In the cloud</h4>
         <div class="content">
             <h3>Who's using Node-RED?</h3>
             <ul id="user-list">
+                <li><a href="https://www.echounify.com/"><img src="users/echo-unify-systems.png"/></a></li>
                 <li><a href="https://www.overview.ai/"><img src="users/overviewai.jpg"/></a></li>
                 <li><a href="https://www.ubos.tech/"><img src="users/ubos.jpg"/></a></li>
                 <li><a href="https://www.bitpool.com/"><img src="users/bitpool.png"/></a></li>