# Change background color of ui\_switch dynamic

**URL:** <https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302>\
**Category:** Dashboard\
**Created:** [4 September 2022 00:50 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302 "2022-09-04T00:50:26Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![MrX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrx/32/74473_2.png) [@MrX](https://discourse.nodered.org/u/MrX)\
**Post date:** [4 September 2022 00:50 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/1 "2022-09-04T00:50:26Z")

</div>

I have spend many, many hours to figure out how I could change the background color dynamic of a dashboard UI switch (palette node-red-dashboard node "Switch" / ui\_switch).  
I could set the background color static by using CSS for each switch, but I don´t know how I can change the color dynamic.  
I could also change the knob color for on/off-state for each switch with msg. or CSS.  
I have read many comment in this forum, but no one have solved my problem.

I want to set each switch on the dashboard in 3 states, ON, OFF or OFFLINE.  
When a device e.q. SONOFF S26 is connected to the WiFi-network, the UI of the switch should be ON or OFF with blue background color(ONLINE).  
When the device is disconected from Wifi-network the UI switch background color should be gray (OFFLINE).  
The switch-node are disable pass through the msg-message.  
I´m using the latest version of NodeRed.

Please, help me....

---

<div class="post-metadata">

**Author:** ![MrX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrx/32/74473_2.png) [@MrX](https://discourse.nodered.org/u/MrX)\
**Post date:** [4 September 2022 00:58 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/2 "2022-09-04T00:58:11Z")

</div>

I´m using MQTT teleperiod (topic stat/device/state) to detect if a device is ONLINE or OFFLINE. If NodeRed haven´t received a MQTT tele-message from the Tasmota-device before 300 seconds then the device is detected as OFFLINE.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 September 2022 01:15 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/3 "2022-09-04T01:15:39Z")

</div>

Create some CSS classes that do what you need then send the class name in `msg.className`.

Read the built in help and search the forum for "msg.className"

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 September 2022 01:35 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/4 "2022-09-04T01:35:21Z")

</div>

A simple example:

 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/4/b4f7ad0d95acc725c531dde6b641f7b1a13bea12.jpeg)

