# Dashboard - theme: chart and ui-table

**URL:** <https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332>\
**Category:** Dashboard\
**Created:** [19 July 2020 10:00 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332 "2020-07-19T10:00:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![hklages](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hklages/32/23899_2.png) [@hklages](https://discourse.nodered.org/u/hklages)\
**Post date:** [19 July 2020 10:00 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/1 "2020-07-19T10:00:54Z")

</div>

I changed the dashboard theme from light to dark. Most of the elements follow the given color schemes.

ui-table: does keeps the original color. Is there any "trick" to move all u-tables from light to dark scheme?

chart: the plotted lines keep the selected colors. Is there any chance to have the series color (at least the first one) "follow" the theme color? Or can i modify the color in the msg?

---

<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:** [19 July 2020 11:06 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/2 "2020-07-19T11:06:22Z")

</div>

which versions of dashboard and ui-table do you have ? there was a fix a while back.

And no - the chart colours are fixed.

---

<div class="post-metadata">

**Author:** ![hklages](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hklages/32/23899_2.png) [@hklages](https://discourse.nodered.org/u/hklages)\
**Post date:** [19 July 2020 13:21 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/3 "2020-07-19T13:21:41Z")

</div>

now visible with helpt ui-table 🙂 -- sometimes with table header / sometimes without, sometimes dark formatted in light theme, and here light formatted in dark theme.

 ![versions](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/166c353a37199929968163d5da9022a25124b17f.png)

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [19 July 2020 13:59 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/4 "2020-07-19T13:59:03Z")

</div>

Hi,  
did some additional tests and did not found a problem (using my own tables and the example flow:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/054db015ccf577039976571292b66f00156da7b8.png)

I noticed that you have to do a full deploy if you change the dashboard theme. Otherwise the css of tabulator will not change. As I do not change the theme every now and then I believe this is a doable workaround?

Perhaps you can describe your problem in more detail. A) changing the theme and B) using `msg.ui_control.headerVisble` separate.

If I make the header invisible this:

a) survives page reloads  
b) is on new clients invisible too  
c) changes on different clients simultaneously

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [19 July 2020 14:05 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/5 "2020-07-19T14:05:33Z")

</div>

Hi,

could it be that because the luma value is only determined on createNode and so the html variable? So it will only be updated after a full deploy?

Chris

---

<div class="post-metadata">

