Toggle switch Color when enabled vs disabled

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

User is not authoized user can see:
image

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

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

I agree with similar post here

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

1 Like

Toggle switch colors

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?

1 Like

You could set its pointerEvents to none

1 Like

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

1 Like