Add support for Mermaid themes

DEVELOPMENT.md

@@ -32,11 +32,13 @@ With the development environment initialized, follow these steps to create a new
 
 6. ***OPTIONAL*** - If additional customizations are needed, add them to `themes/<theme-name>/<theme-name>-custom.css`.
 
-7. Refresh Node-RED in the browser to preview the changes
+7. ***OPTIONAL*** - Customize Mermaid's theme by adding `"<mermaid-theme-name>"` to `themes/<theme-name>/<theme-name>-mermaid.json`. Replace `<mermaid-theme-name>` with the name of one of the themes in this [list](https://mermaid.js.org/config/theming.html#available-themes). If the file doesn't exist, the value `"dark"` is used by default.
 
-8. Repeat steps 4 to 7 as needed. When finished, press `ctrl-D` to quit the development environment.
+8. Refresh Node-RED in the browser to preview the changes
 
-9. Commit, push, and create a pull request.
+9. Repeat steps 4 to 7 as needed. When finished, press `ctrl-D` to quit the development environment.
+
+10. Commit, push, and create a pull request.
 
 ***NOTE:** Replace `<theme-name>` with the name of the theme you are working on.*
 

themes.js

@@ -14,6 +14,8 @@ module.exports = function (RED) {
         const themeCSS = themeName + '.min.css'
         const themeCustomCSS = themeName + '-custom.min.css'
         const scrollbarsCSS = 'common/scrollbars.min.css'
+        const mermaidTheme = existsSync(path.join(themePath, `${themeName}-mermaid.json`)) ? JSON.parse(readFileSync(path.join(themePath, `${themeName}-mermaid.json`), 'utf-8')) : "dark"
+        const mermaidOptions = { mermaid: { theme: mermaidTheme } }
         const monacoFile = path.join(themePath, themeName + '-monaco.min.json')
         const monacoOptions = JSON.parse(readFileSync(monacoFile, 'utf-8'))
 
@@ -40,7 +42,7 @@ module.exports = function (RED) {
         cssArray.push(path.join(themeRelativePath, themeCustomCSS))
         cssScrollArray.push(path.join(themeRelativePath, themeCustomCSS))
 
-        RED.plugins.registerPlugin(themeName, Object.assign({}, type, css, monacoOptions))
-        RED.plugins.registerPlugin(themeName + '-scroll', Object.assign({}, type, cssScroll, monacoOptions))
+        RED.plugins.registerPlugin(themeName, Object.assign({}, type, css, mermaidOptions, monacoOptions))
+        RED.plugins.registerPlugin(themeName + '-scroll', Object.assign({}, type, cssScroll, mermaidOptions, monacoOptions))
     })
 }

themes/solarized-light/solarized-light-mermaid.json

@@ -0,0 +1 @@
+"default"

themes/tokyo-night-light/tokyo-night-light-mermaid.json

@@ -0,0 +1 @@
+"default"

themes/totallyinformation/totallyinformation-mermaid.json

@@ -0,0 +1 @@
+"default"