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/Text.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { Text as RNText, TextProps, StyleSheet, TextStyle, ViewStyle } from 'react-native';
-import { colors, fontSizes } from '../../theme';
+import { useAppColors, fontSizes } from '../../theme';
 
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
 
@@ -60,6 +60,7 @@ const Text: React.FC<CustomTextProps> = ({
   style,
   ...props
 }) => {
+  const colors = useAppColors();
   const textStyle = [
     styles.base,
     variantStyles[variant],