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

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

@@ -1,19 +1,24 @@
+import { useMemo } from 'react';
 import { Stack } from 'expo-router';
 import { useRouter } from 'expo-router';
 
 import { AppBackButton } from '../../../../src/components/common';
-import { colors } from '../../../../src/theme';
-
-const headerOptions = {
-  headerStyle: { backgroundColor: colors.background.paper },
-  headerTintColor: colors.text.primary,
-  headerTitleStyle: { fontWeight: '600' as const },
-  headerShadowVisible: false,
-  headerBackTitle: '',
-};
+import { useAppColors } from '../../../../src/theme';
 
 export default function ProfileStackLayout() {
   const router = useRouter();
+  const colors = useAppColors();
+
+  const headerOptions = useMemo(
+    () => ({
+      headerStyle: { backgroundColor: colors.background.paper },
+      headerTintColor: colors.text.primary,
+      headerTitleStyle: { fontWeight: '600' as const },
+      headerShadowVisible: false,
+      headerBackTitle: '',
+    }),
+    [colors]
+  );
 
   return (
     <Stack