Color Mode (In progress)

Most of Chakra's component are dark mode compatible. Use the useColorMode hook in your application to change the color mode. This value will be stored in localStorage and used whenever the page is loaded.

Enable Color Mode#

To enable this behavior within your apps, wrap your application in a ColorModeProvider

Then you can use the hook useColorMode within your application.

Editable Example

Styling color modes#

To style dark mode in your components, use the useColorMode hook to change the styles of your component.

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 LightMode or DarkMode component. Doing this will override the global colorMode.

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

Editable Example

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo