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/GroupMembersScreen.tsx

@@ -21,7 +21,7 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useLocalSearchParams } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 import { useAuthStore } from '../../stores';
 import { groupService } from '../../services/groupService';
 import {
@@ -55,6 +55,8 @@ interface MemberGroup {
 }
 
 const GroupMembersScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createGroupMembersStyles(colors), [colors]);
   const { groupId: groupIdParam } = useLocalSearchParams<{ groupId?: string | string[] }>();
   const groupId = firstRouteParam(groupIdParam) ?? '';
   const { currentUser } = useAuthStore();
@@ -646,122 +648,124 @@ const GroupMembersScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-  },
-  section: {
-    marginBottom: spacing.md,
-  },
-  sectionHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    backgroundColor: colors.background.default,
-  },
-  memberItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.md,
-    backgroundColor: colors.background.paper,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
-  },
-  memberInfo: {
-    flex: 1,
-    marginLeft: spacing.md,
-  },
-  memberNameRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 2,
-  },
-  memberName: {
-    fontWeight: '500',
-  },
-  roleBadge: {
-    paddingHorizontal: spacing.xs,
-    paddingVertical: 2,
-    borderRadius: borderRadius.sm,
-    marginLeft: spacing.sm,
-  },
-  mutedBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 2,
-  },
-  // 模态框样式
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'flex-end',
-  },
-  modalContent: {
-    backgroundColor: colors.background.paper,
-    borderTopLeftRadius: borderRadius.lg,
-    borderTopRightRadius: borderRadius.lg,
-    padding: spacing.lg,
-    maxHeight: '80%',
-  },
-  modalHeader: {
-    alignItems: 'center',
-    marginBottom: spacing.md,
-  },
-  modalTitle: {
-    fontWeight: '700',
-    marginTop: spacing.sm,
-    marginBottom: spacing.xs,
-  },
-  actionItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: spacing.md,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
-  },
-  actionText: {
-    marginLeft: spacing.md,
-  },
-  inputLabel: {
-    marginBottom: spacing.xs,
-  },
-  input: {
-    backgroundColor: colors.background.default,
-    borderRadius: borderRadius.md,
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.md,
-    fontSize: fontSizes.md,
-    color: colors.text.primary,
-    borderWidth: 1,
-    borderColor: colors.divider,
-    marginBottom: spacing.md,
-  },
-  modalButtons: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: spacing.md,
-  },
-  modalButton: {
-    flex: 1,
-    marginHorizontal: spacing.xs,
-  },
-  // 分页加载样式
-  loadingFooter: {
-    paddingVertical: spacing.md,
-    alignItems: 'center',
-  },
-  loadMoreBtn: {
-    paddingVertical: spacing.md,
-    alignItems: 'center',
-  },
-  noMoreText: {
-    textAlign: 'center',
-    paddingVertical: spacing.md,
-  },
-});
+function createGroupMembersStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    section: {
+      marginBottom: spacing.md,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm,
+      backgroundColor: colors.background.default,
+    },
+    memberItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.md,
+      backgroundColor: colors.background.paper,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.divider,
+    },
+    memberInfo: {
+      flex: 1,
+      marginLeft: spacing.md,
+    },
+    memberNameRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 2,
+    },
+    memberName: {
+      fontWeight: '500',
+    },
+    roleBadge: {
+      paddingHorizontal: spacing.xs,
+      paddingVertical: 2,
+      borderRadius: borderRadius.sm,
+      marginLeft: spacing.sm,
+    },
+    mutedBadge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: 2,
+    },
+    // 模态框样式
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'flex-end',
+    },
+    modalContent: {
+      backgroundColor: colors.background.paper,
+      borderTopLeftRadius: borderRadius.lg,
+      borderTopRightRadius: borderRadius.lg,
+      padding: spacing.lg,
+      maxHeight: '80%',
+    },
+    modalHeader: {
+      alignItems: 'center',
+      marginBottom: spacing.md,
+    },
+    modalTitle: {
+      fontWeight: '700',
+      marginTop: spacing.sm,
+      marginBottom: spacing.xs,
+    },
+    actionItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: spacing.md,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.divider,
+    },
+    actionText: {
+      marginLeft: spacing.md,
+    },
+    inputLabel: {
+      marginBottom: spacing.xs,
+    },
+    input: {
+      backgroundColor: colors.background.default,
+      borderRadius: borderRadius.md,
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.md,
+      fontSize: fontSizes.md,
+      color: colors.text.primary,
+      borderWidth: 1,
+      borderColor: colors.divider,
+      marginBottom: spacing.md,
+    },
+    modalButtons: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginTop: spacing.md,
+    },
+    modalButton: {
+      flex: 1,
+      marginHorizontal: spacing.xs,
+    },
+    // 分页加载样式
+    loadingFooter: {
+      paddingVertical: spacing.md,
+      alignItems: 'center',
+    },
+    loadMoreBtn: {
+      paddingVertical: spacing.md,
+      alignItems: 'center',
+    },
+    noMoreText: {
+      textAlign: 'center',
+      paddingVertical: spacing.md,
+    },
+  });
+}
 
 export default GroupMembersScreen;