Add dark mode for PWA frontend

apps/frontend/src/App.jsx

@@ -24,11 +24,38 @@ function App() {
     height: window.innerHeight
   });
 
+  // Theme: 'auto' | 'light' | 'dark'
+  const [theme, setThemeState] = useState(() => {
+    return localStorage.getItem('ff-theme') || 'auto';
+  });
+
   // Device detection
   const isMobile = screenSize.width <= 768;
   const isTablet = screenSize.width > 768 && screenSize.width <= 1024;
   const isDesktop = screenSize.width > 1024;
 
+  // Apply theme to document
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function applyTheme() {
+      const isDark = theme === 'dark' || (theme === 'auto' && mq.matches);
+      document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+    }
+
+    applyTheme();
+
+    if (theme === 'auto') {
+      mq.addEventListener('change', applyTheme);
+      return () => mq.removeEventListener('change', applyTheme);
+    }
+  }, [theme]);
+
+  function setTheme(newTheme) {
+    setThemeState(newTheme);
+    localStorage.setItem('ff-theme', newTheme);
+  }
+
   useEffect(() => {
     // Set initial screen size
     const handleResize = () => {
@@ -131,6 +158,8 @@ function App() {
           onShowSaved={() => setShowSaved(true)}
           onLogout={handleLogout}
           onAdminClick={handleAdminClick}
+          theme={theme}
+          onThemeChange={setTheme}
         />
       );
       break;