# 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:** 20\
**Page:** 1

<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:** [22 July 2021 12:27 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/1 "2021-07-22T12:27:35Z")

</div>

I've just upgrade from NR 1.33 to 2.01 - thanks guys for a smooth upgrade this time - no issues with any nodes - probably due to me being on nodejs 14.17.2...

I tried installing the new Monaco text editor.

I already have the midnight theme in editorTheme

```auto
editorTheme: {
    page: {
        css: "/home/pi/.node-red/node_modules/@node-red-contrib-themes/midnight-red/theme.css"
    }
}

```

So I put the code for the new editor before "page" (in settings.js) as such:

```auto
 codeEditor: {
        lib: "monaco"
    },

```

It WORKS but it comes up in WHITE background where before the editor had the DARK background in keeping with the midnight theme.

Did I do something wrong is is there a way around this?

I know, not stunningly important in the scheme of things but I HATE light-background editors 🙂

---

<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:** [22 July 2021 12:53 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/2 "2021-07-22T12:53:23Z")

</div>

You have to configure the Monaco theme separately.

See the current settings.js for reference:

> <https://github.com/node-red/node-red/blob/79d9c83a2df5cce2ec4e87cd66347b91fb6604ab/packages/node_modules/node-red/settings.js#L361>

---

<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:** [22 July 2021 12:58 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/3 "2021-07-22T12:58:23Z")

</div>

By the way... configuring custom themes got a bit easier with the new plug-in system.

You no longer need to specify the css, you can set the theme via

```auto
editorTheme: {
    theme: "<theme-name>"
},

```

if your themes are packaged as plug-ins, like the [https://github.com/node-red-contrib-themes/theme-collection](https://github.com/node-red-contrib-themes/theme-collection)

---

<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:** [22 July 2021 15:58 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/4 "2021-07-22T15:58:52Z")

</div>

I can only assume I'm doing something now as I used this..

```auto
editorTheme: {
          theme: "midnight-red",
          codeEditor: {
              lib: "monaco",
              options: {
                theme: "ace"
              }
          },
       }

```

I tried theme: "monaco" and theme: "ace" and no matter what I get a white edit window..

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/09e724f6ecd87265654813aea578ee79b8f7e0f9.png)

Any idea what I need to fix there so I can use the new Monaco editor and keep the original black edit window I had before adding that codeEditor section? Sorry if these are dumb questions.

---

<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:** [22 July 2021 16:01 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/5 "2021-07-22T16:01:36Z")

</div>

`"ace"` is not a valid monaco theme.

Try with `"vs"` or `"tomorrow-night"`

---

<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:** [22 July 2021 16:05 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/6 "2021-07-22T16:05:35Z")

</div>

That was quick, Nick. Ok, tried both, they both work... thanks, I'm a happy camper.

---

<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:** [22 July 2021 16:05 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/7 "2021-07-22T16:05:39Z")

</div>

