diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass index 526ae8933a1..4b5debffaf0 100644 --- a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass +++ b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass @@ -13,6 +13,9 @@ &--rounded @include tools.rounded($progress-linear-border-radius) + @media (forced-colors: active) + border: thin solid buttontext + // Elements .v-progress-linear__background, .v-progress-linear__buffer @@ -25,6 +28,11 @@ width: 100% transition-property: width, left, right transition: inherit + + @media (forced-colors: active) + .v-progress-linear__buffer + background-color: highlight + opacity: $progress-linear-stream-opacity .v-progress-linear__content align-items: center @@ -41,6 +49,9 @@ .v-progress-linear__indeterminate background: $progress-linear-background + @media (forced-colors: active) + background-color: highlight + .v-progress-linear__determinate height: inherit left: 0 diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx index 6503247a0b7..79abf3b8f19 100644 --- a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx +++ b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx @@ -14,7 +14,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme' // Utilities import { computed, Transition } from 'vue' -import { clamp, convertToUnit, genericComponent, propsFactory, useRender } from '@/util' +import { clamp, convertToUnit, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util' type VProgressLinearSlots = { default: { value: number, buffer: number } @@ -98,6 +98,7 @@ export const VProgressLinear = genericComponent()({ const normalizedValue = computed(() => clamp(parseFloat(progress.value) / max.value * 100, 0, 100)) const isReversed = computed(() => isRtl.value !== props.reverse) const transition = computed(() => props.indeterminate ? 'fade-transition' : 'slide-x-transition') + const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches function handleClick (e: MouseEvent) { if (!intersectionRef.value) return @@ -165,7 +166,7 @@ export const VProgressLinear = genericComponent()({
()({
()({
()({ class={[ 'v-progress-linear__indeterminate', bar, - barColorClasses.value, + !isForcedColorsModeActive ? barColorClasses.value : undefined, ]} style={ barColorStyles.value } />