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

**URL:** <https://discourse.nodered.org/t/how-can-i-create-a-class-for-a-switch-with-different-colours-for-on-and-off/70935>\
**Category:** Dashboard\
**Created:** [20 November 2022 18:23 UTC](https://discourse.nodered.org/t/how-can-i-create-a-class-for-a-switch-with-different-colours-for-on-and-off/70935 "2022-11-20T18:23:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [20 November 2022 18:23 UTC](https://discourse.nodered.org/t/how-can-i-create-a-class-for-a-switch-with-different-colours-for-on-and-off/70935/1 "2022-11-20T18:23:31Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/7/578e4d78a0af71c0163e2f32c953595559af9e20.png)

This is the switch

 ![TRV onoff 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/e/ee0850273fb95d5a0c6edd5ab9202df073abd9f5.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [20 November 2022 20:35 UTC](https://discourse.nodered.org/t/how-can-i-create-a-class-for-a-switch-with-different-colours-for-on-and-off/70935/2 "2022-11-20T20:35:40Z")

</div>

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

```auto
<style>
    /* state ON */
    .red-on-off md-switch.md-checked .md-thumb {
        background-color: red !important;
    }
    /* state OFF */
    .red-on-off md-switch .md-thumb {
        background-color: yellow !important;
    }    
</style>

```

---

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [21 November 2022 10:29 UTC](https://discourse.nodered.org/t/how-can-i-create-a-class-for-a-switch-with-different-colours-for-on-and-off/70935/3 "2022-11-21T10:29:42Z")

</div>

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

---

<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:** [5 December 2022 10:29 UTC](https://discourse.nodered.org/t/how-can-i-create-a-class-for-a-switch-with-different-colours-for-on-and-off/70935/4 "2022-12-05T10:29:54Z")

</div>

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