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.
To enable this behavior within your apps, wrap your application in a
ColorModeProvider
import React from "react" ;
import { ThemeProvider , ColorModeProvider } from "@chakra-ui/core" ;
import customTheme from "./theme" ;
function TurnOnColorMode ( { children } ) {
return (
< ThemeProvider theme = { customTheme } >
< ColorModeProvider > { children } </ ColorModeProvider >
</ ThemeProvider >
) ;
}
copy Then you can use the hook useColorMode within your application.
function ColorModeExample ( ) {
const { colorMode , toggleColorMode } = useColorMode ( ) ;
return (
< header >
< Button onClick = { toggleColorMode } >
Toggle { colorMode === "light" ? "Dark" : "Light" }
</ Button >
</ header >
) ;
}
copy Editable Example
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.
Toggle Mode function StyleColorMode ( ) {
const { colorMode , toggleColorMode } = useColorMode ( ) ;
const bgColor = { light : "red.500" , dark : "red.200" } ;
const color = { light : "white" , dark : "gray.800" } ;
return (
< >
< Box flex = " 1 " mb = { 4 } bg = { bgColor [ colorMode ] } color = { color [ colorMode ] } >
This box's style will change based on the color mode .
</ Box >
< Button size = " sm " onClick = { toggleColorMode } >
Toggle Mode
</ Button >
</ >
) ;
}
copy Editable Example
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.
Light Mode Always
Dark Mode Always
Toggle Mode
function Example ( ) {
const { colorMode , toggleColorMode } = useColorMode ( ) ;
return (
< Stack shouldWrapChildren isInline >
< LightMode >
< Button size = " sm " variantColor = " blue " >
Light Mode Always
</ Button >
</ LightMode >
< DarkMode >
< Button size = " sm " variantColor = " blue " >
Dark Mode Always
</ Button >
</ DarkMode >
< Button size = " sm " variantColor = " blue " onClick = { toggleColorMode } >
Toggle Mode
</ Button >
</ Stack >
) ;
}
copy Editable Example
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2020 Segun Adebayo