next-js-tailwind-css-light-dark-mode-toggle

How to build a Next Js Tailwind CSS Toggle | Next Js Tailwind CSS project

by
next-js-tailwind-css-light-dark-mode-toggle
next-js-tailwind-css-light-dark-mode-toggle
Live Demo

Hi, welcome here In this tutorial, we will Next Js Tailwind CSS Toggle app using Next js and TailwindCss. This is the complete tutorial on how to develop a toggle app in Next Js. The prerequisites for this project are as follows:

  • Node.js should be installed in your system.
  • Create a brand new ReactJs project. Just copy the code below:
				
					code to create Nextjs project:

npx create-next-app my-app

after it run the below command:

cd my-app

after it install the required package by entering the below command:

npm i next-themes

after its installation run the below commands to install Tailwind css into your project:

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

The brand-new Next Js project should look like this:

brand new nextjs app
brand new nextjs app

Here is your index.js file, copy the code below and paste it into index.js.

				
					import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import ThemeToggler from './ThemeToggler'

export default function Home() {
  return (
    <>
      <div className="pt-6 mt-28">
        <div className="flex justify-center items-center flex-col ">
          <ThemeToggler />
          <div className="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md mt-10">
            <a href="#">
              <img decoding="async"
                className="rounded-t-lg "
                src="https://source.unsplash.com/random/1920x1080/?laptop"
                alt=""
              />
            </a>
            <div className="p-5">
              <a href="#">
                <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">
                  Laptops that you can't afford even in 2022.
                </h5>
              </a>
              <p className="mb-3 font-normal text-gray-700">
                Lorem ipsum dolor sit amet. Cum laudantium laborum ut saepe
                facilis aut rerum corporis qui debitis voluptas. Rerum dolores aut
                voluptas galisum aut iure repellendus.
              </p>
              <a
                href="#"
                className="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300"
              >
                Read more
                <svg
                  className="ml-2 -mr-1 w-4 h-4"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fillRule="evenodd"
                    d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                    clipRule="evenodd"
                  ></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

Here is the code for _app.js so copy the code below and paste it into _app.js.

				
					import '../styles/globals.css';
import { ThemeProvider } from 'next-themes';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider enableSystem={true} attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Make a new component and name it ‘ThemeToggler.js’ and then Copy the code below and paste it into ThemeToggler.js.

				
					import { useTheme } from 'next-themes';
import { useState, useEffect } from 'react';

const ThemeToggler = () => {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;
  return (
    <button
      className="w-8 h-8 bg-blue-100 rounded-lg dark:bg-slate-800 flex items-center justify-center hover:ring-2 ring-blue-400 transition-all duration-300 focus:outline-none"
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      aria-label="Toggle Dark Mode"
    >
      {theme === 'light' ? (
        '🌚'
      ) : (
        '🌝'
      )}
    </button>
  );
};

export default ThemeToggler;

Copy the code below and paste it into tailwind.config.js.

				
					/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Here is your code for the globals.css file:

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


html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background: black;
  }
}

After writing the code into the files (don’t forget to save it ,) you can run the command below:

				
					npm run dev
Download the Code