fix(sanity): use correct color scheme in image input overlay

sanity-io · Oct 1, 2024 · 48f8da7 · 48f8da7
1 parent 1aaf760
commit 48f8da7
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
@@ -1,4 +1,5 @@
 import {Card, type CardTone, Flex, rgba, studioTheme} from '@sanity/ui'
+import {useColorSchemeValue} from 'sanity'
 import {css, styled} from 'styled-components'
 
 export const RatioBox = styled(Card)`
@@ -20,8 +21,9 @@ export const RatioBox = styled(Card)`
 export const Overlay = styled(Flex)<{
   $tone: Exclude<CardTone, 'inherit'>
 }>(({$tone}) => {
-  const textColor = studioTheme.color.light[$tone].card.enabled.fg
-  const backgroundColor = rgba(studioTheme.color.light[$tone].card.enabled.bg, 0.8)
+  const colorScheme = useColorSchemeValue()
+  const textColor = studioTheme.color[colorScheme][$tone].card.enabled.fg
+  const backgroundColor = rgba(studioTheme.color[colorScheme][$tone].card.enabled.bg, 0.8)
 
   return css`
     position: absolute;