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)/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