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/components/ChatScreen/ChatInput.tsx

@@ -7,8 +7,8 @@ import React, { useMemo } from 'react';
 import { View, TouchableOpacity, TextInput, ActivityIndicator, ScrollView, StyleSheet, Image as RNImage } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Text } from '../../../../components/common';
-import { colors } from '../../../../theme';
-import { chatScreenStyles as baseStyles } from './styles';
+import { useAppColors } from '../../../../theme';
+import { useChatScreenStyles } from './styles';
 import { useBreakpointGTE } from '../../../../hooks/useResponsive';
 import { ChatInputProps, GroupMessage, SenderInfo } from './types';
 import { extractTextFromSegments } from '../../../../types/dto';
@@ -39,14 +39,15 @@ export const ChatInput: React.FC<ChatInputProps & {
   otherUser,
   getSenderInfo,
 }) => {
+  const colors = useAppColors();
+  const styles = useChatScreenStyles();
   const isDisabled = isGroupChat && isMuted;
-  
+
   // 获取当前用户ID
   const currentUserId = currentUser?.id || '';
-  
+
   // 响应式布局
   const isWideScreen = useBreakpointGTE('lg');
-  const styles = baseStyles;
 
   const inputContainerStyle = useMemo(() => ([
     styles.inputContainer,