Wrong label for custom theme


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"


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.

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 !

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.

it's already 2.16.2 :wink: -

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

1 Like

oops you're right, I'm thinking too much of other packages still at 1.x :stuck_out_tongue:

So the three in question are...

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

Sounds good to me, then it becomes:

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

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