@sanity/ui
Version:
The Sanity UI components.
17 lines (15 loc) • 1.15 kB
text/typescript
import {useMatchMedia} from './useMatchMedia'
/**
* Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
*
* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
*
* If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
* Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
* @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
*
* @public
*/
export function usePrefersDark(getServerSnapshot = () => false): boolean {
return useMatchMedia('(prefers-color-scheme: dark)', getServerSnapshot)
}