vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.89k stars 6.97k forks source link

[Bug Report][3.7.2] VSwitch disable color #20551

Open Natchii59 opened 1 month ago

Natchii59 commented 1 month ago

Environment

Vuetify Version: 3.7.2 Vue Version: 3.5.8 Browsers: Chrome 129.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

Create a VSwitch component with a color attribute (example: primary), with :model-value="true" and with disabled

Expected Behavior

The VSwitch component should apply the primary color when disabled.

Actual Behavior

It doesn't apply the color and is displayed as gray.

Reproduction Link

https://play.vuetifyjs.com/#eNqlj80KAjEMhF+l9Oza+1IFn8N6qG3AQtqG9EdEfHfXqiBe9xIyH8wwc7zLwk4diLa9gZylrhAJbYW9SULoPlmi8Q7hcqo2JOAPGrBcQ3UXMcfsAaduscHOyMoNjBQuY+ZFEodo+bYQH4o9I3ihVoR8vVr9l3qRd2etfrbIxyY1xHFOTy+AUgQ=

Other comments

The Material design specification has examples of disabled components, and there is a Switch which has the primary color and is disabled. https://m2.material.io/design/interaction/states.html#disabled

material-design-switchs

Vuetify docs with examples: https://vuetifyjs.com/en/components/switches/#states

TIM56887 commented 1 month ago

<v-switch :model-value="true" color="primary" disabled base-color="primary" /> add base-color="primary"
Maybe this can help you.

antoinematyja commented 1 month ago

Thanks for the suggestion This will indeed apply the primary color in disabled state, but it will be applied whether the switch is checked or not.

So a possible workaround would be

<v-switch :model-value="myVar" color="primary" disabled :base-color="myVar ? 'primary' : null" />

Which isn't ideal

KaelWD commented 1 month ago

We have this for buttons but not form inputs for some reason.