fix(VSlider): render in forced-colors mode

fixes vuetifyjs#19705
06b · Apr 26, 2024 · 5d25c4c · 5d25c4c
1 parent 2c726a5
commit 5d25c4c
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
@@ -34,6 +34,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
@@ -8,9 +8,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))
 
@@ -21,6 +27,9 @@
 .v-slider-track
   border-radius: $slider-track-border-radius
 
+  @media (forced-colors: active) 
+    border: 1px solid buttontext
+
 .v-slider-track
   &__background, &__fill
     position: absolute