How to add dark mode in next.js application using tailwind css ?
by SWHabitation
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.
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
Setting Up a Next.js Project
First, create a new Next.js project,
1
2
npx create-next-app@latest dark-mode-nextjs
cd dark-mode-nextjsNext, install Tailwind CSS and its dependencies,
1
2
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pConfigure Tailwind CSS by editing `tailwind.config.js`,
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`,
1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;To manage dark mode, we'll use the `next-themes` library. Install it by running:
1
npm install next-themesNext, create a `ThemeProvider` to wrap your application. Edit `pages/_app.js`:
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 MyAppUpdate your Tailwind CSS configuration to support dark mode,
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`,
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`,
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`:
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>
)
}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.
