feat(Theme): enhance theming and UI consistency across components

- Updated app.json to set userInterfaceStyle to automatic for improved theme adaptability.
- Refactored layout components to utilize useAppColors for dynamic theming, ensuring consistent color usage.
- Introduced SystemChrome component to manage system UI background color based on theme.
- Enhanced TabsLayout, ProfileStackLayout, and other components to leverage new theming structure.
- Improved QRCodeScanner, SearchBar, and CommentItem styles to align with the updated theme system.
- Consolidated styles in SystemMessageItem and TabBar for better maintainability and visual coherence.

src/screens/message/GroupRequestDetailScreen.tsx

@@ -4,7 +4,7 @@ import { useRouter, useLocalSearchParams } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { colors, spacing, borderRadius, shadows } from '../../theme';
+import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { Avatar, Text } from '../../components/common';
 import * as hrefs from '../../navigation/hrefs';
 import { routePayloadCache } from '../../stores/routePayloadCache';
@@ -14,6 +14,8 @@ import { userManager } from '../../stores/userManager';
 import { GroupInfoSummaryCard, DecisionFooter } from './components/GroupRequestShared';
 
 const GroupRequestDetailScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createGroupRequestDetailStyles(colors), [colors]);
   const router = useRouter();
   const { messageId } = useLocalSearchParams<{ messageId?: string }>();
   const message = messageId ? routePayloadCache.getSystemMessage(messageId) : undefined;
@@ -174,52 +176,54 @@ const GroupRequestDetailScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-  },
-  emptyWrap: {
-    flex: 1,
-    padding: spacing.lg,
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: spacing.md,
-  },
-  backBtn: {
-    padding: spacing.sm,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    padding: spacing.lg,
-    paddingBottom: spacing.xl,
-  },
-  card: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    padding: spacing.lg,
-    marginBottom: spacing.md,
-    ...shadows.sm,
-  },
-  sectionTitle: {
-    marginBottom: spacing.sm,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  meta: {
-    marginLeft: spacing.md,
-    flex: 1,
-  },
-  name: {
-    marginBottom: 2,
-  },
-  subDesc: {
-    marginTop: spacing.sm,
-  },
-});
+function createGroupRequestDetailStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    emptyWrap: {
+      flex: 1,
+      padding: spacing.lg,
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: spacing.md,
+    },
+    backBtn: {
+      padding: spacing.sm,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      padding: spacing.lg,
+      paddingBottom: spacing.xl,
+    },
+    card: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      padding: spacing.lg,
+      marginBottom: spacing.md,
+      ...shadows.sm,
+    },
+    sectionTitle: {
+      marginBottom: spacing.sm,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    meta: {
+      marginLeft: spacing.md,
+      flex: 1,
+    },
+    name: {
+      marginBottom: 2,
+    },
+    subDesc: {
+      marginTop: spacing.sm,
+    },
+  });
+}
 
 export default GroupRequestDetailScreen;