Dark Mode Toggle in React

#beginners #programming #react #productivity

Introduction:

Dark mode has become a popular feature in modern web applications, providing users with a visually comfortable experience, especially during nighttime browsing. In this article, we'll explore how to create a simple dark mode toggle functionality using React and CSS. We'll break down the code step by step to understand how the dark mode toggle is implemented.

Follow - Linkedin

Understanding the Code:

1. Setting up the Component:

In this code snippet, we import React and useState hook from React. We set up a functional component App and initialize a state variable mode using the useState hook. The handleClick function toggles the mode state between true and false when the button is clicked.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [mode, setMode] = useState(false);
  const handleClick = () => {
    setMode(!mode);
  };

2. HTML Structure:

Here, we define the JSX structure of our component. The div with class App represents the main container. Inside it, there's a button with class toggle and a nested div with class btn. These elements have dynamic styles based on the mode state. Additionally, there are two h1 and h2 elements whose text color changes according to the mode state.

<div className="App" style={{ background: `${mode ? "#111" : "#FFF"}` }}>
  <button
    className="toggle"
    style={{ background: `${mode ? "rgba(255,255,255,1)" : "#333"}` }}
    onClick={handleClick}
  >
    <div
      className="btn"
      style={{
        marginLeft: `${mode ? "50px" : "5px"}`,
        background: `${mode ? "#333" : "#fff"}`
      }}
    ></div>
  </button>

  <h1 style={{ color: `${mode ? "#fff" : "#000"}` }}>Hello CodeSandbox</h1>
  <h2 style={{ color: `${mode ? "#fff" : "#000"}` }}>
    Start editing to see some magic happen!
  </h2>
</div>

3. CSS Styles:

In the CSS styles, we reset default margins and paddings, set the height of the root element to 100%, and define the layout and appearance of various elements. The .toggle class styles define the appearance of the toggle button, while the .btn class styles define the appearance of the inner button inside the toggle button, including the transition effect for a smooth animation.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.App {
  font-family: sans-serif;
  text-align: center;
  height: 100%;
}

h1 {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}
h2 {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.toggle {
  border: 0;
  width: 80px;
  height: 30px;
  border-radius: 20px;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transition: 0.4s ease-in-out;
}

Here is the reference of the working code

Conclusion:

In this article, we've explored how to create a dark mode toggle functionality in a React application. By understanding the code step by step, you've learned how to use state management with React's useState hook and apply dynamic styles based on the state. This knowledge can be applied to enhance user experience in various web applications by implementing features like dark mode toggles.

Follow Me on Social Media!
If you found this article helpful, feel free to connect with me on LinkedIn and Twitter for more programming tips and tutorials. Let's learn and grow together!

LinkedIn: https://www.linkedin.com/in/kartikbudhraja/