Chakra UI - v1.6.10

🌑 Dark Mode

Module Summary: Create a dark mode component using Chakra UI!

3 min read · 488 words

Dark mode is a complex feature to add - that is if you are not using Chakra UI. Chakra UI comes with built-in support for managing color mode in your apps.

Let's first add the colorModeConfig to our app and then we'll create a component to toggle the color mode.

Adding config

Recall in the last module we added a custom theme and set the config property. We can set the color mode here by using initialColorMode and useSystemColorMode.

// 1. import `extendTheme` function
import { extendTheme, ThemeConfig } from "@chakra-ui/react"

// 2. Add your color mode config
const config = {
    initialColorMode: "light", // options are light or dark
    useSystemColorMode: false, // options are true or false
}

// 3. extend the theme
const theme = extendTheme({ config })

export default theme

ColorModeScript

To see these changes take effect, we need to add ColorModeScript to _document.js.

import { ColorModeScript } from "@chakra-ui/react"
import NextDocument, { Html, Head, Main, NextScript } from "next/document"
import theme from "./theme" // this is the theme.js file we added our custom theme to

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <ColorModeScript initialColorMode={theme.config.initialColorMode} /> // <-- add this line!
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

If you run your app you should see the color mode change coming through! Feel free to change the initialColorMode and useSystemColorMode values and see the color mode change!

Creating A Toggle Color Mode Component

This works grest but what if we want the user to be able to toggle the color mode to their preference? We can do this using the useColorMode hook.

Let's create a simple button that allows the user to change the color mode.

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

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

What's Happening in The Code?

  1. We are importing useColorMode and Button from Chakra UI.
  2. We are using the useColorMode() hook to get the current color mode (colorMode) and a hook to toggle the color mode (toggleColorMode).
  3. We added a Button component with an onClick event to can the toggleColorMode.
  4. We are dynamically setting the text based on what the current color mode it.

Import this component anywhere in your app and use it. When you click the button, the color mode will change. Try it out here:

Styling

To style any Chakra UI component for light/dark mode we can use the useColorModeValue hook. Here is is in action:

const value = useColorModeValue(lightModeValue, darkModeValue) // <- signature
function StyleColorMode() {
  const { toggleColorMode } = useColorMode()

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

  return (
    <>
      <Box mb={4} bg={bg} color={color}>
        This box's style will change based on the color mode.
      </Box>
      <Button size="sm" onClick={toggleColorMode}>
        Toggle Mode
      </Button>
    </>
  )
}

Last updated on October 20, 2021

Edit on GitHub

    Legal

    Terms

    Disclaimer

    Privacy Policy


    Carlson Technologies Logo© Copyright 2021 - 2022, Carlson Technologies LLC. All Rights Reserved.