How to Implement Dark Mode in React
Tags: react, darkmode, tutorial
Published: 2023-06-01 16:00:00


**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!