feat: theme switch

src/components/layout/footer.tsx

@@ -3,6 +3,7 @@ import Logo from "../icons/logo";
 import useAuthStore from "@/store/auth-store";
 import LoginNavbar from "./login-navbar";
 import { ROUTE_PATH } from "@/routes/route-path";
+import ThemeSwitcher from "../theme-switcher";
 
 const Footer = () => {
   const { isAuthenticated, openLoginNavbar, setOpenLoginNavbar } =
@@ -61,6 +62,7 @@ const Footer = () => {
                 </div>
               )
             }
+            <ThemeSwitcher />
           </div>
         </div>
       </footer>

src/components/theme-switcher.tsx

@@ -0,0 +1,45 @@
+import { Sun, Moon, Monitor } from "lucide-react";
+import Select, { SelectItem, } from "@/components/ui/select";
+import { useTheme } from '@/context/theme-context';
+
+
+const ThemeSelector = () => {
+    const { theme, setTheme } = useTheme();
+
+    const handleThemeChange = (value: string) => {
+
+        setTheme(value);
+        console.log(value);
+        // Add your theme change logic here
+    };
+
+    return (
+        <div className="w-72">
+
+            <Select value={theme} onValueChange={handleThemeChange} id="theme-selector">
+
+                <SelectItem value="light" className="flex items-center gap-2">
+                    <div className="flex items-center gap-2">
+                        <Sun className="h-4 w-4" />
+                        Light
+                    </div>
+                </SelectItem>
+                <SelectItem value="dark" className="flex items-center gap-2">
+                    <div className="flex items-center gap-2">
+                        <Moon className="h-4 w-4" />
+                        Dark
+                    </div>
+                </SelectItem>
+                <SelectItem value="system" className="flex items-center gap-2">
+                    <div className="flex items-center gap-2">
+                        <Monitor className="h-4 w-4" />
+                        System
+                    </div>
+                </SelectItem>
+            </Select>
+        </div>
+
+    );
+};
+
+export default ThemeSelector;

src/context/theme-context.tsx

@@ -0,0 +1,37 @@
+import { createContext, useContext, useEffect, useState } from "react"
+
+interface ThemeContextProps {
+    theme: string
+    setTheme: (theme: string) => void
+}
+
+const ThemeContext = createContext<ThemeContextProps | undefined>(undefined)
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+    const [theme, setTheme] = useState(() => {
+        const savedTheme = localStorage.getItem("theme")
+        return savedTheme || "light"
+    })
+
+    useEffect(() => {
+        const root = window.document.documentElement
+        const isDark = theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches)
+        root.classList.remove(isDark ? "light" : "dark")
+        root.classList.add(isDark ? "dark" : "light")
+        localStorage.setItem("theme", theme)
+    }, [theme])
+
+    return (
+        <ThemeContext.Provider value={{ theme, setTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    )
+}
+
+export function useTheme() {
+    const context = useContext(ThemeContext)
+    if (!context) {
+        throw new Error("useTheme must be used within a ThemeProvider")
+    }
+    return context
+} 

src/providers/index.tsx

@@ -3,13 +3,16 @@ import ModalProvider from "./modal-provider";
 import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider } from "react-router-dom";
 import routes from "../routes";
+import { ThemeProvider } from "@/context/theme-context";
 const Providers: FC<PropsWithChildren<{ queryClient: QueryClient }>> = ({
   queryClient,
 }) => {
   return (
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={routes} />
-      <ModalProvider />
+      <ThemeProvider>
+        <RouterProvider router={routes} />
+        <ModalProvider />
+      </ThemeProvider>
     </QueryClientProvider>
   );
 };