1. Create the Context (ThemeContext.js)

<aside> 💬

"use client"; // Required for hooks in Next.js App Router
import { createContext, useContext, useState, useEffect } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [darkMode, setDarkMode] = useState(false);

  // Toggle function
  const toggleTheme = () => setDarkMode(!darkMode);

  // Apply class to the body tag
  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [darkMode]);

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

// Custom hook for easier access
export const useTheme = () => useContext(ThemeContext);

"use client";
import { useTheme } from './ThemeContext';

export default function Navbar() {
  const { darkMode, toggleTheme } = useTheme();

  return (
    <nav className="p-4 flex justify-between bg-white dark:bg-gray-900">
      <h1 className="text-black dark:text-white">LMS Dashboard</h1>
      
      <button 
        onClick={toggleTheme}
        className="px-4 py-2 rounded bg-blue-500 text-white"
      >
        Switch to {darkMode ? 'Light' : 'Dark'} Mode
      </button>
    </nav>
  );
}

</aside>