Merge pull request #348 from node-red-contrib-themes/simplify-monaco-…

…themes

DEVELOPMENT.md

@@ -16,6 +16,8 @@ This document describes the process for creating/updating themes.
 
 With the development environment initialized, follow these steps to create a new theme:
 
+***NOTE:** Replace `<theme-name>` with the name of the theme you are working on.*
+
 1. Create the new theme directory structure
 
         npm run create-theme <theme-name>
@@ -28,25 +30,27 @@ With the development environment initialized, follow these steps to create a new
 
 4. Update the colors in `themes/<theme-name>/<theme-name>.scss` as required & save
 
-5. Update `themes/<theme-name>/<theme-name>-monaco.json` to customize the colors of the Monaco Editor. For details on the `monacoOptions` configuration, please refer to the [Node-RED documentation][theming-the-monaco-editor].
+5. ***(OPTIONAL)*** If additional customizations are needed, add them to `themes/<theme-name>/<theme-name>-custom.css`.
+
+6. ***(OPTIONAL)*** Update `themes/<theme-name>/<theme-name>-monaco.json` to customize the colors of the Monaco Editor. This file can be configured in two different ways:
 
-6. ***OPTIONAL*** - If additional customizations are needed, add them to `themes/<theme-name>/<theme-name>-custom.css`.
+   - Built-in theme - Add `"<monaco-theme-name>"` to the file. Replace `"<monaco-theme-name>"` with the name of one of the themes in this [list][monaco-editor-builtin-themes].
+   - Custom Monaco theme object - See the [`my-custom-theme-monaco-theme.json` file example][setting-a-custom-monaco-theme-from-a-json-file] in the Node-RED documentation for reference.
 
-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.
+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. Refresh Node-RED in the browser to preview the changes
 
 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.*
-
 ## Updating an existing theme
 
 Follow the process above, skipping step 1.
 
 Thanks for taking the time to contribute! 😍
 
 [fork]: https://github.com/node-red-contrib-themes/theme-collection/fork
-[theming-the-monaco-editor]: https://nodered.org/docs/api/ui/themes/#theming-the-monaco-editor
+[monaco-editor-builtin-themes]: https://github.com/node-red/node-red/tree/master/packages/node_modules/%40node-red/editor-client/src/vendor/monaco/dist/theme
+[setting-a-custom-monaco-theme-from-a-json-file]: https://nodered.org/docs/api/ui/themes/#setting-a-custom-monaco-theme-from-a-json-file

template/template-monaco.json

@@ -1,5 +1 @@
-{
-    "monacoOptions": {
-        "theme": "vs"
-    }
-}
+"tomorrow-night-bright"

themes.js

@@ -16,8 +16,8 @@ module.exports = function (RED) {
         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'))
+        const monacoTheme = JSON.parse(readFileSync(path.join(themePath, `${themeName}-monaco.min.json`), 'utf-8'))
+        const monacoOptions = { monacoOptions: { theme: monacoTheme } }
 
         if (readdirSync(themePath).length == 0) {
             console.warn('')