fix(VSwitch): render in forced-colors mode (#19703)

fixes #19702
vuetifyjs · May 13, 2024 · e36f7bc · e36f7bc
1 parent 59738a0
commit e36f7bc
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 3 deletions.
diff --git 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
@@ -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<new <T>(
     const { loaderClasses } = useLoader(props)
     const { isFocused, focus, blur } = useFocus(props)
     const control = ref<VSelectionControl>()
+    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<new <T>(
                       <div
                         class={[
                           'v-switch__track',
-                          ...backgroundColorClasses.value,
+                          !isForcedColorsModeActive ? backgroundColorClasses.value : undefined,
                         ]}
                         style={ backgroundColorStyles.value }
                         onClick={ onTrackClick }
@@ -183,7 +184,7 @@ export const VSwitch = genericComponent<new <T>(
                           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 }
                         >