1. Hooks
  2. usePrefersDark

usePrefersDark()

Subscribes to @media (prefers-color-scheme: dark) to find out if the device is in dark mode or not at any given time.
import {
  Card,
  studioTheme,
  ThemeProvider,
  usePrefersDark
} from '@sanity/ui'
import React from 'react'

function App () {
  // This value will change when the system switches
  // between dark and light scheme.
  const prefersDark = usePrefersDark()
  
  // The theme system supports either "dark" or "light"
  const scheme = prefersDark ? 'dark' : 'light'

  return (
    <ThemeProvider scheme={scheme} theme={studioTheme}>
      <Card>...</Card>
    </ThemeProvider>
  )
}

Signature  

() => boolean

Made withby folks at