# Change md-switch color of default icon

**URL:** <https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499>\
**Category:** Dashboard\
**Created:** [16 July 2021 16:48 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499 "2021-07-16T16:48:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Comawhite54](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/comawhite54/32/45052_2.png) [@Comawhite54](https://discourse.nodered.org/u/Comawhite54)\
**Post date:** [16 July 2021 16:48 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/1 "2021-07-16T16:48:41Z")

</div>

Hi, I am using the default ui switch, and I am looking for a solution so change the "color-on" only for some switches.

I see many methods on the forum but they all use custom icons or complex code that I don't know how I could inject / maintain (I am beginning with node red).

Do you have a simple way or a detailed method? I see I could create a personal template but that looks a bit too sophisticated for me right now.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [16 July 2021 21:03 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/2 "2021-07-16T21:03:45Z")

</div>

As seems with most CSS related issues in NR.. the answer is clear...ly not clear 😛

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/78524458bace0d79703b6c798f21414b8aea766f.png)

Looks like it can be changed, but not clear how.

---

<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:** [16 July 2021 21:09 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/3 "2021-07-16T21:09:12Z")

</div>

If you select custom icon then you get to choose

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/9/d9995feba7ce373769b4680e69065d5d0e6d430a.png)

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [16 July 2021 21:12 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/4 "2021-07-16T21:12:27Z")

</div>

I was playing with that, but nothing changes... the ON "blue" is from the whole dashboard theme

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/2847a6f17953c3d2ed90e6bb794f2a230ce7db02.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/7/b7c03c287bff94ec5f7f16f2464a2f0118af90be.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/090e8099ac6ce15cb582a9dfd8a46661974a1d90.png)

Must it have a custom icon as well? Still trying to figure out that command 😛

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [16 July 2021 21:16 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/5 "2021-07-16T21:16:59Z")

</div>

