@chakra-xui/color-mode
v1.0.2
Published
React component and hooks for handling light and dark mode.
Downloads
15
Maintainers
Readme
Color Mode
React component that adds support for light mode and dark mode using
localStorage
and matchMedia
.
Installation
yarn add @chakra-xui/color-mode
# or
npm i @chakra-xui/color-mode
Import component
To enable this behavior within your apps, wrap your application in a
ColorModeProvider
below the ThemeProvider
import * as React from "react"
import { ColorModeProvider } from "@chakra-xui/color-mode"
import theme from "./theme"
function App({ children }) {
return (
<ThemeProvider theme={theme}>
<ColorModeProvider>{children}</ColorModeProvider>
</ThemeProvider>
)
}
Then you can use the hook useColorMode
within your application.
function Example() {
const { colorMode, toggleColorMode } = useColorMode()
return (
<header>
<Button onClick={toggleColorMode}>
Toggle {colorMode === "light" ? "Dark" : "Light"}
</Button>
</header>
)
}