feat: dark / light theme almost complete

frontend/src/pages/SettingsPage.tsx

@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import { useUnits } from '../core/units/UnitsContext';
 import { useAdminAccess } from '../core/auth/useAdminAccess';
 import { useProfile, useUpdateProfile } from '../features/settings/hooks/useProfile';
+import { useTheme } from '../shared-minimal/theme/ThemeContext';
 import { DeleteAccountDialog } from '../features/settings/components/DeleteAccountDialog';
 import { PendingDeletionBanner } from '../features/settings/components/PendingDeletionBanner';
 import {
@@ -44,9 +45,9 @@ export const SettingsPage: React.FC = () => {
   const navigate = useNavigate();
   const { unitSystem, setUnitSystem } = useUnits();
   const { isAdmin, loading: adminLoading } = useAdminAccess();
+  const { isDarkMode, setDarkMode } = useTheme();
   const [notifications, setNotifications] = useState(true);
   const [emailUpdates, setEmailUpdates] = useState(false);
-  const [darkMode, setDarkMode] = useState(false);
 
   // Profile state
   const { data: profile, isLoading: profileLoading } = useProfile();
@@ -314,7 +315,7 @@ export const SettingsPage: React.FC = () => {
               />
               <ListItemSecondaryAction>
                 <Switch
-                  checked={darkMode}
+                  checked={isDarkMode}
                   onChange={(e) => setDarkMode(e.target.checked)}
                   color="primary"
                 />