Creating a Dark Mode Toggle with Next.js and Tailwind CSS

As a web developer, you might wonder how to incorporate a dark mode toggle into your web application. This guide demonstrates how to implement this feature using Next.js and Tailwind CSS.

Introduction

Dark mode is a highly sought-after feature in modern web applications. It reduces eye strain, enhances readability, and conserves battery life on mobile devices. With its growing popularity, users now expect dark mode as a standard feature.

Next.js, a powerful React framework, simplifies the development of scalable and performant web applications. Combined with Tailwind CSS—a utility-first CSS framework—you can quickly style and create a dark mode toggle with minimal effort.

Setting up the Project

Step 1: Installing Next.js

Run the following command in your terminal to set up a new Next.js project:

npx create-next-app my-app

Step 2: Installing Tailwind CSS

Once Next.js is set up, install Tailwind CSS:

npm install tailwindcss

Step 3: Basic Application Structure

Create an index.js file in the pages directory with the following content:

<!DOCTYPE html>
<html>
  <head>
    <title>Dark Mode Toggle</title>
  </head>
  <body>
    <div class="container mx-auto py-4">
      <h1 class="text-4xl font-bold mb-4">Welcome to my Dark Mode Toggle!</h1>
      <p class="text-lg">Click the button below to switch between light and dark mode.</p>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Toggle Theme
      </button>
    </div>
  </body>
</html>

Step 4: Styling with Tailwind CSS

Create a styles.css file and add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: #f7fafc;
}
.container {
  max-width: 800px;
}

Implementing the Dark Mode Toggle

Adding State for Theme Management

Update your index.js to include the following code:

import { useState } from "react";

export default function Home() {
  const [theme, setTheme] = useState("light");

  return (
    <div className={theme === "light" ? "bg-white" : "bg-gray-800"}>
      <div className="container mx-auto py-4">
        <h1 className="text-4xl font-bold mb-4">Welcome to my Dark Mode Toggle!</h1>
        <p className="text-lg">Click the button below to switch between light and dark mode.</p>
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          onClick={() => setTheme(theme === "light" ? "dark" : "light")}
        >
          Toggle Theme
        </button>
      </div>
    </div>
  );
}

Enhancing the User Experience

Persisting the User's Theme Preference

Use localStorage to save the user's theme preference:

import { useEffect, useState } from "react";

export default function Home() {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme) setTheme(savedTheme);
  }, []);

  useEffect(() => {
    localStorage.setItem("theme", theme);
  }, [theme]);

  return (
    <div className={theme === "light" ? "bg-white" : "bg-gray-800"}>
      <div className="container mx-auto py-4">
        <h1 className="text-4xl font-bold mb-4">Welcome to my Dark Mode Toggle!</h1>
        <p className="text-lg">Click the button below to switch between light and dark mode.</p>
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          onClick={() => setTheme(theme === "light" ? "dark" : "light")}
        >
          Toggle Theme
        </button>
      </div>
    </div>
  );
}