# Use theme color in dashboard-template's custom css

**URL:** <https://discourse.nodered.org/t/use-theme-color-in-dashboard-templates-custom-css/11650>\
**Category:** FAQs\
**Created:** [29 May 2019 06:27 UTC](https://discourse.nodered.org/t/use-theme-color-in-dashboard-templates-custom-css/11650 "2019-05-29T06:27:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![waqaslam](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waqaslam/32/2271_2.png) [@waqaslam](https://discourse.nodered.org/u/waqaslam)\
**Post date:** [29 May 2019 06:27 UTC](https://discourse.nodered.org/t/use-theme-color-in-dashboard-templates-custom-css/11650/1 "2019-05-29T06:27:35Z")

</div>

Hi  
I'm writing a custom template in dashboard. In the template I've defined some custom CSS and wanted to use the dashboard's theme color with reference rather than using hard coded hex-value.  
For this purpose I tried to inspect the html/css and reached to the following style under **app.min.less** :

```auto
/*
    DASHBOARD HEADER
*/
body.nr-dashboard-theme md-toolbar {
    background-color: @pageTitlebarBackgroundColor;
    color: #fff;
}

```

Hence I used **background-color: @pageTitlebarBackgroundColor;** in one of my custom css, but unfortunately it didn't work. It did not show any color at all.  
As I mentioned, I don't want to use hard-coded hex-value in my css, so how can I use something similar above to reference to my custom theme color which is currently set to #808000?

This is what I tried in my template with css:

```auto
#myTable th {
    text-align: left;
    background-color: @pageTitlebarBackgroundColor;
    color: white;
    font-weight: bold;
}

```

---

<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:** [29 May 2019 09:48 UTC](https://discourse.nodered.org/t/use-theme-color-in-dashboard-templates-custom-css/11650/2 "2019-05-29T09:48:03Z")

</div>

Yes - not as easy as it could be. We are looking at adding CSS variables to make this a whole lot easier.

Right now you can use javascript to

```auto
<script>
console.log("theme -> ",this.document.theme.themeState);
</script>

```

will get you an object with the current theme in and then use js to manipulate the style which may help

---

<div class="post-metadata">

**Author:** ![waqaslam](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waqaslam/32/2271_2.png) [@waqaslam](https://discourse.nodered.org/u/waqaslam)\
**Post date:** [30 May 2019 13:50 UTC](https://discourse.nodered.org/t/use-theme-color-in-dashboard-templates-custom-css/11650/3 "2019-05-30T13:50:42Z")

</div>

Hi,  
I see you have made a [commit](https://github.com/node-red/node-red-dashboard/commit/95fab7a7e0d499e9da8c144de7467c1259c899e6) regarding CSS styling in templates.  
So, I've updated my dashboard to the latest **v2.15.4** and replaced `@pageTitlebarBackgroundColor` with `--nr-dashboard-pageTitlebarBackgroundColor` but it still didn't work.

```auto
#myTable th {
  text-align: left;
  background-color: --nr-dashboard-pageTitlebarBackgroundColor;
  color: white;
  font-weight: bold;
}

```

Is this the correct way to use it? or am I doing anything wrong here?

---

<div class="post-metadata">

**Author:** ![waqaslam](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waqaslam/32/2271_2.png) [@waqaslam](https://discourse.nodered.org/u/waqaslam)\
**Post date:** [30 May 2019 13:56 UTC](https://discourse.nodered.org/t/use-theme-color-in-dashboard-templates-custom-css/11650/4 "2019-05-30T13:56:58Z")

</div>

Ahh, never mind. Got it fixed. Had to use it the correct way.  
`background-color: var(--nr-dashboard-pageTitlebarBackgroundColor);`  
All looks good now. Thanks for this update.

---

<div class="post-metadata">

**Author:** ![bglnelissen](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bglnelissen/32/20783_2.png) [@bglnelissen](https://discourse.nodered.org/u/bglnelissen)\
**Post date:** [21 January 2021 22:15 UTC](https://discourse.nodered.org/t/use-theme-color-in-dashboard-templates-custom-css/11650/5 "2021-01-21T22:15:50Z")

</div>

Although it seems a while ago, this might help someone else. I was playing with theme colors in my ui\_template nodes and having issues remembering the different colors. Here my solution for identifying the different variables for the different colors.

I used a `ui_template` node to see which is which.

 ![Screen Shot 2021-01-21 at 23.10.12](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/3/c318aef80ae97634993fb5bd0998deaec8574d35.png)

In my node I used the following code:

```auto
var(--nr-dashboard-pageBackgroundColor)<div style="width:100%;height:60px;background-color:var(--nr-dashboard-pageBackgroundColor)"></div><p>
var(--nr-dashboard-pageTitlebarBackgroundColor)<div style="width:100%;height:60px;background-color:var(--nr-dashboard-pageTitlebarBackgroundColor)"></div><p>
var(--nr-dashboard-pageSidebarBackgroundColor)<div style="width:100%;height:60px;background-color:var(--nr-dashboard-pageSidebarBackgroundColor)"></div><p>
var(--nr-dashboard-groupBackgroundColor)<div style="width:100%;height:60px;background-color:var(--nr-dashboard-groupBackgroundColor)"></div><p>
var(--nr-dashboard-groupTextColor)<div style="width:100%;height:60px;background-color:var(--nr-dashboard-groupTextColor)"></div><p>
var(--nr-dashboard-groupBorderColor)<div style="width:100%;height:60px;background-color:var(--nr-dashboard-groupBorderColor)"></div><p>
var(--nr-dashboard-widgetColor)<div style="width:100%;height:60px;background-color:var(--nr-dashboard-widgetColor)"></div><p>
var(--nr-dashboard-widgetTextColor)<div style="width:100%;height:60px;background-color:var(--nr-dashboard-widgetTextColor)"></div><p>
var(--nr-dashboard-widgetBgndColor)<div style="width:100%;height:60px;background-color:var(--nr-dashboard-widgetBgndColor)"></div><p>

```

Or you can import this node:

```auto
[{"id":"b7d856c6.99d198","type":"ui_template","z":"4d2d578e.6cea28","group":"fb4c245.8e22cd8","name":"Test theme colors","order":5,"width":0,"height":0,"format":"var(--nr-dashboard-pageBackgroundColor)<div style=\"font-size:72%;width:100%;height:60px;background-color:var(--nr-dashboard-pageBackgroundColor)\"></div><p>\nvar(--nr-dashboard-pageTitlebarBackgroundColor)<div style=\"font-size:72%;width:100%;height:60px;background-color:var(--nr-dashboard-pageTitlebarBackgroundColor)\"></div><p>\nvar(--nr-dashboard-pageSidebarBackgroundColor)<div style=\"font-size:72%;width:100%;height:60px;background-color:var(--nr-dashboard-pageSidebarBackgroundColor)\"></div><p>\nvar(--nr-dashboard-groupBackgroundColor)<div style=\"font-size:72%;width:100%;height:60px;background-color:var(--nr-dashboard-groupBackgroundColor)\"></div><p>\nvar(--nr-dashboard-groupTextColor)<div style=\"font-size:72%;width:100%;height:60px;background-color:var(--nr-dashboard-groupTextColor)\"></div><p>\nvar(--nr-dashboard-groupBorderColor)<div style=\"font-size:72%;width:100%;height:60px;background-color:var(--nr-dashboard-groupBorderColor)\"></div><p>\nvar(--nr-dashboard-widgetColor)<div style=\"font-size:72%;width:100%;height:60px;background-color:var(--nr-dashboard-widgetColor)\"></div><p>\nvar(--nr-dashboard-widgetTextColor)<div style=\"font-size:72%;width:100%;height:60px;background-color:var(--nr-dashboard-widgetTextColor)\"></div><p>\nvar(--nr-dashboard-widgetBgndColor)<div style=\"font-size:72%;width:100%;height:60px;background-color:var(--nr-dashboard-widgetBgndColor)\"></div><p>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":580,"y":2400,"wires":[[]]},{"id":"fb4c245.8e22cd8","type":"ui_group","name":"Demo","tab":"9cb34fc7.ab81b8","order":1,"disp":true,"width":"6","collapse":false},{"id":"9cb34fc7.ab81b8","type":"ui_tab","name":"Test","icon":"dashboard","order":17,"disabled":false,"hidden":false}]

```