usePrefersColorMode
import usePrefersColorMode from "@intility/bifrost-react/hooks/usePrefersColorMode";- Uses CSS media query
prefers-color-scheme. - Returns
"light"or"dark"when running client-side. (which is the case for single-page-apps) - Falls back to
undefinedwhen server-side-rendering. (like preloading a next.js page, or statically generated)
import usePrefersColorMode from "@intility/bifrost-react/hooks/usePrefersColorMode"; function MyComponent() { const colorMode = usePrefersColorMode(); // "light" | "dark" (undefined for SSR) return <div>Preferred color mode: {colorMode}</div>; }