# Wrong label for custom theme

**URL:** <https://discourse.nodered.org/t/wrong-label-for-custom-theme/14942>\
**Category:** Dashboard\
**Created:** [30 August 2019 12:51 UTC](https://discourse.nodered.org/t/wrong-label-for-custom-theme/14942 "2019-08-30T12:51:47Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thierry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thierry/32/8654_2.png) [@Thierry](https://discourse.nodered.org/u/Thierry)\
**Post date:** [30 August 2019 12:51 UTC](https://discourse.nodered.org/t/wrong-label-for-custom-theme/14942/1 "2019-08-30T12:51:48Z")

</div>

Hello,

In widget settings section of dashboard custom theme sheet, I think there some confusions between labels:

- "Widget Colour" appears in front of color field input id "widget-backgroundColor", whereas the label should be "Widget Background"
- "Widget Background" appears in front of color field input id "widget-borderColor", whereas the label should be "Widget Border"

Thierry

---

<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:** [30 August 2019 14:05 UTC](https://discourse.nodered.org/t/wrong-label-for-custom-theme/14942/2 "2019-08-30T14:05:57Z")

</div>

yes - but the labels are correct.  
and we can't change the underlying names as that would break everyone.  
so it is what it is.

---

<div class="post-metadata">

**Author:** ![Thierry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thierry/32/8654_2.png) [@Thierry](https://discourse.nodered.org/u/Thierry)\
**Post date:** [30 August 2019 14:55 UTC](https://discourse.nodered.org/t/wrong-label-for-custom-theme/14942/3 "2019-08-30T14:55:29Z")

</div>

> [@dceejay](#):
>
> break everyone

So when changing "Widget Colour" (or "Widget Background"), the css variable "--nr-dashboard-widgetBackgroundColor" ( resp. ""--nr-dashboard-widgetBorderColor" ) is updated accordingly.  
These 2 variables could be used in ui\_template or custom node =\> relying on the names of the css variables is very confusing, as it will do the opposite of what the names suggest !

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [30 August 2019 15:01 UTC](https://discourse.nodered.org/t/wrong-label-for-custom-theme/14942/4 "2019-08-30T15:01:41Z")

</div>

> [@Thierry](#):
>
> relying on the names of the css variables is very confusing, as it will do the opposite of what the names suggest

Yes, it does, however fixing this now will result in a breaking change for many, many users. So it's not something to fix in a bug release or minor version. If this would be changed at some point in the future, it would likely be in a major release, something like `node-red-dashboard` ~~v2~~ v3 if that point ever arrives.

---

<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:** [30 August 2019 16:00 UTC](https://discourse.nodered.org/t/wrong-label-for-custom-theme/14942/5 "2019-08-30T16:00:24Z")

</div>

it's already 2.16.2 😉 -

but hmm - indeed those are just variable names that got added fairly recently (2.16) rather than deeply embedded...

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [30 August 2019 16:01 UTC](https://discourse.nodered.org/t/wrong-label-for-custom-theme/14942/6 "2019-08-30T16:01:50Z")

</div>

> [@dceejay](#):
>
> 2.16.2

_oops_ you're right, I'm thinking too much of other packages still at 1.x 😛

---

<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:** [30 August 2019 16:10 UTC](https://discourse.nodered.org/t/wrong-label-for-custom-theme/14942/7 "2019-08-30T16:10:13Z")

</div>

So the three in question are...

```auto
    --nr-dashboard-widgetBackgroundColor: @widgetBackgroundColor;
    --nr-dashboard-widgetBorderColor: @widgetBorderColor;

```

as they are just variable names - and we don't have `--nr-dashboard-widgetColor` yet we can add that as the "correct" alias... and deprecate the other... just need a new / alternative name for the other one... how about `--nr-dashboard-widgetBackColor` or `--nr-dashboard-widgetBgndColor` or something else - ideas please...

---

<div class="post-metadata">

**Author:** ![Thierry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thierry/32/8654_2.png) [@Thierry](https://discourse.nodered.org/u/Thierry)\
**Post date:** [2 September 2019 08:06 UTC](https://discourse.nodered.org/t/wrong-label-for-custom-theme/14942/8 "2019-09-02T08:06:55Z")

</div>

Sounds good to me, then it becomes:

```
--nr-dashboard-widgetTextColor: @widgetTextColor;
--nr-dashboard-widgetColor: @widgetBackgroundColor;
--nr-dashboard-widgetBgndColor: @widgetBorderColor;
```

---

<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:** [2 September 2019 08:25 UTC](https://discourse.nodered.org/t/wrong-label-for-custom-theme/14942/9 "2019-09-02T08:25:30Z")

</div>

Looks good to me - any more opinions on names before i make it so ?