Use theme color in dashboard-template's custom css

FAQs
1

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:

/*
    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:

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

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

<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

1 Like
3

Hi,
I see you have made a commit 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.

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

4

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.

1 Like
5

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
Screen Shot 2021-01-21 at 23.10.12327Ă—973 32.7 KB

In my node I used the following code:

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:

[{"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}]
4 Likes