# Switch - inject colour

**URL:** <https://discourse.nodered.org/t/switch-inject-colour/71522>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [30 November 2022 20:03 UTC](https://discourse.nodered.org/t/switch-inject-colour/71522 "2022-11-30T20:03:33Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Misiek](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@Misiek](https://discourse.nodered.org/u/Misiek)\
**Post date:** [30 November 2022 20:03 UTC](https://discourse.nodered.org/t/switch-inject-colour/71522/1 "2022-11-30T20:03:33Z")

</div>

How can I inject the color to the switch

[{"id":"f3234e1e.0871","type":"ui\_button","z":"5f148060.7dc86","name":"","group":"b648849d.e9ced8","order":0,"width":0,"height":0,"passthru":false,"label":"true","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":220,"y":260,"wires":[["caee36d1.987028"]]},{"id":"bbfb8d0c.49fa1","type":"ui\_button","z":"5f148060.7dc86","name":"","group":"b648849d.e9ced8","order":0,"width":0,"height":0,"passthru":false,"label":"false","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"false","payloadType":"bool","topic":"topic","topicType":"msg","x":210,"y":340,"wires":[["6cbc2d4d.52eea4"]]},{"id":"65bff327.5f871c","type":"ui\_switch","z":"5f148060.7dc86","name":"","label":"switch","tooltip":"","group":"b648849d.e9ced8","order":2,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-refresh fa-2x fa-spin","oncolor":"{{msg.colour}}","offvalue":"false","offvalueType":"bool","officon":"fa-refresh fa-2x","offcolor":"{{msg.colour}}","animate":false,"className":"","x":690,"y":300,"wires":[]},{"id":"caee36d1.987028","type":"function","z":"5f148060.7dc86","name":"","func":"msg.colour = 'red';\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":260,"wires":[["65bff327.5f871c"]]},{"id":"6cbc2d4d.52eea4","type":"function","z":"5f148060.7dc86","name":"","func":"msg.colour = 'green';\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":340,"wires":[["65bff327.5f871c"]]},{"id":"b648849d.e9ced8","type":"ui\_group","name":"Default","tab":"ed4b4ded.00d09","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"ed4b4ded.00d09","type":"ui\_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

---

<div class="post-metadata">

**Author:** ![ralphwetzel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ralphwetzel/32/53713_2.png) [@ralphwetzel](https://discourse.nodered.org/u/ralphwetzel)\
**Post date:** [30 November 2022 20:58 UTC](https://discourse.nodered.org/t/switch-inject-colour/71522/2 "2022-11-30T20:58:03Z")

</div>

Hi!  
With reference to the code of `ui-switch.js`: There's no logic implemented to support something like `{{msg.color}}`. You need to provide a valid color definition to make it work.

There's one opportunity though given in the node's description:

> If a Class is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a `msg.className` string property.

---

<div class="post-metadata">

**Author:** ![Misiek](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@Misiek](https://discourse.nodered.org/u/Misiek)\
**Post date:** [1 December 2022 05:36 UTC](https://discourse.nodered.org/t/switch-inject-colour/71522/3 "2022-12-01T05:36:23Z")

</div>

I'm an amateur  
please write more or  
website where it is described

---

<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:** [1 December 2022 05:55 UTC](https://discourse.nodered.org/t/switch-inject-colour/71522/4 "2022-12-01T05:55:37Z")

</div>

Instead of "{{msg.colour}}" put "red" or "green" in the switch configuration. You don't need the function nodes.

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

The suggestion from @ralphwetzel gives more flexibility but seems unneeded in this case.

---

<div class="post-metadata">

**Author:** ![Misiek](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@Misiek](https://discourse.nodered.org/u/Misiek)\
**Post date:** [1 December 2022 06:17 UTC](https://discourse.nodered.org/t/switch-inject-colour/71522/5 "2022-12-01T06:17:34Z")

</div>

I need  
I want to change color with load - dynamically

---

<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:** [1 December 2022 06:37 UTC](https://discourse.nodered.org/t/switch-inject-colour/71522/6 "2022-12-01T06:37:00Z")

</div>

```auto
[{"id":"f3234e1e.0871","type":"ui_button","z":"f77cbf8b5446a20e","name":"","group":"b648849d.e9ced8","order":0,"width":0,"height":0,"passthru":false,"label":"Red","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"red","topicType":"str","x":210,"y":100,"wires":[["4581c503380f1b71"]]},{"id":"65bff327.5f871c","type":"ui_switch","z":"f77cbf8b5446a20e","name":"","label":"switch","tooltip":"","group":"b648849d.e9ced8","order":2,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-refresh fa-2x fa-spin","oncolor":"{{msg.colour}}","offvalue":"false","offvalueType":"bool","officon":"fa-refresh fa-2x","offcolor":"{{msg.colour}}","animate":false,"className":"","x":570,"y":160,"wires":[[]]},{"id":"0c8d34a2f81c45c2","type":"ui_button","z":"f77cbf8b5446a20e","name":"","group":"b648849d.e9ced8","order":0,"width":0,"height":0,"passthru":false,"label":"Yellow","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"yellow","topicType":"str","x":210,"y":140,"wires":[["4581c503380f1b71"]]},{"id":"05bf18c08d3b03b6","type":"ui_button","z":"f77cbf8b5446a20e","name":"","group":"b648849d.e9ced8","order":0,"width":0,"height":0,"passthru":false,"label":"Green","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"false","payloadType":"bool","topic":"green","topicType":"str","x":210,"y":180,"wires":[["4581c503380f1b71"]]},{"id":"0e692ae72ea48dc3","type":"ui_button","z":"f77cbf8b5446a20e","name":"","group":"b648849d.e9ced8","order":0,"width":0,"height":0,"passthru":false,"label":"Blue","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"false","payloadType":"bool","topic":"blue","topicType":"str","x":210,"y":220,"wires":[["4581c503380f1b71"]]},{"id":"4581c503380f1b71","type":"change","z":"f77cbf8b5446a20e","name":"","rules":[{"t":"set","p":"className","pt":"msg","to":"topic","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":160,"wires":[["65bff327.5f871c"]]},{"id":"f588f5038d33e5b1","type":"ui_template","z":"f77cbf8b5446a20e","group":"b648849d.e9ced8","name":"CSS","order":8,"width":0,"height":0,"format":"<style>\n.red i{\n color: red; /* HTML color name */\n}\n.yellow i{\ncolor: rgb(255, 165, 0); /* red green blue */\n}\n.green i{\ncolor: #00ff00;\n}\n.blue i{\ncolor: hsl(240, 100%, 50%); /* hue saturation lightness */\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":570,"y":200,"wires":[[]]},{"id":"b648849d.e9ced8","type":"ui_group","name":"Default","tab":"ed4b4ded.00d09","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"ed4b4ded.00d09","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Misiek](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@Misiek](https://discourse.nodered.org/u/Misiek)\
**Post date:** [1 December 2022 06:55 UTC](https://discourse.nodered.org/t/switch-inject-colour/71522/7 "2022-12-01T06:55:17Z")

</div>

THX  
it's ok - work - super

---

<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:** [15 December 2022 06:56 UTC](https://discourse.nodered.org/t/switch-inject-colour/71522/8 "2022-12-15T06:56:08Z")

</div>

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