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

@@ -24,7 +24,7 @@ import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useRouter, useFocusEffect } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import { colors, spacing, borderRadius, shadows } from '../../theme';
+import { useAppColors, useResolvedColorScheme, spacing, borderRadius, shadows, type AppColors } from '../../theme';
 import { Post } from '../../types';
 import { useUserStore, useHomeTabBarVisibilityStore } from '../../stores';
 import { useCurrentUser } from '../../stores/authStore';
@@ -56,12 +56,125 @@ type ViewMode = 'list' | 'grid';
 type PostType = 'follow' | 'hot' | 'latest';
 type LatestCapsule = { id: string; name: string };
 
+function createHomeStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    header: {
+      backgroundColor: colors.background.paper,
+    },
+    searchWrapper: {
+      paddingTop: spacing.lg,
+      paddingBottom: spacing.sm,
+      shadowColor: 'transparent',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0,
+    },
+    homeTabBar: {
+      marginTop: spacing.xs,
+      marginBottom: spacing.sm,
+    },
+    viewToggleBtn: {
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    capsuleWrapper: {
+      paddingBottom: spacing.sm,
+      backgroundColor: colors.background.paper,
+    },
+    capsuleList: {
+      gap: spacing.xs,
+      paddingRight: spacing.lg,
+    },
+    capsuleItem: {
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.xs,
+      borderRadius: 999,
+    },
+    capsuleText: {
+      fontSize: 13,
+      fontWeight: '600',
+      color: colors.text.secondary,
+    },
+    capsuleTextActive: {
+      color: colors.primary.main,
+    },
+    listContent: {
+      flexGrow: 1,
+    },
+    listHeader: {
+      width: '100%',
+    },
+    contentContainer: {
+      flex: 1,
+    },
+    listItem: {},
+    waterfallScroll: {
+      flex: 1,
+    },
+    waterfallContainer: {
+      width: '100%',
+      flexGrow: 1,
+    },
+    waterfallColumnsRow: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+    },
+    waterfallColumn: {
+      flex: 1,
+    },
+    waterfallItem: {},
+    floatingButton: {
+      position: 'absolute',
+      right: 20,
+      bottom: 20,
+      width: 56,
+      height: 56,
+      borderRadius: 28,
+      backgroundColor: colors.primary.main,
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...shadows.lg,
+    },
+    floatingButtonDesktop: {
+      right: 40,
+      bottom: 40,
+      width: 64,
+      height: 64,
+      borderRadius: 32,
+    },
+    floatingButtonWide: {
+      right: 60,
+      bottom: 60,
+      width: 72,
+      height: 72,
+      borderRadius: 36,
+    },
+    loadingMoreFooter: {
+      paddingVertical: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  });
+}
+
 export const HomeScreen: React.FC = () => {
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const { posts: storePosts } = useUserStore();
   const currentUser = useCurrentUser();
-  
+  const colors = useAppColors();
+  const resolvedScheme = useResolvedColorScheme();
+  const styles = useMemo(() => createHomeStyles(colors), [colors]);
+  const statusBarStyle = resolvedScheme === 'dark' ? 'light-content' : 'dark-content';
+
   // 使用响应式 hook
   const { 
     width, 
@@ -827,7 +940,7 @@ export const HomeScreen: React.FC = () => {
   if (showSearch) {
     return (
       <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
-        <StatusBar barStyle="dark-content" backgroundColor={colors.background.paper} />
+        <StatusBar barStyle={statusBarStyle} backgroundColor={colors.background.paper} />
         <SearchScreen
           onBack={() => setShowSearch(false)}
         />
@@ -838,8 +951,8 @@ export const HomeScreen: React.FC = () => {
   // 正常首页内容
   return (
     <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
-      <StatusBar barStyle="dark-content" backgroundColor={colors.background.paper} />
-      
+      <StatusBar barStyle={statusBarStyle} backgroundColor={colors.background.paper} />
+
       {/* 顶部Header */}
       <View style={styles.header}>
         {/* 搜索栏 */}
@@ -942,115 +1055,3 @@ export const HomeScreen: React.FC = () => {
     </SafeAreaView>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-  },
-  header: {
-    backgroundColor: colors.background.paper,
-  },
-  searchWrapper: {
-    paddingTop: spacing.lg,
-    paddingBottom: spacing.xs,
-    // 移除阴影效果
-    shadowColor: 'transparent',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-    elevation: 0,
-  },
-  homeTabBar: {
-    marginTop: 0,
-    marginBottom: spacing.sm,
-  },
-  viewToggleBtn: {
-    width: 44,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  capsuleWrapper: {
-    paddingBottom: spacing.sm,
-    backgroundColor: colors.background.paper,
-  },
-  capsuleList: {
-    gap: spacing.xs,
-    paddingRight: spacing.lg,
-  },
-  capsuleItem: {
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.xs,
-    borderRadius: 999,
-  },
-  capsuleText: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: colors.text.secondary,
-  },
-  capsuleTextActive: {
-    color: colors.primary.main,
-  },
-  listContent: {
-    flexGrow: 1,
-  },
-  listHeader: {
-    width: '100%',
-  },
-  contentContainer: {
-    flex: 1,
-  },
-  listItem: {
-    // 动态设置 marginBottom
-  },
-  waterfallScroll: {
-    flex: 1,
-  },
-  waterfallContainer: {
-    width: '100%',
-    flexGrow: 1,
-  },
-  waterfallColumnsRow: {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  waterfallColumn: {
-    flex: 1,
-  },
-  waterfallItem: {
-    // 动态设置 marginBottom
-  },
-  floatingButton: {
-    position: 'absolute',
-    right: 20,
-    bottom: 20,
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    backgroundColor: colors.primary.main,
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...shadows.lg,
-  },
-  floatingButtonDesktop: {
-    right: 40,
-    bottom: 40,
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-  },
-  floatingButtonWide: {
-    right: 60,
-    bottom: 60,
-    width: 72,
-    height: 72,
-    borderRadius: 36,
-  },
-  loadingMoreFooter: {
-    paddingVertical: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

src/screens/home/PostDetailScreen.tsx

@@ -26,7 +26,13 @@ import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useNavigation, useRouter, useLocalSearchParams } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import {
+  spacing,
+  fontSizes,
+  borderRadius,
+  useAppColors,
+  type AppColors,
+} from '../../theme';
 import { Post, Comment, VoteResultDTO } from '../../types';
 import { useUserStore } from '../../stores';
 import { useCurrentUser } from '../../stores/authStore';
@@ -39,6 +45,8 @@ import { useResponsive, useResponsiveValue, useResponsiveSpacing } from '../../h
 import * as hrefs from '../../navigation/hrefs';
 
 export const PostDetailScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createPostDetailStyles(colors), [colors]);
   const navigation = useNavigation();
   const router = useRouter();
   const insets = useSafeAreaInsets();
@@ -290,6 +298,9 @@ export const PostDetailScreen: React.FC = () => {
     };
     
     navigation.setOptions({
+      // 与页面容器 background.default 一致，并去掉原生 header 底部分隔阴影，避免「一条线」
+      headerStyle: { backgroundColor: colors.background.default },
+      headerShadowVisible: false,
       headerBackVisible: false,
       headerTitleAlign: 'left',
       headerLeft: () => (
@@ -324,7 +335,7 @@ export const PostDetailScreen: React.FC = () => {
         </View>
       ),
     });
-  }, [post?.author, isFollowing, isFollowingMe, isFollowLoading, navigation]);
+  }, [post?.author, isFollowing, isFollowingMe, isFollowLoading, navigation, colors.background.default, styles]);
 
   // 监听键盘事件
   useEffect(() => {
@@ -1702,7 +1713,8 @@ export const PostDetailScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createPostDetailStyles(colors: AppColors) {
+  return StyleSheet.create({
   flex: {
     flex: 1,
   },
@@ -2124,4 +2136,5 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     paddingVertical: spacing.md,
   },
-});
+  });
+}

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',
+    },
+  });
+}