Creating a Modern Login Page with Dark Mode Toggle in React: A Step-by-Step Guide

Overview:

In this tutorial, we’ll create a modern, clean, and responsive login page with a dark mode toggle button using React. We’ll break down the process into several steps and provide a detailed explanation for each step.

Step 1: Setting Up the Project:

Before we start coding, make sure you have Node.js and npm and Vite installed on your system. Then, create a new React project using create vite@latest by running the following command:

				
					npm create vite@latest react-login-page

Navigate into the project directory:

				
					cd react-login-page

Note : Don’t forget to change the package.json “script” field to “start“

Step 2: Creating Components:

In our project we will create a Folder named as Components under the src folder.

  • Component Structure:

    • We have two components: App and CustomInput.
    • App is the main component responsible for rendering the login form and the dark mode toggle button.
    • CustomInput is a reusable component for rendering form inputs with labels.

  • App.jsx:

				
					import React, { useState } from 'react';
import './App.css';
import CustomInput from './Components/CustomInput';

function App() {
  const [darkMode, setDarkMode] = useState(false);
  const toggleDarkMode = () => setDarkMode(prevMode => !prevMode);

  return (
    <div className={`App ${darkMode ? 'dark' : ''}`}>
      <div className="login-container">
        <h2>Login</h2>
        <form>
          <CustomInput type="text" content="username" placeholder="Enter your username" />
          <CustomInput type="password" content="password" placeholder="Enter your password" />
          <button type="submit">Login</button>
        </form>
      </div>
      <div className="dark-mode-toggle">
        <input type="checkbox" id="darkModeToggle" checked={darkMode} onChange={toggleDarkMode} />
        <label htmlFor="darkModeToggle">Dark Mode</label>
      </div>
    </div>
  );
}

export default App;

  • CustomInput Component (CustomInput.jsx):

				
					import React from 'react';

const CustomInput = (props) => {
    return (
        <>
            <div className="form-group">
                <label htmlFor={props.content}>{(props.content)[0].toUpperCase() + (props.content).substring(1)}</label>
                <input type={props.type} id={props.content} name={props.content} placeholder={props.placeholder} />
            </div>
        </>
    )
}

export default CustomInput;

Step 3: Styling the Components:

Next, let’s add styles to our components. Modify the existing file App.css and add the following styles:

				
					/* App.css */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.App {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
  transition: background-color 0.3s ease;
}

.login-container {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

h2 {
  text-align: center;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

.dark-mode-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  color: #fff;
}

.dark-mode-toggle label {
  margin-left: 5px;
}

.dark {
  background-color: #121212;
  color: #fff;
}

.dark .login-container {
  background-color: #1e1e1e;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.dark .form-group input {
  background-color: #333;
  color: #fff;
}

.dark button {
  background-color: #3f51b5;
}

.dark button:hover {
  background-color: #303f9f;
}

  • Code Explanation:

  1. State Management:
    • We use React’s useState hook to manage the state of the dark mode toggle button.
    • The darkMode state variable tracks whether dark mode is enabled or not.
    • Clicking on the toggle button toggles the darkMode state.
  2. Styling:
    • CSS styles are applied to create a clean and modern UI for the login form.
    • The dark class is conditionally applied to switch between light and dark modes.
    • Dark mode changes the background color and text color of the page and the login container.
  3. Dark Mode Functionality:
    • When the dark mode toggle button is clicked, it updates the darkMode state.
    • Based on the darkMode state, the appropriate styles are applied to switch between light and dark modes.
  4. CustomInput Component:
    • This component generates form inputs with labels based on the provided props.
    • It receives props like type, content, and placeholder to customize the input field.
  5. Structure Explanation:
    • The main App component renders the login form and the dark mode toggle button.
    • The CustomInput component renders input fields with labels for the username and password.
  6. Styling Explanation:
    • CSS styles define the layout and appearance of the login form and the dark mode toggle button.
    • Dark mode styling is applied conditionally based on the darkMode state.

Functionality Explanation:

  • Clicking on the dark mode toggle button toggles the darkMode state, which in turn updates the UI to switch between light and dark modes.

Step 4: Conclusion:

That’s it! You’ve successfully created a modern login page with a dark mode toggle button in React. This project demonstrates how to create reusable components, manage state, and implement simple styling. You can further customize and enhance this login page according to your requirements. Happy coding!