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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -13,7 +13,7 @@ import {
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
-import { colors, spacing, borderRadius } from '../../theme';
+import { spacing, borderRadius, useAppColors, type AppColors } from '../../theme';
 import Avatar from '../../components/common/Avatar';
 import Text from '../../components/common/Text';
 import { groupService } from '../../services/groupService';
@@ -22,7 +22,160 @@ import { GroupResponse, JoinType } from '../../types/dto';
 import { useCursorPagination } from '../../hooks/useCursorPagination';
 import { EmptyState } from '../../components/common';
 
+function createJoinGroupStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+      padding: spacing.lg,
+    },
+    heroCard: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      padding: spacing.lg,
+      marginBottom: spacing.lg,
+    },
+    heroIconWrap: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: colors.primary.light + '26',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: spacing.md,
+    },
+    heroTitle: {
+      marginBottom: spacing.xs,
+    },
+    tip: {
+      lineHeight: 20,
+    },
+    formCard: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      padding: spacing.lg,
+      flex: 1,
+    },
+    label: {
+      marginBottom: spacing.xs,
+    },
+    input: {
+      flex: 1,
+      borderWidth: 1,
+      borderColor: colors.divider,
+      borderRadius: borderRadius.md,
+      backgroundColor: colors.background.paper,
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.md,
+      color: colors.text.primary,
+    },
+    searchRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: spacing.md,
+    },
+    searchBtn: {
+      width: 46,
+      height: 46,
+      borderRadius: borderRadius.md,
+      backgroundColor: colors.primary.main,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: spacing.sm,
+    },
+    searchResultSection: {
+      marginBottom: spacing.lg,
+    },
+    sectionTitle: {
+      marginBottom: spacing.sm,
+      fontWeight: '600',
+    },
+    listSection: {
+      flex: 1,
+    },
+    groupCard: {
+      borderWidth: 1,
+      borderColor: colors.divider,
+      borderRadius: borderRadius.md,
+      padding: spacing.md,
+      backgroundColor: colors.background.default,
+      marginBottom: spacing.md,
+    },
+    groupHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    groupMeta: {
+      marginLeft: spacing.md,
+      flex: 1,
+    },
+    groupName: {
+      marginBottom: spacing.xs,
+      fontWeight: '600',
+    },
+    groupDesc: {
+      marginTop: spacing.sm,
+      lineHeight: 18,
+    },
+    groupInfoRow: {
+      marginTop: spacing.sm,
+      marginBottom: spacing.xs,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    groupNoRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: spacing.md,
+    },
+    copyBtn: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: spacing.sm,
+      paddingVertical: 4,
+      borderRadius: borderRadius.sm,
+      backgroundColor: colors.primary.light + '22',
+    },
+    copyBtnText: {
+      marginLeft: 4,
+    },
+    submitBtn: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: borderRadius.md,
+      backgroundColor: colors.primary.main,
+      minHeight: 46,
+    },
+    submitBtnDisabled: {
+      opacity: 0.5,
+    },
+    submitText: {
+      marginLeft: spacing.xs,
+    },
+    emptyText: {
+      marginTop: spacing.sm,
+      textAlign: 'center',
+    },
+    loadingFooter: {
+      paddingVertical: spacing.md,
+      alignItems: 'center',
+    },
+    loadMoreBtn: {
+      paddingVertical: spacing.md,
+      alignItems: 'center',
+    },
+    noMoreText: {
+      textAlign: 'center',
+      paddingVertical: spacing.md,
+    },
+  });
+}
+
 const JoinGroupScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createJoinGroupStyles(colors), [colors]);
   const router = useRouter();
   const [keyword, setKeyword] = useState('');
   const [searching, setSearching] = useState(false);
@@ -295,153 +448,4 @@ const JoinGroupScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-    padding: spacing.lg,
-  },
-  heroCard: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    padding: spacing.lg,
-    marginBottom: spacing.lg,
-  },
-  heroIconWrap: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: colors.primary.light + '26',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: spacing.md,
-  },
-  heroTitle: {
-    marginBottom: spacing.xs,
-  },
-  tip: {
-    lineHeight: 20,
-  },
-  formCard: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    padding: spacing.lg,
-    flex: 1,
-  },
-  label: {
-    marginBottom: spacing.xs,
-  },
-  input: {
-    flex: 1,
-    borderWidth: 1,
-    borderColor: colors.divider,
-    borderRadius: borderRadius.md,
-    backgroundColor: colors.background.paper,
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.md,
-    color: colors.text.primary,
-  },
-  searchRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: spacing.md,
-  },
-  searchBtn: {
-    width: 46,
-    height: 46,
-    borderRadius: borderRadius.md,
-    backgroundColor: colors.primary.main,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: spacing.sm,
-  },
-  searchResultSection: {
-    marginBottom: spacing.lg,
-  },
-  sectionTitle: {
-    marginBottom: spacing.sm,
-    fontWeight: '600',
-  },
-  listSection: {
-    flex: 1,
-  },
-  groupCard: {
-    borderWidth: 1,
-    borderColor: colors.divider,
-    borderRadius: borderRadius.md,
-    padding: spacing.md,
-    backgroundColor: colors.background.default,
-    marginBottom: spacing.md,
-  },
-  groupHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  groupMeta: {
-    marginLeft: spacing.md,
-    flex: 1,
-  },
-  groupName: {
-    marginBottom: spacing.xs,
-    fontWeight: '600',
-  },
-  groupDesc: {
-    marginTop: spacing.sm,
-    lineHeight: 18,
-  },
-  groupInfoRow: {
-    marginTop: spacing.sm,
-    marginBottom: spacing.xs,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  groupNoRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: spacing.md,
-  },
-  copyBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: spacing.sm,
-    paddingVertical: 4,
-    borderRadius: borderRadius.sm,
-    backgroundColor: colors.primary.light + '22',
-  },
-  copyBtnText: {
-    marginLeft: 4,
-  },
-  submitBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: borderRadius.md,
-    backgroundColor: colors.primary.main,
-    minHeight: 46,
-  },
-  submitBtnDisabled: {
-    opacity: 0.5,
-  },
-  submitText: {
-    marginLeft: spacing.xs,
-  },
-  emptyText: {
-    marginTop: spacing.sm,
-    textAlign: 'center',
-  },
-  loadingFooter: {
-    paddingVertical: spacing.md,
-    alignItems: 'center',
-  },
-  loadMoreBtn: {
-    paddingVertical: spacing.md,
-    alignItems: 'center',
-  },
-  noMoreText: {
-    textAlign: 'center',
-    paddingVertical: spacing.md,
-  },
-});
-
 export default JoinGroupScreen;