diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass index 45b3b22055b..c9f8a7bb0bc 100644 --- a/packages/vuetify/src/components/VSwitch/VSwitch.sass +++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass @@ -134,3 +134,58 @@ .v-selection-control__wrapper transform: $switch-thumb-vertical-transform + +@media (forced-colors: active) + .v-switch + .v-switch__loader + .v-progress-circular + color: currentColor + + .v-switch__thumb + background-color: buttontext + + .v-switch__track, + .v-switch__thumb + border: 1px solid + color: buttontext + + &:not(.v-switch--loading):not(.v-input--disabled) + .v-selection-control--dirty + .v-switch__thumb + background-color: highlight + + &:not(.v-input--disabled) + .v-selection-control--dirty + .v-switch__track + background-color: highlight + + .v-switch__track, + .v-switch__thumb + color: highlight + + &.v-switch--inset + .v-switch__track + border-width: 2px + + &:not(.v-switch--loading):not(.v-input--disabled) + .v-selection-control--dirty + .v-switch__thumb + background-color: highlighttext + color: highlighttext + + &.v-input--disabled + .v-switch__thumb + background-color: graytext + + .v-switch__track, + .v-switch__thumb + color: graytext + + &.v-switch--loading + .v-switch__thumb + background-color: canvas + + &.v-switch--inset, + &.v-switch--indeterminate + .v-switch__thumb + border-width: 0 diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx index 5e72e86a3b4..ec2abafda44 100644 --- a/packages/vuetify/src/components/VSwitch/VSwitch.tsx +++ b/packages/vuetify/src/components/VSwitch/VSwitch.tsx @@ -16,7 +16,7 @@ import { useProxiedModel } from '@/composables/proxiedModel' // Utilities import { computed, ref } from 'vue' -import { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from '@/util' +import { filterInputAttrs, genericComponent, getUid, IN_BROWSER, propsFactory, useRender } from '@/util' // Types import type { ComputedRef, Ref } from 'vue' @@ -79,6 +79,7 @@ export const VSwitch = genericComponent( const { loaderClasses } = useLoader(props) const { isFocused, focus, blur } = useFocus(props) const control = ref() + const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches const loaderColor = computed(() => { return typeof props.loading === 'string' && props.loading !== '' @@ -158,7 +159,7 @@ export const VSwitch = genericComponent(
( class={[ 'v-switch__thumb', { 'v-switch__thumb--filled': icon || props.loading }, - props.inset ? undefined : backgroundColorClasses.value, + props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value, ]} style={ props.inset ? undefined : backgroundColorStyles.value } >