Adding Dark Mode to a React App with Chakra UI

Aside from being cool and trendy, dark mode also enhances accessibility for light-sensitive users.

Nov 3, 2020 • 6 Minute Read

Introduction

In this guide, you will learn how to add dark mode to your React app using Chakra UI. Aside from being cool and trendy, dark mode also enhances accessibility for light-sensitive users.

This guide assumes you already know how to install and configure Chakra UI in a React app. You can read Installing and Using Chakra UI with React to get started.

Installation and Setup

In your project's root directory, run the following command.

      npx create-react-app react-dark-mode
cd react-dark-mode
    

Install chakra-ui by running the following command.

      npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

Run the following command to start the development server.

      npm start

Import and add the ThemeProvider, ColorModeProvider, and CSSReset components in your App.js.

Modify your App.js like this.

      import {
  ThemeProvider,
  theme,
  ColorModeProvider,
  CSSReset,
} from "@chakra-ui/core";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ColorModeProvider>
        <CSSReset />
      </ColorModeProvider>
    </ThemeProvider>
  );
}

export default App;
    

Head over to https://localhost:3000; your app will be blank now.

Creating Toggle Component

In this section, we will create a new component that will toggle the React app between dark and light modes.

Create a new file named Toggle.js in the src directory. Run the following commands in your project's root directory to create the file.

      cd src
touch Toggle.js
    

Add the following code to Toggle.js; this will create an empty functional component in Toggle.js.

      import React from 'react'

export default function Toggle() {
    return (
        <div>
            
        </div>
    )
}
    

Import and add this Toggle component to App.js.

      import {
  ThemeProvider,
  theme,
  ColorModeProvider,
  CSSReset,
} from "@chakra-ui/core";
import Toggle from "./Toggle";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ColorModeProvider>
        <CSSReset />
        <Toggle />
      </ColorModeProvider>
    </ThemeProvider>
  );
}

export default App;
    

Adding Flex and Button Component

Import Flex from chakar-ui and use it inside the Toggle component.

      import React from "react";
import { Flex } from "@chakra-ui/core";
export default function Toggle() {
  return (
    <div>
      <Flex
        align="center"
        justify="center"
        height="100vh"
        direction="column"
      ></Flex>
    </div>
  );
}
    

You will not see a change, but your app's layout has been changed, which will be apparent after adding more components.

Import the Button component from chakra-ui.

      import { Flex, Button } from "@chakra-ui/core";

Use this button component inside Flex.

      <Flex align="center" justify="center" height="100vh" direction="column">
  <Button size="lg">Toggle Mode</Button>
</Flex>
    

Here is how your app will look.

This button does not do anything yet. In the next section, we will add the logic for changing modes.

Adding Dark Mode

Import useColorMode from chakra-ui.

      import { Flex, Button, useColorMode } from "@chakra-ui/core";

Extract colorMode and toggleColorMode from useColorMode using destructuring.

      const Toggle = () => {
  const { colorMode, toggleColorMode } = useColorMode();

  return(
...
)
};
    

Add the toggleColorMode() function to the button's onClick event.

      <Button size="lg" onClick={() => toggleColorMode()}>
  Toggle Mode
</Button>
    

And it's done; you have created and added a dark mode toggle button to your React app.

You can use colorMode to display the current mode. For example, instead of Toggle Mode as the button text, you can use {colorMode}, and it will show you the current mode.

      <Button size="lg" onClick={() => toggleColorMode()}>
  {colorMode}
</Button>
    

Here is how this will look.

Complete Code

Here is the complete code for the example. You can also see a live example and code on GitHub.

      import React from "react";
import { Button, Flex, useColorMode } from "@chakra-ui/core";

const Toggle = () => {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <div>
      <Flex align="center" justify="center" height="100vh" direction="column">
        <Button size="lg" onClick={() => toggleColorMode()}>
         Toggle Mode {colorMode}
        </Button>
      </Flex>
    </div>
  );
};

export default Toggle;
    

Conclusion

In this guide, we discussed the step-by-step process of adding a dark mode toggle button to a React app. You can take this toggle button a step further by using icons for light and dark mode to change the theme.

Here are some additional resources that can be helpful.

Happy coding!