# Node-Red 2.01 Editor theme

**URL:** https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774
**Category:** General
**Created:** [22 July 2021 12:27 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774 "2021-07-22T12:27:35Z")
**Posts on this page:** 19
**Page:** 2

<div class="post-metadata">

### Author: ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)
#### Post date: [22 July 2021 21:07 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/21 "2021-07-22T21:07:21Z")

</div>

> [@Steve-Mcl](#):
>
> Another thing to look at is the possibility of the node-red themes setting the monaco theme accordingly.

I like that. Can we chat about it?

---

<div class="post-metadata">

### Author: ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)
#### Post date: [22 July 2021 21:09 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/22 "2021-07-22T21:09:42Z")

</div>

> [@scargill](#):
>
> Oh, I wasn't going to mention that - you mean this?  
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/3/83bf049bfc4f56f680d1be645e8276b97ab45492.png) shading on the right?

This is gone after updating Node-RED to v2.0.2 and the theme to v2.0.1, right?

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [22 July 2021 22:03 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/23 "2021-07-22T22:03:42Z")

</div>

Sure.

I don't know the anatomy of the node-red themes (is it all CSS or is there some server side js too?)

Essentially, the `theme` property under `codeEditor` needs to be set. I forget now at what point in the start-up this needs to be set.

I'll take a look tomorrow if there is another way.

---

<div class="post-metadata">

### Author: ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)
#### Post date: [24 July 2021 13:06 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/24 "2021-07-24T13:06:07Z")

</div>

We can use both CSS and JS in themes.

I can change Monaco's theme by running `RED.settings.codeEditor.options.theme = "theme-name"` on the browser's console. But I still haven't found a way to do it from within the theme.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [24 July 2021 13:10 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/25 "2021-07-24T13:10:33Z")

</div>

I'm talking with nick on slack about how to handle this.

> **[Welcome to your new HQ](https://node-red.slack.com/?redir=%2Farchives%2FC9RSU6S56%2Fp1627117661286400)**
>
> Slack is a new way to communicate with your team. It’s faster, better organized, and more secure than email.

So I have a working method but waiting feedback.

---

<div class="post-metadata">

### Author: ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)
#### Post date: [25 July 2021 15:01 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/26 "2021-07-25T15:01:01Z")

</div>

All is (almost) well here but since the NR upgrade, I'm still getting these awful white shadows on all tabs in the main screen and in the editor - any ideas?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1bacfeff52655bbca16777cf0cc95a0b02ed1829.png)

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [25 July 2021 15:37 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/27 "2021-07-25T15:37:35Z")

</div>

Exactly what version of Node-RED and the theme have you got installed?

Edit: there's another fix coming for that in the next release.

> <https://github.com/node-red/node-red/pull/3085>
>
> \<!--
> \## Before you hit that Submit button....
> 
> Please read our \[contribution …guidelines\](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md)
> before submitting a pull-request.
> 
> \## Types of changes
> 
> What types of changes does your code introduce?
> Put an \`x\` in the boxes that apply
> \--\>
> 
> \- \[x\] Bugfix (non-breaking change which fixes an issue)
> \- \[\] New feature (non-breaking change which adds functionality)
> 
> \<!--
> If you want to raise a pull-request with a new feature, or a refactoring
> of existing code, it \*\*may well get rejected\*\* if it hasn't been discussed on
> the \[forum\](https://discourse.nodered.org) or
> \[slack team\](https://nodered.org/slack) first.
> 
> \--\>
> 
> \## Proposed changes
> 
> 
> Fixes the tab fade CSS for when themes are used
> 
> Current state
>   
> !\[Screen Shot 2021-07-25 at 10 36 00 AM\](https://user-images.githubusercontent.com/29807944/126904046-2c3849da-19ee-4d5f-a6e8-1d7a031802ea.png)
> 
> With the proposed fix
>   
> !\[Screen Shot 2021-07-25 at 10 36 58 AM\](https://user-images.githubusercontent.com/29807944/126904070-b116ccd3-06d3-423d-910e-667c5764e454.png)
> 
> !\[Screen Shot 2021-07-25 at 10 52 10 AM\](https://user-images.githubusercontent.com/29807944/126904060-f06999a9-c35c-4654-9e88-f54b04898afb.png)
> 
> 
> \## Checklist
> 
> 
> \- \[x\] I have read the \[contribution guidelines\](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md)
> \- \[\] For non-bugfix PRs, I have discussed this change on the forum/slack team.
> \- \[\] I have run \`grunt\` to verify the unit tests pass
> \- \[\] I have added suitable unit tests to cover the new/changed functionality

---

<div class="post-metadata">

### Author: ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)
#### Post date: [25 July 2021 18:54 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/28 "2021-07-25T18:54:07Z")

</div>

Hi Nick

Node-Red 2.0.3 and everything in there is up to date.

Theme is midnight-red…

editorTheme: {

theme: "midnight-red",

codeEditor: {

lib: "monaco",

options: {

theme: "vs-dark"

}

},

}

Nice to know a fix is on the way - trivial but annoying - and midnght-red is my favourite theme (untill someone comes along with something even more subtle)

Regards

Pete

---

<div class="post-metadata">

### Author: ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)
#### Post date: [26 July 2021 20:39 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/29 "2021-07-26T20:39:55Z")

</div>

> [@scargill](#):
>
> (untill someone comes along with something even more subtle)

I’m open to suggestions 😉

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [26 July 2021 20:42 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/30 "2021-07-26T20:42:21Z")

</div>

@mbonani FYI, there is a PR now open for including custom (or pre-set) monaco theme.

> <https://github.com/node-red/node-red/pull/3084>
>
> \- \[\] Bugfix (non-breaking change which fixes an issue)
> \- \[x\] New feature (non-…breaking change which adds functionality)
> 
> \## Proposed changes
> As discussed on slack and touched on in forum, permit them plugin to select a core theme or provide custom theme
> 
> 
> \### Outline...
> 
> The modification permits the plugin theme writer to either specify a core theme or provide own custom theme.
> 
> \### Examples of plugin providing monaco theme... 
> 
> \#### use core theme (e.g. vs-dark):
> \`\`\`js
> RED.plugins.registerPlugin("midnight-red", {
> type: "node-red-theme",
> css: \[
> "theme.min.css",
> "theme-customizations.min.css"
> \],
> monacoTheme: "vs-dark"
> })
> \`\`\`
> 
> \#### use a custom theme...
> \`\`\`js
> RED.plugins.registerPlugin("midnight-red", {
> type: "node-red-theme",
> css: \[
> "theme.min.css",
> "theme-customizations.min.css"
> \],
> monacoTheme: {
> "base": "vs-dark",
> "inherit": true,
> "rules": \[
> {
> "foreground": "aeaeae",
> "token": "comment"
> },
> {
> "foreground": "d8fa3c",
> "token": "constant"
> },
> \]
> }
> })
> \`\`\`
> 
> \#### load a custom theme from a relative json file
> \`\`\`js
> RED.plugins.registerPlugin("midnight-red", {
> type: "node-red-theme",
> css: \[
> "theme.min.css",
> "theme-customizations.min.css"
> \],
> monacoTheme: require("./midnight-red-monaco-theme.json")
> })
> \`\`\`
> 
> 
> \### NOTES
> \* Both the \`monacoTheme\` theme (set in plugin) and \`codeEditor.theme\` theme in \`settings.js\` will be loaded into monaco to permit user switching between them (f1 -\> set theme)
> \* If \`codeEditor.theme\` is set, it will take precedence over the themes \`monacoTheme\` and set as the active monaco theme by default (but as mentioned, user can switch using f1)
> \* I couldnt quite grasp what you meant on the slack thread by "make \`settings()\` an async function" - it seems \`context()\` is always called before \`settings()\` so for now I have simply set \`themeSettings.monacoTheme = themePlugin.monacoTheme;\` inside the \`context()\` function. Seems to work but I figure you said this for some specific criteria I am not getting.
> 
> \## Checklist
> 
> \- \[x\] I have read the \[contribution guidelines\](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md)
> \- \[x\] For non-bugfix PRs, I have discussed this change on the forum/slack team.
> \- \[x\] I have run \`grunt\` to verify the unit tests pass
> \- \[\] I have added suitable unit tests to cover the new/changed functionality

You might want to cast an eye over it?

---

<div class="post-metadata">

### Author: ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)
#### Post date: [26 July 2021 20:44 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/31 "2021-07-26T20:44:07Z")

</div>

Awesome! I’ll take a look at it tonight

---

<div class="post-metadata">

### Author: ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)
#### Post date: [26 July 2021 23:00 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/32 "2021-07-26T23:00:46Z")

</div>

Hi, ok for inspiration… I like dark themes – Microsoft CODE editor has some winners - black is not good but subtle dark colours with brights for errors – if that helps. I would LOVE to do this myself and contribute back but CSS has always been my weak spot.

---

<div class="post-metadata">

### Author: ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)
#### Post date: [26 July 2021 23:08 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/33 "2021-07-26T23:08:53Z")

</div>

> [@scargill](#):
>
> Microsoft CODE editor has some winners

Can you list some of them?

> [@scargill](#):
>
> I would LOVE to do this myself and contribute back but CSS has always been my weak spot.

We can work together to build one that suits your needs. 😉

---

<div class="post-metadata">

### Author: ![steff](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steff/32/80733_2.png) [@steff](https://discourse.nodered.org/u/steff)
#### Post date: [27 July 2021 15:14 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/34 "2021-07-27T15:14:58Z")

</div>

I am also a user of the midnight-red theme, thanks for that!

Recently I discovered the [Dracula theme](https://draculatheme.com/), which has already been implemented for many applications. I find it quite pleasing in terms of colors. Maybe that would be something of interest to you as well.

Thank you!

---

<div class="post-metadata">

### Author: ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)
#### Post date: [27 July 2021 15:30 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/35 "2021-07-27T15:30:44Z")

</div>

I started working on a theme based on the Dracula theme a few months ago.  
I’ll try to revisit it again later this week.

---

<div class="post-metadata">

### Author: ![andrewph](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrewph/32/45995_2.png) [@andrewph](https://discourse.nodered.org/u/andrewph)
#### Post date: [4 August 2021 02:06 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/36 "2021-08-04T02:06:58Z")

</div>

I'm running NR v2.0.5 on Windows 10 with the following  
nodejs v14.17.3,  
npm v6.14.13,  
node-red-contrib-themes/theme-collection v2.0.3.

I'm unable to get any of the theme-collection working for the main editor

Here is my settings.js file

```auto
editorTheme: {
        /** The following property can be used to set a custom theme for the editor.
         * See https://github.com/node-red-contrib-themes/theme-collection for
         * a collection of themes to chose from.
         */
        theme: "midnight-red",
        palette: {
            /** The following property can be used to order the categories in the editor
             * palette. If a node's category is not in the list, the category will get
             * added to the end of the palette.
             * If not set, the following default order is used:
             */
            //categories: ['subflows', 'common', 'function', 'network', 'sequence', 'parser', 'storage'],
        },
        projects: {
            /** To enable the Projects feature, set this value to true */
            enabled: true,
            workflow: {
                /** Set the default projects workflow mode.
                 * - manual - you must manually commit changes
                 * - auto - changes are automatically committed
                 * This can be overridden per-user from the 'Git config'
                 * section of 'User Settings' within the editor
                 */
                mode: "manual"
            }
        },
        codeEditor: {
            /** Select the text editor component used by the editor.
             * Defaults to "ace", but can be set to "ace" or "monaco"
             */
            lib: "monaco",
            options: {
                /** The follow options only apply if the editor is set to "monaco"
                 *
                 * theme - must match the file name of a theme in
                 * packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme
                 * e.g. "tomorrow-night", "upstream-sunburst", "github", "my-theme"
                 */
                theme: "vs-dark",

```

The Monaco 'vs-dark' theme works fine, however the main editor is still on the default theme

---

<div class="post-metadata">

### Author: ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)
#### Post date: [4 August 2021 05:03 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/37 "2021-08-04T05:03:09Z")

</div>

Where did you install the theme collection? It has to be installed in your Node-RED workspace, usually `.node-red` in your user's home directory.

---

<div class="post-metadata">

### Author: ![andrewph](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrewph/32/45995_2.png) [@andrewph](https://discourse.nodered.org/u/andrewph)
#### Post date: [4 August 2021 05:21 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/38 "2021-08-04T05:21:41Z")

</div>

Yes, that is where I installed it via npm.

I have since found that it is listed as an issue on github

[https://github.com/node-red/node-red/issues/3097](https://github.com/node-red/node-red/issues/3097)

As mentioned in the issue commenting out 3 lines the following function from "C:\Users$USER\AppData\Roaming\npm\node\_modules\node-red\node\_modules@node-red\editor-api\lib\editor\theme.js" works as a temporary workaround.

```auto
function serveFilesFromTheme(themeValue, themeApp, directory, baseDirectory) {
    var result = [];
    if (themeValue) {
        var array = themeValue;
        if (!util.isArray(array)) {
            array = [array];
        }

        for (var i=0;i<array.length;i++) {
            let fullPath = array[i];
            if (baseDirectory) {
                fullPath = path.resolve(baseDirectory,array[i]);
                // if (fullPath.indexOf(baseDirectory) !== 0) {
                // continue;
                // }
            }
            var url = serveFile(themeApp,directory,fullPath);
            if (url) {
                result.push(url);
            }
        }
    }
    return result
}

```

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [3 October 2021 05:22 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/39 "2021-10-03T05:22:29Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

[Previous page](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774.md?page=1)