Blog

How to add dark mode in next.js application using tailwind css ?

by SWHabitation
Image
Jul 06, 2024

Dark mode is now a trendy feature in web apps because of its stylish look and the reduced strain on the eyes it offers. Today, we'll guide you on how to add dark mode to your Next.js app with the help of Tailwind CSS Typography. This duo doesn't just improve user experience but also gives your app a more attractive appearance.

Image

Dark mode, which improves user experience by lessening eye strain and prolonging device battery life, has become a crucial component of contemporary web development. We will show you how to use Tailwind CSS and the `next-themes` library to implement dark mode in a Next.js application in this detailed guide. This methodology guarantees a smooth incorporation of dark mode, emphasising the utilisation of Tailwind CSS Typography to enhance content design.

Prerequisites

Before we start, ensure you have the following installed:

- Node.js

- Next.js

- Tailwind CSS

Setting Up a Next.js Project

First, create a new Next.js project,

Copy Code
1 2 npx create-next-app@latest dark-mode-nextjs cd dark-mode-nextjs

Next, install Tailwind CSS and its dependencies,

Copy Code
1 2 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Configure Tailwind CSS by editing `tailwind.config.js`,

Copy Code
1 2 3 4 5 6 7 8 9 10 11 12 module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [ require('@tailwindcss/typography'), ], }

Create the Tailwind CSS configuration file by adding the following to `./styles/globals.css`,

Copy Code
1 2 3 @tailwind base; @tailwind components; @tailwind utilities;

To manage dark mode, we'll use the `next-themes` library. Install it by running:

Copy Code
1 npm install next-themes

Next, create a `ThemeProvider` to wrap your application. Edit `pages/_app.js`:

Copy Code
1 2 3 4 5 6 7 8 9 10 11 12 import { ThemeProvider } from 'next-themes' import '../styles/globals.css' function MyApp({ Component, pageProps }) { return ( <ThemeProvider attribute="class"> <Component {...pageProps} /> </ThemeProvider> ) } export default MyApp

Update your Tailwind CSS configuration to support dark mode,

Copy Code
1 2 3 4 5 6 7 8 9 10 11 12 13 module.exports = { darkMode: 'class', // or 'media' or 'class' content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [ require('@tailwindcss/typography'), ], }

Create a button to toggle between light and dark modes. Add the following to a new file `components/ThemeToggle.js`,

Copy Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import { useTheme } from 'next-themes' import { useEffect, useState } from 'react' export default function ThemeToggle() { const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) return null return ( <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} className="p-2 bg-gray-800 text-white rounded" > Toggle {theme === 'dark' ? 'Light' : 'Dark'} </button> ) }

Include the `ThemeToggle` component in your main layout or a specific page, such as `pages/index.js`,

Copy Code
1 2 3 4 5 6 7 8 9 10 11 import ThemeToggle from '../components/ThemeToggle' export default function Home() { return ( <div className="prose dark:prose-dark"> <h1 className="text-3xl font-bold">Welcome to Dark Mode in Next.js</h1> <ThemeToggle /> <p>This is an example of using Tailwind CSS with dark mode support in Next.js.</p> </div> ) }

Tailwind CSS Typography provides beautiful default styles for your content. To leverage this, add the `prose` class to your content elements. The `dark:prose-dark` class will apply dark mode styles when the theme is set to dark.

Here's an example of how to use it in your `pages/index.js`:

Copy Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 export default function Home() { return ( <div className="prose dark:prose-dark mx-auto"> <h1>Welcome to Dark Mode in Next.js</h1> <ThemeToggle /> <p> This example demonstrates the integration of dark mode using Tailwind CSS and `next-themes` in a Next.js application. The content is styled using Tailwind CSS Typography. </p> <h2>Why Dark Mode?</h2> <p> Dark mode can reduce eye strain, especially in low-light environments. It also helps in saving battery life on OLED screens. </p> <h2>Setting Up Tailwind CSS</h2> <p>Follow the steps to configure Tailwind CSS and Tailwind CSS Typography in your Next.js project.</p> </div> ) }

What is robots.txt file ? How to add into your Next.js app ?

Read more

Conclusion

We have gone over how to use Tailwind CSS to set up a Next.js project and how to use `next-themes` to implement dark mode in this article. We also showed you how to use Tailwind CSS Typography to improve content. You can improve user experience by offering a fashionable and useful dark mode in your Next.js application by following these instructions.

SWHabitation
Founder & CEO
Preview PDF