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

@@ -16,11 +16,11 @@ import {
   Dimensions,
   BackHandler,
 } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useIsFocused } from '@react-navigation/native';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, borderRadius, shadows } from '../../theme';
+import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { SystemMessageResponse } from '../../types/dto';
 import { messageService } from '../../services/messageService';
 import { commentService } from '../../services/commentService';
@@ -45,6 +45,8 @@ const LIKE_SYSTEM_TYPES = new Set(['like_post', 'like_comment', 'like_reply', 'f
 const GROUP_SYSTEM_TYPES = new Set(['group_invite', 'group_join_apply', 'group_join_approved', 'group_join_rejected']);
 
 export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createNotificationsStyles(colors), [colors]);
   const isFocused = useIsFocused();
   const { setSystemUnreadCount, decrementSystemUnreadCount } = useMessageManagerSystemUnreadCount();
   const router = useRouter();
@@ -554,143 +556,145 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-  },
-  // Header 样式 - 美化版
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.md,
-    backgroundColor: colors.background.paper,
-    ...shadows.sm,
-  },
-  headerWide: {
-    paddingHorizontal: spacing.xl,
-    paddingVertical: spacing.lg,
-  },
-  headerTitleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: colors.text.primary,
-  },
-  headerTitleWide: {
-    fontSize: 20,
-  },
-  unreadBadge: {
-    backgroundColor: colors.primary.main,
-    borderRadius: 10,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    marginLeft: spacing.sm,
-    minWidth: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  unreadBadgeText: {
-    color: colors.text.inverse,
-    fontSize: 11,
-    fontWeight: '600',
-  },
-  backButton: {
-    width: 40,
-    height: 40,
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-  },
-  backButtonPlaceholder: {
-    width: 40,
-  },
-  // 分类筛选 - 美化版（使用分段式设计）
-  filterContainer: {
-    flexDirection: 'row',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    backgroundColor: colors.background.paper,
-  },
-  filterContainerWideWeb: {
-    paddingHorizontal: spacing.xl,
-    paddingVertical: spacing.md,
-    justifyContent: 'center',
-    backgroundColor: colors.background.paper,
-  },
-  filterTag: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    marginRight: spacing.xs,
-    borderRadius: borderRadius.lg,
-    backgroundColor: colors.background.default,
-    borderWidth: 1,
-    borderColor: 'transparent',
-  },
-  filterTagWide: {
-    paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.md,
-    marginRight: spacing.sm,
-  },
-  filterTagActive: {
-    backgroundColor: colors.primary.main,
-    borderColor: colors.primary.main,
-  },
-  filterTagTextActive: {
-    fontWeight: '600',
-  },
-  filterCount: {
-    marginLeft: spacing.xs,
-    backgroundColor: colors.primary.light + '40',
-    paddingHorizontal: 6,
-    paddingVertical: 1,
-    borderRadius: 8,
-    minWidth: 18,
-    alignItems: 'center',
-  },
-  filterCountActive: {
-    backgroundColor: 'rgba(255, 255, 255, 0.25)',
-  },
-  listContent: {
-    flexGrow: 1,
-    paddingTop: spacing.md,
-    paddingBottom: spacing.lg,
-  },
-  listContentWide: {
-    paddingHorizontal: spacing.xl,
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: spacing.xl * 2,
-  },
-  loadingMore: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: spacing.lg,
-  },
-  loadingMoreText: {
-    marginLeft: spacing.sm,
-  },
-  emptyContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingTop: spacing['3xl'],
-  },
-  emptyContainerWeb: {
-    minHeight: 500,
-    justifyContent: 'center',
-    paddingTop: 100,
-  },
-});
+function createNotificationsStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    // Header 样式 - 美化版
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: spacing.lg,
+      paddingVertical: spacing.md,
+      backgroundColor: colors.background.paper,
+      ...shadows.sm,
+    },
+    headerWide: {
+      paddingHorizontal: spacing.xl,
+      paddingVertical: spacing.lg,
+    },
+    headerTitleContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+      justifyContent: 'center',
+    },
+    headerTitle: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: colors.text.primary,
+    },
+    headerTitleWide: {
+      fontSize: 20,
+    },
+    unreadBadge: {
+      backgroundColor: colors.primary.main,
+      borderRadius: 10,
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      marginLeft: spacing.sm,
+      minWidth: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    unreadBadgeText: {
+      color: colors.text.inverse,
+      fontSize: 11,
+      fontWeight: '600',
+    },
+    backButton: {
+      width: 40,
+      height: 40,
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+    },
+    backButtonPlaceholder: {
+      width: 40,
+    },
+    // 分类筛选 - 美化版（使用分段式设计）
+    filterContainer: {
+      flexDirection: 'row',
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm,
+      backgroundColor: colors.background.paper,
+    },
+    filterContainerWideWeb: {
+      paddingHorizontal: spacing.xl,
+      paddingVertical: spacing.md,
+      justifyContent: 'center',
+      backgroundColor: colors.background.paper,
+    },
+    filterTag: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm,
+      marginRight: spacing.xs,
+      borderRadius: borderRadius.lg,
+      backgroundColor: colors.background.default,
+      borderWidth: 1,
+      borderColor: 'transparent',
+    },
+    filterTagWide: {
+      paddingHorizontal: spacing.lg,
+      paddingVertical: spacing.md,
+      marginRight: spacing.sm,
+    },
+    filterTagActive: {
+      backgroundColor: colors.primary.main,
+      borderColor: colors.primary.main,
+    },
+    filterTagTextActive: {
+      fontWeight: '600',
+    },
+    filterCount: {
+      marginLeft: spacing.xs,
+      backgroundColor: colors.primary.light + '40',
+      paddingHorizontal: 6,
+      paddingVertical: 1,
+      borderRadius: 8,
+      minWidth: 18,
+      alignItems: 'center',
+    },
+    filterCountActive: {
+      backgroundColor: 'rgba(255, 255, 255, 0.25)',
+    },
+    listContent: {
+      flexGrow: 1,
+      paddingTop: spacing.md,
+      paddingBottom: spacing.lg,
+    },
+    listContentWide: {
+      paddingHorizontal: spacing.xl,
+    },
+    loadingContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingVertical: spacing.xl * 2,
+    },
+    loadingMore: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingVertical: spacing.lg,
+    },
+    loadingMoreText: {
+      marginLeft: spacing.sm,
+    },
+    emptyContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingTop: spacing['3xl'],
+    },
+    emptyContainerWeb: {
+      minHeight: 500,
+      justifyContent: 'center',
+      paddingTop: 100,
+    },
+  });
+}