Dynamic style change between Light and Dark

Dashboard
1

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!

2

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

3

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

4

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

5

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)

6

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

7

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.

8

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

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

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.

<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>
1 Like
10

Thanks hugobox & Andrei for workaround.

@dceejay - any progress or you just gave up? :wink:

11

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

12

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

13

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.

14

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

15

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.

16

currently this isn't possible in any simple manner.

17

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

18

currently that is the way. uurgh.

19

Roger that :expressionless:

20

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

1 Like