@chakra-ui/color-mode is a package that provides utilities for managing color modes (e.g., light and dark themes) in Chakra UI applications. It allows developers to easily toggle between different color modes and persist the user's preference.

What are @chakra-ui/color-mode's main functionalities?

Color Mode Provider

The Color Mode Provider is used to wrap your application and provide the color mode context to all components within the app.

import { ChakraProvider, ColorModeProvider } from '@chakra-ui/react';

function App() {
  return (
    <ChakraProvider>
      <ColorModeProvider>
        <YourComponent />
      </ColorModeProvider>
    </ChakraProvider>
  );
}

useColorMode Hook

The useColorMode hook allows you to access the current color mode and a function to toggle between light and dark modes.

import { useColorMode } from '@chakra-ui/react';

function ToggleButton() {
  const { colorMode, toggleColorMode } = useColorMode();
  return (
    <button onClick={toggleColorMode}>
      Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
    </button>
  );
}

Color Mode Script

The Color Mode Script is used to ensure that the initial color mode is correctly set on the server-side and during hydration.

import { ColorModeScript } from '@chakra-ui/react';

function App() {
  return (
    <html>
      <head>
        <ColorModeScript />
      </head>
      <body>
        <YourComponent />
      </body>
    </html>
  );
}

Other packages similar to @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>
  )
}

Keywords

FAQs

What is @chakra-ui/color-mode?

Is @chakra-ui/color-mode popular?

Is @chakra-ui/color-mode well maintained?

Package last updated on 13 Aug 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install