> [@Gunner](#):
>
> Must it have a custom icon as well?

Yes, yes it must... but it changed the whole switch look, and so far I haven't found an Angular Material Icon that even looks close to a switch... but getting closer 🙂

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [16 July 2021 21:25 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/6 "2021-07-16T21:25:31Z")

</div>

@Comawhite54 Found it (or something close to the default switch)... using Font Awesome...

[https://fontawesome.com/v4.7/icons/](https://fontawesome.com/v4.7/icons/)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/09a46969748b359dc705c9dfdd192f8ee0249c62.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/4/e4f4de3e17d175f9604c085ac056b72f7ef59872.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/0/60796165778b89c5effbcbbfa696c8909fd05319.png)

And making the icon larger makes it look closer to default

`fa-toggle-on fa-2x`

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/2/d28eafc5f6f5232627c46d1bd2c31a590d17e77c.png)

---

<div class="post-metadata">

**Author:** ![Comawhite54](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/comawhite54/32/45052_2.png) [@Comawhite54](https://discourse.nodered.org/u/Comawhite54)\
**Post date:** [16 July 2021 22:53 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/7 "2021-07-16T22:53:12Z")

</div>

Thank you Gunner,  
I figured out the font awesome trick but did not continue because it was smaller, not as nice as the default, and not aligned with the text. But actually, with this fa-2x solution you bringed, perhaps I will use it finally.

Yet I still hope we will get more info about how to trick the css or how to create a template based on the default design.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [17 July 2021 02:31 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/8 "2021-07-17T02:31:40Z")

</div>

> [@Comawhite54](#):
>
> Yet I still hope we will get more info about how to trick the css or how to create a template based on the default design.

I am thinking there is no way, at least with the switch (Button, yes, Switch???)... otherwise it should have shown up somewhere by now. But my limited searching has yet to find it.

Aaaannnd... shortly after saying that I find this... But I don't think it is quite the same thing as the default switch???

> [@Md-switch in template node 19.6 vs 20.5](https://discourse.nodered.org/t/md-switch-in-template-node-19-6-vs-20-5/11063/4):
>
> That example works fine for me. Switches between red (off) and blue (on). Using Vivaldi (Chromium based) latest build. 13 May 16:36:39 - [info] Node-RED version: v0.20.5 13 May 16:36:39 - [info] Node.js version: v10.15.3 13 May 16:36:39 - [info] Windows\_NT 10.0.17763 x64 LE

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [17 July 2021 06:03 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/10 "2021-07-17T06:03:39Z")

</div>

OK, I got this far... but someone smrtr needs to toss something into the ring.

This template code will change ALL the switches to whatever custom colours are set by the HEX codes.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/97a8398504c5e5e1a5cbf1d9f7d48fb058ac535f.png)

```auto
<style id="dashboard-style-override">

md-switch .md-thumb {
 background-color: #FF0000 !important;
}
md-switch .md-bar {
 background-color: #550000 !important; 
}
md-switch.md-checked:not([disabled]) .md-bar {
 background-color: #005500 !important; 
}
md-switch.md-checked:not([disabled]) .md-thumb {
 background-color: #00FF00 !important;
}

</style>

```

But I want to only change a _single_ switch based on it's ID (see 2nd line, along with closing } )... I have tried many variations based on what works with a button _**[node-id="\< ID \>"] \> button:hover**_

However, I am clearly missing something when it comes to the syntax for the switch 😖 _(nothing, **switch** , **switch:on** , **md-switch** , **md-switch:on** , **md-switch:ON** , **md-switch:workyoubleepingthing** )_

```auto
<style id="dashboard-style-override">
[node-id="779a0213.e124bc"] > md-switch {
 background-color: #FF0000 !important;
}
md-switch .md-bar {
 background-color: #550000 !important; 
}
md-switch.md-checked:not([disabled]) .md-bar {
 background-color: #005500 !important; 
}
md-switch.md-checked:not([disabled]) .md-thumb {
 background-color: #00FF00 !important;
}
}
</style>

```

**EDIT** - This forum bot is too smart... it will not allow me to have more than three consecutive posts 😛 so I will just add onto my last allowed one.

I started noticing a discrepancy in the start/finish mustache placements, and following some trial and error I figured out what works (whether correctly or not is for another lesson 😛 ) to setup a template node (set to `Widget in group`) and with ID pointing to the designated switch node. This seems to do the individual switch's colour makeover...

Note: the default is colour based on my use of Dark background with a Blue theme

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d731459bc43cac354828664af4a254d2394bde10.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/2/42c847d59de77c40861a604ff3ca7486dfa89ae6.png)

```auto
<style>
[node-id="779a0213.e124bc"] > md-switch .md-thumb {
 background-color: #FF0000 !important;
}
[node-id="779a0213.e124bc"] > md-switch .md-bar {
 background-color: #550000 !important; 
}
[node-id="779a0213.e124bc"] > md-switch.md-checked:not([disabled]) .md-bar {
 background-color: #005500 !important; 
}
[node-id="779a0213.e124bc"] > md-switch.md-checked:not([disabled]) .md-thumb {
 background-color: #00FF00 !important;
}
</style>

```

And the flow containing the template and two switches I demonstrated...

```auto
[{"id":"2ded909a.91c17","type":"ui_switch","z":"43641b25.40b524","name":"","label":"Default Switch","tooltip":"","group":"b9bec1d9.a6801","order":10,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"x":500,"y":340,"wires":[[]]},{"id":"779a0213.e124bc","type":"ui_switch","z":"43641b25.40b524","name":"","label":"CSS Switch","tooltip":"","group":"b9bec1d9.a6801","order":10,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"x":670,"y":340,"wires":[[]]},{"id":"f3c68b2b.97c568","type":"ui_template","z":"43641b25.40b524","group":"b9bec1d9.a6801","name":"","order":18,"width":"0","height":"0","format":"<style>\n[node-id=\"779a0213.e124bc\"] > md-switch .md-thumb {\n background-color: #FF0000 !important;\n}\n[node-id=\"779a0213.e124bc\"] > md-switch .md-bar {\n background-color: #550000 !important; \n}\n[node-id=\"779a0213.e124bc\"] > md-switch.md-checked:not([disabled]) .md-bar {\n background-color: #005500 !important; \n}\n[node-id=\"779a0213.e124bc\"] > md-switch.md-checked:not([disabled]) .md-thumb {\n background-color: #00FF00 !important;\n}\n</style>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":620,"y":380,"wires":[[]]},{"id":"b9bec1d9.a6801","type":"ui_group","name":"CSS Colour","tab":"bb93b1da.ab821","order":5,"disp":true,"width":"6","collapse":false},{"id":"bb93b1da.ab821","type":"ui_tab","name":"Tests","icon":"dashboard","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:** [17 July 2021 08:56 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/11 "2021-07-17T08:56:05Z")

</div>

Your unmatched } worried me so I tried applying the node id to each css selector:  
... oh, you just fixed it!

Typing the CSS would quickly get tiresome if you had 20 switches and wanted 10 styled one way, 10 another.

Please, please can we have a CSS class defined from the node's name or a Class input field!

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [17 July 2021 08:58 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/12 "2021-07-17T08:58:46Z")

</div>

Yes... in a `function node` it complains when there is a syntax error in the code... the `template node` seems to simply allow anything you do and just ignores what it doesn't like. Gotta love consistency 😆

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [17 July 2021 09:01 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/13 "2021-07-17T09:01:14Z")

</div>

> [@jbudd](#):
>
> Typing the CSS

In reality it is more copy/paste with specific ID and colour HEX as needed. And I am thinking it could probably all go in a single template node anyhow.

---

<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:** [17 July 2021 09:12 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/14 "2021-07-17T09:12:03Z")

</div>

![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6fe6ebbc521be5f6e5e9064dba4883e7d37aa47f.jpeg)  
Five buttons of two different types - two sets of CSS definitions  
Three switches, two of them non-default appearance - one set of CSS definitions

It would make the editor view rather cryptic though.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [17 July 2021 09:34 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/15 "2021-07-17T09:34:00Z")

</div>

> [@jbudd](#):
>
> It would make the editor view rather cryptic though.

I like using the mode's `Name` field (and comment nodes) to organize my editor layout, at a small cost in size, but then the editor has lots of space.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d6840acd3938f3c1a59eb01d073d9346fb9bbca6.png)

---

<div class="post-metadata">

**Author:** ![Comawhite54](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/comawhite54/32/45052_2.png) [@Comawhite54](https://discourse.nodered.org/u/Comawhite54)\
**Post date:** [17 July 2021 10:05 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/16 "2021-07-17T10:05:34Z")

</div>

Do you still refer to the button id on the template or you are somehow able to refer to the button name "BrightSwitch" ?

---

<div class="post-metadata">

**Author:** ![Comawhite54](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/comawhite54/32/45052_2.png) [@Comawhite54](https://discourse.nodered.org/u/Comawhite54)\
**Post date:** [17 July 2021 10:14 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/17 "2021-07-17T10:14:46Z")

</div>

So, one final step to make this solution simpler would be if I could add my own CSS class name to some switches. I tried and searched again on internet, with the "inject" or "ui control" functions etc... but I found nothing... That is so frustrating ☹ I will keep going with the node-id or svg, and If I use node-red more, maybe I will learn how to create my own nodes then.

Thanks a lot for your help I learned a lot already 🙂

---

<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:** [17 July 2021 10:30 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/18 "2021-07-17T10:30:44Z")

</div>

At the moment you have to use the node id.  
There is some discussion in this forum (and GitHub?) about adding a class to dashboard elements but I think the folk who would have to make the change regard it as low priority.

CSS styling of dashboard elements has cropped up here a few times recently.

---

<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:** [17 July 2021 10:37 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/19 "2021-07-17T10:37:54Z")

</div>

> [@jbudd](#):
>
> There is some discussion in this forum (and GitHub?) about adding a class to dashboard elements but I think the folk who would have to make the change regard it as low priority

Yeah, I raised a PR for this. I believe it will prove to be very useful addition for many scenarios. Hopefully it gets through.

---

<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:** [17 July 2021 11:01 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/20 "2021-07-17T11:01:06Z")

</div>

Is that PR public Steve? I can't find it at [Pull requests · node-red/node-red · GitHub](https://github.com/node-red/node-red/pulls)

---

<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:** [17 July 2021 11:03 UTC](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499/21 "2021-07-17T11:03:28Z")

</div>

It's here...

> <https://github.com/node-red/node-red-dashboard/pull/708>
>
> Hi Dave, as discussed \[here\](https://discourse.nodered.org/t/angular-notificatio…ns/47232/9?u=steve-mcl)
> 
> This PR adds the option \`class\` to UI elements so that custom CSS is easier to address items within a dashboard group or element.
> 
> The class names are applied to \`ng-class\` at the top level meaning a user can add CSS for the card or its content.
> 
> Dirty demo...
> !\[Jkfi9Y6lwf\](https://user-images.githubusercontent.com/44235289/122566584-9b2f0880-d03f-11eb-8ed4-506a534aa207.gif)
> 
> demo flow
> \`\`\`
> \[{"id":"f4b7f5d47f78fcfc","type":"inject","z":"af952aeaa20f4f97","name":"","props":\[{"p":"topic","vt":"str"},{"p":"payload"},{"p":"className","v":"notification-error","vt":"str"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"ERROR","payload":"An error happened","payloadType":"str","x":440,"y":240,"wires":\[\["07e9633b37b26775"\]\]},{"id":"07e9633b37b26775","type":"ui\_toast","z":"af952aeaa20f4f97","position":"top right","displayTime":"50","highlight":"","sendall":true,"outputs":0,"ok":"OK","cancel":"","raw":true,"className":"","topic":"","name":"","x":800,"y":220,"wires":\[\]},{"id":"887c3c77e479e52e","type":"ui\_template","z":"af952aeaa20f4f97","group":"dce9e7a2.d20c78","name":"styles","order":10,"width":0,"height":0,"format":"\<style\>\\n /\* notification colors \*/\\n md-toast.notification-info {\\n border-width: 10px;\\n border-color: darkgreen;\\n }\\n md-toast.notification-info \> h3 {\\n background-color: green;\\n }\\n md-toast.notification-info \> div {\\n background: rgba(0, 255, 0, 0.5);\\n color: darkgreen;\\n }\\n\\n md-toast.notification-warn {\\n border-width: 10px;\\n border-color: darkorange;\\n }\\n md-toast.notification-warn \> h3 {\\n background-color: orange;\\n }\\n md-toast.notification-warn \> div {\\n background: rgba(245, 173, 66, 0.5);\\n color: darkorange;\\n }\\n \\n md-toast.notification-error {\\n border-width: 10px;\\n border-color: darkred;\\n }\\n md-toast.notification-error \> h3 {\\n background-color: red;\\n }\\n md-toast.notification-error \> div {\\n background: rgba(255, 0, 0, 0.5);\\n color: darkred;\\n }\\n\\n\\n /\* Button colors \*/\\n .nr-dashboard-theme .button-info.nr-dashboard-button button.md-button {\\n background: rgba(0, 255, 0, 0.5);\\n color: rgb(0, 30, 0);\\n }\\n .nr-dashboard-theme .button-error.nr-dashboard-button button.md-button {\\n background: rgba(255, 0, 0, 0.5);\\n color: rgb(30, 0, 0);\\n }\\n .nr-dashboard-theme .button-warn.nr-dashboard-button button.md-button {\\n background: rgba(245, 173, 66, 0.5);\\n color: rgb(145, 73, 22);\\n }\\n\\n md-card.\_md.blue-card {\\n background: lightblue;\\n }\\n\\n md-card.\_md.gray-card {\\n background: lightgray;\\n }\\n\\n md-card.yellow-card.visible {\\n background: yellow !important;\\n }\\n\\n md-card.visible.bold-span-text \> span {\\n font-weight: bold !important;\\n }\\n\\n md-card.visible.bold-p-label \> p.label {\\n font-weight: bold !important;\\n }\\n\\n md-card.my-chart.\_md.layout-align-center-center.visible {\\n background: lightgoldenrodyellow;\\n }\\n\\n md-card.my-chart.\_md.layout-align-center-center.visible\\n p.label.nr-dashboard-chart-title.nr-dashboard-chart-titlel {\\n font-family: cursive;\\n font-size: larger;\\n font-stretch: extra-expanded;\\n font-style: italic;\\n font-variant-caps: small-caps;\\n background-color: aquamarine;\\n border: black;\\n border-width: 2px;\\n border-style: solid;\\n padding-top: 0px;\\n }\\n\\n\\n .my-group {\\n background: brown !important;\\n } \\n .my-group p.nr-dashboard-cardtitle {\\n font-size: 30px;\\n font-style: italic;\\n margin: 0px;\\n padding-right: 12px;\\n padding-bottom: 12px !important;\\n }\\n md-card.my-form.nr-dashboard-form {\\n background: peachpuff;\\n }\\n md-card.my-form button\[type=submit\] {\\n background: green;\\n }\\n md-card.my-form button\[type=submit\]:hover {\\n background: red;\\n }\\n\\n\</style\>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":730,"y":160,"wires":\[\[\]\]},{"id":"372dc9715e13dbc4","type":"inject","z":"af952aeaa20f4f97","name":"","props":\[{"p":"topic","vt":"str"},{"p":"payload"},{"p":"className","v":"notification-info","vt":"str"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"INFO","payload":"Some info","payloadType":"str","x":400,"y":160,"wires":\[\["07e9633b37b26775"\]\]},{"id":"274974bef8ef7e49","type":"inject","z":"af952aeaa20f4f97","name":"","props":\[{"p":"topic","vt":"str"},{"p":"payload"},{"p":"className","v":"notification-warn","vt":"str"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"WARN","payload":"This is a warning","payloadType":"str","x":430,"y":200,"wires":\[\["07e9633b37b26775"\]\]},{"id":"99cd63bd68e4608a","type":"ui\_button","z":"af952aeaa20f4f97","name":"","group":"da148e61.f015f","order":11,"width":"4","height":"1","passthru":false,"label":"show error","tooltip":"","color":"","bgcolor":"","className":"button-error","icon":"","payload":"This is an error","payloadType":"str","topic":"ERROR TITLE","topicType":"str","x":390,"y":320,"wires":\[\["489d9ee5f15aa662"\]\]},{"id":"489d9ee5f15aa662","type":"change","z":"af952aeaa20f4f97","name":"","rules":\[{"t":"set","p":"className","pt":"msg","to":"notification-error","tot":"str"}\],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":320,"wires":\[\["07e9633b37b26775"\]\]},{"id":"60b8fccd18b8f5dd","type":"ui\_button","z":"af952aeaa20f4f97","name":"","group":"da148e61.f015f","order":11,"width":"4","height":"1","passthru":false,"label":"show info","tooltip":"","color":"","bgcolor":"","className":"button-info","icon":"","payload":"This is just information","payloadType":"str","topic":"INFO TITLE","topicType":"str","x":380,"y":360,"wires":\[\["c84b76cc56f35b51"\]\]},{"id":"c84b76cc56f35b51","type":"change","z":"af952aeaa20f4f97","name":"","rules":\[{"t":"set","p":"className","pt":"msg","to":"notification-info","tot":"str"}\],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":360,"wires":\[\["07e9633b37b26775"\]\]},{"id":"aee19488541fe52f","type":"ui\_button","z":"af952aeaa20f4f97","name":"","group":"da148e61.f015f","order":11,"width":"4","height":"1","passthru":false,"label":"show warn","tooltip":"","color":"","bgcolor":"","className":"button-warn","icon":"","payload":"This is a warning","payloadType":"str","topic":"WARN TITLE","topicType":"str","x":390,"y":400,"wires":\[\["16ca42fe5bd2a0eb"\]\]},{"id":"16ca42fe5bd2a0eb","type":"change","z":"af952aeaa20f4f97","name":"","rules":\[{"t":"set","p":"className","pt":"msg","to":"notification-warn","tot":"str"}\],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":400,"wires":\[\["07e9633b37b26775"\]\]},{"id":"7de4faabaa5cd06f","type":"inject","z":"af952aeaa20f4f97","name":"set class button-info","props":\[{"p":"ui\_control","v":"{ \\"className\\":\\"button-info\\" }","vt":"json"},{"p":"topic","vt":"str"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":170,"y":420,"wires":\[\["aee19488541fe52f"\]\]},{"id":"d6b65ffa68be66c2","type":"inject","z":"af952aeaa20f4f97","name":"set class button-warn","props":\[{"p":"ui\_control","v":"{ \\"className\\":\\"button-warn\\" }","vt":"json"},{"p":"topic","vt":"str"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":160,"y":380,"wires":\[\["aee19488541fe52f"\]\]},{"id":"ad25abafd6e5d947","type":"ui\_switch","z":"af952aeaa20f4f97","name":"","label":"switch class=gray-card bold-p-label","tooltip":"","group":"da148e61.f015f","order":4,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"payload.content","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"gray-card bold-p-label","x":920,"y":280,"wires":\[\[\]\]},{"id":"50d031a9245d8e9c","type":"ui\_slider","z":"af952aeaa20f4f97","name":"","label":"slider - class=gray-card","tooltip":"","group":"da148e61.f015f","order":7,"width":0,"height":0,"passthru":true,"outs":"all","topic":"pitch","topicType":"str","min":0,"max":"30","step":"0.5","className":"gray-card","x":930,"y":400,"wires":\[\[\]\]},{"id":"1cbc491f5447379a","type":"ui\_slider","z":"af952aeaa20f4f97","name":"","label":"slider - class=blue-card bold-p-label","tooltip":"","group":"da148e61.f015f","order":7,"width":0,"height":0,"passthru":true,"outs":"all","topic":"roll","topicType":"str","min":0,"max":"30","step":"0.5","className":"blue-card bold-p-label","x":960,"y":440,"wires":\[\[\]\]},{"id":"3ee345fd72fdb982","type":"inject","z":"af952aeaa20f4f97","name":"","props":\[{"p":"ui\_control","v":"{ \\"className\\":\\"button-warn\\" }","vt":"json"},{"p":"topic","vt":"str"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":650,"y":500,"wires":\[\["50d031a9245d8e9c","1cbc491f5447379a"\]\]},{"id":"6a4098178f578c4a","type":"inject","z":"af952aeaa20f4f97","name":"","props":\[{"p":"ui\_control","v":"{ \\"className\\":\\"button-info\\" }","vt":"json"},{"p":"topic","vt":"str"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":640,"y":540,"wires":\[\["50d031a9245d8e9c","1cbc491f5447379a"\]\]},{"id":"d412219ba3edc8f7","type":"inject","z":"af952aeaa20f4f97","name":"enabled true","props":\[{"p":"enabled","v":"true","vt":"bool"},{"p":"topic","vt":"str"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":190,"y":480,"wires":\[\["aee19488541fe52f"\]\]},{"id":"1f29c7b55eab3db8","type":"inject","z":"af952aeaa20f4f97","name":"enabled false","props":\[{"p":"enabled","v":"false","vt":"bool"},{"p":"topic","vt":"str"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":190,"y":520,"wires":\[\["aee19488541fe52f"\]\]},{"id":"8881611f795336ec","type":"ui\_switch","z":"af952aeaa20f4f97","name":"","label":"switch class=blue-card","tooltip":"","group":"da148e61.f015f","order":4,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"payload.content","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"blue-card","x":920,"y":320,"wires":\[\[\]\]},{"id":"ade3ee9c0252009c","type":"ui\_template","z":"af952aeaa20f4f97","group":"da148e61.f015f","name":"","order":11,"width":0,"height":0,"format":"This ui-template has the class \\"yellow-card bold-span-text\\"\\n\<div\>\\n I am the content of a div in a ui-template\\n\</div\>\\n\\n\<pre\>\\n I am the content of a pre in a ui-template\\n\</pre\>\\n\\n\<span\>\\n I am the content of a span in a ui-template\\n\</span\>\\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"yellow-card bold-span-text","x":880,"y":540,"wires":\[\[\]\]},{"id":"dd96667d574643ef","type":"ui\_template","z":"af952aeaa20f4f97","group":"da148e61.f015f","name":"","order":11,"width":0,"height":0,"format":"This ui-template has the class \\"yellow-card\\" only\\n\<div\>\\n I am the content of a div in a ui-template\\n\</div\>\\n\\n\<pre\>\\n I am the content of a pre in a ui-template\\n\</pre\>\\n\\n\<span\>\\n I am the content of a span in a ui-template\\n\</span\>\\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"yellow-card","x":880,"y":580,"wires":\[\[\]\]},{"id":"491fcaad8d1445a8","type":"ui\_chart","z":"af952aeaa20f4f97","name":"","group":"da148e61.f015f","order":9,"width":"12","height":"4","label":"chart without class","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"2","removeOlderPoints":"120","removeOlderUnit":"60","cutout":0,"useOneColor":false,"useUTC":false,"colors":\["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"\],"outputs":1,"useDifferentColor":false,"className":"","x":470,"y":680,"wires":\[\[\]\]},{"id":"543f1ba81f61d864","type":"inject","z":"af952aeaa20f4f97","name":"","props":\[{"p":"payloadxxx","v":"\[\\t {\\t \\"series\\": \[\\"A\\", \\"B\\", \\"C\\"\],\\t \\"data\\": \[\\t \[\\t { \\"x\\": $toMillis($now()), \\"y\\": 5 },\\t { \\"x\\": $toMillis($now())+100, \\"y\\": 4 },\\t { \\"x\\": $toMillis($now())+200, \\"y\\": 2 } \\t \],\\t \[\\t { \\"x\\": $toMillis($now()), \\"y\\": 6 },\\t { \\"x\\": $toMillis($now())+100, \\"y\\": 7 },\\t { \\"x\\": $toMillis($now())+200, \\"y\\": 6 } \\t \],\\t \[\\t { \\"x\\": $toMillis($now()), \\"y\\": 7 },\\t { \\"x\\": $toMillis($now())+100, \\"y\\": 9 },\\t { \\"x\\": $toMillis($now())+200, \\"y\\": 7 } \\t \] \\t \],\\t \\"labels\\": \[\\"\\"\] \\t }\\t\]\\t","vt":"jsonata"},{"p":"topic","vt":"str"},{"p":"payload"}\],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"data","payload":"(\\t $minimum := 1;\\t $maximum := 10;\\t $round(($random() \* ($maximum-$minimum)) + $minimum, 0)\\t)","payloadType":"jsonata","x":280,"y":680,"wires":\[\["491fcaad8d1445a8","4e7769680e0a7c5f"\]\]},{"id":"4e7769680e0a7c5f","type":"ui\_chart","z":"af952aeaa20f4f97","name":"","group":"da148e61.f015f","order":9,"width":"12","height":"4","label":"chart with class my-chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"2","removeOlderPoints":"120","removeOlderUnit":"60","cutout":0,"useOneColor":false,"useUTC":false,"colors":\["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"\],"outputs":1,"useDifferentColor":false,"className":"my-chart","x":490,"y":720,"wires":\[\[\]\]},{"id":"f0de01d6dd9ef37e","type":"ui\_template","z":"af952aeaa20f4f97","group":"6bb8ed49fa5e7238","name":"","order":11,"width":0,"height":0,"format":"This ui-template has the class \\"yellow-card bold-span-text\\"\\n\<div\>\\n I am the content of a div in a ui-template\\n\</div\>\\n\\n\<pre\>\\n I am the content of a pre in a ui-template\\n\</pre\>\\n\\n\<span\>\\n I am the content of a span in a ui-template\\n\</span\>\\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"yellow-card bold-span-text","x":1100,"y":540,"wires":\[\[\]\]},{"id":"3117438adf7c148f","type":"ui\_template","z":"af952aeaa20f4f97","group":"6bb8ed49fa5e7238","name":"","order":11,"width":0,"height":0,"format":"This ui-template has the class \\"yellow-card\\" only\\n\<div\>\\n I am the content of a div in a ui-template\\n\</div\>\\n\\n\<pre\>\\n I am the content of a pre in a ui-template\\n\</pre\>\\n\\n\<span\>\\n I am the content of a span in a ui-template\\n\</span\>\\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"yellow-card","x":1100,"y":580,"wires":\[\[\]\]},{"id":"724f510b2bf64b77","type":"ui\_form","z":"af952aeaa20f4f97","name":"","label":"class=my-form","group":"6bb8ed49fa5e7238","order":2,"width":0,"height":0,"options":\[{"label":"Name","value":"Name","type":"text","required":true,"rows":null},{"label":"Age","value":"Age","type":"number","required":false,"rows":null}\],"formValue":{"Name":"","Age":""},"payload":"","submit":"submit","cancel":"cancel","topic":"topic","topicType":"msg","splitLayout":"","className":"my-form","x":900,"y":660,"wires":\[\[\]\]},{"id":"dce9e7a2.d20c78","type":"ui\_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"9","collapse":false},{"id":"da148e61.f015f","type":"ui\_group","name":"Demo class=my-group","tab":"da5706ae.6caf58","order":3,"disp":true,"width":"12","collapse":false,"className":"my-group"},{"id":"6bb8ed49fa5e7238","type":"ui\_group","name":"another group (no class)","tab":"da5706ae.6caf58","order":2,"disp":true,"width":"8","collapse":false,"className":""},{"id":"5132060d.4cde48","type":"ui\_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"da5706ae.6caf58","type":"ui\_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}\]
> \`\`\`

[Next page](https://discourse.nodered.org/t/change-md-switch-color-of-default-icon/48499.md?page=2)