Early access. Read the blog post

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>
  )
}

Type  

() => boolean
Updated Dec 16, 2020 @ 04:21
On this page

Made withby folks at