```auto
[{"id":"9c6077bb3b0cbc57","type":"ui_switch","z":"831a451fa9d84779","name":"","label":"switch","tooltip":"","group":"360b409060b23c5b","order":3,"width":0,"height":0,"passthru":false,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":510,"y":200,"wires":[[]]},{"id":"0aeab08326d94ffb","type":"inject","z":"831a451fa9d84779","name":"msg.className = \"green\"","props":[{"p":"className","v":"green","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":270,"y":200,"wires":[["9c6077bb3b0cbc57"]]},{"id":"5503f0b3f56647a7","type":"ui_template","z":"831a451fa9d84779","group":"360b409060b23c5b","name":"","order":3,"width":0,"height":0,"format":"<style>\n .blue md-switch{\n background-color: blue;\n }\n .green md-switch{\n background-color: green;\n }\n </style> ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":520,"y":140,"wires":[[]]},{"id":"eb28e8798a066344","type":"inject","z":"831a451fa9d84779","name":"msg.className = \"blue\"","props":[{"p":"className","v":"blue","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":270,"y":240,"wires":[["9c6077bb3b0cbc57"]]},{"id":"360b409060b23c5b","type":"ui_group","name":"Demo","tab":"0c531246b2a3f00e","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"0c531246b2a3f00e","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![MrX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrx/32/74473_2.png) [@MrX](https://discourse.nodered.org/u/MrX)\
**Post date:** [4 September 2022 10:23 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/5 "2022-09-04T10:23:43Z")

</div>

![sw](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a710c35dc9358f4f93a6668c227a1dbf96a04eec.jpeg)  
Thank you, but it doesn´t change the background color.  
It change only the background color of the small area around the "knob".  
I want to change the hole area marked with a red line.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 September 2022 10:35 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/6 "2022-09-04T10:35:58Z")

</div>

Use your browsers tools to inspect it determine the correct CSS selector and adjust the CSS to include that area.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 September 2022 10:54 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/7 "2022-09-04T10:54:57Z")

</div>

> I could set the background color static by using CSS for each switch

I assumed from what you first said that you knew how to set the background colour using CSS.

My example just showed you how to change the colour of a CSS element (background-color, as it happens) dynamically.  
It's up to you to extend that to your requirements 🙃

---

<div class="post-metadata">

**Author:** ![MrX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrx/32/74473_2.png) [@MrX](https://discourse.nodered.org/u/MrX)\
**Post date:** [4 September 2022 11:24 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/8 "2022-09-04T11:24:09Z")

</div>

Yes, I know how to set the color static with CSS, but not dynamic

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 September 2022 12:01 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/9 "2022-09-04T12:01:47Z")

</div>

Have you got it sorted out?

If you need more help please post your flow (use the `</>` button)

---

<div class="post-metadata">

**Author:** ![MrX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrx/32/74473_2.png) [@MrX](https://discourse.nodered.org/u/MrX)\
**Post date:** [4 September 2022 23:14 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/12 "2022-09-04T23:14:43Z")

</div>

I´m not a professional programmer, so I still need help with my program. My program doesn´t work to change the background color of the ui\_switch in OFFLINE state and I have no idea how I should solve it.  
jbudd, I think you are very close to a solution for me 😉

```auto
[{"id":"8d019ea56be3d90f","type":"delay","z":"b274a3816b2c7716","name":"Delay","pauseType":"delayv","timeout":"7","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":530,"y":620,"wires":[["74fad2df6cfccac7"]],"icon":"node-red-contrib-bigtimer/timer.png"},{"id":"74fad2df6cfccac7","type":"function","z":"b274a3816b2c7716","name":"Test if \"OFFLINE\"-state","func":"// Set OFFLINE\nmsg.bakgrund = \"#808080\";\nmsg.texta = \"#C0C0C0\";\nmsg.enable =false;\nmsg.payload=\"OFFLINE\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":770,"y":620,"wires":[["868716a0e25b62ac"]]},{"id":"99170cbf37c7b996","type":"mqtt in","z":"b274a3816b2c7716","name":"","topic":"tele/DEV1/STATE","qos":"2","datatype":"auto-detect","broker":"ddc04ba7b60af969","nl":false,"rap":true,"rh":0,"inputs":0,"x":140,"y":620,"wires":[["e77587ee8b33c6f2","868716a0e25b62ac"]]},{"id":"868716a0e25b62ac","type":"function","z":"b274a3816b2c7716","name":"Set \"ON\", \"OFF\" or \"OFFLINE\"","func":"var xx;\nxx=msg.payload.POWER1 ;\nmsg.payload=xx;\nmsg.topic=\"stat/DEV1/POWER1\";\nmsg.ikon = \"lightbulb_outline\";\nmsg.my_label = \"Living room\";\n\nif (xx === \"ON\") {\n msg.bg = \"#000050\" ; // set dark blue background color in ONLINE state\n msg.knob = \"#FFFF00\" ; //set knob color in ON state\n msg.enable = true ;\n } \n\nif (xx === \"OFF\") {\n msg.bg = \"#000050\" ; // set dark blue background color in ONLINE state\n msg.knob = \"#FFFF00\" ; //set yellow knob color in ON statet\n msg.enable = true ;\n }\n\nif (xx === \"OFFLINE\") {\n msg.bg = \"#303030\" ; // set gray background color in ONLINE state\n msg.knob = \"#505050\" ; //set gray knob color in OFFLINE state\n msg.enable =false;\n }\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"// Code added here will be run once\n// whenever the node is started.\n//Set to OFFLINE from start until a tele message is sent from the device\n//var msg2 = { payload: msg.payload,topic:msg.topic };\n\n//setTimeout=150;\n//msg2.payload=\"OFFLINE\";\n//msg2.topic=\"stat/DEV2/POWER1\";\n//msg2.ikon = \"lightbulb_outline\";\n//msg2.etikett = \"DEV2 102\";\n//msg2.bakgrund = \"#808080\"; //dark gray background\n//msg2.texta = \"#C0C0C0\"; // gray text\n//msg2.enable =false;\n//return msg2;\n\n//var newMsg = { payload: msg.payload,topic:msg.topic };\n//return newMsg;","finalize":"","libs":[],"x":590,"y":540,"wires":[["4666ef848cd2daeb","53efc1510ee939cc"]]},{"id":"e77587ee8b33c6f2","type":"function","z":"b274a3816b2c7716","name":"Set tele check timer","func":"// check if tele-massage is received from the device every 5 minut\n// teleperiod = 300 seconds = 5 minut\nmsg.delay=360000; // wait 360 seconds \nvar m1 = {reset:true};\nreturn [[m1,msg]];","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":350,"y":620,"wires":[["8d019ea56be3d90f"]]},{"id":"4666ef848cd2daeb","type":"ui_switch","z":"b274a3816b2c7716","name":"Living room DEV1","label":"{{msg.my_label}}","tooltip":"","group":"b04b273915dc4d79","order":1,"width":5,"height":1,"passthru":false,"decouple":"true","topic":"cmnd/DEV1/POWER1","topicType":"str","style":"","onvalue":"ON","onvalueType":"str","onicon":"fa-3x fa-lightbulb-o","oncolor":"YELLOW","offvalue":"OFF","offvalueType":"str","officon":"fa-2x fa-lightbulb-o","offcolor":"GRAY","animate":true,"className":"<i class=\"fa fa-toggle-off\" aria-hidden=\"true\"></i>","x":870,"y":540,"wires":[[]]},{"id":"030c7c831726a08b","type":"inject","z":"b274a3816b2c7716","name":"Assume device OFFLINE when start NodeRed","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"tele/DEV1/STATE","payload":"OFFLINE","payloadType":"str","x":400,"y":680,"wires":[["74fad2df6cfccac7"]]},{"id":"b0481c44fa76da9c","type":"ui_template","z":"b274a3816b2c7716","group":"9108a547650403e7","name":"sw0","order":4,"width":0,"height":0,"format":"<style id=\"switch-css\">\n .sw0{\n background: #000066 !important;\n }\n .sw0 > md-switch .md-thumb{\n background: gray !important;\n }\n .sw0 > md-switch.md-checked .md-thumb{\n background: yellow !important;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":770,"y":680,"wires":[[]]},{"id":"8b210b0f7395cb0e","type":"inject","z":"b274a3816b2c7716","name":"Test the OFFLINE state","props":[{"p":"payload.POWER1","v":"OFFLINE","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":160,"y":540,"wires":[["868716a0e25b62ac"]]},{"id":"0b10468d0f683269","type":"inject","z":"b274a3816b2c7716","name":"Test the OFF state","props":[{"p":"payload.POWER1","v":"OFF","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":150,"y":500,"wires":[["868716a0e25b62ac"]]},{"id":"c06c1ef19c1e3d68","type":"inject","z":"b274a3816b2c7716","name":"Test the ON state","props":[{"p":"payload.POWER1","v":"ON","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":140,"y":460,"wires":[["868716a0e25b62ac"]]},{"id":"53efc1510ee939cc","type":"debug","z":"b274a3816b2c7716","name":"debug 47","active":true,"tosidebar":true,"console":true,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":890,"y":460,"wires":[]},{"id":"ddc04ba7b60af969","type":"mqtt-broker","name":"Broker","broker":"localhost","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""},{"id":"b04b273915dc4d79","type":"ui_group","name":"Datarum","tab":"5e3aeb8c11d16ed6","order":2,"disp":true,"width":5,"collapse":true,"className":""},{"id":"9108a547650403e7","type":"ui_group","name":"Akvarium","tab":"4079a25d2b7273b5","order":9,"disp":true,"width":6,"collapse":false,"className":""},{"id":"5e3aeb8c11d16ed6","type":"ui_tab","name":"Belysning","icon":"fa-2x fa-lightbulb-o","order":1,"disabled":false,"hidden":false},{"id":"4079a25d2b7273b5","type":"ui_tab","name":"Akvarium","icon":"","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [5 September 2022 00:31 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/13 "2022-09-05T00:31:28Z")

</div>

I assume you have a reasonably up-to date installation of Node-red; node-red-dashboard should be version 3.1.7

You need a ui-template which defines the background-color and other properties for the three different classes ON, OFF and OFFLINE

Then you need to send a message to the switch node which includes msg.className "ON", "OFF" or "OFFLINE". **It has to be msg.className.**  
It looks like you can get this from your MQTT node msg.payload.POWER1.  
You can move it into msg.payload.className with a change node.

```auto
[{"id":"234b595564c69a47","type":"tab","label":"Flow 3","disabled":false,"info":"","env":[]},{"id":"d2d573e0d2850da2","type":"ui_switch","z":"234b595564c69a47","name":"","label":"switch","tooltip":"","group":"360b409060b23c5b","order":3,"width":0,"height":0,"passthru":false,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":590,"y":320,"wires":[[]]},{"id":"d33f138a6c748e79","type":"ui_template","z":"234b595564c69a47","group":"360b409060b23c5b","name":"","order":3,"width":0,"height":0,"format":"<style>\n /* Background colour of entire widget */\n md-card.nr-dashboard-switch.ON { \n background-color: green;\n }\n md-card.nr-dashboard-switch.ON p {\n font-family: \"Comic Sans MS\", sans-serif;\n font-size: 1.5em;\n }\n md-card.nr-dashboard-switch.OFF {\n background-color: red;\n }\n md-card.nr-dashboard-switch.OFF p {\n font-family: \"Times New Roman\", serif;\n font-size: 1.5em;\n }\n md-card.nr-dashboard-switch.OFFLINE {\n background-color: grey;\n }\n\n /* Example for OFFLINE - The actual switch thumb (knob) and bar (slider) with and without .checked */\n md-card.nr-dashboard-switch.OFFLINE md-switch .md-thumb {\n background-color: gainsboro;\n }\n md-card.nr-dashboard-switch.OFFLINE md-switch.md-checked .md-thumb {\n background-color: lightslategrey;\n }\n md-card.nr-dashboard-switch.OFFLINE md-switch .md-bar {\n background-color: ghostwhite;\n }\n md-card.nr-dashboard-switch.OFFLINE md-switch.md-checked .md-bar {\n background-color: lightgrey;\n }\n </style> ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":280,"wires":[[]]},{"id":"38bbf13cfb3fc93b","type":"inject","z":"234b595564c69a47","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"ON","payloadType":"str","x":210,"y":140,"wires":[["c5e0972c497e3c05"]]},{"id":"c583de4eed3b0dea","type":"inject","z":"234b595564c69a47","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"OFF","payloadType":"str","x":210,"y":180,"wires":[["c5e0972c497e3c05"]]},{"id":"0045e4c73b88caf0","type":"inject","z":"234b595564c69a47","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"OFFLINE","payloadType":"str","x":220,"y":220,"wires":[["c5e0972c497e3c05"]]},{"id":"c5e0972c497e3c05","type":"change","z":"234b595564c69a47","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"className","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":320,"wires":[["d2d573e0d2850da2"]]},{"id":"7f7c5557c0d05ffd","type":"mqtt in","z":"234b595564c69a47","name":"","topic":"tele/DEV1/STATE","qos":"2","datatype":"auto-detect","broker":"ddc04ba7b60af969","nl":false,"rap":true,"rh":0,"inputs":0,"x":220,"y":380,"wires":[["c5e0972c497e3c05"]]},{"id":"360b409060b23c5b","type":"ui_group","name":"Demo","tab":"0c531246b2a3f00e","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"ddc04ba7b60af969","type":"mqtt-broker","name":"Broker","broker":"localhost","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""},{"id":"0c531246b2a3f00e","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

```

I don't think your msg.background and msg.knob is the best approach, not sure what you are trying to do there.

---

<div class="post-metadata">

**Author:** ![MrX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrx/32/74473_2.png) [@MrX](https://discourse.nodered.org/u/MrX)\
**Post date:** [6 September 2022 15:57 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/14 "2022-09-06T15:57:21Z")

</div>

Finally it works after 40 h works.....  
jbudd, thank you !  
You are fantastic 😉

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 October 2022 15:58 UTC](https://discourse.nodered.org/t/change-background-color-of-ui-switch-dynamic/67302/15 "2022-10-06T15:58:08Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.