Change the background colour of the Node Red editor

[FatPilot]

Hi @knolleary Continuing the discussion from Can you style the Node Red editor?:

I have looked at the link you provided Configuration : Node-RED and I am unfortunately no wiser.

I am editing two very similar but different Node Red installations and would like to change the background colour so as to be able to differentiate between them.

Could you please tell me where and what keys to use?

Many Thanks.
Paul.

[knolleary]

Hi @FatPilot

I assume you mean the background of the main workspace where flows are created?

To do that you should:

1. create a file called style.css (or whatever you want it to be called).
2. in that file, add the custom CSS to modify the workspace colour - replace red with whatever colour you want. red is probably a bad choice...

   .red-ui-workspace-chart-background {
     fill: red;
   }
   

3. edit your settings file, find the editorTheme section that should already be there and add a page section under it:

   editorTheme: {
       page: {
          css: "/absolute/path/to/custom/css/file"
       },
   }
   

   Make sure you change the /absolute/path/to/custom/css/file to be the absolute path to the file you created just now with the custom style in.
4. restart Node-RED.

There are other options to customising individual instances without changing the colour. For example, you could change the title in the header with:

editorTheme: {
   header: {
      title: "Node-RED On Machine A"
   }
}

[FatPilot]

Thank you @knolleary exactly what I required.
After I've implemented the solution I'll mark it as such.

Again thank you for your time.
Paul.