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>
)
}
(getServerSnapshot = () => false) => boolean