**Author:** ![hklages](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hklages/32/23899_2.png) [@hklages](https://discourse.nodered.org/u/hklages)\
**Post date:** [19 July 2020 15:32 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/6 "2020-07-19T15:32:58Z")

</div>

I did some further testing.  
Starting position: Dark theme but all tables had formatting in "light mode" - shouldnt have.  
Hiding header tables didn't work

Then I switched **theme to light** , did full deploy.  
Result: all tables kept the same formatting (what was OK for light theme).  
Again, hiding header did not work.

Then I switched **theme to dark** again, did full deploy.  
Result: all tables kept the same formatting - what is not OK for dark theme.  
Again, hiding header did not work

> Then in dark mode I did **reset the base color** to that green blue color and did full deploy.  
> Result: all tables changed formatting according to dark mode and I am also able to hide the header for selected tables.

Do you do some "hidden" calculation using the base color and depending on that calculation you give recommendation for the color of side bar (dark or light) and also for the table formatting (dark style, light style)?

---

<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:** [19 July 2020 15:58 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/7 "2020-07-19T15:58:52Z")

</div>

Are you clearing the browser cache each time? Not saying it will make a difference but best to be certain.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [19 July 2020 16:45 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/8 "2020-07-19T16:45:05Z")

</div>

A) No you do not need to clear the cache. A full deploy (perhaps browser reload) should work.  
B) you need 0.3.3 of ui-table. It is updated on github but npm didn`t updated. There it is still 0.3.2.

In 0.3.2 you are not able to hide the header (see above). perhaps install from github?

When I (using the example flow) switch from light to dark with a full deploy the theme and table css changes correctly.

@dceejay Do you know why npm didn't update to 0.3.3?

---

<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:** [19 July 2020 17:27 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/9 "2020-07-19T17:27:41Z")

</div>

it was the weekend... thought I might see the family... I didn't get round to publishing it ... now done.

---

<div class="post-metadata">

**Author:** ![hklages](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hklages/32/23899_2.png) [@hklages](https://discourse.nodered.org/u/hklages)\
**Post date:** [19 July 2020 17:56 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/10 "2020-07-19T17:56:33Z")

</div>

... it works with 0.3.3 and taking in account that the base color influences the style of the tables

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [19 July 2020 20:14 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/11 "2020-07-19T20:14:33Z")

</div>

Hope you had a nice day with the family. No problem at all. I was afraid I messed something up.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [19 July 2020 20:20 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/12 "2020-07-19T20:20:06Z")

</div>

> [@hklages](#):
>
> taking in account that the base color influences the style of the tables

What do you mean by "base color?" Interesting - I can't see a correlation between the _base settings color_ and the style or any ui-table element. Only the dashboard theme (light or dark) decides which tabulator css is loaded to match the overall color scheme as good as possible.

Nice to hear that your problem is now solved 👍

---

<div class="post-metadata">

**Author:** ![hklages](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hklages/32/23899_2.png) [@hklages](https://discourse.nodered.org/u/hklages)\
**Post date:** [20 July 2020 06:15 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/13 "2020-07-20T06:15:26Z")

</div>

In theme style "Dark", use the standard color. Tables are "dark"- see picture Dark.  
Then change to a bright color, example 150 200 220 an do a full deploy. Result is that all tables change to a "light mode" - also the side bar. See picture bright.

 ![dark basic color](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/9/e9d5b1c8dea61c1ce140e275aa906e34b7735d7d.jpeg) ![bright basic color](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/1/e1667a256a9dc0f3dc992fcd6a2058fadfb29059.jpeg)

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [20 July 2020 10:04 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/14 "2020-07-20T10:04:27Z")

</div>

Ok, I see. Good point.

Think it would be better if ui-table looks into the background color to decide which tabulator css to choose.

Will look into that.

---

<div class="post-metadata">

**Author:** ![hklages](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hklages/32/23899_2.png) [@hklages](https://discourse.nodered.org/u/hklages)\
**Post date:** [20 July 2020 11:25 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/15 "2020-07-20T11:25:15Z")

</div>

You could also have a selection field in the ui-table node with the options:  
. Dark  
. Light  
. Follow them background or whatever

I suggest to update the help as it took me some time to figure out this dependency and others maY also run in that issue.

---

<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:** [20 July 2020 11:46 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/16 "2020-07-20T11:46:18Z")

</div>

the colour is set by the isDark function call - which for some reason is picking up from the sidebar background colour rather than the main background colour - no idea why - and I coded it 🙂 So apologies - will fix and test - but will in the main dashboard next release.

---

<div class="post-metadata">

**Author:** ![hklages](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hklages/32/23899_2.png) [@hklages](https://discourse.nodered.org/u/hklages)\
**Post date:** [25 July 2020 14:29 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/17 "2020-07-25T14:29:38Z")

</div>

Hi again. I now returned to a custom theme using these colors:

```auto
--nr-dashboard-pageBackgroundColor: #c8c8c8;
--nr-dashboard-pageTitlebarBackgroundColor: #6495ed;
--nr-dashboard-pageSidebarBackgroundColor: #e6e6e6;
--nr-dashboard-groupTextColor: #6495ed;
--nr-dashboard-groupBackgroundColor: #fafafa;
--nr-dashboard-groupBorderColor: #fafafa;
--nr-dashboard-widgetTextColor: #a0a0a0;
--nr-dashboard-widgetBackgroundColor: #6495ed;
--nr-dashboard-widgetBorderColor: #fafafa;
--nr-dashboard-widgetColor: #6495ed;
--nr-dashboard-widgetBgndColor: #fafafa;

```

Outcome is fine for me for tabs with standard widgets:

 ![Screenshot_20200725-142425_Edge](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd734c16bc7f81e32e5df2c7bb2e08976ff5c574.jpeg) ![Screenshot_20200725-142514_Edge](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7a72dd9f9489e8508d0b8768a5663b4eb90753c1.jpeg)

But for ui-table there is a "very dark background - see table at the bottom". That does not fit to the light style.

 ![Screenshot_20200725-142650_Edge](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/1/3148b375335be6ced358af80b037acccde876582.jpeg)

**Questions:**

1. How can I change that ui-table background color - best would be to group background color
2. There is `nr-dashboard-widgetBgndColor` - what is the difference to "widgetBackgroundColor" - is it the "off" color (switches)
3. Would it be possible to add some "custom" colors the the theme eg "-nr-dashboard-custom1"

---

<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 July 2020 22:16 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/18 "2020-07-26T22:16:34Z")

</div>

it seems to be set by the tabulator class background-color - I'll fix it (unset it so it shows the underlying one) in master

---

<div class="post-metadata">

**Author:** ![hklages](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hklages/32/23899_2.png) [@hklages](https://discourse.nodered.org/u/hklages)\
**Post date:** [27 July 2020 05:56 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/19 "2020-07-27T05:56:56Z")

</div>

Thanks! Will wait for the new release 🙂

F A N T A S T I C. Solved with 0.3.4 of ui-table

---

<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:** [10 August 2020 05:56 UTC](https://discourse.nodered.org/t/dashboard-theme-chart-and-ui-table/30332/20 "2020-08-10T05:56:59Z")

</div>

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