vuetify
vuetify copied to clipboard
fix(VSwitch): render in forced-colors mode
Description
fixes #19702
Before:
After (Example when the Night sky contrast theme is selected in windows):
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:
Is it possible to adjust the css selectors so that we don't use !important?
~~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.
Let me know if you wish for me to proceed with this change
All !importants have been removed, had to adjust the VSwitch to not apply the bg- classes if detects that forced-colors mode is active.
@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.