fix: implement working theme selector with localStorage persistence

src/components/ClientLayout.tsx

@@ -10,7 +10,7 @@ export default function ClientLayout({
   children: React.ReactNode;
 }) {
   return (
-    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem storageKey="theme">
       <AuthProvider>
         {children}
         <Toaster

src/components/SettingsPage.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useAuth } from '@/context/AuthContext';
 import { useTheme } from 'next-themes';
 
@@ -12,6 +12,33 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
   const { logout } = useAuth();
   const { theme, setTheme } = useTheme();
   const [showConfirm, setShowConfirm] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [currentTheme, setCurrentTheme] = useState<string>('dark');
+
+  useEffect(() => {
+    setMounted(true);
+    // Get the current theme from localStorage or system preference
+    const stored = localStorage.getItem('theme');
+    if (stored) {
+      setCurrentTheme(stored);
+    } else if (theme) {
+      setCurrentTheme(theme);
+    }
+  }, [theme]);
+
+  const handleThemeChange = (newTheme: string) => {
+    setCurrentTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    setTheme(newTheme);
+    
+    // Update the HTML element immediately
+    const html = document.documentElement;
+    if (newTheme === 'dark' || (newTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      html.classList.add('dark');
+    } else {
+      html.classList.remove('dark');
+    }
+  };
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4 pb-32 pt-8">
@@ -54,9 +81,9 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
                 {['light', 'dark', 'system'].map(t => (
                   <button
                     key={t}
-                    onClick={() => setTheme(t)}
+                    onClick={() => handleThemeChange(t)}
                     className={`px-4 py-2 rounded-lg font-medium transition-colors capitalize ${
-                      theme === t
+                      currentTheme === t
                         ? 'bg-blue-600 text-white'
                         : 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-600'
                     }`}