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/profile/FollowListScreen.tsx

@@ -5,7 +5,7 @@
  * 在宽屏下使用网格布局
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import {
   View,
   FlatList,
@@ -17,7 +17,7 @@ import {
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter, useLocalSearchParams } from 'expo-router';
-import { colors, spacing, borderRadius, shadows } from '../../theme';
+import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { User } from '../../types';
 import { useAuthStore, useUserStore } from '../../stores';
 import { authService } from '../../services';
@@ -26,6 +26,8 @@ import * as hrefs from '../../navigation/hrefs';
 import { useResponsive, useColumnCount } from '../../hooks';
 
 const FollowListScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createFollowListStyles(colors), [colors]);
   const router = useRouter();
   const { userId = '', type: typeParam } = useLocalSearchParams<{ userId?: string; type?: string }>();
   const type = typeParam === 'followers' ? 'followers' : 'following';
@@ -356,136 +358,138 @@ const FollowListScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-  },
-  // 列表布局样式
-  listContent: {
-    flexGrow: 1,
-    paddingHorizontal: spacing.md,
-    paddingTop: spacing.md,
-    paddingBottom: spacing.lg,
-  },
-  headerCard: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.xl,
-    paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.md,
-    marginBottom: spacing.md,
-    borderWidth: 1,
-    borderColor: colors.divider + '4A',
-    ...shadows.sm,
-  },
-  headerAccent: {
-    width: 28,
-    height: 3,
-    borderRadius: 999,
-    backgroundColor: colors.primary.main + 'A6',
-    marginBottom: spacing.sm,
-  },
-  headerMainRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  headerTitle: {
-    fontWeight: '700',
-  },
-  headerCountPill: {
-    paddingHorizontal: spacing.sm,
-    paddingVertical: 4,
-    borderRadius: borderRadius.full,
-    backgroundColor: colors.background.default,
-  },
-  headerSubtitle: {
-    marginTop: spacing.xs,
-  },
-  userItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    padding: spacing.md,
-    marginBottom: spacing.sm,
-    borderWidth: 1,
-    borderColor: colors.divider + '45',
-    ...shadows.sm,
-  },
-  userInfo: {
-    flex: 1,
-    marginLeft: spacing.md,
-    marginRight: spacing.sm,
-  },
-  nickname: {
-    fontWeight: '600',
-    marginBottom: 2,
-  },
-  bio: {
-    marginTop: 2,
-  },
-  followButton: {
-    minWidth: 82,
-  },
-  // 网格布局样式
-  gridContent: {
-    flexGrow: 1,
-    padding: spacing.lg,
-  },
-  emptyGridContent: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  gridRow: {
-    justifyContent: 'flex-start',
-    gap: spacing.md,
-    marginBottom: spacing.md,
-  },
-  userCard: {
-    flex: 1,
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.xl,
-    padding: spacing.md,
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: colors.divider + '45',
-    ...shadows.sm,
-  },
-  userCardHeader: {
-    marginBottom: spacing.sm,
-  },
-  userCardContent: {
-    alignItems: 'center',
-    width: '100%',
-  },
-  userCardNickname: {
-    fontWeight: '600',
-    marginBottom: 2,
-    textAlign: 'center',
-  },
-  userCardBio: {
-    marginTop: spacing.xs,
-    textAlign: 'center',
-  },
-  userCardFooter: {
-    marginTop: spacing.md,
-    width: '100%',
-  },
-  userCardFollowButton: {
-    width: '100%',
-  },
-  footerLoading: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: spacing.md,
-    gap: spacing.xs,
-  },
-  footerLoadingText: {
-    marginLeft: spacing.xs,
-  },
-});
+function createFollowListStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    // 列表布局样式
+    listContent: {
+      flexGrow: 1,
+      paddingHorizontal: spacing.md,
+      paddingTop: spacing.md,
+      paddingBottom: spacing.lg,
+    },
+    headerCard: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.xl,
+      paddingHorizontal: spacing.lg,
+      paddingVertical: spacing.md,
+      marginBottom: spacing.md,
+      borderWidth: 1,
+      borderColor: colors.divider + '4A',
+      ...shadows.sm,
+    },
+    headerAccent: {
+      width: 28,
+      height: 3,
+      borderRadius: 999,
+      backgroundColor: colors.primary.main + 'A6',
+      marginBottom: spacing.sm,
+    },
+    headerMainRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    headerTitle: {
+      fontWeight: '700',
+    },
+    headerCountPill: {
+      paddingHorizontal: spacing.sm,
+      paddingVertical: 4,
+      borderRadius: borderRadius.full,
+      backgroundColor: colors.background.default,
+    },
+    headerSubtitle: {
+      marginTop: spacing.xs,
+    },
+    userItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      padding: spacing.md,
+      marginBottom: spacing.sm,
+      borderWidth: 1,
+      borderColor: colors.divider + '45',
+      ...shadows.sm,
+    },
+    userInfo: {
+      flex: 1,
+      marginLeft: spacing.md,
+      marginRight: spacing.sm,
+    },
+    nickname: {
+      fontWeight: '600',
+      marginBottom: 2,
+    },
+    bio: {
+      marginTop: 2,
+    },
+    followButton: {
+      minWidth: 82,
+    },
+    // 网格布局样式
+    gridContent: {
+      flexGrow: 1,
+      padding: spacing.lg,
+    },
+    emptyGridContent: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    gridRow: {
+      justifyContent: 'flex-start',
+      gap: spacing.md,
+      marginBottom: spacing.md,
+    },
+    userCard: {
+      flex: 1,
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.xl,
+      padding: spacing.md,
+      alignItems: 'center',
+      borderWidth: 1,
+      borderColor: colors.divider + '45',
+      ...shadows.sm,
+    },
+    userCardHeader: {
+      marginBottom: spacing.sm,
+    },
+    userCardContent: {
+      alignItems: 'center',
+      width: '100%',
+    },
+    userCardNickname: {
+      fontWeight: '600',
+      marginBottom: 2,
+      textAlign: 'center',
+    },
+    userCardBio: {
+      marginTop: spacing.xs,
+      textAlign: 'center',
+    },
+    userCardFooter: {
+      marginTop: spacing.md,
+      width: '100%',
+    },
+    userCardFollowButton: {
+      width: '100%',
+    },
+    footerLoading: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: spacing.md,
+      gap: spacing.xs,
+    },
+    footerLoadingText: {
+      marginLeft: spacing.xs,
+    },
+  });
+}
 
 export default FollowListScreen;