Change md-switch color of default icon

Dashboard
1

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.

2

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

image

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

3

If you select custom icon then you get to choose

image
image868Ɨ278 7.48 KB

4

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

image
image
image

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

5

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

6

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

https://fontawesome.com/v4.7/icons/

image

image
image

And making the icon larger makes it look closer to default

fa-toggle-on fa-2x

image

1 Like
7

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.

8

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???

10

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

<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 :confounded: (nothing, switch, switch:on, md-switch, md-switch:on, md-switch:ON, md-switch:workyoubleepingthing)

<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 :stuck_out_tongue: 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 :stuck_out_tongue: ) 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

image

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

[{"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}]
11

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!

1 Like
12

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

13

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.

14

Untitled 2
Untitled 2764Ɨ238 20.2 KB

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.

15

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

16

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

17

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 :frowning: 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 :slight_smile:

18

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.

19

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

20

Is that PR public Steve? I can't find it at Pull requests Ā· node-red/node-red Ā· GitHub

21

It's here...