How to implement dark mode in Next.js

Implementing dark mode in a Next.js application involves managing the user's preference for light or dark mode and dynamically applying styles based on that preference. Below is a simple example of how you can implement dark mode in a Next.js application:

1. Create a Theme Context:

   Start by creating a context to manage the theme state. Create a file, for example, ThemeContext.js:

   jsxCopy code
   import { createContext, useState, useContext, useEffect } from 'react';
   
   const ThemeContext = createContext();
   
   export const ThemeProvider = ({ children }) => {
     const [darkMode, setDarkMode] = useState(false);
   
     useEffect(() => {
       // Check user's preference from local storage or other sources
       const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
       setDarkMode(userPrefersDark);
     }, []);
   
     const toggleDarkMode = () => {
       setDarkMode((prevMode) => !prevMode);
     };
   
     return (
       <ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>
         {children}
       </ThemeContext.Provider>
     );
   };
   
   export const useTheme = () => {
     return useContext(ThemeContext);
   };
   

2. Wrap Your App with the Theme Provider:

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

   jsxCopy code
   import { ThemeProvider } from '../path-to-ThemeContext';
   
   function MyApp({ Component, pageProps }) {
     return (
       <ThemeProvider>
         <Component {...pageProps} />
       </ThemeProvider>
     );
   }
   
   export default MyApp;
   

3. Toggle Styles Based on Theme:

   In your components or styles, use the theme state to conditionally apply styles. For example:

   jsxCopy code
   import { useTheme } from '../path-to-ThemeContext';
   
   const MyComponent = () => {
     const { darkMode } = useTheme();
   
     return (
       <div className={darkMode ? 'dark-mode' : 'light-mode'}>
         <p>Hello, world!</p>
       </div>
     );
   };
   

4. Styling:

   Define your styles for light and dark modes. You can use CSS or a styling library like styled-components. Here's an example using CSS:

   cssCopy code
   /* styles.css */
   .light-mode {
     background-color: #ffffff;
     color: #000000;
   }
   
   .dark-mode {
     background-color: #1a1a1a;
     color: #ffffff;
   }
   

   Import the styles into your components or use a global stylesheet.

5. Toggle Button:

   If you want to provide a user interface to toggle between light and dark modes, create a button and use the toggleDarkMode function from the context:

   jsxCopy code
   import { useTheme } from '../path-to-ThemeContext';
   
   const ThemeToggle = () => {
     const { darkMode, toggleDarkMode } = useTheme();
   
     return (
       <button onClick={toggleDarkMode}>
         Toggle {darkMode ? 'Light' : 'Dark'} Mode
       </button>
     );
   };
   

That's a basic setup for implementing dark mode in a Next.js application. You can customize it further based on your specific requirements and styling preferences.