Skip to Content

Color Mode

When you use the ChakraProvider at the root of your app, you can automatically use color mode in your apps.

By default, most of Chakra's component are dark mode compatible. To handle color mode manually in your application, use the useColorMode or useColorModeValue hooks.

Tip: Chakra stores the color mode in localStorage and uses CSS variables to ensure the color mode is persistent.


useColorMode is a React hook that gives you access to the current color mode, and a function to toggle the color mode.

Editable Example

Calling toggleColorMode anywhere in your app tree toggles the color mode.


useColorModeValue is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value in light mode, and the value in dark mode.

Here's an example that changes the background-color and color using the useColorModeValue hook.

Click the Toggle Mode button to see it in action.

This box's style will change based on the color mode.
Editable Example

Forcing a specific mode#

In some occasions, you might want Chakra components to look the same in both light and dark modes. To achieve this, wrap the component in a LightMode or DarkMode component. Doing this will override the global colorMode.

Click the "Toggle Mode" button to see it in action.

Editable Example

Change color mode behavior#

Starting from v1.0, you can now set default color mode or use default OS color mode.

By default, the color mode will be light.

To support this, extend the default theme with a config key matching ColorModeOptions:

Learn more about customizing your theme.

Add ColorModeScript#

Add the ColorModeScript to allow Chakra to determine the initial ColorMode without weird visual glitches.

create-react-app and similar

With Next.js

With Gatsby

Important: If you customize your initialColorMode to be dark, import your custom theme here and reference initialColorMode={customTheme.config.initialColorMode} to keep it in sync.

Add colorModeManager (Optional)#

For server-side rendered sites, e.g. in Next.js, you may want to know the color preference of a user upfront so you can avoid rendering the initial color mode and then changing it during hydration (so-called flashing).

If you don't use SSR or don't care about this, you don't need to pass anything. Chakra will use localStorageManager by default.

Here's how to do this in Next.js 9.3 or newer:

  1. Create a reusable wrapper as demonstrated in the examples:
  1. Import your wrapper component setting up Chakra:

Important: if you're using Next.js 9.3 or newer, the Next.js team recommends avoiding getInitialProps. The following example is for Next 9.2 or older!

Edit this page