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/components/business/CommentItem.tsx

@@ -3,12 +3,12 @@
  * 支持嵌套回复显示、楼层号、身份标识、删除评论、图片显示
  */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { View, TouchableOpacity, StyleSheet, Alert } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { formatDistanceToNow } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
-import { colors, spacing, borderRadius, fontSizes } from '../../theme';
+import { spacing, borderRadius, fontSizes, useAppColors, type AppColors } from '../../theme';
 import { Comment, CommentImage } from '../../types';
 import Text from '../common/Text';
 import Avatar from '../common/Avatar';
@@ -31,6 +31,174 @@ interface CommentItemProps {
   currentUserId?: string; // 当前用户ID，用于判断子评论作者
 }
 
+function createCommentItemStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      paddingTop: spacing.md,
+      paddingBottom: spacing.md,
+      paddingHorizontal: spacing.md,
+      backgroundColor: colors.background.paper,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: colors.divider,
+    },
+    content: {
+      flex: 1,
+      marginLeft: spacing.sm,
+      minWidth: 0,
+    },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: spacing.xs,
+      gap: spacing.xs,
+    },
+    userInfo: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      flex: 1,
+      minWidth: 0,
+    },
+    metaDot: {
+      fontSize: fontSizes.xs,
+      color: colors.text.hint,
+      marginHorizontal: 2,
+    },
+    username: {
+      fontWeight: '600',
+      fontSize: fontSizes.sm,
+      color: colors.text.primary,
+      marginRight: spacing.xs,
+    },
+    badge: {
+      paddingHorizontal: 4,
+      paddingVertical: 1,
+      borderRadius: 2,
+      marginRight: spacing.xs,
+    },
+    smallBadge: {
+      paddingHorizontal: 2,
+      paddingVertical: 0,
+    },
+    authorBadge: {
+      backgroundColor: colors.primary.main,
+    },
+    adminBadge: {
+      backgroundColor: colors.error.main,
+    },
+    badgeText: {
+      color: colors.text.inverse,
+      fontSize: fontSizes.xs,
+      fontWeight: '600',
+    },
+    smallBadgeText: {
+      color: colors.text.inverse,
+      fontSize: 9,
+      fontWeight: '600',
+    },
+    timeText: {
+      fontSize: fontSizes.xs,
+      flexShrink: 0,
+    },
+    floorPlain: {
+      fontSize: fontSizes.xs,
+      flexShrink: 0,
+    },
+    replyReference: {
+      marginBottom: spacing.xs,
+    },
+    commentContent: {
+      marginBottom: spacing.xs,
+    },
+    text: {
+      lineHeight: 22,
+      fontSize: fontSizes.md,
+      color: colors.text.primary,
+    },
+    actions: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: spacing.xs,
+      flexWrap: 'wrap',
+    },
+    actionButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginRight: spacing.lg,
+      paddingVertical: 4,
+      paddingRight: spacing.xs,
+    },
+    actionText: {
+      marginLeft: 4,
+      fontSize: fontSizes.xs,
+    },
+    subRepliesContainer: {
+      marginTop: spacing.sm,
+      marginLeft: 0,
+      paddingLeft: spacing.sm,
+      paddingVertical: spacing.xs,
+      borderLeftWidth: 2,
+      borderLeftColor: colors.divider,
+      backgroundColor: colors.background.default,
+    },
+    subReplyItem: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      marginBottom: spacing.md,
+    },
+    subReplyItemLast: {
+      marginBottom: 0,
+    },
+    subReplyBody: {
+      fontSize: fontSizes.sm,
+      lineHeight: 20,
+      marginTop: 2,
+    },
+    subReplyContent: {
+      flex: 1,
+      marginLeft: spacing.xs,
+    },
+    subReplyHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 2,
+    },
+    subReplyAuthor: {
+      fontWeight: '600',
+      color: colors.text.primary,
+      marginRight: spacing.xs,
+    },
+    moreRepliesButton: {
+      marginTop: spacing.xs,
+      paddingVertical: spacing.xs,
+    },
+    replyToText: {
+      fontSize: fontSizes.xs,
+    },
+    replyToName: {
+      fontSize: fontSizes.xs,
+      fontWeight: '500',
+    },
+    subReplyActions: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: spacing.xs,
+    },
+    subActionButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginRight: spacing.sm,
+      paddingVertical: 2,
+    },
+    subActionText: {
+      marginLeft: 2,
+      fontSize: fontSizes.xs,
+    },
+  });
+}
+
 const CommentItem: React.FC<CommentItemProps> = ({
   comment,
   onUserPress,
@@ -47,6 +215,8 @@ const CommentItem: React.FC<CommentItemProps> = ({
   onImagePress,
   currentUserId,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createCommentItemStyles(colors), [colors]);
   const [isDeleting, setIsDeleting] = useState(false);
   // 格式化时间
   const formatTime = (dateString: string): string => {
@@ -471,170 +641,4 @@ const CommentItem: React.FC<CommentItemProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    paddingTop: spacing.md,
-    paddingBottom: spacing.md,
-    paddingHorizontal: spacing.md,
-    backgroundColor: colors.background.paper,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: colors.divider,
-  },
-  content: {
-    flex: 1,
-    marginLeft: spacing.sm,
-    minWidth: 0,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: spacing.xs,
-    gap: spacing.xs,
-  },
-  userInfo: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    flex: 1,
-    minWidth: 0,
-  },
-  metaDot: {
-    fontSize: fontSizes.xs,
-    color: colors.text.hint,
-    marginHorizontal: 2,
-  },
-  username: {
-    fontWeight: '600',
-    fontSize: fontSizes.sm,
-    color: colors.text.primary,
-    marginRight: spacing.xs,
-  },
-  badge: {
-    paddingHorizontal: 4,
-    paddingVertical: 1,
-    borderRadius: 2,
-    marginRight: spacing.xs,
-  },
-  smallBadge: {
-    paddingHorizontal: 2,
-    paddingVertical: 0,
-  },
-  authorBadge: {
-    backgroundColor: colors.primary.main,
-  },
-  adminBadge: {
-    backgroundColor: colors.error.main,
-  },
-  badgeText: {
-    color: colors.text.inverse,
-    fontSize: fontSizes.xs,
-    fontWeight: '600',
-  },
-  smallBadgeText: {
-    color: colors.text.inverse,
-    fontSize: 9,
-    fontWeight: '600',
-  },
-  timeText: {
-    fontSize: fontSizes.xs,
-    flexShrink: 0,
-  },
-  floorPlain: {
-    fontSize: fontSizes.xs,
-    flexShrink: 0,
-  },
-  replyReference: {
-    marginBottom: spacing.xs,
-  },
-  commentContent: {
-    marginBottom: spacing.xs,
-  },
-  text: {
-    lineHeight: 22,
-    fontSize: fontSizes.md,
-    color: colors.text.primary,
-  },
-  actions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: spacing.xs,
-    flexWrap: 'wrap',
-  },
-  actionButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginRight: spacing.lg,
-    paddingVertical: 4,
-    paddingRight: spacing.xs,
-  },
-  actionText: {
-    marginLeft: 4,
-    fontSize: fontSizes.xs,
-  },
-  subRepliesContainer: {
-    marginTop: spacing.sm,
-    marginLeft: 0,
-    paddingLeft: spacing.sm,
-    paddingVertical: spacing.xs,
-    borderLeftWidth: 2,
-    borderLeftColor: colors.divider,
-    backgroundColor: colors.background.default,
-  },
-  subReplyItem: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    marginBottom: spacing.md,
-  },
-  subReplyItemLast: {
-    marginBottom: 0,
-  },
-  subReplyBody: {
-    fontSize: fontSizes.sm,
-    lineHeight: 20,
-    marginTop: 2,
-  },
-  subReplyContent: {
-    flex: 1,
-    marginLeft: spacing.xs,
-  },
-  subReplyHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 2,
-  },
-  subReplyAuthor: {
-    fontWeight: '600',
-    color: colors.text.primary,
-    marginRight: spacing.xs,
-  },
-  moreRepliesButton: {
-    marginTop: spacing.xs,
-    paddingVertical: spacing.xs,
-  },
-  replyToText: {
-    fontSize: fontSizes.xs,
-  },
-  replyToName: {
-    fontSize: fontSizes.xs,
-    fontWeight: '500',
-  },
-  subReplyActions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: spacing.xs,
-  },
-  subActionButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginRight: spacing.sm,
-    paddingVertical: 2,
-  },
-  subActionText: {
-    marginLeft: 2,
-    fontSize: fontSizes.xs,
-  },
-});
-
 export default CommentItem;