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/screens/message/components/ChatScreen/MorePanel.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Text } from '../../../../components/common';
-import { chatScreenStyles as styles } from './styles';
+import { useChatScreenStyles } from './styles';
 import { MORE_ACTIONS } from './constants';
 import { MorePanelProps } from './types';
 
@@ -14,6 +14,7 @@ export const MorePanel: React.FC<MorePanelProps> = ({
   onAction,
   disabledActionIds = [],
 }) => {
+  const styles = useChatScreenStyles();
   const disabledSet = new Set(disabledActionIds);
   return (
     <View style={styles.panelContainer}>