# 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:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kaktoos](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kaktoos/32/3906_2.png) [@kaktoos](https://discourse.nodered.org/u/kaktoos)\
**Post date:** [17 November 2018 17:23 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/1 "2018-11-17T17:23:34Z")

</div>

Hi All,

I'm looking for a way to change style dynamically based on time of the day.  
During day hours style should be light and during night style should be dark.

Do you know how to work on this topic?

ui control node isn't helping at this moment...

Thanks in advance for any info/help or comments.

Best regards!

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [19 November 2018 10:14 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/2 "2018-11-19T10:14:59Z")

</div>

did you read the info tab of the ui-template node?

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [20 November 2018 05:14 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/3 "2018-11-20T05:14:01Z")

</div>

With CSS variables in a ui-template you could overwrite the dashboard colors on input change. See reference: [https://www.w3schools.com/css/css3\_variables.asp](https://www.w3schools.com/css/css3_variables.asp)

---

<div class="post-metadata">

**Author:** ![kaktoos](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kaktoos/32/3906_2.png) [@kaktoos](https://discourse.nodered.org/u/kaktoos)\
**Post date:** [20 November 2018 20:59 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/4 "2018-11-20T20:59:05Z")

</div>

@zenofmud - did you understood properly what the issue is?

@hugobox - thanks, this is something to work... but I'm thinking on something else. More on how to change the value that is stored in "Dashboard tab" -\> Theme sub tab -\> Style field and then refresh the page...  
But maybe I'm going to wrong direction...

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [20 November 2018 21:19 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/5 "2018-11-20T21:19:01Z")

</div>

> [@kaktoos](#):
>
> @zenofmud - did you understood properly what the issue is?

Yes I do understand - you want to change the style dynamically and if you have read the info tab, it shows an example of how to change something based on msg.payload.

Thiis should give you a feel for how you can do it.

It is not something baked into NR it is something you will need to do with CSS and programmatically in the template and in NR (like you might possibly want an inject node to fire at a sertian time of day that would go to the template node and cause the changes to happen)

---

<div class="post-metadata">

**Author:** ![kaktoos](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kaktoos/32/3906_2.png) [@kaktoos](https://discourse.nodered.org/u/kaktoos)\
**Post date:** [20 November 2018 22:11 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/6 "2018-11-20T22:11:55Z")

</div>

@zenofmud - yup - true... but I've wanted to change dashboard 'Style' value and refresh page.

To be hosnest - I'm not sure if after 3-4 style changes of my quite big dashboard memory of chrome will not explode. I also have a lot of elements and there are a lot of custom stuff, so this might generate a lot of bugs...

So changing 1 value and page reload could be easier, but I might be wrong...

---

<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:** [21 November 2018 17:21 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/7 "2018-11-21T17:21:15Z")

</div>

let me have a look. no promises. but not an unreasonable concept. Currently it does need a deploy to make the basic change happen (ie re-evaluate the css templates) but there must be a way to make it happen without.

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [22 November 2018 20:41 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/8 "2018-11-22T20:41:06Z")

</div>

In case you want to test CSS variable in a ui\_template method, here's a flow that shows the basics:

```auto
[
    {
        "id": "eb204ee6.62865",
        "type": "ui_template",
        "z": "65935088.e7e47",
        "group": "5625d033.1d56f",
        "name": "Change theme color",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style>\nmd-toolbar#toolbar{\n background-color: var(--main-color);\n}\n\nbody.nr-dashboard-theme md-content {\n color: var(--main-color);\n}\nbody.nr-dashboard-theme md-sidenav {\n color: var(--main-color);\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: var(--main-color);\n}\n.nr-dashboard-theme .nr-dashboard-template .md-button{\n background-color: var(--main-color);\n}\n.nr-dashboard-theme .nr-dashboard-template .md-button:disabled {\n color: grey;\n}\n.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {\n background-color: var(--main-color);\n border-color: var(--main-color);\n}\n.nr-dashboard-theme .nr-dashboard-slider .md-track-fill {\n background-color: var(--main-color);\n}\n.nr-dashboard-theme .nr-dashboard-template ::-webkit-scrollbar {\n background-color: #666666;\n}\n.nr-dashboard-theme .nr-dashboard-template ::-webkit-scrollbar-thumb {\n background-color: var(--main-color);\n}\n</style>\n\n<script>\n(function($scope) {\n \n$scope.$watch('msg.payload', function() {\n console.log($scope.msg.payload);\n var html = document.getElementsByTagName('html')[0];\n html.style.setProperty(\"--main-color\", $scope.msg.payload);\n});\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 520,
        "y": 760,
        "wires": [
            []
        ]
    },
    {
        "id": "4ac7255.934ecdc",
        "type": "inject",
        "z": "65935088.e7e47",
        "name": "",
        "topic": "",
        "payload": "red",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 290,
        "y": 720,
        "wires": [
            [
                "eb204ee6.62865"
            ]
        ]
    },
    {
        "id": "76a5b5ff.26754c",
        "type": "inject",
        "z": "65935088.e7e47",
        "name": "",
        "topic": "",
        "payload": "blue",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 290,
        "y": 760,
        "wires": [
            [
                "eb204ee6.62865"
            ]
        ]
    },
    {
        "id": "5625d033.1d56f",
        "type": "ui_group",
        "z": "",
        "name": "test",
        "tab": "9a95bc09.40d37",
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "9a95bc09.40d37",
        "type": "ui_tab",
        "z": "",
        "name": "test",
        "icon": "dashboard"
    }
]
```

---

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

```

---

<div class="post-metadata">

**Author:** ![kaktoos](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kaktoos/32/3906_2.png) [@kaktoos](https://discourse.nodered.org/u/kaktoos)\
**Post date:** [23 November 2018 17:40 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/10 "2018-11-23T17:40:49Z")

</div>

Thanks hugobox & Andrei for workaround.

@dceejay - any progress or you just gave up? 😉

---

<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:** [23 November 2018 18:28 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/11 "2018-11-23T18:28:06Z")

</div>

Sorry real work has got in the way. Will get to it eventually, but feel free to jump in with a pull request.

---

<div class="post-metadata">

**Author:** ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)\
**Post date:** [7 April 2019 03:31 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/12 "2019-04-07T03:31:42Z")

</div>

Hey @zenofmud, if I use the sample code in the info panel on a UI\_template, what exactly does the template node need as a payload to dynamically change the dashboard from light to dark for example? The theme name?  
Tks sir

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 April 2019 08:20 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/13 "2019-04-07T08:20:36Z")

</div>

You can not dynamically change the whole theme of the dashboard. You can however use the ui-template to change anything you want and if you used @Andrei 's example, you could pass a color in msg.payload to chang things.

---

<div class="post-metadata">

**Author:** ![lukas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lukas/32/7357_2.png) [@lukas](https://discourse.nodered.org/u/lukas)\
**Post date:** [7 April 2019 19:58 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/14 "2019-04-07T19:58:18Z")

</div>

> [@Andrei](#):
>
> > 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 o

Hi,  
I am new in NodeRED. How could I use this part of the code in my application? I am not sure where to include it 😕

---

<div class="post-metadata">

**Author:** ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)\
**Post date:** [2 July 2019 04:47 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/15 "2019-07-02T04:47:36Z")

</div>

Hey guys, any change in the capability? We're looking for a way for a user to swap between the standard light and dark themes depending on the time of day (light/day and dark/night). Has anyone built something that can do this?  
Appreciate any replies.

---

<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:** [2 July 2019 19:33 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/16 "2019-07-02T19:33:49Z")

</div>

currently this isn't possible in any simple manner.

---

<div class="post-metadata">

**Author:** ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)\
**Post date:** [11 July 2019 20:55 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/17 "2019-07-11T20:55:18Z")

</div>

Thanks @dceejay, on the not simple line of thought - I was thinking of writing a function to edit the flow.json file and restart node-red. Can you think of a less intrusive way by chance?  
Appreciate your thoughts sir

---

<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:** [11 July 2019 22:25 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/18 "2019-07-11T22:25:31Z")

</div>

currently that is the way. uurgh.

---

<div class="post-metadata">

**Author:** ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)\
**Post date:** [12 July 2019 15:23 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/19 "2019-07-12T15:23:58Z")

</div>

Roger that 😑

---

<div class="post-metadata">

**Author:** ![GerardoCudicio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerardocudicio/32/107714_2.png) [@GerardoCudicio](https://discourse.nodered.org/u/GerardoCudicio)\
**Post date:** [8 October 2019 13:47 UTC](https://discourse.nodered.org/t/dynamic-style-change-between-light-and-dark/4977/20 "2019-10-08T13:47:40Z")

</div>

A menos que no esté entendiendo nada, lo cual es probable, creo que podemos hacer un nodo de función con doble salida y dentro una función javascript que evalue la hora actual con un IF de manera que inyecte un msg.payload con los colores que desee