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

@@ -10,11 +10,11 @@ import { Image as ExpoImage } from 'expo-image';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
 import { Text } from '../../../../components/common';
-import { chatScreenStyles as baseStyles } from './styles';
+import { useChatScreenStyles } from './styles';
 import { useResponsive, useBreakpointGTE } from '../../../../hooks/useResponsive';
 import { EMOJIS } from './constants';
 import { CustomSticker, getCustomStickers, batchDeleteStickers, addStickerFromUrl } from '../../../../services/stickerService';
-import { colors, spacing } from '../../../../theme';
+import { useAppColors, spacing } from '../../../../theme';
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
 
@@ -41,6 +41,8 @@ export const EmojiPanel: React.FC<EmojiPanelProps> = ({
   onInsertSticker,
   onClose,
 }) => {
+  const colors = useAppColors();
+  const baseStyles = useChatScreenStyles();
   const [activeTab, setActiveTab] = useState<TabType>('emoji');
   const [stickers, setStickers] = useState<CustomSticker[]>([]);
   const [loadingStickers, setLoadingStickers] = useState(false);
@@ -82,7 +84,7 @@ export const EmojiPanel: React.FC<EmojiPanelProps> = ({
         lineHeight: emojiSize.size + 6,
       },
     });
-  }, [emojiSize, emojiColumns]);
+  }, [emojiSize, emojiColumns, baseStyles]);
 
   // 加载自定义表情
   const loadStickers = useCallback(async () => {