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:
Setting Up A Next.Js Project
First, create a new Next.js project,
npx create-next-app@latest dark-mode-nextjs
cd dark-mode-nextjs
Next, install Tailwind CSS and its dependencies,
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Configure Tailwind CSS by editing tailwind.config.js
,
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
,
@tailwind base;
@tailwind components;
@tailwind utilities;
To manage dark mode, we'll use the next-themes
library. Install it by running:
npm install next-themes
Next, create a ThemeProvider
to wrap your application. Edit pages/_app.js
:
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,
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
,
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
,
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
:
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.
Top comments (0)