How can I create a class for a Switch with different colours for on and off

I have created a class to have a red button for some switches when they are on, different to my general dashboard theme. It works, but the problem is, its red but stays red when off.
Somehow I need to define the off state for the same class I believe ?

This is in my template:

.red-on-off * .md-thumb:before {
background-color: Red !important;

In my screenshot, Kitchen TRV is what I want the switch to look like when on. Study TRV shows what I want it to look like when off. Gym TRV is what is happening with my created class .red-on-off

TRV onoff

This is the switch

I don't think the :before pseudo element is the correct thing to colorize. Try this:

    /* state ON */
    .red-on-off .md-thumb {
        background-color: red !important;
    /* state OFF */
    .red-on-off md-switch .md-thumb {
        background-color: yellow !important;

I got the :before from me inspecting the page in chrome. It did work but looked odd... I also didnt know you can add another argument, so thats interesting.
Its all working fine

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