Bugfix/fix deprecated color scheme error

src/components/Browser/index.tsx

@@ -4,7 +4,7 @@ import {Asset, Tag} from '@types'
 import groq from 'groq'
 import React, {useEffect, useState} from 'react'
 import {useDispatch} from 'react-redux'
-import {useColorScheme, type AssetSourceComponentProps, type SanityDocument} from 'sanity'
+import {useColorSchemeValue, type AssetSourceComponentProps, type SanityDocument} from 'sanity'
 import {TAG_DOCUMENT_NAME} from '../../constants'
 import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext'
 import useVersionedClient from '../../hooks/useVersionedClient'
@@ -132,7 +132,7 @@ const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose
 
 const Browser = (props: Props) => {
   const client = useVersionedClient()
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
 
   return (
     <ReduxProvider

src/components/CardAsset/index.tsx

@@ -12,7 +12,7 @@ import {
 } from '@sanity/ui'
 import React, {memo, MouseEvent, RefObject} from 'react'
 import {useDispatch} from 'react-redux'
-import {useColorScheme} from 'sanity'
+import {useColorSchemeValue} from 'sanity'
 import styled, {css} from 'styled-components'
 import {PANEL_HEIGHT} from '../../constants'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
@@ -88,7 +88,7 @@ const StyledWarningOutlineIcon = styled(WarningFilledIcon)(({theme}) => {
 const CardAsset = (props: Props) => {
   const {id, selected} = props
 
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
 
   // Refs
   const shiftPressed: RefObject<boolean> = useKeyPress('shift')

src/components/CardUpload/index.tsx

@@ -3,7 +3,7 @@ import {Box, Button, Flex, Text} from '@sanity/ui'
 import filesize from 'filesize'
 import React from 'react'
 import {useDispatch} from 'react-redux'
-import {useColorScheme} from 'sanity'
+import {useColorSchemeValue} from 'sanity'
 import styled from 'styled-components'
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
@@ -27,7 +27,7 @@ const CardWrapper = styled(Flex)`
 const CardUpload = (props: Props) => {
   const {id} = props
 
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
 
   // Redux
   const dispatch = useDispatch()

src/components/DialogAssetEdit/index.tsx

@@ -6,7 +6,7 @@ import groq from 'groq'
 import React, {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 import {useDispatch} from 'react-redux'
-import {WithReferringDocuments, useColorScheme, useDocumentStore} from 'sanity'
+import {WithReferringDocuments, useDocumentStore, useColorSchemeValue} from 'sanity'
 import {assetFormSchema} from '../../formSchema'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import useVersionedClient from '../../hooks/useVersionedClient'
@@ -41,7 +41,7 @@ const DialogAssetEdit = (props: Props) => {
   } = props
 
   const client = useVersionedClient()
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
 
   const documentStore = useDocumentStore()
 

src/components/FormFieldInputTags/index.tsx

@@ -2,7 +2,7 @@ import {Box} from '@sanity/ui'
 import React from 'react'
 import {Controller} from 'react-hook-form'
 import CreatableSelect from 'react-select/creatable'
-import {useColorScheme} from 'sanity'
+import {useColorSchemeValue} from 'sanity'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {reactSelectComponents, reactSelectStyles} from '../../styled/react-select/creatable'
 import type {TagSelectOption} from '../../types'
@@ -38,7 +38,7 @@ const FormFieldInputTags = (props: Props) => {
     value
   } = props
 
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
 
   // Redux
   const creating = useTypedSelector(state => state.tags.creating)

src/components/PickedBar/index.tsx

@@ -2,15 +2,15 @@ import {Box, Button, Flex, Label} from '@sanity/ui'
 import pluralize from 'pluralize'
 import React from 'react'
 import {useDispatch} from 'react-redux'
-import {useColorScheme} from 'sanity'
+import {useColorSchemeValue} from 'sanity'
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions, selectAssetsPicked} from '../../modules/assets'
 import {dialogActions} from '../../modules/dialog'
 import {getSchemeColor} from '../../utils/getSchemeColor'
 
 const PickedBar = () => {
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
 
   // Redux
   const dispatch = useDispatch()

src/components/SearchFacet/index.tsx

@@ -3,7 +3,7 @@ import {Box, Flex, Label, rem, Text, Theme, ThemeColorSchemeKey} from '@sanity/u
 import {SearchFacetInputProps, WithId} from '@types'
 import React, {ReactNode} from 'react'
 import {useDispatch} from 'react-redux'
-import {useColorScheme} from 'sanity'
+import {useColorSchemeValue} from 'sanity'
 import styled, {css} from 'styled-components'
 import {searchActions} from '../../modules/search'
 import {getSchemeColor} from '../../utils/getSchemeColor'
@@ -23,7 +23,7 @@ const Container = styled(Box)(({scheme, theme}: {scheme: ThemeColorSchemeKey; th
 const SearchFacet = (props: Props) => {
   const {children, facet} = props
 
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
 
   // Redux
   const dispatch = useDispatch()

src/components/SearchFacetTags/index.tsx

@@ -9,7 +9,7 @@ import {
 import React from 'react'
 import {useDispatch} from 'react-redux'
 import Select from 'react-select'
-import {useColorScheme} from 'sanity'
+import {useColorSchemeValue} from 'sanity'
 import {operators} from '../../config/searchFacets'
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 import useTypedSelector from '../../hooks/useTypedSelector'
@@ -24,7 +24,7 @@ type Props = {
 }
 
 const SearchFacetTags = ({facet}: Props) => {
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
 
   // Redux
   const dispatch = useDispatch()

src/components/TableHeader/index.tsx

@@ -7,7 +7,7 @@ import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions, selectAssetsLength, selectAssetsPickedLength} from '../../modules/assets'
 import TableHeaderItem from '../TableHeaderItem'
-import {useColorScheme} from 'sanity'
+import {useColorSchemeValue} from 'sanity'
 import {getSchemeColor} from '../../utils/getSchemeColor'
 
 // TODO: DRY
@@ -23,7 +23,7 @@ const ContextActionContainer = styled(Flex)(({scheme}: {scheme: ThemeColorScheme
 })
 
 const TableHeader = () => {
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
 
   // Redux
   const dispatch = useDispatch()

src/components/TableRowAsset/index.tsx

@@ -15,7 +15,7 @@ import formatRelative from 'date-fns/formatRelative'
 import filesize from 'filesize'
 import React, {memo, MouseEvent, RefObject, useCallback, useEffect, useRef, useState} from 'react'
 import {useDispatch} from 'react-redux'
-import {WithReferringDocuments, useColorScheme} from 'sanity'
+import {WithReferringDocuments, useColorSchemeValue} from 'sanity'
 import styled, {css} from 'styled-components'
 import {GRID_TEMPLATE_COLUMNS} from '../../constants'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
@@ -90,7 +90,7 @@ const StyledWarningIcon = styled(WarningFilledIcon)(({theme}) => {
 const TableRowAsset = (props: Props) => {
   const {id, selected} = props
 
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
 
   const shiftPressed: RefObject<boolean> = useKeyPress('shift')
 

src/components/TableRowUpload/index.tsx

@@ -3,7 +3,7 @@ import {Box, Button, Flex, Grid, Stack, Text, useMediaIndex} from '@sanity/ui'
 import filesize from 'filesize'
 import React from 'react'
 import {useDispatch} from 'react-redux'
-import {useColorScheme} from 'sanity'
+import {useColorSchemeValue} from 'sanity'
 import {GRID_TEMPLATE_COLUMNS} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {selectUploadById, uploadsActions} from '../../modules/uploads'
@@ -18,7 +18,7 @@ type Props = {
 const TableRowUpload = (props: Props) => {
   const {id} = props
 
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
 
   // Redux
   const dispatch = useDispatch()

src/components/TagViewHeader/index.tsx

@@ -2,7 +2,7 @@ import {ComposeIcon} from '@sanity/icons'
 import {Box, Button, Flex, Inline, Label} from '@sanity/ui'
 import React from 'react'
 import {useDispatch} from 'react-redux'
-import {useColorScheme} from 'sanity'
+import {useColorSchemeValue} from 'sanity'
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {DIALOG_ACTIONS} from '../../modules/dialog/actions'
@@ -15,7 +15,7 @@ type Props = {
 }
 
 const TagViewHeader = ({allowCreate, light, title}: Props) => {
-  const {scheme} = useColorScheme()
+  const scheme = useColorSchemeValue()
 
   const dispatch = useDispatch()
   const tagsCreating = useTypedSelector(state => state.tags.creating)