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.

app/(app)/(tabs)/_layout.tsx

@@ -4,7 +4,7 @@ import { Tabs, usePathname } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { colors, shadows } from '../../../src/theme';
+import { useAppColors, shadows } from '../../../src/theme';
 import { BREAKPOINTS } from '../../../src/hooks/useResponsive';
 import { useHomeTabBarVisibilityStore, useTotalUnreadCount } from '../../../src/stores';
 
@@ -13,6 +13,7 @@ const TAB_BAR_FLOATING_MARGIN = 12;
 const TAB_BAR_MARGIN = 20;
 
 export default function TabsLayout() {
+  const colors = useAppColors();
   const { width } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const pathname = usePathname();
@@ -50,7 +51,7 @@ export default function TabsLayout() {
       };
     }
     return visibleStyle;
-  }, [hideTabBar, insets.bottom, isHomeStackRoute, scrollHideTabBar]);
+  }, [hideTabBar, insets.bottom, isHomeStackRoute, scrollHideTabBar, colors]);
 
   return (
     <Tabs