# Toggle switch Color when enabled vs disabled

**URL:** <https://forum.inductiveautomation.com/t/toggle-switch-color-when-enabled-vs-disabled/91180>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [May 31, 2024, 4:18am UTC](https://forum.inductiveautomation.com/t/toggle-switch-color-when-enabled-vs-disabled/91180 "2024-05-31T04:18:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lina\_Su](https://avatars.discourse-cdn.com/v4/letter/l/7ba0ec/32.png) [@Lina\_Su](https://forum.inductiveautomation.com/u/Lina_Su)\
**Post date:** [May 31, 2024, 4:18am UTC](https://forum.inductiveautomation.com/t/toggle-switch-color-when-enabled-vs-disabled/91180/1 "2024-05-31T04:18:03Z")

</div>

My case would be  
There is a Toggle Switch component, only limited user can change the state, but I need all user to view the status.  
So I setup "enable" property to link with user role access.  
To make it easier for users to visualize the status, I set Toggle switch , "selected color" property to Green, Unselected to Grey.  
But user who is not authorized to "enable" property, the "selected color" is not updated in their screen , it alwsys grey.

Is there any suggestion for my request.

I find in forum , there similar request with mine , but reply says:  
"Disabled input elements are universally expected to be "greyed out"."

But I assume my above business request also reasonable.

Authoized user can see:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e8f1bed0d6ca30426ee251f0324f6689e582e477.png)

User is not authoized user can see:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/5/75e897419d5324e15aff2979b446dba8744c402d.png)

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [May 31, 2024, 5:20am UTC](https://forum.inductiveautomation.com/t/toggle-switch-color-when-enabled-vs-disabled/91180/2 "2024-05-31T05:20:12Z")

</div>

A CSS solution to achieve it is to override the default style by adding the following in the advanced CSS stylesheet

```python
.ia_toggleSwitch__thumb--disabled{
    background-color : #00ff00 !important;
}

```

I agree with similar post here

> [@Toggle switch Color modiciation when enabled vs disabled](https://forum.inductiveautomation.com/t/toggle-switch-color-modiciation-when-enabled-vs-disabled/88517/2):
>
> Why would you change this? Disabled input elements are universally expected to be "greyed out".

How unauthorized users identify this switch as inaccessible, without hovering over it? The touchscreen doesn't have a hover.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 31, 2024, 8:37am UTC](https://forum.inductiveautomation.com/t/toggle-switch-color-when-enabled-vs-disabled/91180/3 "2024-05-31T08:37:22Z")

</div>

![Toggle switch colors](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b188682511e0058f6d574f9c7f2d30c6675b3d16.png)

There is a difference. It's just subtle.  
Note that on my examples the text changes color. On yours they don't so maybe you have your default text color too light?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 31, 2024, 9:07am UTC](https://forum.inductiveautomation.com/t/toggle-switch-color-when-enabled-vs-disabled/91180/4 "2024-05-31T09:07:44Z")

</div>

You could set its pointerEvents to none

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [May 31, 2024, 11:54am UTC](https://forum.inductiveautomation.com/t/toggle-switch-color-when-enabled-vs-disabled/91180/5 "2024-05-31T11:54:33Z")

</div>

> [@Lina\_Su](#):
>
> business request also reasonable.

I think not. Users can still see the status when disabled by the position of the large dot.