fix: remove page reload from theme changes, rely on dark class application

src/app/layout.tsx

@@ -23,6 +23,25 @@ export const metadata: Metadata = {
   },
 };
 
+// Add global CSS variable definitions
+const themeStylesheet = `
+  :root {
+    --bg-primary: #f8fafc;
+    --bg-secondary: #f1f5f9;
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+    --border-color: #e2e8f0;
+  }
+  
+  html.dark {
+    --bg-primary: #0f172a;
+    --bg-secondary: #1e293b;
+    --text-primary: #f1f5f9;
+    --text-secondary: #cbd5e1;
+    --border-color: #334155;
+  }
+`;
+
 export default function RootLayout({
   children,
 }: Readonly<{

src/components/SettingsPage.tsx

@@ -26,7 +26,6 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
 
   const handleThemeChange = (newTheme: string) => {
     console.log('Changing theme to:', newTheme);
-    toast.success(`Theme changed to ${newTheme}`);
     
     setCurrentTheme(newTheme);
     localStorage.setItem('theme-mode', newTheme);
@@ -36,9 +35,11 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
     if (newTheme === 'dark') {
       html.classList.add('dark');
       html.style.colorScheme = 'dark';
+      toast.success('🌙 Switched to dark theme');
     } else if (newTheme === 'light') {
       html.classList.remove('dark');
       html.style.colorScheme = 'light';
+      toast.success('☀️ Switched to light theme');
     } else if (newTheme === 'system') {
       const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
       if (prefersDark) {
@@ -48,12 +49,8 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
         html.classList.remove('dark');
         html.style.colorScheme = 'light';
       }
+      toast.success('🔄 Using system preference');
     }
-    
-    // Force page reload to apply theme
-    setTimeout(() => {
-      window.location.reload();
-    }, 500);
   };
 
   return (