implement theme provider

Author: UnderprotectionDev

app/layout.tsx

@@ -8,6 +8,7 @@ import {
 import "./globals.css";
 import { Inter, Space_Grotesk } from "next/font/google";
 import type { Metadata } from "next";
+import { ThemeProvider } from "@/context/ThemeProvider";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -50,7 +51,7 @@ export default function RootLayout({
           ${inter.variable} ${spaceGrotesk.variable}
           `}
         >
-          {children}
+          <ThemeProvider>{children}</ThemeProvider>
         </body>
       </html>
     </ClerkProvider>

context/ThemeProvider.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+interface ThemeContextType {
+  mode: string;
+  setMode: (mode: string) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [mode, setMode] = useState("");
+
+  const handleThemeChange = () => {
+    if (mode === "dark") {
+      setMode("light");
+      document.documentElement.classList.add("light");
+    } else {
+      setMode("dark");
+      document.documentElement.classList.add("dark");
+    }
+  };
+
+  // useEffect(() => {
+  //   handleThemeChange();
+  // }, [mode]);
+
+  return (
+    <ThemeContext.Provider value={{ mode, setMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+
+  return context;
+}