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/profile/UserProfileScreen.tsx

@@ -12,12 +12,12 @@ import {
   ScrollView,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { colors } from '../../theme';
+import { useAppColors } from '../../theme';
 import { Post } from '../../types';
 import { PostCard, TabBar, UserProfileHeader } from '../../components/business';
 import { Loading, EmptyState, ResponsiveContainer } from '../../components/common';
 import { useResponsive } from '../../hooks';
-import { useUserProfile, ProfileMode, TABS, TAB_ICONS, sharedStyles } from './useUserProfile';
+import { useUserProfile, ProfileMode, TABS, TAB_ICONS, createSharedProfileStyles } from './useUserProfile';
 
 interface UserProfileScreenProps {
   mode: ProfileMode;
@@ -25,6 +25,8 @@ interface UserProfileScreenProps {
 }
 
 export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, userId }) => {
+  const colors = useAppColors();
+  const sharedStyles = useMemo(() => createSharedProfileStyles(colors), [colors]);
   const { isDesktop, isTablet } = useResponsive();
   
   const {