# Dashboard colors don't match the settings

**URL:** <https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907>\
**Category:** Dashboard\
**Created:** [24 June 2020 18:23 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907 "2020-06-24T18:23:01Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bertg](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@bertg](https://discourse.nodered.org/u/bertg)\
**Post date:** [24 June 2020 18:23 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907/1 "2020-06-24T18:23:01Z")

</div>

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 :

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6d58c6c8a2eefc83b394578ed71eb99a44a763b9.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/e/2ef4f0b64b1569ca83af8179f452b90927bd739a.png)

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

I use the following configuration:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/d/cda6d4811a685ab8e4121fa1d88ae24ae28771d4.png)

Thanks in advance for any help you can give me

Bert

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 June 2020 21:54 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907/2 "2020-06-24T21:54:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bertg](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@bertg](https://discourse.nodered.org/u/bertg)\
**Post date:** [25 June 2020 12:11 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907/3 "2020-06-25T12:11:23Z")

</div>

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

---

<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:** [25 June 2020 15:40 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907/4 "2020-06-25T15:40:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bertg](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@bertg](https://discourse.nodered.org/u/bertg)\
**Post date:** [25 June 2020 16:53 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907/5 "2020-06-25T16:53:58Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/5/f5f4dc616766df080c5953f92d751fbf712738e9.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/12c5e3c7c536b7020249e8c4d25a1e56fa1125cc.png)

Thanks for your help

---

<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:** [26 June 2020 17:07 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907/6 "2020-06-26T17:07:57Z")

</div>

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) ?

---

<div class="post-metadata">

**Author:** ![bertg](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@bertg](https://discourse.nodered.org/u/bertg)\
**Post date:** [26 June 2020 18:27 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907/7 "2020-06-26T18:27:38Z")

</div>

Hi dceejay,

in this example, both sidebar area should be magenta

Bert

---

<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:** [26 June 2020 22:16 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907/8 "2020-06-26T22:16:14Z")

</div>

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)

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

---

<div class="post-metadata">

**Author:** ![bertg](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@bertg](https://discourse.nodered.org/u/bertg)\
**Post date:** [26 June 2020 22:32 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907/9 "2020-06-26T22:32:23Z")

</div>

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

---

<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:** [26 June 2020 22:38 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907/10 "2020-06-26T22:38:04Z")

</div>

you can pull direct from github to try it

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

```

Otherwise to npm probably sometime next week.

---

<div class="post-metadata">

**Author:** ![bertg](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@bertg](https://discourse.nodered.org/u/bertg)\
**Post date:** [26 June 2020 23:24 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907/11 "2020-06-26T23:24:03Z")

</div>

It works perfectly!

Thanks a lot for your help

Have a nice weekend.

Bert

---

<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:** [26 July 2020 23:24 UTC](https://discourse.nodered.org/t/dashboard-colors-dont-match-the-settings/28907/12 "2020-07-26T23:24:08Z")

</div>

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