Color Mode

React component that adds support for light mode and dark mode using localStorage and matchMedia.

Installation

1yarn add @chakra-ui/color-mode
2
3# or
4
5npm i @chakra-ui/color-mode

Import component

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

1import * as React from "react"
2import { ColorModeProvider } from "@chakra-ui/color-mode"
3import theme from "./theme"
4
5function App({ children }) {
6  return (
7    <ThemeProvider theme={theme}>
8      <ColorModeProvider>{children}</ColorModeProvider>
9    </ThemeProvider>
10  )
11}

Then you can use the hook useColorMode within your application.

1function Example() {
2  const { colorMode, toggleColorMode } = useColorMode()
3  return (
4    <header>
5      <Button onClick={toggleColorMode}>
6        Toggle {colorMode === "light" ? "Dark" : "Light"}
7      </Button>
8    </header>
9  )
10}