I have the following:
<v-switch
inset
name="foo"
label="foo"
disabled
/>
and
<v-switch
inset
name="bar"
label="bar"
:readonly="true"
/>
In Vuetify 2, the disabled switch kept the primary color, but the readonly switch would be grey. I'm trying to get the same behavior on Vuetify 3.
If I do this:
.v-input--readonly .v-switch__track, .v-switch__thumb {
color:rgb(var(--v-theme-primary))
}
Then that results in the readonly no longer being grey, which isn't what I want
But this makes all the switches the primary color:
.v-switch__track:not(.v-input--readonly), .v-switch__thumb:not(.v-input--readonly) {
color:rgb(var(--v-theme-primary))
}
I've perused quite a few Stackoverflow posts and not managed to find anything that works. A few of those links, for reference: Change all read only fields background color in Vuetify Override disabled style on v-btn Set Styles for disabled Mat-Expansion Panel How to change/override the default color of a switch label in vuetify? How to change vuetify checkbox label style?
No combination of :not, :has, disabled, :disabled, aria-disabled, input[aria-disabled], input.aria-disabled, [aria-disabled=true], etc, seems to work. Possibly because of this: css :not(), selectors and selecting descendants
My best guess is the issue is that it's the VSelectionControl that actually has aria-disabled, but similar css tweaks with .v-selection-control haven't yielded fruit.
