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

@@ -5,10 +5,98 @@ import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
 
 import { bindDialogListener, DialogPayload } from '../../services/dialogService';
-import { borderRadius, colors, shadows, spacing } from '../../theme';
+import { borderRadius, shadows, spacing, useAppColors, type AppColors } from '../../theme';
+
+function createDialogHostStyles(colors: AppColors) {
+  return StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.36)',
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: spacing.xl,
+    },
+    container: {
+      width: '100%',
+      maxWidth: 380,
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius['2xl'],
+      paddingHorizontal: spacing.xl,
+      paddingTop: spacing.lg,
+      paddingBottom: spacing.lg,
+      ...shadows.lg,
+    },
+    iconHeader: {
+      alignItems: 'center',
+      marginBottom: spacing.md,
+    },
+    iconBadge: {
+      width: 42,
+      height: 42,
+      borderRadius: borderRadius.full,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    title: {
+      color: colors.text.primary,
+      fontSize: 18,
+      fontWeight: '700',
+      textAlign: 'center',
+    },
+    message: {
+      marginTop: spacing.md,
+      color: colors.text.secondary,
+      fontSize: 14,
+      lineHeight: 21,
+      textAlign: 'center',
+    },
+    actions: {
+      marginTop: spacing.xl,
+      gap: spacing.sm,
+    },
+    actionButton: {
+      height: 46,
+      borderRadius: borderRadius.lg,
+      borderWidth: 1,
+      borderColor: `${colors.primary.main}28`,
+      backgroundColor: colors.background.paper,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    primaryButton: {
+      backgroundColor: colors.primary.main,
+      borderColor: colors.primary.main,
+    },
+    cancelButton: {
+      backgroundColor: colors.background.paper,
+      borderColor: colors.divider,
+    },
+    destructiveButton: {
+      backgroundColor: `${colors.error.main}18`,
+      borderColor: `${colors.error.main}40`,
+    },
+    actionText: {
+      color: colors.text.primary,
+      fontSize: 15,
+      fontWeight: '700',
+    },
+    primaryText: {
+      color: colors.text.inverse,
+    },
+    cancelText: {
+      color: colors.text.secondary,
+      fontWeight: '600',
+    },
+    destructiveText: {
+      color: colors.error.main,
+    },
+  });
+}
 
 const AppDialogHost: React.FC = () => {
   const [dialog, setDialog] = useState<DialogPayload | null>(null);
+  const colors = useAppColors();
+  const styles = useMemo(() => createDialogHostStyles(colors), [colors]);
 
   useEffect(() => {
     const unbind = bindDialogListener((payload) => {
@@ -19,7 +107,7 @@ const AppDialogHost: React.FC = () => {
 
   const actions = useMemo<AlertButton[]>(() => {
     if (!dialog?.actions?.length) return [{ text: '确定' }];
-    return dialog.actions.slice(0, 3);
+    return dialog.actions;
   }, [dialog]);
 
   const onClose = () => {
@@ -101,88 +189,4 @@ const AppDialogHost: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  backdrop: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.36)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: spacing.xl,
-  },
-  container: {
-    width: '100%',
-    maxWidth: 380,
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius['2xl'],
-    paddingHorizontal: spacing.xl,
-    paddingTop: spacing.lg,
-    paddingBottom: spacing.lg,
-    ...shadows.lg,
-  },
-  iconHeader: {
-    alignItems: 'center',
-    marginBottom: spacing.md,
-  },
-  iconBadge: {
-    width: 42,
-    height: 42,
-    borderRadius: borderRadius.full,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    color: colors.text.primary,
-    fontSize: 18,
-    fontWeight: '700',
-    textAlign: 'center',
-  },
-  message: {
-    marginTop: spacing.md,
-    color: colors.text.secondary,
-    fontSize: 14,
-    lineHeight: 21,
-    textAlign: 'center',
-  },
-  actions: {
-    marginTop: spacing.xl,
-    gap: spacing.sm,
-  },
-  actionButton: {
-    height: 46,
-    borderRadius: borderRadius.lg,
-    borderWidth: 1,
-    borderColor: `${colors.primary.main}28`,
-    backgroundColor: '#FFFFFF',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  primaryButton: {
-    backgroundColor: colors.primary.main,
-    borderColor: colors.primary.main,
-  },
-  cancelButton: {
-    backgroundColor: colors.background.paper,
-    borderColor: colors.divider,
-  },
-  destructiveButton: {
-    backgroundColor: '#FEECEC',
-    borderColor: '#FCD4D1',
-  },
-  actionText: {
-    color: colors.text.primary,
-    fontSize: 15,
-    fontWeight: '700',
-  },
-  primaryText: {
-    color: '#FFFFFF',
-  },
-  cancelText: {
-    color: colors.text.secondary,
-    fontWeight: '600',
-  },
-  destructiveText: {
-    color: colors.error.main,
-  },
-});
-
 export default AppDialogHost;