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/theme/paperTheme.ts

@@ -0,0 +1,54 @@
+import { MD3DarkTheme, MD3LightTheme, type MD3Theme } from 'react-native-paper';
+import { borderRadius } from './tokens';
+import type { AppColors } from './palettes';
+
+export function buildPaperTheme(colors: AppColors, isDark: boolean): MD3Theme {
+  const base = isDark ? MD3DarkTheme : MD3LightTheme;
+  return {
+    ...base,
+    colors: {
+      ...base.colors,
+      primary: colors.primary.main,
+      primaryContainer: colors.primary.light,
+      secondary: colors.secondary.main,
+      secondaryContainer: colors.secondary.light,
+      tertiary: colors.info.main,
+      tertiaryContainer: colors.info.light,
+      surface: colors.background.paper,
+      surfaceVariant: colors.background.default,
+      surfaceDisabled: colors.background.disabled,
+      background: colors.background.default,
+      error: colors.error.main,
+      errorContainer: colors.error.light,
+      onPrimary: colors.primary.contrast,
+      onPrimaryContainer: colors.primary.dark,
+      onSecondary: colors.text.inverse,
+      onSecondaryContainer: colors.secondary.dark,
+      onTertiary: colors.text.inverse,
+      onTertiaryContainer: colors.info.dark,
+      onSurface: colors.text.primary,
+      onSurfaceVariant: colors.text.secondary,
+      onSurfaceDisabled: colors.text.disabled,
+      onError: colors.text.inverse,
+      onErrorContainer: colors.error.dark,
+      onBackground: colors.text.primary,
+      outline: colors.divider,
+      outlineVariant: colors.divider,
+      inverseSurface: colors.text.primary,
+      inverseOnSurface: colors.text.inverse,
+      inversePrimary: colors.primary.light,
+      shadow: '#000000',
+      scrim: '#000000',
+      backdrop: 'rgba(0, 0, 0, 0.5)',
+      elevation: {
+        level0: 'transparent',
+        level1: colors.background.paper,
+        level2: colors.background.paper,
+        level3: colors.background.paper,
+        level4: colors.background.paper,
+        level5: colors.background.paper,
+      },
+    },
+    roundness: borderRadius.md,
+  };
+}