React component and hooks for handling light and dark mode.

Usage no npm install needed!

<script type="module">
  import chakraXuiColorMode from 'https://cdn.skypack.dev/@chakra-xui/color-mode';


Color Mode

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


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}>

Then you can use the hook useColorMode within your application.

function Example() {
  const { colorMode, toggleColorMode } = useColorMode()
  return (
      <Button onClick={toggleColorMode}>
        Toggle {colorMode === "light" ? "Dark" : "Light"}