How to Implement Dark Mode in React

Introduction

Dark mode has become a popular feature in modern web applications, providing users with an alternative color scheme that is easier on the eyes and offers a unique visual experience.

In this article, we will explore how to implement a dark mode feature in a React application.

We'll create a theme provider using useContext hook and demonstrate how to toggle between light and dark modes.

Prerequisites

Before proceeding with this tutorial, make sure you have the following installed:

• React (version X.X.X or later)

Creating the Theme Provider

To begin, let's create a file called "theme-provider.tsx" and include the following code:

import React, { createContext, useState } from "react";

type ThemeContextProps = {
  children: React.ReactNode;
};

const defaultContext = {
  isDarkMode: false,
  toggleColorMode: () => {},
};

export const ThemeContext = createContext(defaultContext);

export function ThemeProvider({ children }: ThemeContextProps) {
  const [isDarkMode, setDarkMode] = useState(defaultContext.isDarkMode);

  return (
    <ThemeContext.Provider
      value={{
        isDarkMode,
        toggleColorMode: () => setDarkMode((isDark) => !isDark),
      }}
    >
      {children}
    </ThemeContext.Provider>
  );
}

In this code, we create a context using the createContext function from React.

We define a default context that includes the initial state of isDarkMode set to false and a toggleColorMode function.

We create a ThemeProvider component that wraps its children with the context provider. The provider exposes the isDarkMode state and the toggleColorMode function to its children.

Integrating the Theme Provider

Next, let's integrate the theme provider into our application. Assuming you have an my-app.tsx file and import the ThemeProvider component:

import { ThemeProvider } from "./theme-provider";

export function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

In this code, we import the ThemeProvider component and wrap it around the Component and pageProps components. This ensures that the theme provider is available throughout your application.

Using the Theme Context

Now, let's consume the theme context in one of your components. Assuming you have a PageContainer component, import the necessary dependencies:

import React, { useContext } from "react";
import { ThemeContext } from "./theme-provider";
import { Container, Main } from "./your-styled-components";

type PageProps = {
  children: React.ReactNode;
};

export function PageContainer({ children }: PageProps) {
  const { isDarkMode, toggleColorMode } = useContext(ThemeContext);

  return (
    <>
      {/* Head element and other code */}
      <button onClick={()=> toggleColorMode}>Toggle</button>
       <Container isDark={isDarkMode}>
        <Main>{children}</P.Main>
       </Container>

      {/* Footer component */}
    </>
  );
}

In this code, we import the necessary dependencies, including the ThemeContext and the styled-components (Container and Main).

Inside the PageContainer component, we consume the isDarkMode state from the ThemeContext.

Based on the value of isDarkMode, we pass the isDark prop to the Container component to apply appropriate styling for light or dark mode.

The children are rendered within the Main component.

Please replace "your-styled-components" with the actual names of your styled components or use your preferred styling solution.

Styling the Dark Mode

Lastly, to make the dark mode feature work, We need to do the styling. I am using styled-components:

import styled from "styled-component";

export const Container = styled.div<{ isDark: boolean }>`
  background-color: ${({ isDark }) => (isDark ? "#222" : "#fff")};
`;

Conclusion

Adding a dark mode feature to your React application enhances user experience and provides a more personalized interface.

By leveraging React's useContext hook, we can easily manage the state of the dark mode throughout the application.

Hope this helps!