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

@@ -12,7 +12,7 @@ import {
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
-import { colors, spacing, fontSizes, borderRadius } from '../../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../../theme';
 import { authService } from '../../../services/authService';
 import { useAuthStore } from '../../../stores';
 import { Avatar, EmptyState, Loading, Text } from '../../../components/common';
@@ -41,6 +41,8 @@ const MutualFollowSelectorModal: React.FC<MutualFollowSelectorModalProps> = ({
   onClose,
   onConfirm,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createMutualFollowSelectorStyles(colors), [colors]);
   const { currentUser } = useAuthStore();
 
   const [friendList, setFriendList] = useState<User[]>([]);
@@ -209,93 +211,96 @@ const MutualFollowSelectorModal: React.FC<MutualFollowSelectorModalProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'flex-end',
-  },
-  modalContent: {
-    backgroundColor: colors.background.paper,
-    borderTopLeftRadius: borderRadius['2xl'],
-    borderTopRightRadius: borderRadius['2xl'],
-    height: '80%',
-    paddingHorizontal: spacing.lg,
-    paddingTop: spacing.lg,
-    paddingBottom: spacing.xl,
-  },
-  modalHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: spacing.lg,
-  },
-  modalHeaderButton: {
-    paddingVertical: spacing.sm,
-    minWidth: 60,
-  },
-  modalTitle: {
-    fontWeight: '700',
-    fontSize: fontSizes.xl,
-  },
-  confirmButton: {
-    fontWeight: '600',
-    textAlign: 'right',
-  },
-  tipContainer: {
-    flexDirection: 'row',
-    backgroundColor: colors.background.default,
-    borderRadius: borderRadius.lg,
-    padding: spacing.xs,
-    marginBottom: spacing.md,
-  },
-  tipText: {
-    fontWeight: '600',
-  },
-  selectedBadge: {
-    backgroundColor: colors.primary.light + '20',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.xs,
-    borderRadius: borderRadius.sm,
-    alignSelf: 'flex-start',
-    marginBottom: spacing.md,
-  },
-  friendListContent: {
-    paddingBottom: spacing.xl,
-  },
-  friendItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: spacing.md,
-    paddingHorizontal: spacing.sm,
-    borderRadius: borderRadius.lg,
-    marginBottom: spacing.xs,
-  },
-  friendItemSelected: {
-    backgroundColor: colors.primary.light + '15',
-  },
-  friendInfo: {
-    flex: 1,
-    marginLeft: spacing.md,
-    marginRight: spacing.sm,
-  },
-  nickname: {
-    fontWeight: '500',
-    marginBottom: 2,
-  },
-  checkbox: {
-    width: 26,
-    height: 26,
-    borderRadius: 13,
-    borderWidth: 2,
-    borderColor: colors.divider,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  checkboxSelected: {
-    backgroundColor: colors.primary.main,
-    borderColor: colors.primary.main,
-  },
-});
+function createMutualFollowSelectorStyles(colors: AppColors) {
+  return StyleSheet.create({
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'flex-end',
+    },
+    modalContent: {
+      backgroundColor: colors.background.paper,
+      borderTopLeftRadius: borderRadius['2xl'],
+      borderTopRightRadius: borderRadius['2xl'],
+      height: '80%',
+      paddingHorizontal: spacing.lg,
+      paddingTop: spacing.lg,
+      paddingBottom: spacing.xl,
+    },
+    modalHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: spacing.lg,
+    },
+    modalHeaderButton: {
+      paddingVertical: spacing.sm,
+      minWidth: 60,
+    },
+    modalTitle: {
+      fontWeight: '700',
+      fontSize: fontSizes.xl,
+      color: colors.text.primary,
+    },
+    confirmButton: {
+      fontWeight: '600',
+      textAlign: 'right',
+    },
+    tipContainer: {
+      flexDirection: 'row',
+      backgroundColor: colors.background.default,
+      borderRadius: borderRadius.lg,
+      padding: spacing.xs,
+      marginBottom: spacing.md,
+    },
+    tipText: {
+      fontWeight: '600',
+    },
+    selectedBadge: {
+      backgroundColor: colors.primary.light + '20',
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.xs,
+      borderRadius: borderRadius.sm,
+      alignSelf: 'flex-start',
+      marginBottom: spacing.md,
+    },
+    friendListContent: {
+      paddingBottom: spacing.xl,
+    },
+    friendItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: spacing.md,
+      paddingHorizontal: spacing.sm,
+      borderRadius: borderRadius.lg,
+      marginBottom: spacing.xs,
+    },
+    friendItemSelected: {
+      backgroundColor: colors.primary.light + '15',
+    },
+    friendInfo: {
+      flex: 1,
+      marginLeft: spacing.md,
+      marginRight: spacing.sm,
+    },
+    nickname: {
+      fontWeight: '500',
+      marginBottom: 2,
+    },
+    checkbox: {
+      width: 26,
+      height: 26,
+      borderRadius: 13,
+      borderWidth: 2,
+      borderColor: colors.divider,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    checkboxSelected: {
+      backgroundColor: colors.primary.main,
+      borderColor: colors.primary.main,
+    },
+  });
+}
 
 export default MutualFollowSelectorModal;