@chakra-ui/color-mode

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

Similar packages

Other packages similar to @chakra-ui/color-mode

styled-components

styled-components is a library for React and React Native that allows you to use component-level styles in your application. It supports theming, including light and dark modes, but requires more manual setup compared to @chakra-ui/color-mode.

emotion

Emotion is a library designed for writing CSS styles with JavaScript. It provides powerful and flexible theming capabilities, including support for color modes. However, it is more general-purpose and not as tightly integrated with a UI component library as @chakra-ui/color-mode.

theme-ui

theme-ui is a library for building themeable user interfaces based on constraint-based design principles. It includes built-in support for color modes and theming, similar to @chakra-ui/color-mode, but is part of a different ecosystem.