Color Mode

Adding support for light and dark color mode

Chakra UI relies on next-themes to add support for light and dark color mode.

Setup

In most cases, you have it installed and set up by the CLI in the Provider component. If not, you can install it manually.

npx @chakra-ui/cli snippet add color-mode

The snippet includes hooks and components that make it feel similar to Chakra v2.

import {
  ColorModeButton,
  useColorMode,
  useColorModeValue,
} from "@/components/ui/color-mode"

`useColorMode`

The useColorMode hook returns the current color mode and a function to toggle the color mode.

"use client"

import { Button } from "@chakra-ui/react"
import { useColorMode } from "@/components/ui/color-mode"

const Demo = () => {
  const { toggleColorMode } = useColorMode()
  return (
    <Button variant="outline" onClick={toggleColorMode}>
      Toggle Mode
    </Button>
  )
}

Calling toggleColorMode or setColorMode anywhere in your app tree toggles the color mode from light or dark and vice versa.

`useColorModeValue`

The useColorModeValue hook returns a value based on the current color mode.

Here's the signature:

const result = useColorModeValue("<light-mode-value>", "<dark-mode-value>")

The value returned will be the value of the light mode if the color mode is light, and the value of the dark mode if the color mode is dark.

This box's style will change based on the color mode.

"use client"

import { Box, Button, Stack } from "@chakra-ui/react"
import { useColorMode, useColorModeValue } from "@/components/ui/color-mode"

const Demo = () => {
  const { toggleColorMode } = useColorMode()

  const bg = useColorModeValue("red.500", "red.200")
  const color = useColorModeValue("white", "gray.800")

  return (
    <Stack align="flex-start" gap="4">
      <Box p="2" bg={bg} color={color}>
        This box&apos;s style will change based on the color mode.
      </Box>
      <Button variant="outline" size="sm" onClick={toggleColorMode}>
        Toggle Mode
      </Button>
    </Stack>
  )
}

Hydration Mismatch

When using useColorModeValue or useColorMode in SSR, you may notice a hydration mismatch when the page is mounted. This is because the color mode value is computed on the server side.

To avoid this, use the ClientOnly component to wrap the component that uses useColorModeValue and render a skeleton until mounted on the client side.

"use client"

import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react"
import { useColorMode } from "@/components/ui/color-mode"
import { LuMoon, LuSun } from "react-icons/lu"

const Demo = () => {
  const { toggleColorMode, colorMode } = useColorMode()
  return (
    <ClientOnly fallback={<Skeleton boxSize="8" />}>
      <IconButton onClick={toggleColorMode} variant="outline" size="sm">
        {colorMode === "light" ? <LuSun /> : <LuMoon />}
      </IconButton>
    </ClientOnly>
  )
}

ColorModeButton

The color mode snippet comes with the ColorModeButton component built-in, you can import it to render an icon button that toggles the color mode.

It renders a skeleton on the server side and the icon on the client side.

import { ColorModeButton } from "@/components/ui/color-mode"

const Demo = () => {
  return <ColorModeButton />
}

Animation

Server Component