Package Exports

@chakra-ui/color-mode
@chakra-ui/color-mode/dist/chakra-ui-color-mode.cjs.js
@chakra-ui/color-mode/dist/chakra-ui-color-mode.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@chakra-ui/color-mode) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Color Mode

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

Installation

yarn add @chakra-ui/color-mode

# or

npm i @chakra-ui/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-ui/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>
  )
}