How to implement use-dark-mode in React or Next Js: A step-by-step guide

Dark mode is a popular feature in many web apps, and it's easy to implement with the use-dark-mode hook. This hook provides a state management solution for dark mode, and it's very easy to use.

Why Dark Mode Matters?

1. Reduced Eye Strain: Dark mode is more than just a stylish alternative to the traditional light theme. It contributes to a reduction in eye strain, especially during extended periods of screen time. By minimizing exposure to bright light, dark mode aims to create a more comfortable viewing experience.

2. Accessibility Enhancement:

Dark mode isn't merely a preference for some users; it's an accessibility necessity for others. Individuals with visual impairments or sensitivity to light may find dark mode more accommodating and user-friendly.

Implementing Dark Mode with React: A Step-by-Step Guide

Now that we understand the importance of dark mode, let's dive into the practical steps of implementing a dark mode toggle in a React application using the popular use-dark-mode library.

Prerequisites

Before we dive into the code, make sure you have the following tools and libraries installed:

npm i use-dark-mode react-switch @mui/material @mui/icons-material

Step 1: Create the Dark Mode Toggle Component
We'll start by creating a DarkModeToggle component that utilizes the use-dark-mode hook and integrates a visually appealing switch using Material-UI icons. Here's the code:

import React from "react";
import useDarkMode from "use-dark-mode";
import Brightness3Icon from "@mui/icons-material/Brightness3"; // Moon icon
import WbSunnyIcon from "@mui/icons-material/WbSunny"; // Sunlight icon
import Switch from "react-switch";

const DarkModeToggle = () => {
  const darkMode = useDarkMode(false);

  return (
    <Switch
      checked={darkMode.value}
      onChange={darkMode.toggle}
      checkedIcon={
        <div
          style={{ display: "flex", alignItems: "center", marginTop: "1.5px" }}
        >
          <WbSunnyIcon />
        </div>
      }
      uncheckedIcon={
        <div
          style={{ display: "flex", alignItems: "center", marginTop: "2px" }}
        >
          <Brightness3Icon style={{ color: "white" }} />
        </div>
      }
    />
  );
};

export default DarkModeToggle;

If you are working on Next.js, don't forget to use client at the top of your code.

use client

Step 2: Integrate the Dark Mode Toggle into Your Navbar

Now that we have our DarkModeToggle component ready, let's seamlessly integrate it into your Navbar component. Here's an example of how you can do it:

// Navbar.js
import React from "react";
import DarkModeToggle from "./DarkModeToggle";

const Navbar = () => {
  return (
    <nav>
      {/* Other navbar content */}
      <DarkModeToggle />
    </nav>
  );
};

export default Navbar;

Step 3: Styling with body Class

To enhance the user experience, let's define styles for both light and dark modes using the body class. Add the following CSS to your styles file:

/* styles.css */
body.light-mode {
  background: #fff;
  color: #333;
  transition: background-color 0.3s ease;
}

body.dark-mode {
  background: #1a1919;
  color: #999;
}

You can use body.dark-mode to change the CSS styling of any class component by adding the .dark-mode class to the body element. This will allow you to target specific elements within your class component and style them differently in dark mode.

Example:

.YourCustomClss{
  background: blue;
}

body.dark-mode .YourCustomClss {

  background: #333;
}

Please Note:

This dark mode toggle also works correctly on small devices, so you can be sure that your users will be able to switch between dark and light mode regardless of what device they are using. If you are interested in learning how to create a beautiful navbar like this one, please check out my tutorial at [https://dev.to/sufian/creating-a-responsive-navbar-in-reactnextjs-with-material-ui-that-hide-on-scroll-3ibo]

Conclusion

And there you have it! You've successfully implemented a dark mode toggle in your React application. Users can now enjoy a personalized and comfortable viewing experience, making your app stand out in the world of modern web development. Happy coding!

Please Like if you find it helpful💖 Happy coding! 🚀

My wesite link [https://sufianmustafa.com/]