weitere perfektionierung der neuen mobile app

resources/js/admin/mobile/components/Scaffold.tsx

@@ -4,6 +4,7 @@ import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { ChevronLeft } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { useTheme } from '@tamagui/core';
 
 type MobileScaffoldProps = {
   title: string;
@@ -15,24 +16,30 @@ type MobileScaffoldProps = {
 
 export function MobileScaffold({ title, onBack, rightSlot, children, footer }: MobileScaffoldProps) {
   const { t } = useTranslation('mobile');
+  const theme = useTheme();
+  const background = String(theme.background?.val ?? '#f7f8fb');
+  const surface = String(theme.surface?.val ?? '#ffffff');
+  const border = String(theme.borderColor?.val ?? '#e5e7eb');
+  const textColor = String(theme.color?.val ?? '#111827');
+
   return (
-    <YStack backgroundColor="#f7f8fb" minHeight="100vh">
+    <YStack backgroundColor={background} minHeight="100vh">
       <XStack
         alignItems="center"
         justifyContent="space-between"
         paddingHorizontal="$4"
         paddingTop="$4"
         paddingBottom="$3"
-        backgroundColor="white"
+        backgroundColor={surface}
         borderBottomWidth={1}
-        borderColor="#e5e7eb"
+        borderColor={border}
       >
         <XStack alignItems="center" space="$2">
           {onBack ? (
             <Pressable onPress={onBack}>
               <XStack alignItems="center" space="$1.5">
-                <ChevronLeft size={18} color="#007AFF" />
-                <Text fontSize="$sm" color="#007AFF" fontWeight="600">
+                <ChevronLeft size={18} color={String(theme.primary?.val ?? '#007AFF')} />
+                <Text fontSize="$sm" color={String(theme.primary?.val ?? '#007AFF')} fontWeight="600">
                   {t('actions.back', 'Back')}
                 </Text>
               </XStack>
@@ -41,7 +48,7 @@ export function MobileScaffold({ title, onBack, rightSlot, children, footer }: M
             <Text />
           )}
         </XStack>
-        <Text fontSize="$lg" fontWeight="800" color="#111827">
+        <Text fontSize="$lg" fontWeight="800" color={textColor}>
           {title}
         </Text>
         <XStack minWidth={40} justifyContent="flex-end">