MazSwitch unclear visual state

[meditation-error]

The default off state for the switch is very colorfull: White foreground+colored background. And when you activate the switch the foreground changes from white to a brighter shade of the background. For me it's hard to tell which one is 'on' without looking at both states.

I think it would be better when the default button wouldn't have a colored background, maybe just gray ( (like het switch buttons from iOS or Android) or black with a gray border, so it's clear that it is off. Unfortunatly the stylings seems to be set with javascript, so I can't override the colors with just css.

Is there another way for me to change this 'off' styling ?

[LouisMazel]

Hi @jvandereijk,

Thanks for your feedback and you are right.

Is something like this better?

I will release this UI in the next version.

---

In any case, you can use custom colors, especially on one component by using CSS variables (the colors are not set with JS)

Example with the primary one :

<MazSwitch 
  v-model="selected" 
  style="--maz-color-primary-alpha: red; --maz-color-primary: purple;"
/>

• --maz-color-primary-alpha = Background bar color
• --maz-color-primary = Round color when selected (not used in the next version because the round stays white)

[meditation-error]

Yes, that looks great!

I think it's much more obvious like this that the state is 'off', while the white circle still idecates that the control is not 'disabled' (then the circle is gray).

[LouisMazel]

Totally agree with you. This component needed an update.

For the moment the update is shipped into the v3.46.1-beta.2 and will be released in v3.46.1

[meditation-error]

Great!

For now I will use the css hack/fix, but will update to v3.46.1 as soon as it's avaialable.
Thank you for the quick response, the fix and of course the great component library! :)

[LouisMazel]

I just released the v3.47.0 with the UI changes about MazSwitch !

Enjoy !