For reference, here a list of all themes available: [https://github.com/node-red/node-red/tree/master/packages/node\_modules/@node-red/editor-client/src/vendor/monaco/dist/theme](https://github.com/node-red/node-red/tree/master/packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme)

I think you should also update your contrib themes to version 2.0 to fix the UI glitch on the tabs.

---

<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:** [22 July 2021 16:06 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/8 "2021-07-22T16:06:45Z")

</div>

> [@kuema](#):
>
> I think you should also update your contrib themes to version 2.0 to fix the UI glitch on the tabs.

That's actually a core bug that is fixed in 2.0.2 - affecting Safari in particular.

---

<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:** [22 July 2021 16:09 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/9 "2021-07-22T16:09:27Z")

</div>

I hit that issue on Firefox with Node-RED 2.0.0 and contrib themes on 1.x. It was gone after I updated them to 2.0 🤔

---

<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:** [22 July 2021 16:10 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/10 "2021-07-22T16:10:57Z")

</div>

> [@kuema](#):
>
> [node-red/packages/node\_modules/@node-red/editor-client/src/vendor/monaco/dist/theme at master · node-red/node-red · GitHub](https://github.com/node-red/node-red/tree/master/packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme)

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?

I've no idea how to upgrade a theme.... and am I right in saying NR 2.0.2 is not actually out? I only saw 2.0.1 last night and figured I was installing the latest...

---

<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:** [22 July 2021 16:11 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/11 "2021-07-22T16:11:33Z")

</div>

Node-RED 2.0.2 was published earlier today.

---

<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:** [22 July 2021 16:12 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/12 "2021-07-22T16:12:27Z")

</div>

here we go. Problem is my lights go off every time I restart node-red... 🙂

---

<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:** [22 July 2021 16:12 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/13 "2021-07-22T16:12:41Z")

</div>

There have been some updates to [https://github.com/node-red-contrib-themes/theme-collection](https://github.com/node-red-contrib-themes/theme-collection) as well, wouldn't hurt to update them too 😅

---

<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:** [22 July 2021 16:14 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/14 "2021-07-22T16:14:01Z")

</div>

> [@scargill](#):
>
> my lights go off every time I restart node-red...

Then I hope you still got some daylight left in your timezone. 🕶

---

<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:** [22 July 2021 16:15 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/15 "2021-07-22T16:15:55Z")

</div>

I have - but I'm in Southern Spain and this time of the year I have to keep the blinds closed so I can see the screen 🙂 So I could not tell you if it's light or dark out there. Correct that - it's BRIGHT.

---

<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:** [22 July 2021 16:21 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/16 "2021-07-22T16:21:33Z")

</div>

I've just updated to NR 2.0.2 and my editor has gone back to white. I JUST had it in DARK using the VS theme - absolutely all I did was update to NR 2.0.2, restart NR and hit refresh on the (Chrome on Windows 10) browser and I swear it's reverted to the white background.

---

<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:** [22 July 2021 17:01 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/17 "2021-07-22T17:01:00Z")

</div>

Current state of affairs - after Nick's last comment I moved to this on NR 2.0.1

```auto
editorTheme: {
          theme: "midnight-red",
          codeEditor: {
              lib: "monaco",
              options: {
                theme: "vs"
              }
          },
       }

```

and sure enough my editor went all dark as it should.

But then I upgraded to NR 2.0.2 and my editor has reverted back to a white background

The whole thing looks awful... any (not rude) thoughts?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a992f8bec2bd0f84caff93262a6fc6194a13b4d5.png)

---

<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 17:29 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/18 "2021-07-22T17:29:55Z")

</div>

Use theme "vs-dark" - it's the built in dark theme by Microsoft.

You can also test it by pressing f1 in the code editor and type `theme` then choose dark theme but it won't "stick" until you update the settings file and restart/refresh

---

<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:** [22 July 2021 18:14 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/19 "2021-07-22T18:14:52Z")

</div>

I just tried your vs-dark - and it works - thanks - in NR 2.0.1 vs came up dark - but not any more - I guess that was an issue with 2.0.1 - still - vs-dark works.

Of interest, I used npn to set up the available themes as mentioned higher up - yet when as you suggest, I hit F1 then themes... the only ones I'm seeing are:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/90728181066562ff7ace0a02c48b3d910d566424.png)

i.e. 4 themes - I must be missing the point - but I'm happy with vs-dark - it works.

---

<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 18:46 UTC](https://discourse.nodered.org/t/node-red-2-01-editor-theme/48774/20 "2021-07-22T18:46:58Z")

</div>

> [@scargill](#):
>
> Of interest, I used npn to set up the available themes as mentioned higher up - yet when as you suggest, I hit F1 then themes... the only ones I'm seeing are:
> 
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/90728181066562ff7ace0a02c48b3d910d566424.png)
> 
> i.e. 4 themes - I must be missing the point - but I'm happy with vs-dark - it works.

The other themes for monaco are additional themes (not by MS) so not listed in monaco (though they could be with a bit of coding) but there is a bit more to it than that - the `vs` `vs-dark` and `hc-black` are built in but the additional themes i included for use have to be loaded into memory to be used - therefore they can only be selected by a setting in settings.js.

There is a possibility we could dynamically load them but that is for another time.

Another thing to look at is the possibility of the node-red themes setting the monaco theme accordingly.

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