Fix theme toggle

frontend/src/components/settings/AppearanceSettings.js

@@ -1,18 +1,25 @@
 import React from 'react';
-import { Text, Switch, Stack } from '@mantine/core';
+import { Text, Switch, Group, Box, Title } from '@mantine/core';
+import { useSettings } from '../../contexts/SettingsContext';
+
+const AppearanceSettings = ({ onThemeChange }) => {
+  const { colorScheme, toggleColorScheme } = useSettings();
+
+  const handleThemeChange = () => {
+    toggleColorScheme();
+    onThemeChange(colorScheme === 'dark' ? 'light' : 'dark');
+  };
 
-const AppearanceSettings = ({ themeSettings, onThemeChange }) => {
   return (
-    <Stack spacing="xs">
-      <Text fw={500} size="lg">
+    <Box mb="md">
+      <Title order={3} mb="md">
         Appearance
-      </Text>
-      <Switch
-        label="Dark Mode"
-        checked={themeSettings === 'dark'}
-        onChange={onThemeChange}
-      />
-    </Stack>
+      </Title>
+      <Group justify="space-between" align="center">
+        <Text size="sm">Dark Mode</Text>
+        <Switch checked={colorScheme === 'dark'} onChange={handleThemeChange} />
+      </Group>
+    </Box>
   );
 };