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

Creating a dark mode toggle is a powerful way to enhance user experience. In this tutorial, we'll walk through building a dark mode toggle using Next.js and Tailwind CSS, including persistent theme state with localStorage and responsive theme detection via system preferences.

🚀 Introduction

Dark mode is increasingly expected in modern applications. It reduces eye strain, improves accessibility, and can even conserve battery life on OLED screens.

With Next.js for performance and routing, and Tailwind CSS for styling, we'll create a responsive and user-friendly dark mode toggle step-by-step.

---

🛠️ Setting Up Next.js and Tailwind CSS

First, create a new Next.js app:

npx create-next-app@latest dark-mode-app
cd dark-mode-app

##Then, install Tailwind CSS and initialize it:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update your tailwind.config.js to enable dark mode:

module.exports = {
  darkMode: "class",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: { extend: {} },
  plugins: [],
}

##Create your globals.css in styles/:

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

Import it in pages/_app.js:

import "@/styles/globals.css";

This maintains all the code formatting while keeping it properly integrated within the MDX structure. The code blocks are properly fenced with language identifiers (bash, javascript, css) for proper syntax highlighting.