Reorganize components

frontend/src/components/settings/workspace/AppearanceSettings.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text, Switch, Group, Box, Title } from '@mantine/core';
+import { useWorkspace } from '../../../contexts/WorkspaceContext';
+
+const AppearanceSettings = ({ themeSettings, onThemeChange }) => {
+  const { colorScheme, updateColorScheme } = useWorkspace();
+
+  const handleThemeChange = () => {
+    const newTheme = colorScheme === 'dark' ? 'light' : 'dark';
+    updateColorScheme(newTheme);
+    onThemeChange(newTheme);
+  };
+
+  return (
+    <Box mb="md">
+      <Group justify="space-between" align="center">
+        <Text size="sm">Dark Mode</Text>
+        <Switch checked={colorScheme === 'dark'} onChange={handleThemeChange} />
+      </Group>
+    </Box>
+  );
+};
+
+export default AppearanceSettings;