Bifrost Design System

Home

react

useApplyColorMode()

import useApplyColorMode from "@intility/bifrost-react/hooks/useApplyColorMode";

useApplyColorMode()

Go to top

You might not need this hook

Also see /css/colors#force-light--dark-mode

CSS color mode class names

In most apps you don't need to force a color mode, you can safely just let bifrost apply light or dark mode based on the prefers-color-scheme media query.

If you want to always force either light or dark mode you can use a class name on <html> element.

If you're using server-side rendering (like Next.js) you can programatically control the <html> root element directly, and don't need this hook.

Apply a color mode

For single-page apps we supply the useApplyColorMode() hook which will apply appropriate class name to the root element for you.

import useApplyColorMode from "@intility/bifrost-react/hooks/useApplyColorMode";

function MyApp() {
  // apply "bf-darkmode" class to <html>
  useApplyColorMode("dark");
}

Valid values are:

"light", equivalent to <html class="bf-lightmode">
"dark", equivalent to <html class="bf-darkmode">
"system", equivalent to <html>

Color mode picker

If you want a color mode picker in your app, see the following example:

Also see /react/examples/colorModePicker

Color mode picker example