# Change the background colour of the Node Red editor

**URL:** <https://discourse.nodered.org/t/change-the-background-colour-of-the-node-red-editor/41173>\
**Category:** General\
**Created:** [17 February 2021 15:57 UTC](https://discourse.nodered.org/t/change-the-background-colour-of-the-node-red-editor/41173 "2021-02-17T15:57:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![FatPilot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fatpilot/32/38329_2.png) [@FatPilot](https://discourse.nodered.org/u/FatPilot)\
**Post date:** [17 February 2021 15:57 UTC](https://discourse.nodered.org/t/change-the-background-colour-of-the-node-red-editor/41173/1 "2021-02-17T15:57:30Z")

</div>

Hi @knolleary Continuing the discussion from [Can you style the Node Red editor?](https://discourse.nodered.org/t/can-you-style-the-node-red-editor/14738/2):

I have looked at the link you provided [Configuration : Node-RED](https://nodered.org/docs/user-guide/runtime/configuration#editor-themes) 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.

---

<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:** [17 February 2021 16:17 UTC](https://discourse.nodered.org/t/change-the-background-colour-of-the-node-red-editor/41173/2 "2021-02-17T16:17:18Z")

</div>

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...

```auto
.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:

```auto
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:

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

```

---

<div class="post-metadata">

**Author:** ![FatPilot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fatpilot/32/38329_2.png) [@FatPilot](https://discourse.nodered.org/u/FatPilot)\
**Post date:** [17 February 2021 17:14 UTC](https://discourse.nodered.org/t/change-the-background-colour-of-the-node-red-editor/41173/3 "2021-02-17T17:14:41Z")

</div>

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.

---

<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 March 2021 17:15 UTC](https://discourse.nodered.org/t/change-the-background-colour-of-the-node-red-editor/41173/4 "2021-03-03T17:15:39Z")

</div>

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