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