How to implement a dark mode toggle in Next.js using context



Image not found!!

Implementing a dark mode toggle in a Next.js application using context involves creating a context provider, consuming it in relevant components, and managing the state of dark mode. Here's a step-by-step guide:

Step 1: Set up your Next.js project

Make sure you have a Next.js project set up. You can create one using the following commands:

bash
npx create-next-app my-nextjs-app
cd my-nextjs-app

Step 2: Create a ThemeContext file

Create a new file called ThemeContext.js in a folder like contexts.

jsx
// contexts/ThemeContext.js
import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleDarkMode = () => {
    setIsDarkMode((prevMode) => !prevMode);
  };

  return (
    <ThemeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

Step 3: Wrap your app with the ThemeProvider

In your pages/_app.js file, wrap your entire application with the ThemeProvider.

jsx
// pages/_app.js
import { ThemeProvider } from '../contexts/ThemeContext';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Step 4: Create a component that uses the dark mode toggle

Create a component that uses the useTheme hook to access the isDarkMode state and toggleDarkMode function.

jsx
// components/DarkModeToggle.js
import { useTheme } from '../contexts/ThemeContext';

const DarkModeToggle = () => {
  const { isDarkMode, toggleDarkMode } = useTheme();

  return (
    <div>
      <label>
        Dark Mode
        <input type="checkbox" checked={isDarkMode} onChange={toggleDarkMode} />
      </label>
    </div>
  );
};

export default DarkModeToggle;

Step 5: Use the component in your pages

Finally, use the DarkModeToggle component in your pages.

jsx
// pages/index.js
import DarkModeToggle from '../components/DarkModeToggle';

function Home() {
  return (
    <div>
      <h1>Next.js Dark Mode Example</h1>
      <DarkModeToggle />
      {/* Your page content goes here */}
    </div>
  );
}

export default Home;

Now you have a basic setup for implementing dark mode in your Next.js application using context. The ThemeProvider provides the dark mode state and toggle function to any component that uses the useTheme hook. The DarkModeToggle component is just an example; you can apply dark mode styles and logic as needed throughout your application.

Category List