Dashboard colors don't match the settings

[bertg]

Hello,

I hope you can help me.

I've been having trouble setting the node-red-dashboard custom theme colors for some time now.

As you can see in the screenshots below, the colors of the dashboard do not match the colors of the settings. For example, the sidebar should be green while it is the same cyan as the group background color. The background color of the sidebar text is the same color as the background color of the wirdgets :

This is a big problem for me since respecting precise colors is essential for this application.

I use the following configuration:

Thanks in advance for any help you can give me

Bert

[Trying_to_learn]

I think it is simply a misunderstanding of what is what.

I would suggest adjusting the Widget settings / Widget Background colour to something else and see what that does.

BTW, how are you picking the colours?

RGB wheel or names?

The sidebar to which I think you are referring is the widget settings / widget background colour.

Click on the colour selector and pick the desired colour.

[bertg]

Good morning,

Reading your answer, I understand that your nod-red-dashboard behaves in the same way as mine does.

I have been using Dashboard for several years now in industrial applications. Since my Dashboards have to fit perfectly into existing applications, the look of the colors is very important.

In the past, Dashboard has behaved like Material UI.This means for example that the sidebar menu color was independent of the Dashboard groups color (Dashboard groups are Material md-cards I think).

Same thing for the widgets. In fact, to match the normal behavior of Dashboard, the colors of the sidebar menu, groups and widgets should be independent.

Is there a member of the node-red-dashboard development team who could help me clarify this point please?

Bert

[dceejay]

Hi - yes, listening here, but busy with the day job.
In the sidebar dashboard site tab you can also select Angular themes also if you need to use default ones from Angular Material if they happen to match.
I'll try to look at the issue later - can you share a small version of you flow with the theme preset to make it easier to replicate ?
Thanks

[bertg]

Hello,

Congratulations for your work on the project. Dashboard is one of the most impressive nodes in Node-red.

To reproduce the problem, just create a dashboard with only one tab and one widget and use the colors of the screenshot.

2 problems appears to be present:

1. The background color of the sidenav menu is the same as the background color of the groups, instead of using the color configured for the sidenav.
2. The background color of the sidenav list elements is the same as the background color of the widgets.

Thanks for your help

[dceejay]

There is only one setting for Side Bar background - so which colour do you believe that should be ? Should that set the area coloured orange or the one coloured red (in the sidebar) ?

[bertg]

Hi dceejay,

in this example, both sidebar area should be magenta

Bert

[dceejay]

hmm - for some reason that seems not to have ever been working... amazing no-one reported until now... pushed a fix to master branch on github (not yet on npm)

[bertg]

Hi dceejay,

I can confirm that it has worked before. I can't give you the version number, but it was about two or three years ago.

I hadn't had to update Node-Red since then. That explains why I didn't see this before.

Since I don't know your update distribution methods, can you please give me a rough idea of when the update will be available with npm.

Thank you very much for your support! It is appreciated

Bert

[dceejay]

you can pull direct from github to try it

cd ~/.node-red
npm i node-red/node-red-dashboard

Otherwise to npm probably sometime next week.

[bertg]

It works perfectly!

Thanks a lot for your help

Have a nice weekend.

Bert