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

@@ -5,7 +5,7 @@
  * 实现手机端群信息界面的核心功能
  */
 
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -17,7 +17,7 @@ import {
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Avatar, Text } from '../../../../components/common';
-import { colors, spacing, fontSizes, shadows } from '../../../../theme';
+import { useAppColors, spacing, fontSizes, shadows, type AppColors } from '../../../../theme';
 import { GroupMemberResponse, GroupResponse, GroupAnnouncementResponse } from '../../../../types/dto';
 import { useBreakpointGTE } from '../../../../hooks/useResponsive';
 import { groupManager } from '../../../../stores/groupManager';
@@ -53,6 +53,8 @@ export const GroupInfoPanel: React.FC<GroupInfoPanelProps> = ({
   onInviteMembers,
   onViewAllMembers,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createGroupInfoPanelStyles(colors), [colors]);
   const isWideScreen = useBreakpointGTE('lg');
   const slideAnim = React.useRef(new Animated.Value(PANEL_WIDTH)).current;
   const fadeAnim = React.useRef(new Animated.Value(0)).current;
@@ -363,7 +365,8 @@ export const GroupInfoPanel: React.FC<GroupInfoPanelProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+function createGroupInfoPanelStyles(colors: AppColors) {
+  return StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
@@ -378,7 +381,7 @@ const styles = StyleSheet.create({
     top: 0,
     bottom: 0,
     width: PANEL_WIDTH,
-    backgroundColor: '#FFF',
+    backgroundColor: colors.background.paper,
     zIndex: 101,
     ...shadows.lg,
   },
@@ -389,12 +392,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.md,
     borderBottomWidth: 1,
-    borderBottomColor: '#E8E8E8',
+    borderBottomColor: colors.divider,
   },
   headerTitle: {
     fontSize: fontSizes.xl,
     fontWeight: '600',
-    color: '#333',
+    color: colors.text.primary,
   },
   closeButton: {
     padding: spacing.xs,
@@ -409,12 +412,12 @@ const styles = StyleSheet.create({
   groupName: {
     fontSize: fontSizes.xl,
     fontWeight: '600',
-    color: '#333',
+    color: colors.text.primary,
     marginTop: spacing.md,
   },
   memberCount: {
     fontSize: fontSizes.md,
-    color: '#999',
+    color: colors.text.secondary,
     marginTop: spacing.xs,
   },
   joinType: {
@@ -442,7 +445,7 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#E8E8E8',
+    backgroundColor: colors.divider,
     marginHorizontal: spacing.md,
   },
   section: {
@@ -456,11 +459,11 @@ const styles = StyleSheet.create({
   sectionTitle: {
     fontSize: fontSizes.md,
     fontWeight: '600',
-    color: '#333',
+    color: colors.text.primary,
     marginLeft: spacing.xs,
   },
   noticeBox: {
-    backgroundColor: '#FFF9E6',
+    backgroundColor: colors.chat.tipBg,
     padding: spacing.md,
     borderRadius: 8,
     borderLeftWidth: 3,
@@ -468,23 +471,23 @@ const styles = StyleSheet.create({
   },
   noticeText: {
     fontSize: fontSizes.sm,
-    color: '#666',
+    color: colors.text.secondary,
     lineHeight: 20,
   },
   noticeTime: {
     fontSize: fontSizes.xs,
-    color: '#999',
+    color: colors.text.hint,
     marginTop: spacing.xs,
     textAlign: 'right',
   },
   descriptionBox: {
-    backgroundColor: '#F5F7FA',
+    backgroundColor: colors.chat.surfaceMuted,
     padding: spacing.md,
     borderRadius: 8,
   },
   description: {
     fontSize: fontSizes.sm,
-    color: '#666',
+    color: colors.text.secondary,
     lineHeight: 20,
   },
   memberList: {
@@ -518,7 +521,7 @@ const styles = StyleSheet.create({
   },
   memberName: {
     fontSize: fontSizes.md,
-    color: '#333',
+    color: colors.text.primary,
     flex: 1,
   },
   ownerBadge: {
@@ -541,7 +544,7 @@ const styles = StyleSheet.create({
   },
   moreMembers: {
     fontSize: fontSizes.sm,
-    color: '#999',
+    color: colors.text.secondary,
     textAlign: 'center',
     paddingVertical: spacing.sm,
   },
@@ -550,15 +553,15 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     paddingVertical: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: '#F0F0F0',
+    borderBottomColor: colors.chat.borderHairline,
   },
   infoLabel: {
     fontSize: fontSizes.sm,
-    color: '#999',
+    color: colors.text.secondary,
   },
   infoValue: {
     fontSize: fontSizes.sm,
-    color: '#333',
+    color: colors.text.primary,
   },
   actionSection: {
     padding: spacing.md,
@@ -588,6 +591,7 @@ const styles = StyleSheet.create({
   leaveButtonText: {
     color: colors.error.main,
   },
-});
+  });
+}
 
 export default GroupInfoPanel;