vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

fix(VSwitch): render in forced-colors mode

Open 06b opened this issue 1 year ago • 4 comments

Description

fixes #19702

Before: image After (Example when the Night sky contrast theme is selected in windows): image

Because native switch toggles aren't standardized yet for the web, I did my best to select what the expected system color keywords would be comparing to how the operating system changed the switches in other applications such as Windows Settings when turning on contrast themes.

Markup:


06b avatar Apr 26 '24 20:04 06b

Is it possible to adjust the css selectors so that we don't use !important?

johnleider avatar May 07 '24 15:05 johnleider

~~Yeah, it should be possible - I'll convert this pull request to a draft while I refactor it.~~

Turns out while it is possible to reduce the amount of !important's however it is not possible avoid using it altogether due to the built-in colors using !important when using the color prop for switches (as they are added to the elements of the switch when it is on [e.g. 'bg-primary','bg-red'])

I can however reduce the amount of !importants used from 5 down to 3.

image

Let me know if you wish for me to proceed with this change

06b avatar May 07 '24 19:05 06b

All !importants have been removed, had to adjust the VSwitch to not apply the bg- classes if detects that forced-colors mode is active.

06b avatar May 08 '24 21:05 06b

@johnleider I resolved the merge conflicts on Github (which merged the 'master' batch into the pull request), I then saw that on the vuetify contributing page states "Pull requests that include unrelated commits or your local merges will be CLOSED without notice" so if this pull request is closed, I'll assume I should just do a new pull request based off latest master that way it doesn't have the merge commit included.

06b avatar May 09 '24 17:05 06b