# Switch node icons color problem
**URL:** https://discourse.nodered.org/t/switch-node-icons-color-problem/33758
**Category:** Dashboard
**Created:** [5 October 2020 09:10 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758 "2020-10-05T09:10:40Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@mariulin](https://discourse.nodered.org/u/mariulin)
#### Post date: [5 October 2020 09:10 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/1 "2020-10-05T09:10:41Z")
Hi folks,
I've this problem.
I need to change icons color in a Switch Node, depending from a "msg" retrieved from a function node:
**Function node example:**
"{msg.colour = '#e6d00b';}
return msg;"
**These are my switch node settings** : (but it doesn't work)
Thank you
Mario
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [5 October 2020 09:12 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/2 "2020-10-05T09:12:20Z")
(I'm not seeing a question)
---
### Author:  [@mariulin](https://discourse.nodered.org/u/mariulin)
#### Post date: [5 October 2020 09:16 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/3 "2020-10-05T09:16:39Z")
I need to change icons color in a Switch Node, depending from a "msg" retrieved from a function node, but I don't known how to do it. This is the question.
Thanks
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [5 October 2020 09:18 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/4 "2020-10-05T09:18:42Z")
As a base line:
```auto
[{"id":"3354cba4.823424","type":"function","z":"26262ba1.62dcbc","name":"","func":"msg.payload = \"what ever you want\";\nmsg.colour = \"blue\";\nreturn msg;","outputs":1,"noerr":0,"x":2660,"y":2090,"wires":[[]]}]
```
And points for spelling colour correctly. 😉
Or going a bit further on the _depending on payload_ which I missed (sorry)
```auto
[{"id":"b09952c0.3b0ff8","type":"function","z":"26262ba1.62dcbc","name":"","func":"if (msg.payload == \"ONE\")\n{\n msg.colour = \"blue\";\n} else\nif (msg.payload == \"TWO\")\n{\n msg.colour = \"red\";\n}\nreturn msg;","outputs":1,"noerr":0,"x":2660,"y":2080,"wires":[[]]}]
```
---
### Author:  [@mariulin](https://discourse.nodered.org/u/mariulin)
#### Post date: [5 October 2020 09:32 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/6 "2020-10-05T09:32:10Z")
I've try on th fly!!!
The problem is not in "Function node" but in "Switch Node". How or where can I specify the "variable" colour?
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [5 October 2020 10:31 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/7 "2020-10-05T10:31:26Z")
If you want the `switch` node to change colour depending on the payload: the second flow I posted does that.
The `switch` node isn't smart enough to detect different payloads and adjust the colour in accordance.
So I did it with the `function` node.
Granted you need to edit the code in the node to what you want. The bit I posted was only as an example.
Does that make it clearer?
---
### Author:  [@mariulin](https://discourse.nodered.org/u/mariulin)
#### Post date: [5 October 2020 12:19 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/8 "2020-10-05T12:19:16Z")
I've posted this image in my first message
Is correct? In my project it is NOT working.
What must I write in "switch node" in the "Colour" field?
Sorry, but I've understand how "function node" works, but not the "switch node"...
You haven't post any "switch node", don't you?
---
### Author:  [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)
#### Post date: [5 October 2020 16:18 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/9 "2020-10-05T16:18:04Z")
Try this :
```auto
[{"id":"ef8314d8.430358","type":"debug","z":"c5966c3d.677f3","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":610,"y":1090,"wires":[]},{"id":"47462941.153fe8","type":"inject","z":"c5966c3d.677f3","name":"on","props":[{"p":"bulb","v":"on","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":210,"y":1240,"wires":[["440a6a15.f3a5c4"]]},{"id":"440a6a15.f3a5c4","type":"switch","z":"c5966c3d.677f3","name":"","property":"bulb","propertyType":"msg","rules":[{"t":"eq","v":"on","vt":"str"},{"t":"eq","v":"off","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":350,"y":1260,"wires":[["1172ac25.6c6ad4"],["93c6ad8d.e8bb5"]]},{"id":"1172ac25.6c6ad4","type":"function","z":"c5966c3d.677f3","name":"on","func":"msg.color = \"#e6d00b\";\nmsg.background = \"#454545\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":490,"y":1240,"wires":[["70e99c79.cc27c4"]]},{"id":"93c6ad8d.e8bb5","type":"function","z":"c5966c3d.677f3","name":"off","func":"msg.color = \"grey\";\nmsg.background = \"#454545\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":490,"y":1280,"wires":[["70e99c79.cc27c4"]]},{"id":"66fbbdbf.fc8bd4","type":"inject","z":"c5966c3d.677f3","name":"off","props":[{"p":"bulb","v":"off","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":210,"y":1280,"wires":[["440a6a15.f3a5c4"]]},{"id":"70e99c79.cc27c4","type":"ui_button","z":"c5966c3d.677f3","name":"","group":"f90f3cdb.aa35b","order":37,"width":"2","height":"1","passthru":false,"label":"","tooltip":"","color":"{{msg.color}}","bgcolor":"{{msg.background}}","icon":"fa-3x fa-lightbulb-o","payload":"","payloadType":"str","topic":"","x":630,"y":1260,"wires":[[]]},{"id":"bb3f92ba.469b1","type":"function","z":"c5966c3d.677f3","name":"Gate","func":"let oncolor = msg.oncolor;\nmsg.ui_control = {onicon:\"fa-3x fa-lightbulb-o\",oncolor:oncolor,officon:\"fa-3x fa-lightbulb-o\",offcolor:\"grey\"}\nreturn msg;\n\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":370,"y":1090,"wires":[["c749f1f9.5a5ca"]]},{"id":"c749f1f9.5a5ca","type":"ui_switch","z":"c5966c3d.677f3","name":"","label":"","tooltip":"","group":"f90f3cdb.aa35b","order":1,"width":"2","height":1,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"onicon","oncolor":"oncolor","offvalue":"false","offvalueType":"bool","officon":"officon","offcolor":"offcolor","x":490,"y":1090,"wires":[["ef8314d8.430358"]]},{"id":"3a0a9cc3.a3b8b4","type":"inject","z":"c5966c3d.677f3","name":"#e6d00b","props":[{"p":"oncolor","v":"#e6d00b","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":210,"y":1060,"wires":[["bb3f92ba.469b1"]]},{"id":"1970e6e5.2e5219","type":"inject","z":"c5966c3d.677f3","name":"#33ccff","props":[{"p":"oncolor","v":"#33ccff","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":210,"y":1110,"wires":[["bb3f92ba.469b1"]]},{"id":"ac154135.26ec8","type":"inject","z":"c5966c3d.677f3","name":"on","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":360,"y":1010,"wires":[["c749f1f9.5a5ca"]]},{"id":"ce31ec5a.ad80a","type":"inject","z":"c5966c3d.677f3","name":"off","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":360,"y":1050,"wires":[["c749f1f9.5a5ca"]]},{"id":"295af012.d358b","type":"comment","z":"c5966c3d.677f3","name":"========== push button ==========","info":"","x":360,"y":1320,"wires":[]},{"id":"5788a357.bc37ac","type":"comment","z":"c5966c3d.677f3","name":"inject color first","info":"","x":190,"y":1030,"wires":[]},{"id":"969fd1b0.45332","type":"comment","z":"c5966c3d.677f3","name":"play on or off","info":"","x":350,"y":980,"wires":[]},{"id":"4612bd83.7e3134","type":"comment","z":"c5966c3d.677f3","name":"color and background color here","info":"","x":500,"y":1210,"wires":[]},{"id":"4f80caf3.b87a14","type":"comment","z":"c5966c3d.677f3","name":"play on or off","info":"","x":200,"y":1210,"wires":[]},{"id":"7ccd2793.b1b528","type":"comment","z":"c5966c3d.677f3","name":"========== switch button ==========","info":"","x":370,"y":1140,"wires":[]},{"id":"f90f3cdb.aa35b","type":"ui_group","z":"","name":"forrage","tab":"f1dcd1e8.54e1","order":1,"disp":true,"width":"10","collapse":true},{"id":"f1dcd1e8.54e1","type":"ui_tab","z":"","name":"ESP12","icon":"home","order":17,"disabled":false,"hidden":false}]
```
here are 2 examples:
- at the top using a **ui-switch** : first inject the color, then play with on and off or click on the icon to see the color change from on to off
- at the bottom the **ui-button** : the color is defined in the on , off Functions nodes. Play with on and off to see it turn on and off
---
### Author:  [@mariulin](https://discourse.nodered.org/u/mariulin)
#### Post date: [5 October 2020 19:20 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/10 "2020-10-05T19:20:26Z")
I've try you're flows, but in all two, I see only a grey or a white lamp. No one color. It is the same problem that I have whith my original flows.
I don't understand... 🤔
---
### Author:  [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)
#### Post date: [5 October 2020 19:24 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/11 "2020-10-05T19:24:05Z")
i use **node-red-dashboard v2.22.0** and you ?
---
### Author:  [@mariulin](https://discourse.nodered.org/u/mariulin)
#### Post date: [5 October 2020 19:32 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/12 "2020-10-05T19:32:05Z")
🤫 😬
Probably the problem is this!!!
---
### Author:  [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)
#### Post date: [5 October 2020 19:34 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/13 "2020-10-05T19:34:08Z")
Probably : update your Node-red and node-red-dashboard in your palette manager
---
### Author:  [@mariulin](https://discourse.nodered.org/u/mariulin)
#### Post date: [5 October 2020 20:14 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/14 "2020-10-05T20:14:51Z")
Not yet...
Node-Red version 1.1.4 and Node-red-dashboard version 2.23.4, but also same problem...
ðŸ˜
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [5 October 2020 20:27 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/15 "2020-10-05T20:27:57Z")
Can you please post the node code?
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [5 October 2020 20:39 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/17 "2020-10-05T20:39:56Z")
(You may want to edit that post and put the code in correctly.)
Use the `` button.
No. Not quite.
See the `` button in the top of the edit screen (when you are posing)?
Click it and then paste the code.
If done correctly, you should see one line of text only with your code.
---
### Author:  [@mariulin](https://discourse.nodered.org/u/mariulin)
#### Post date: [5 October 2020 20:43 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/18 "2020-10-05T20:43:26Z")
My code
```auto
[
{
"id": "c49ce89e.f6b4f8",
"type": "comment",
"z": "d8c1672b.eeadc8",
"name": "Luci Esterne",
"info": "",
"x": 110,
"y": 40,
"wires": []
},
{
"id": "33409cd2.9de114",
"type": "ui_audio",
"z": "d8c1672b.eeadc8",
"name": "Messaggio Vocale",
"group": "3b49ec8e.cf4144",
"voice": "it-IT",
"always": true,
"x": 550,
"y": 40,
"wires": []
},
{
"id": "8f8f9600.1368c8",
"type": "http request",
"z": "d8c1672b.eeadc8",
"name": "Switch Shelly",
"method": "GET",
"ret": "txt",
"paytoqs": false,
"url": "http://admin:XXXX@192.168.1.213/relay/0?turn=toggle",
"tls": "",
"persist": false,
"proxy": "",
"authType": "",
"x": 330,
"y": 80,
"wires": [
[]
]
},
{
"id": "782334ba.4354ac",
"type": "change",
"z": "d8c1672b.eeadc8",
"name": "Setta Messaggio",
"rules": [
{
"t": "change",
"p": "payload",
"pt": "msg",
"from": "true",
"fromt": "bool",
"to": "Luci Esterne Accese",
"tot": "str"
},
{
"t": "change",
"p": "payload",
"pt": "msg",
"from": "false",
"fromt": "bool",
"to": "Luci Esterne Spente",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 350,
"y": 40,
"wires": [
[
"33409cd2.9de114"
]
]
},
{
"id": "a4087e62.a39b7",
"type": "ui_switch",
"z": "d8c1672b.eeadc8",
"name": "",
"label": "Accendi / Spegni",
"tooltip": "",
"group": "a4049c44.5b032",
"order": 1,
"width": 6,
"height": "2",
"passthru": false,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "true",
"onvalueType": "bool",
"onicon": "fa-4x fa-lightbulb-o",
"oncolor": "msg.colour",
"offvalue": "false",
"offvalueType": "bool",
"officon": "fa-3x fa-lightbulb-o",
"offcolor": "msg.colour",
"x": 130,
"y": 80,
"wires": [
[
"782334ba.4354ac",
"8f8f9600.1368c8"
]
]
},
{
"id": "ef1f0c25.7f79f",
"type": "http request",
"z": "d8c1672b.eeadc8",
"name": "Status Shelly",
"method": "GET",
"ret": "txt",
"paytoqs": false,
"url": "http://admin:XXXX@192.168.1.213/relay/0?status",
"tls": "",
"persist": false,
"proxy": "",
"authType": "",
"x": 410,
"y": 180,
"wires": [
[
"389146f4.1f2a1a"
]
]
},
{
"id": "59479048.87118",
"type": "inject",
"z": "d8c1672b.eeadc8",
"name": "Controllo se ON oppure OFF",
"repeat": "2",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 190,
"y": 180,
"wires": [
[
"ef1f0c25.7f79f"
]
]
},
{
"id": "3967dd9e.082552",
"type": "debug",
"z": "d8c1672b.eeadc8",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "colour",
"targetType": "msg",
"x": 1350,
"y": 180,
"wires": []
},
{
"id": "389146f4.1f2a1a",
"type": "json",
"z": "d8c1672b.eeadc8",
"name": "Trasforma in JSON",
"property": "payload",
"action": "",
"pretty": false,
"x": 610,
"y": 180,
"wires": [
[
"d22c7c90.cf656"
]
]
},
{
"id": "12753da.33fc5c2",
"type": "function",
"z": "d8c1672b.eeadc8",
"name": "Setta colore ICONA (Accesa)",
"func": "{msg.colour = '#e6d00b';}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 1080,
"y": 160,
"wires": [
[
"3967dd9e.082552",
"a4087e62.a39b7"
]
]
},
{
"id": "d22c7c90.cf656",
"type": "switch",
"z": "d8c1672b.eeadc8",
"name": "Controllo se ON o OFF",
"property": "payload.ison",
"propertyType": "msg",
"rules": [
{
"t": "true"
},
{
"t": "false"
}
],
"checkall": "true",
"repair": false,
"outputs": 2,
"x": 820,
"y": 180,
"wires": [
[
"12753da.33fc5c2"
],
[
"b516a5b5.43cae8"
]
]
},
{
"id": "b516a5b5.43cae8",
"type": "function",
"z": "d8c1672b.eeadc8",
"name": "Setta colore ICONA (Spenta)",
"func": "{msg.colour = '#919191';}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"x": 1080,
"y": 200,
"wires": [
[
"3967dd9e.082552",
"a4087e62.a39b7"
]
]
},
{
"id": "3b49ec8e.cf4144",
"type": "ui_group",
"z": "",
"name": "Gestione Cancello",
"tab": "be3b686.c1d7998",
"order": 1,
"disp": true,
"width": 6,
"collapse": true
},
{
"id": "a4049c44.5b032",
"type": "ui_group",
"z": "",
"name": "Luci Esterne",
"tab": "59b63931.02dec8",
"order": 1,
"disp": true,
"width": "6",
"collapse": false
},
{
"id": "be3b686.c1d7998",
"type": "ui_tab",
"z": "",
"name": "Cancello",
"icon": "account_balance",
"order": 5,
"disabled": false,
"hidden": false
},
{
"id": "59b63931.02dec8",
"type": "ui_tab",
"z": "",
"name": "Luci",
"icon": "lightbulb_outline",
"order": 6,
"disabled": false,
"hidden": false
}
]
```
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [5 October 2020 20:49 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/19 "2020-10-05T20:49:07Z")
Thanks.
Now, I do understand your frustration. I am still learning how to use Node-Red and I have been playing with it for a few years.
I also get that sometimes people get _stuck_ in a thought pattern, and as good as it seems: it doesn't always work, or isn't right, for what ever reason.
So, as an alternative to what you are wanting to do - and it still has the same end result - how about this bit of code:
```auto
[{"id":"1f5fd410.d19cc4","type":"inject","z":"8bb4de19.f72c88","name":"OFF","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":600,"wires":[["8bce1c43.e97bf8"]]},{"id":"8bce1c43.e97bf8","type":"change","z":"8bb4de19.f72c88","name":"","rules":[{"t":"set","p":"icon","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":310,"y":600,"wires":[["870b0886.1619b8"]]},{"id":"870b0886.1619b8","type":"ui_button","z":"8bb4de19.f72c88","name":"BULB#2","group":"53792891.774238","order":2,"width":"1","height":"3","passthru":false,"label":"{{msg.icon}}","tooltip":"","color":"","bgcolor":"{{msg.background}}","icon":"","payload":"X","payloadType":"str","topic":"","x":490,"y":550,"wires":[[]]},{"id":"48274cad.781644","type":"change","z":"8bb4de19.f72c88","name":"","rules":[{"t":"set","p":"icon","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":310,"y":550,"wires":[["b113db7b.098b18","870b0886.1619b8"]]},{"id":"b113db7b.098b18","type":"debug","z":"8bb4de19.f72c88","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":490,"y":630,"wires":[]},{"id":"8f2f7d28.395dc","type":"inject","z":"8bb4de19.f72c88","name":"ON","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":550,"wires":[["48274cad.781644"]]},{"id":"53792891.774238","type":"ui_group","name":"Group 7","tab":"de5134a7.f0a0d","order":4,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":5}]
```
Move to the right end of the text and you will see a little icon pop up which allows you to copy the code to the clicpboard by simply clicking it icon.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [5 October 2020 20:54 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/20 "2020-10-05T20:54:52Z")
Going over and having another look at the `switch` node.
> The **On/Off Color** and **On/Off Icon** are optional fields. If they are all present, the default toggle switch will be replaced with the relevant icons and their respective colors.
Alas I suspect it doesn't allow the colour to be set in the `message`. It only accepts names entered directly.
So: you could simply put the colour names in the node something like:
```auto
[{"id":"ed4fc378.1c239","type":"ui_switch","z":"8bb4de19.f72c88","name":"","label":"switch","tooltip":"","group":"53792891.774238","order":13,"width":"3","height":"2","passthru":false,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-4x fa-lightbulb-o","oncolor":"green","offvalue":"false","offvalueType":"bool","officon":"fa-4x fa-lightbulbfa-4x fa-lightbulb-o","offcolor":"red","x":460,"y":470,"wires":[[]]},{"id":"53792891.774238","type":"ui_group","name":"Group 7","tab":"de5134a7.f0a0d","order":4,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":5}]
```
But I am not sure they accept RGB values like you are using.
So really the alternate way I posted should be a better solution.
---
### Author:  [@mariulin](https://discourse.nodered.org/u/mariulin)
#### Post date: [5 October 2020 20:55 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/21 "2020-10-05T20:55:57Z")
Now I go to bed. Tomorrow I try your code.
Thank you for now. You are very kind
Bye bye. Good night
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [5 October 2020 20:57 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/22 "2020-10-05T20:57:45Z")
ci vidiamo (I think it is - yes?)
[Next page](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758.md?page=2)