# Change node label color - e.g. for nodes w/ dark background

**URL:** https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450
**Category:** Feature Requests
**Created:** [29 January 2022 10:38 UTC](https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450 "2022-01-29T10:38:17Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![ralphwetzel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ralphwetzel/32/53713_2.png) [@ralphwetzel](https://discourse.nodered.org/u/ralphwetzel)
#### Post date: [29 January 2022 10:38 UTC](https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450/1 "2022-01-29T10:38:17Z")

</div>

Hi!  
It seems that currently nodes always use `black` as color for the labels.  
This looks good for nodes, that use a light background color. For darker background colors, the label yet is (almost) unreadable.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/61898f40db2ae520f2efce596f39813190d1c612.png)

I would like to propose to add a logic

1. to use `white` as the default label color for dark backgrounds.
2. to give node designers the option to define a dedicated label color - if they don't like the default setting.

If confirmed, I could propose a PR.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [29 January 2022 10:52 UTC](https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450/2 "2022-01-29T10:52:18Z")

</div>

or the node designer could choose a colour that makes the label readable ?

---

<div class="post-metadata">

### Author: ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)
#### Post date: [29 January 2022 11:42 UTC](https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450/3 "2022-01-29T11:42:18Z")

</div>

I'm with Dave. Maybe raise an issue with the author of nodes that are too dark.

---

<div class="post-metadata">

### Author: ![ralphwetzel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ralphwetzel/32/53713_2.png) [@ralphwetzel](https://discourse.nodered.org/u/ralphwetzel)
#### Post date: [29 January 2022 14:55 UTC](https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450/4 "2022-01-29T14:55:06Z")

</div>

Just discovered that my assumption was wrong:  
The appearance of the label can already (& quite easily) be defined via the `labelStyle` [property](https://nodered.org/docs/creating-nodes/appearance#label-style).

```auto
...
labelStyle: "message_label_style",
...

<style>
    .message_label_style {
        fill: white;
    }
</style>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/566765eaca8b91ed721f381243a722fc086f9c10.png)

So there's no need for any change. Perfect!

---

<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: [29 January 2022 15:02 UTC](https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450/5 "2022-01-29T15:02:11Z")

</div>

The labelStyle property was not intended to be used to change the colour of the label.

We want some degree of consistency with the node appearance. Changing text colour goes against that principle. The docs on node appearance recommend using a lighter shade for the node colour to ensure good contrast with the label.

---

<div class="post-metadata">

### Author: ![ralphwetzel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ralphwetzel/32/53713_2.png) [@ralphwetzel](https://discourse.nodered.org/u/ralphwetzel)
#### Post date: [29 January 2022 15:10 UTC](https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450/6 "2022-01-29T15:10:51Z")

</div>

That makes perfect sense.  
You could perhaps amend

> [@knolleary](#):
>
> The labelStyle property was not intended to be used to change the colour of the label.

to the chapter of `labelStyle` to underline this aspect.

---

<div class="post-metadata">

### Author: ![OriolFM](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/oriolfm/32/30710_2.png) [@OriolFM](https://discourse.nodered.org/u/OriolFM)
#### Post date: [1 February 2022 10:16 UTC](https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450/7 "2022-02-01T10:16:29Z")

</div>

I understand to want consistency.

However, most editors allow you to define text colours in case of light/dark backgrounds. People with daltonism or visual problems would greatly benefit from being able to increase the contrast, no matter if dark-on-light or the other way around.

I do not suffer from daltonism, but my sight is not what it was, and when I'm tired it's getting difficult to read from the screen, specially with light backgrounds. This is one of the reasons I changed to the dark theme for the editor, but the node names are still black on white. I tend to put many of them in subflows, which I can set up to be darker, but then the text is barely visible.

I'd be glad to be able to change that.

---

<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: [1 February 2022 10:37 UTC](https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450/8 "2022-02-01T10:37:42Z")

</div>

Don't know if this helps or not, but I recently discovered that there is a CSS media query that picks up on the light/dark browser preference.

So for example, the next version of uibuilder will have a default CSS sheet containing things like this:

```css
 /* :root applies to everything */
:root {
    --uib-color-light: 201, 209, 217;
    --uib-color-dark: 36, 36, 36;
    --uib-color-info: 23, 162, 184; /* Cyan */
    --uib-color-warn: 255, 193, 7; /* Amber */
    --uib-color-error: 220, 53, 69; /* Red */
    --uib-color-primary: 0, 123, 255; /* Blue */
    --uib-color-secondary: 108, 117, 125; /* Grey */
    --uib-color-success: 40, 167, 69; /* Green */

    --uib-color-fg: var(--uib-color-dark);
    --uib-color-bg: var(--uib-color-light);
}

/* If the browser reports it, we can adjust for light/dark theme preferences */
@media (prefers-color-scheme: light) {
    :root {
        --uib-color-fg: var(--uib-color-dark);
        --uib-color-bg: var(--uib-color-light);
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --uib-color-fg: var(--uib-color-light);
        --uib-color-bg: var(--uib-color-dark);
    }
}

/* Apply `class="uib" to body tag if desired */
body.uib {
    margin: 1rem;
    font-family: sans-serif;
    background-color: rgb(var(--uib-color-bg));
    color: rgb(var(--uib-color-fg));
}

```

Which will switch your UI between light and dark depending on the current browser settings.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [1 February 2022 11:36 UTC](https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450/9 "2022-02-01T11:36:47Z")

</div>

> [@OriolFM](#):
>
> the node names are still black on white.

Can you give an example of where you are seeing that please?

---

<div class="post-metadata">

### Author: ![OriolFM](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/oriolfm/32/30710_2.png) [@OriolFM](https://discourse.nodered.org/u/OriolFM)
#### Post date: [4 February 2022 09:23 UTC](https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450/10 "2022-02-04T09:23:58Z")

</div>

Sorry, I expressed that wrong. I meant "Black on whatever background color the node has".

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/2/4237368ed04f5c5eb0f87fa9bec84e67bb1ff241.png)

---

<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: [5 April 2022 09:24 UTC](https://discourse.nodered.org/t/change-node-label-color-e-g-for-nodes-w-dark-background/57450/11 "2022-04-05T09:24:10Z")

</div>

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