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/common/AppBackButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { TouchableOpacity, StyleProp, ViewStyle, StyleSheet } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
-import { borderRadius, colors, spacing } from '../../theme';
+import { borderRadius, spacing, useAppColors } from '../../theme';
 
 type AppBackButtonIcon = 'arrow-left' | 'close';
 
@@ -20,11 +20,15 @@ const AppBackButton: React.FC<AppBackButtonProps> = ({
   onPress,
   icon = 'arrow-left',
   style,
-  iconColor = colors.text.primary,
-  backgroundColor = colors.background.paper,
+  iconColor: iconColorProp,
+  backgroundColor: backgroundColorProp,
   hitSlop = 8,
   testID,
 }) => {
+  const colors = useAppColors();
+  const iconColor = iconColorProp ?? colors.text.primary;
+  const backgroundColor = backgroundColorProp ?? colors.background.paper;
+
   return (
     <TouchableOpacity
       onPress={onPress}