Overview

There is an increase of Dark Mode functionality in most leading website. A lot of industry leading sites like Twitter, Reddit, and YouTube are now supporting this dark mode on their websites and applications as well. It is more than a trend. It's easy on user's eyes and well suited for night time. In this post, I am going to show you how you can easily add dark mode functionality in your React App. I will use modern react hooks to implement that and this post will be an use case as well where and how we can use react-hooks.

Project Creation

With create-react-app cli it's very easy to generate ReactJS apps. You can install it globally with npm i -g create-react-app or can use npx to generate new React App. Assuming you have nodejs install in your enivornment if not please instlall it before proceeding further form following link .

Let's create our app with typing following command in terminal

npx create-react-app react-darkmode-app

Setting up a base theme

body {
  margin: 0;
  text-align: center;
}

.techy-light-theme {
  background-color: #fff;
  color: #444444;
}

nav {
  display: flex;
  text-align: center;
  background-color: #503d81;
  width: 100%;
  padding: 20px;
  color: #f8f8f8;
}

.content {
  padding: 0.5em;
  margin: 0 auto;
  max-width: 600px;
  font-size: 1.2rem;
  line-height: 1.1;
  height: 90vh;
}

.techy-dark-theme{
  background-color: #1f1b24;
  color: #f8f8f8;
}
.techy-dark-theme nav{
  background-color: #332940;
}
.techy-dark-theme code{
  color: red;
}

.button-container {
  display: flex;
  margin: 0 auto;
}

Persist user's theme preference

We would like to save the preference of theme for user, we can do it by using localStorage.

    const getDefaultTheme = () => {
        const isDarkModeEnabled = JSON.parse(localStorage.getItem("is-dark-mode-enabled"));
        return isDarkModeEnabled || false;
    };

    const [darkTheme, setDarkTheme] = React.useState(getDefaultTheme());

    React.useEffect(() => {
        localStorage.setItem("is-dark-mode-enabled", JSON.stringify(darkTheme));
    }, [darkTheme]);

Our darkTheme state will be initialized with the value retrieved from localStorage. React.useEffect() is a way to achieve componentDidUpdte life cycle in functional component. The code inside of useEffect() will only run if the value of darkTheme changed meaning new value of is-dark-mode-enabled will be set into localStorage.

App.jsx

Our full App.jsx will look like bellow

import React from "react";
import "./App.css";


function App() {

    const getDefaultTheme = () => {
        const isDarkModeEnabled = JSON.parse(localStorage.getItem("is-dark-mode-enabled"));
        return isDarkModeEnabled || false;
    };

    const [darkTheme, setDarkTheme] = React.useState(getDefaultTheme());

    React.useEffect(() => {
        localStorage.setItem("is-dark-mode-enabled", JSON.stringify(darkTheme));
    }, [darkTheme]);


    return (
        <div className={darkTheme ? "techy-dark-theme" : "techy-light-theme"}>
            <nav>
                <div className="button-container">
                    <button onClick={() => setDarkTheme(prevTheme => !prevTheme)}>
                        Change Theme
                    </button>
                </div>
            </nav>
            <div className="content">
                <h1>{darkTheme ? "Dark Mode" : "Light Mode"}</h1>

            </div>
        </div>
    );
}

export default App;

• We have used the darkTheme variable to activate the theme
• ()=>setDarkTheme(prev=>!prev) will toggle the state and hence React.useEffect() will be executed.

Conclusion

Hope this helps someone, whole codebase is available in following link