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/home/SearchScreen.tsx

@@ -4,7 +4,7 @@
  * 支持响应式布局，宽屏下显示更大的搜索结果区域
  */
 
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import {
   View,
   FlatList,
@@ -16,7 +16,7 @@ import {
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 import { Post, User } from '../../types';
 import { useUserStore } from '../../stores';
 import { postService, authService } from '../../services';
@@ -37,6 +37,8 @@ interface SearchScreenProps {
 }
 
 export const SearchScreen: React.FC<SearchScreenProps> = ({ onBack }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createSearchScreenStyles(colors), [colors]);
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const { searchHistory: history, addSearchHistory, clearSearchHistory } = useUserStore();
@@ -544,115 +546,117 @@ export const SearchScreen: React.FC<SearchScreenProps> = ({ onBack }) => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-  },
-  searchHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.background.paper,
-    borderBottomWidth: 1,
-    borderBottomColor: `${colors.divider}70`,
-  },
-  searchShell: {
-    flex: 1,
-    borderRadius: borderRadius.xl,
-    backgroundColor: `${colors.primary.main}08`,
-    paddingHorizontal: spacing.xs,
-    paddingVertical: spacing.xs,
-    // 移除阴影效果
-    shadowColor: 'transparent',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-    elevation: 0,
-  },
-  cancelButton: {
-    backgroundColor: `${colors.primary.main}14`,
-    borderRadius: borderRadius.full,
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.xs,
-  },
-  cancelText: {
-    fontSize: fontSizes.md,
-    fontWeight: '600',
-  },
-  tabWrapper: {
-    backgroundColor: colors.background.paper,
-    borderBottomWidth: 1,
-    borderBottomColor: `${colors.divider}50`,
-  },
-  suggestionsContainer: {
-    flex: 1,
-  },
-  section: {
-    marginTop: spacing.md,
-  },
-  sectionHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: spacing.sm,
-  },
-  sectionTitle: {
-    fontWeight: '600',
-    color: colors.text.primary,
-  },
-  tagContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  tag: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    borderWidth: 1,
-    borderColor: colors.divider,
-  },
-  tagText: {
-    marginLeft: spacing.xs,
-  },
-  userCard: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  userCardInfo: {
-    flex: 1,
-    marginLeft: spacing.md,
-  },
-  userCardName: {
-    fontWeight: '600',
-    color: colors.text.primary,
-  },
-  userItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-  },
-  userInfo: {
-    flex: 1,
-    marginLeft: spacing.md,
-  },
-  userName: {
-    fontWeight: '600',
-    color: colors.text.primary,
-  },
-  followingBadge: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    backgroundColor: `${colors.primary.main}14`,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  loadingMore: {
-    paddingVertical: spacing.md,
-    alignItems: 'center',
-  },
-});
+function createSearchScreenStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    searchHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.paper,
+      borderBottomWidth: 1,
+      borderBottomColor: `${colors.divider}70`,
+    },
+    searchShell: {
+      flex: 1,
+      borderRadius: borderRadius.xl,
+      backgroundColor: `${colors.primary.main}08`,
+      paddingHorizontal: spacing.xs,
+      paddingVertical: spacing.xs,
+      // 移除阴影效果
+      shadowColor: 'transparent',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0,
+    },
+    cancelButton: {
+      backgroundColor: `${colors.primary.main}14`,
+      borderRadius: borderRadius.full,
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.xs,
+    },
+    cancelText: {
+      fontSize: fontSizes.md,
+      fontWeight: '600',
+    },
+    tabWrapper: {
+      backgroundColor: colors.background.paper,
+      borderBottomWidth: 1,
+      borderBottomColor: `${colors.divider}50`,
+    },
+    suggestionsContainer: {
+      flex: 1,
+    },
+    section: {
+      marginTop: spacing.md,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: spacing.sm,
+    },
+    sectionTitle: {
+      fontWeight: '600',
+      color: colors.text.primary,
+    },
+    tagContainer: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    },
+    tag: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      borderWidth: 1,
+      borderColor: colors.divider,
+    },
+    tagText: {
+      marginLeft: spacing.xs,
+    },
+    userCard: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    userCardInfo: {
+      flex: 1,
+      marginLeft: spacing.md,
+    },
+    userCardName: {
+      fontWeight: '600',
+      color: colors.text.primary,
+    },
+    userItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+    },
+    userInfo: {
+      flex: 1,
+      marginLeft: spacing.md,
+    },
+    userName: {
+      fontWeight: '600',
+      color: colors.text.primary,
+    },
+    followingBadge: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      backgroundColor: `${colors.primary.main}14`,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    loadingMore: {
+      paddingVertical: spacing.md,
+      alignItems: 'center',
+    },
+  });
+}