fix: login and "dark mode" setting when system defaults to dark mode

frontend/src/components/space-card/index.tsx

@@ -15,7 +15,7 @@ export default function SpaceCard({ children, image, imageAlt }: SpaceCardProps)
       className="bg-white/90 dark:bg-gray-900/90 shadow-2xl rounded-3xl flex flex-col md:flex-row items-center w-full max-w-3xl border border-indigo-100 dark:border-gray-700 backdrop-blur-md p-0 md:p-0 overflow-hidden"
       style={{ minHeight: '420px' }}
     >
-      {image && !document.body.classList.contains('dark') && (
+      {image && (
         <div className="hidden md:flex items-center justify-center bg-gradient-to-br from-blue-100 via-indigo-100 to-purple-100 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 h-full w-1/2 min-h-[420px]">
           <img
             src={image}

frontend/src/contexts/SettingsContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState, useMemo } from 'react';
 
 interface SettingsContextType {
   darkMode: boolean;
@@ -8,29 +8,51 @@ interface SettingsContextType {
 const SettingsContext = createContext<SettingsContextType | undefined>(undefined);
 
 export function SettingsProvider({ children }: { children: React.ReactNode }) {
-  const [darkMode, setDarkMode] = useState(false);
+  // Initialize dark mode: prefer explicit user setting in localStorage; otherwise use system preference
+  const getInitialDark = () => {
+    const stored = localStorage.getItem('darkMode');
+    if (stored === '1') return true;
+    if (stored === '0') return false;
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  };
 
-  // Load dark mode from localStorage on mount
-  useEffect(() => {
-    setDarkMode(localStorage.getItem('darkMode') === '1');
-  }, []);
+  const [darkMode, setDarkMode] = useState<boolean>(() => getInitialDark());
 
-  // Persist and apply dark mode
+  // Apply dark class and persist explicit user preference when it changes
   useEffect(() => {
     if (darkMode) {
       document.body.classList.add('dark');
       localStorage.setItem('darkMode', '1');
-    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      document.body.classList.add('dark');
-      localStorage.setItem('darkMode', '1');
     } else {
       document.body.classList.remove('dark');
       localStorage.setItem('darkMode', '0');
     }
   }, [darkMode]);
 
+  // If user hasn't set an explicit preference, follow system changes
+  useEffect(() => {
+    const stored = localStorage.getItem('darkMode');
+    if (stored === '1' || stored === '0') return; // user preference exists
+
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => setDarkMode(e.matches);
+    if (mq.addEventListener) mq.addEventListener('change', handler);
+    else {
+      // addListener is deprecated but still present on some browsers; fall back using any-cast
+      (mq as any).addListener(handler);
+    }
+    return () => {
+      if (mq.removeEventListener) mq.removeEventListener('change', handler);
+      else {
+        (mq as any).removeListener(handler);
+      }
+    };
+  }, []);
+
+  const providerValue = useMemo(() => ({ darkMode, setDarkMode }), [darkMode]);
+
   return (
-    <SettingsContext.Provider value={{ darkMode, setDarkMode }}>
+    <SettingsContext.Provider value={providerValue}>
       {children}
     </SettingsContext.Provider>
   );