fix(VSlider): render in forced-colors mode (#19706)

fixes #19705 Co-authored-by: John Leider <john@vuetifyjs.com>
vuetifyjs · May 7, 2024 · 21e9f5e · 21e9f5e
1 parent 7c64392
commit 21e9f5e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VSlider/VSliderThumb.sass b/packages/vuetify/src/components/VSlider/VSliderThumb.sass
@@ -35,6 +35,9 @@
     user-select: none
     background-color: currentColor
 
+    @media (forced-colors: active)
+      background-color: highlight
+
     &::before
       transition: 0.3s settings.$standard-easing
       content: ''

diff --git a/packages/vuetify/src/components/VSlider/VSliderTrack.sass b/packages/vuetify/src/components/VSlider/VSliderTrack.sass
@@ -9,9 +9,15 @@
   .v-slider-track__background
     background-color: rgb(var(--v-theme-surface-variant))
 
+    @media (forced-colors: active)
+      background-color: highlight
+
   .v-slider-track__fill
     background-color: rgb(var(--v-theme-surface-variant))
 
+    @media (forced-colors: active)
+      background-color: highlight
+
   .v-slider-track__tick
     background-color: rgb(var(--v-theme-surface-variant))
 
@@ -22,6 +28,9 @@
   .v-slider-track
     border-radius: $slider-track-border-radius
 
+    @media (forced-colors: active)
+      border: thin solid buttontext
+
   .v-slider-track
     &__background, &__fill
       position: absolute