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)/_layout.tsx

@@ -4,7 +4,7 @@ import { Tabs, usePathname } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { colors, shadows } from '../../../src/theme';
+import { useAppColors, shadows } from '../../../src/theme';
 import { BREAKPOINTS } from '../../../src/hooks/useResponsive';
 import { useHomeTabBarVisibilityStore, useTotalUnreadCount } from '../../../src/stores';
 
@@ -13,6 +13,7 @@ const TAB_BAR_FLOATING_MARGIN = 12;
 const TAB_BAR_MARGIN = 20;
 
 export default function TabsLayout() {
+  const colors = useAppColors();
   const { width } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const pathname = usePathname();
@@ -50,7 +51,7 @@ export default function TabsLayout() {
       };
     }
     return visibleStyle;
-  }, [hideTabBar, insets.bottom, isHomeStackRoute, scrollHideTabBar]);
+  }, [hideTabBar, insets.bottom, isHomeStackRoute, scrollHideTabBar, colors]);
 
   return (
     <Tabs

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

app/_layout.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { AppState, AppStateStatus, Platform, View, ActivityIndicator, StyleSheet } from 'react-native';
+import { AppState, AppStateStatus, Platform, View, ActivityIndicator } from 'react-native';
 import { Stack, useRouter } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -7,15 +7,20 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { PaperProvider } from 'react-native-paper';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as Notifications from 'expo-notifications';
+import * as SystemUI from 'expo-system-ui';
 
 import { registerNotificationPresentationHandler } from '../src/services/notificationPreferences';
-import { paperTheme } from '../src/theme';
+import {
+  ThemeBootstrap,
+  useAppColors,
+  usePaperThemeFromStore,
+  useResolvedColorScheme,
+} from '../src/theme';
 import { AppBackButton } from '../src/components/common';
 import AppPromptBar from '../src/components/common/AppPromptBar';
 import AppDialogHost from '../src/components/common/AppDialogHost';
 import { installAlertOverride } from '../src/services/alertOverride';
 import { useAuthStore } from '../src/stores';
-import { colors } from '../src/theme';
 
 registerNotificationPresentationHandler();
 
@@ -47,9 +52,24 @@ if (Platform.OS === 'web' && typeof document !== 'undefined') {
   document.head.appendChild(style);
 }
 
+function SystemChrome() {
+  const colors = useAppColors();
+  useEffect(() => {
+    void SystemUI.setBackgroundColorAsync(colors.background.default);
+    if (Platform.OS === 'web' && typeof document !== 'undefined') {
+      const meta = document.querySelector('meta[name="theme-color"]');
+      if (meta) {
+        meta.setAttribute('content', colors.background.default);
+      }
+    }
+  }, [colors.background.default]);
+  return null;
+}
+
 function SessionGate({ children }: { children: React.ReactNode }) {
   const [ready, setReady] = useState(false);
   const fetchCurrentUser = useAuthStore((s) => s.fetchCurrentUser);
+  const colors = useAppColors();
 
   useEffect(() => {
     fetchCurrentUser().finally(() => setReady(true));
@@ -57,7 +77,14 @@ function SessionGate({ children }: { children: React.ReactNode }) {
 
   if (!ready) {
     return (
-      <View style={gateStyles.loading}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: colors.background.default,
+        }}
+      >
         <ActivityIndicator size="large" color={colors.primary.main} />
       </View>
     );
@@ -110,59 +137,69 @@ function NotificationBootstrap() {
   return null;
 }
 
-export default function RootLayout() {
+function ThemedStack() {
   const router = useRouter();
+  const colors = useAppColors();
+  const resolved = useResolvedColorScheme();
 
+  return (
+    <>
+      <StatusBar style={resolved === 'dark' ? 'light' : 'dark'} />
+      <SystemChrome />
+      <SessionGate>
+        <NotificationBootstrap />
+        <Stack screenOptions={{ headerShown: false }}>
+          <Stack.Screen name="index" options={{ headerShown: false }} />
+          <Stack.Screen name="(auth)" options={{ headerShown: false }} />
+          <Stack.Screen name="(app)" options={{ headerShown: false }} />
+          <Stack.Screen
+            name="post/[postId]"
+            options={{
+              headerShown: true,
+              title: '',
+              // 与 PostDetailScreen 的 SafeAreaView（background.default）同色，避免出现 header/内容之间的色差线
+              headerStyle: { backgroundColor: colors.background.default },
+              headerTintColor: colors.text.primary,
+              headerShadowVisible: false,
+              headerBackVisible: false,
+              headerLeft: () => <AppBackButton onPress={() => router.back()} />,
+            }}
+          />
+          <Stack.Screen
+            name="user/[userId]"
+            options={{
+              headerShown: true,
+              title: '用户主页',
+              headerStyle: { backgroundColor: colors.background.paper },
+              headerTintColor: colors.text.primary,
+              headerBackVisible: false,
+              headerLeft: () => <AppBackButton onPress={() => router.back()} />,
+            }}
+          />
+        </Stack>
+      </SessionGate>
+    </>
+  );
+}
+
+function ThemedProviders({ children }: { children: React.ReactNode }) {
+  const theme = usePaperThemeFromStore();
+  return <PaperProvider theme={theme}>{children}</PaperProvider>;
+}
+
+export default function RootLayout() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <SafeAreaProvider>
-        <PaperProvider theme={paperTheme}>
+        <ThemedProviders>
           <QueryClientProvider client={queryClient}>
-            <StatusBar style="light" />
-            <SessionGate>
-              <NotificationBootstrap />
-              <Stack screenOptions={{ headerShown: false }}>
-                <Stack.Screen name="index" options={{ headerShown: false }} />
-                <Stack.Screen name="(auth)" options={{ headerShown: false }} />
-                <Stack.Screen name="(app)" options={{ headerShown: false }} />
-                <Stack.Screen
-                  name="post/[postId]"
-                  options={{
-                    headerShown: true,
-                    title: '',
-                    headerStyle: { backgroundColor: colors.background.paper },
-                    headerTintColor: colors.text.primary,
-                    headerBackVisible: false,
-                    headerLeft: () => <AppBackButton onPress={() => router.back()} />,
-                  }}
-                />
-                <Stack.Screen
-                  name="user/[userId]"
-                  options={{
-                    headerShown: true,
-                    title: '用户主页',
-                    headerStyle: { backgroundColor: colors.background.paper },
-                    headerTintColor: colors.text.primary,
-                    headerBackVisible: false,
-                    headerLeft: () => <AppBackButton onPress={() => router.back()} />,
-                  }}
-                />
-              </Stack>
-            </SessionGate>
+            <ThemeBootstrap />
+            <ThemedStack />
             <AppPromptBar />
             <AppDialogHost />
           </QueryClientProvider>
-        </PaperProvider>
+        </ThemedProviders>
       </SafeAreaProvider>
     </GestureHandlerRootView>
   );
 }
-
-const gateStyles = StyleSheet.create({
-  loading: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: colors.background.default,
-  },
-});