Design Converter
Education
Last updated on Jun 19, 2024
Last updated on Jun 19, 2024
Software Development Executive - II
I know who I am.
In the modern web development landscape, creating a dynamic and responsive user experience is paramount. One way to achieve this is through theme customization in Next.js.
This blog will delve into the intricacies of setting up themes in a Next.js project, focusing on dark mode implementation, theme providers, and other essential elements.
Next.js themes allow developers to create versatile and dynamic web applications. Utilizing themes can significantly enhance the user experience by providing options like dark mode and light mode. This blog will guide you through the process of setting up themes in Next.js using Next themes and other related packages.
To begin, create a new Next.js project or use an existing one. Ensure you have Node.js and npm installed. In your project folder, run the following command to set up Next.js:
1npx create-next-app my-next-theme-app 2cd my-next-theme-app
Next, install the necessary packages for theme management. The next-themes library is highly recommended for handling themes in Next.js.
1npm install next-themes
The ThemeProvider component is crucial for managing themes in your application. It provides context for the current theme and enables theme switching.
Create a ThemeProvider component in the components folder:
1// components/ThemeProvider.js 2import { ThemeProvider as NextThemesProvider } from 'next-themes'; 3import { useEffect, useState } from 'react'; 4 5const ThemeProvider = ({ children }) => { 6 const [mounted, setMounted] = useState(false); 7 8 useEffect(() => { 9 setMounted(true); 10 }, []); 11 12 if (!mounted) return null; 13 14 return ( 15 <NextThemesProvider attribute="class"> 16 {children} 17 </NextThemesProvider> 18 ); 19}; 20 21export default ThemeProvider;
Update your _app.js file to include the ThemeProvider component. This ensures that the theme context is available throughout your application.
1// pages/_app.js 2import ThemeProvider from '../components/ThemeProvider'; 3import '../styles/globals.css'; 4 5function MyApp({ Component, pageProps }) { 6 return ( 7 <ThemeProvider> 8 <Component {...pageProps} /> 9 </ThemeProvider> 10 ); 11} 12 13export default MyApp;
To support dark mode, you need to define CSS for both dark and light themes. Here, we use Tailwind CSS for simplicity. First, install Tailwind CSS:
1npm install tailwindcss postcss autoprefixer 2npx tailwindcss init -p
Configure Tailwind CSS to support dark mode by editing tailwind.config.js:
1// tailwind.config.js 2module.exports = { 3 darkMode: 'class', // or 'media' or 'class' 4 content: [ 5 './pages/**/*.{js,ts,jsx,tsx}', 6 './components/**/*.{js,ts,jsx,tsx}', 7 ], 8 theme: { 9 extend: {}, 10 }, 11 plugins: [], 12};
Add global styles in globals.css:
1/* styles/globals.css */ 2@tailwind base; 3@tailwind components; 4@tailwind utilities; 5 6body { 7 @apply bg-white text-black; 8} 9 10.dark body { 11 @apply bg-gray-900 text-white; 12}
Now, let's add a simple theme switcher to toggle between dark and light modes. Create a ThemeSwitcher component:
1// components/ThemeSwitcher.js 2import { useTheme } from 'next-themes'; 3 4const ThemeSwitcher = () => { 5 const { theme, setTheme } = useTheme(); 6 7 return ( 8 <button 9 onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} 10 > 11 Switch to {theme === 'dark' ? 'light' : 'dark'} mode 12 </button> 13 ); 14}; 15 16export default ThemeSwitcher;
Include this component in your layout or a specific page:
1// pages/index.js 2import ThemeSwitcher from '../components/ThemeSwitcher'; 3 4export default function Home() { 5 return ( 6 <div> 7 <h1>Welcome to My Next.js App</h1> 8 <ThemeSwitcher /> 9 </div> 10 ); 11}
The useTheme hook provided by next-themes allows you to access and control the current theme. This hook is particularly useful for creating custom theme switchers and other dynamic components.
1import { useTheme } from 'next-themes'; 2 3const CustomComponent = () => { 4 const { theme, setTheme } = useTheme(); 5 6 return ( 7 <div> 8 <p>Current theme: {theme}</p> 9 <button onClick={() => setTheme('dark')}>Dark Mode</button> 10 <button onClick={() => setTheme('light')}>Light Mode</button> 11 </div> 12 ); 13};
You can create components that adapt to the current theme. This is particularly useful for enhancing the user experience and ensuring consistency across your application.
1const ThemedButton = () => { 2 const { theme } = useTheme(); 3 4 return ( 5 <button className={theme === 'dark' ? 'bg-gray-700 text-white' : 'bg-white text-black'}> 6 Themed Button 7 </button> 8 ); 9};
Implementing themes in Next.js can significantly enhance your application's user experience. By leveraging the power of next themes, ThemeProvider components, and the useTheme hook, you can create a dynamic and responsive web app that caters to both light and dark mode preferences. Ensure you follow best practices and optimize for SEO and performance to deliver the best possible user experience.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.