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.
.gif)
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!
