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