Author avatar

Ashutosh Singh

Adding Dark Mode to a React App with Chakra UI

Ashutosh Singh

  • Nov 3, 2020
  • 6 Min read
  • 210 Views
  • Nov 3, 2020
  • 6 Min read
  • 210 Views
Web Development
Front End Web Development
Client-side Frameworks
React

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.

1
2
npx create-react-app react-dark-mode
cd react-dark-mode
bash

Install chakra-ui by running the following command.

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

Run the following command to start the development server.

1
npm start
bash

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

Modify your App.js like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import {
  ThemeProvider,
  theme,
  ColorModeProvider,
  CSSReset,
} from "@chakra-ui/core";

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

export default App;
JSX

Head over to http://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.

1
2
cd src
touch Toggle.js
bash

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

1
2
3
4
5
6
7
8
9
import React from 'react'

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

Import and add this Toggle component to App.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
JSX

Adding Flex and Button Component

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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>
  );
}
JSX

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.

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

Use this button component inside Flex.

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

Here is how your app will look.

button

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.

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

Extract colorMode and toggleColorMode from useColorMode using destructuring.

1
2
3
4
5
6
7
const Toggle = () => {
  const { colorMode, toggleColorMode } = useColorMode();

  return(
...
)
};
JSX

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

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

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

gif

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.

1
2
3
<Button size="lg" onClick={() => toggleColorMode()}>
  {colorMode}
</Button>
JSX

Here is how this will look.

colorMode GIF

Complete Code

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
JSX

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!

5