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

@@ -25,7 +25,14 @@ import { useFocusEffect } from '@react-navigation/native';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
-import { colors, spacing, fontSizes, borderRadius, shadows } from '../../theme';
+import {
+  spacing,
+  fontSizes,
+  borderRadius,
+  shadows,
+  useAppColors,
+  type AppColors,
+} from '../../theme';
 import { useAuthStore } from '../../stores';
 import { groupService } from '../../services/groupService';
 import { uploadService } from '../../services/uploadService';
@@ -56,6 +63,8 @@ const JOIN_TYPE_OPTIONS: { value: JoinType; label: string; icon: string; desc: s
 ];
 
 const GroupInfoScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createGroupInfoStyles(colors), [colors]);
   const router = useRouter();
   const { groupId: groupIdParam, conversationId: conversationIdParam } = useLocalSearchParams<{
     groupId?: string | string[];
@@ -1071,7 +1080,8 @@ const GroupInfoScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createGroupInfoStyles(colors: AppColors) {
+  return StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: colors.background.default,
@@ -1594,6 +1604,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.primary.main,
     borderColor: colors.primary.main,
   },
-});
+  });
+}
 
 export default GroupInfoScreen;