fix: add page reload back to apply theme changes

src/app/layout.tsx

@@ -62,7 +62,11 @@ export default function RootLayout({
                 html.classList.remove('dark');
               } else if (theme === 'system') {
                 const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                if (isDark) html.classList.add('dark');
+                if (isDark) {
+                  html.classList.add('dark');
+                } else {
+                  html.classList.remove('dark');
+                }
               }
             })();
           `

src/components/SettingsPage.tsx

@@ -28,23 +28,10 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
     setCurrentTheme(newTheme);
     localStorage.setItem('theme-mode', newTheme);
     
-    const html = document.documentElement;
-    
-    if (newTheme === 'dark') {
-      html.classList.add('dark');
-      toast.success('🌙 Dark theme');
-    } else if (newTheme === 'light') {
-      html.classList.remove('dark');
-      toast.success('☀️ Light theme');
-    } else if (newTheme === 'system') {
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      if (prefersDark) {
-        html.classList.add('dark');
-      } else {
-        html.classList.remove('dark');
-      }
-      toast.success('🔄 System');
-    }
+    toast.success('🔄 Applying theme...');
+    setTimeout(() => {
+      window.location.reload();
+    }, 800);
   };
 
   return (