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

@@ -4,7 +4,7 @@
  * 参考QQ和微信的实现，提供聊天管理功能
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -16,7 +16,7 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius, shadows } from '../../theme';
+import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { useAuthStore } from '../../stores';
 import { authService } from '../../services/authService';
 import { messageService } from '../../services/messageService';
@@ -33,6 +33,8 @@ import * as hrefs from '../../navigation/hrefs';
 import { AppBackButton } from '../../components/common';
 
 const PrivateChatInfoScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createPrivateChatInfoStyles(colors), [colors]);
   const router = useRouter();
   const raw = useLocalSearchParams<{
     conversationId?: string;
@@ -277,7 +279,7 @@ const PrivateChatInfoScreen: React.FC = () => {
         value={value}
         onValueChange={onValueChange}
         trackColor={{ false: '#E0E0E0', true: colors.primary.light }}
-        thumbColor={value ? colors.primary.main : '#F5F5F5'}
+        thumbColor={value ? colors.primary.main : colors.background.default}
       />
     </View>
   );
@@ -420,101 +422,103 @@ const PrivateChatInfoScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-  },
-  pageHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    backgroundColor: colors.background.paper,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
-  },
-  pageTitle: {
-    fontWeight: '600',
-  },
-  pageHeaderPlaceholder: {
-    width: 40,
-    height: 40,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingBottom: spacing.xl,
-  },
-  headerCard: {
-    backgroundColor: colors.background.paper,
-    marginHorizontal: spacing.md,
-    marginTop: spacing.md,
-    borderRadius: borderRadius.lg,
-    padding: spacing.lg,
-    ...shadows.sm,
-  },
-  userHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  userInfo: {
-    flex: 1,
-    marginLeft: spacing.md,
-  },
-  userName: {
-    fontWeight: '600',
-    marginBottom: spacing.xs,
-  },
-  section: {
-    marginTop: spacing.lg,
-    paddingHorizontal: spacing.md,
-  },
-  sectionTitle: {
-    marginBottom: spacing.sm,
-    marginLeft: spacing.sm,
-    fontWeight: '500',
-  },
-  card: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    ...shadows.sm,
-    overflow: 'hidden',
-  },
-  settingItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: spacing.sm,
-    paddingHorizontal: spacing.md,
-  },
-  settingIconContainer: {
-    width: 36,
-    height: 36,
-    borderRadius: borderRadius.md,
-    backgroundColor: colors.primary.light + '20',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: spacing.md,
-  },
-  settingIconDanger: {
-    backgroundColor: colors.error.light + '20',
-  },
-  settingTitle: {
-    flex: 1,
-  },
-  dangerText: {
-    color: colors.error.main,
-  },
-  divider: {
-    marginLeft: spacing.xl + 36,
-    width: 'auto',
-    marginVertical: spacing.xs,
-  },
-  deleteButton: {
-    marginTop: spacing.sm,
-  },
-});
+function createPrivateChatInfoStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    pageHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm,
+      backgroundColor: colors.background.paper,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.divider,
+    },
+    pageTitle: {
+      fontWeight: '600',
+    },
+    pageHeaderPlaceholder: {
+      width: 40,
+      height: 40,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingBottom: spacing.xl,
+    },
+    headerCard: {
+      backgroundColor: colors.background.paper,
+      marginHorizontal: spacing.md,
+      marginTop: spacing.md,
+      borderRadius: borderRadius.lg,
+      padding: spacing.lg,
+      ...shadows.sm,
+    },
+    userHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    userInfo: {
+      flex: 1,
+      marginLeft: spacing.md,
+    },
+    userName: {
+      fontWeight: '600',
+      marginBottom: spacing.xs,
+    },
+    section: {
+      marginTop: spacing.lg,
+      paddingHorizontal: spacing.md,
+    },
+    sectionTitle: {
+      marginBottom: spacing.sm,
+      marginLeft: spacing.sm,
+      fontWeight: '500',
+    },
+    card: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      ...shadows.sm,
+      overflow: 'hidden',
+    },
+    settingItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: spacing.sm,
+      paddingHorizontal: spacing.md,
+    },
+    settingIconContainer: {
+      width: 36,
+      height: 36,
+      borderRadius: borderRadius.md,
+      backgroundColor: colors.primary.light + '20',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: spacing.md,
+    },
+    settingIconDanger: {
+      backgroundColor: colors.error.light + '20',
+    },
+    settingTitle: {
+      flex: 1,
+    },
+    dangerText: {
+      color: colors.error.main,
+    },
+    divider: {
+      marginLeft: spacing.xl + 36,
+      width: 'auto',
+      marginVertical: spacing.xs,
+    },
+    deleteButton: {
+      marginTop: spacing.sm,
+    },
+  });
+}
 
 export default PrivateChatInfoScreen;