Skip to main content
/
/
/
usePrefersColorMode

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 undefined when 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>;
}
Preferred color mode: