Use theme color in dashboard-template's custom css

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;
}

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

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?

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