Node-Red 2.01 Editor theme

General
1

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

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:

 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 :slight_smile:

2

You have to configure the Monaco theme separately.

See the current settings.js for reference:

3

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

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

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

4

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

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
image622Ă—668 26.7 KB

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.

5

"ace" is not a valid monaco theme.

Try with "vs" or "tomorrow-night"

1 Like
6

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

2 Likes
7

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

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

8

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

1 Like
9

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 :thinking:

10

Oh, I wasn't going to mention that - you mean this?
image 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...

11

Node-RED 2.0.2 was published earlier today.

12

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

13

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

14

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

15

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 :slight_smile: So I could not tell you if it's light or dark out there. Correct that - it's BRIGHT.

16

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.

17

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

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

18

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

19

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

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

20

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.