# Node-RED 3.1, status under node has an odd background appearance?

**URL:** <https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143>\
**Category:** General\
**Created:** [8 September 2023 13:17 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143 "2023-09-08T13:17:02Z")\
**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:** [8 September 2023 13:17 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/1 "2023-09-08T13:17:02Z")

</div>

Erm I coule well be wrong but ercently I upgraded my NR to nodejs 18 and NR to 3.0-something. All was well.

This morning I upgraded to NR 3.10 - flawless using your script.... I could be wrong but until this morning I never noticed my FUNCIONS - the status line underneath - having a light grey background (I'm using a dark background)..

```auto
node.status({fill:"green",shape:"dot",text:"Cabinet LR temperature " + msg.payload.AM2301.Temperature + String.fromCharCode(176) + "C" + global.get("handyDate")});

```

Now they all look odd..  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/9/595f8ce7db9058ab3bae48f1e6ef481ef9381a03.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:** [8 September 2023 13:21 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/2 "2023-09-08T13:21:31Z")

</div>

That is a fault of your theme. It is addressed in some themes that have been updated.

The status now have a semi-opaque background (as of 3.1) for clarity when wires run underneath. It was all discussed in the beta.4 thread.

PS, if you update your title to something like "Node-RED 3.1, status under node has an odd background" I am fairly certain our main theme maintainer see it and will pop in to explain.

---

<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:** [8 September 2023 13:23 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/3 "2023-09-08T13:23:53Z")

</div>

I'm not a whizz at themes - point me to the line to add any dark theme and I'll do it 🙂

---

<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:** [8 September 2023 13:25 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/4 "2023-09-08T13:25:26Z")

</div>

Or do you still have to go into settings? Long time since I changed the theme - midnight red or similar....

---

<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:** [8 September 2023 13:34 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/5 "2023-09-08T13:34:57Z")

</div>

> [@scargill](#):
>
> point me to the line to add any dark theme and I'll do it

I believe it is already done. [theme-collection (node) - Node-RED](https://flows.nodered.org/node/@node-red-contrib-themes/theme-collection) was updated yesterday

@mbonani can you chip in please?

---

<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:** [8 September 2023 13:50 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/6 "2023-09-08T13:50:32Z")

</div>

Wow - I just installed that contrib node - did nothing else - and everything works - that was easy. Thanks

---

<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:** [8 September 2023 13:59 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/7 "2023-09-08T13:59:13Z")

</div>

@scargill, you need to update to the latest version of the theme collection package.

Run the following command from within the Node-RED user data directory (by default, `$HOME/.node-red`).

```shell
npm install @node-red-contrib-themes/theme-collection

```

Then restart Node-RED and hit refresh in your browser.

---

<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:** [8 September 2023 13:59 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/8 "2023-09-08T13:59:18Z")

</div>

> [@scargill](#):
>
> Thanks

Thanks go to @mbonani 😃

---

<div class="post-metadata">

**Author:** ![LosinIt](https://avatars.discourse-cdn.com/v4/letter/l/439d5e/32.png) [@LosinIt](https://discourse.nodered.org/u/LosinIt)\
**Post date:** [8 September 2023 15:33 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/9 "2023-09-08T15:33:42Z")

</div>

Not working for me.

Updated Docker image,  
Ran npm command in docker shell,  
Verified new theme files in proper directory,  
Edited settings.js - changed "dark-scroll" to "dark" theme,  
Restarted container,  
Cleared browser cache,

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [8 September 2023 19:52 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/10 "2023-09-08T19:52:23Z")

</div>

Must admit that I recently simply used the Stylus browser extension to make life a bit less white:

```auto
:root {
/* --red-ui-primary-background: red; */
    --jk-bg: hsl(40,7%,70%,1);
    --jk-bg-l1: hsl(40,7%,83%,1);
    --jk-bg-l2: hsl(40,7%,92%,1);
    --jk-bg-d1: hsl(40,7%,65%,1);
}

/* Calm down the glaring white backgrounds */
.red-ui-workspace-chart-background {
    fill: var(--jk-bg);
}
.red-ui-palette-header,
.red-ui-tabs ul li.active {
    background-color: var(--jk-bg);
}

.red-ui-panel,
.red-ui-editableList-item-content,
.red-ui-info-outline-item-controls,
.red-ui-tray-body,
.red-ui-tabs,
.red-ui-palette-content,
.red-ui-sidebar-context-stack,
#red-ui-sidebar-content {
    background-color: var(--jk-bg-l1);
}
.red-ui-editableList-container li,
table.red-ui-info-table td {
    background-color: var(--jk-bg-l1) !important;
}
.red-ui-editableList-container li {
    background-color: var(--jk-bg-l2) !important;
}
.red-ui-workspace-chart-grid-h,
.red-ui-workspace-chart-grid-v {
    stroke: var(--jk-bg-d1) !important;
}
/* Remove odd fade image that only looks ok on default colours - just not needed at all */
.red-ui-tabs ul li.active .red-ui-tabs-fade {
    background-image: none;
}
.red-ui-flow-node-status-background {
    fill-opacity: .4;
}

/* Compress vertical spacing of palette */
.red-ui-palette-node {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
.red-ui-palette-header, .red-ui-palette-header i {
    line-height: .9em;
}

.red-ui-palette-label {
    line-height: 1em;
}

/* Centres the label text in the parent */
.red-ui-palette-node:before, .red-ui-palette-label {
    display:inline-block;
    vertical-align:middle;
}
.red-ui-palette-node:before {
    content:"";
    height:100%
}

```

This is the one that makes the status background semi-transparent:

```auto
.red-ui-flow-node-status-background {
    fill-opacity: .4;
}

```

---

<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:** [8 September 2023 20:35 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/11 "2023-09-08T20:35:10Z")

</div>

Done. Ta.

---

<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:** [8 September 2023 20:36 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/12 "2023-09-08T20:36:48Z")

</div>

> [@LosinIt](#):
>
> Ran npm command in docker shell,

From within which directory?

This is how I do it in the container shell.

```shell
cd /data
npm install @node-red-contrib-themes/theme-collection

```

Then restart the container and refresh the browser.

---

<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:** [8 September 2023 20:38 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/13 "2023-09-08T20:38:27Z")

</div>

Right - all done and working but... call this a dumb question if you like - how do you access this theme collection From within node-red?

---

<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:** [8 September 2023 20:39 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/14 "2023-09-08T20:39:40Z")

</div>

Unfortunately, this is currently not possible.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [8 September 2023 20:40 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/15 "2023-09-08T20:40:16Z")

</div>

> [@scargill](#):
>
> call this a dumb question if you like - how do you access this theme collection From within node-red?

You can only override the theme from settings.js. Or, as I did, from a browser extension.

---

<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:** [8 September 2023 20:46 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/16 "2023-09-08T20:46:29Z")

</div>

Oops, I thought he was talking about updating the theme collection package from within Node-RED.

---

<div class="post-metadata">

**Author:** ![LosinIt](https://avatars.discourse-cdn.com/v4/letter/l/439d5e/32.png) [@LosinIt](https://discourse.nodered.org/u/LosinIt)\
**Post date:** [8 September 2023 23:20 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/17 "2023-09-08T23:20:32Z")

</div>

Yes, that is exactly what I did.

---

<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:** [8 September 2023 23:33 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/18 "2023-09-08T23:33:35Z")

</div>

Can you try uninstalling and reinstalling the package?

In the container shell.

```shell
cd /data
npm uninstall @node-red-contrib-themes/theme-collection
npm install @node-red-contrib-themes/theme-collection

```

Then restart the container and refresh the browser.

---

<div class="post-metadata">

**Author:** ![LosinIt](https://avatars.discourse-cdn.com/v4/letter/l/439d5e/32.png) [@LosinIt](https://discourse.nodered.org/u/LosinIt)\
**Post date:** [10 September 2023 02:46 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/19 "2023-09-10T02:46:13Z")

</div>

That fixed it. Thanks!

---

<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:** [24 September 2023 02:46 UTC](https://discourse.nodered.org/t/node-red-3-1-status-under-node-has-an-odd-background-appearance/81143/20 "2023-09-24T02:46:23Z")

</div>

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