# Dynamic style change between Light and Dark

**URL:** https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977
**Category:** Dashboard
**Created:** [17 November 2018 17:23 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977 "2018-11-17T17:23:34Z")
**Posts on this page:** 1
**Showing post:** 9

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [22 November 2018 20:55 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/9 "2018-11-22T20:55:52Z")

</div>

> [@hugobox](#):
>
> In case you want to test CSS variable in a ui\_template method, here's a flow that shows the basics:

Nice, good use of CSS variables.

Eventually the UI template could be simplified as below ( no need of using the $scope). Also it would be advisable to add a default value in the `var()` method.

```auto
<style>

:root {
    --main-color: {{msg.payload}};
}

md-toolbar#toolbar{
    background-color: var(--main-color,green);
}

body.nr-dashboard-theme md-content {
    color: var(--main-color,green);
}
body.nr-dashboard-theme md-sidenav {
    color: var(--main-color,green);
}
.nr-dashboard-theme .nr-dashboard-button .md-button {
    background-color: var(--main-color,green);
}
.nr-dashboard-theme .nr-dashboard-template .md-button{
    background-color: var(--main-color,green);
}
.nr-dashboard-theme .nr-dashboard-template .md-button:disabled {
    color: grey;
}
.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {
    background-color: var(--main-color,green);
    border-color: var(--main-color,green);
}
.nr-dashboard-theme .nr-dashboard-slider .md-track-fill {
    background-color: var(--main-color,green);
}
.nr-dashboard-theme .nr-dashboard-template ::-webkit-scrollbar {
    background-color: #666666;
}
.nr-dashboard-theme .nr-dashboard-template ::-webkit-scrollbar-thumb {
    background-color: var(--main-color,green);
}
</style>

```

---

_[View the full topic](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977)._