React component and hooks for handling light and dark mode.
npm install @chakra-ui/color-modeReact component that adds support for light mode and dark mode usinglocalStorage and matchMedia.
``sh
yarn add @chakra-ui/color-mode
npm i @chakra-ui/color-mode
`
To enable this behavior within your apps, wrap your application in a
ColorModeProvider below the ThemeProvider
`jsx live=false
import * as React from "react"
import { ColorModeProvider } from "@chakra-ui/color-mode"
import theme from "./theme"
function App({ children }) {
return (
)
}
`
Then you can use the hook useColorMode within your application.
`jsx``
function Example() {
const { colorMode, toggleColorMode } = useColorMode()
return (
)
}