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/auth/ForgotPasswordScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   View,
   Text,
@@ -14,11 +14,117 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
-import { colors, spacing, borderRadius, shadows, fontSizes } from '../../theme';
+import { spacing, borderRadius, shadows, fontSizes, useAppColors, type AppColors } from '../../theme';
 import { authService, resolveAuthApiError } from '../../services/authService';
 import { showPrompt } from '../../services/promptService';
 
+function createForgotPasswordStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: { flex: 1 },
+    gradient: { flex: 1 },
+    keyboardView: { flex: 1 },
+    scrollContent: {
+      flexGrow: 1,
+      justifyContent: 'center',
+      paddingHorizontal: spacing.xl,
+      paddingVertical: spacing['2xl'],
+    },
+    formCard: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius['2xl'],
+      padding: spacing.xl,
+      ...shadows.md,
+    },
+    title: {
+      fontSize: fontSizes['2xl'],
+      fontWeight: '700',
+      color: colors.text.primary,
+      textAlign: 'center',
+      marginBottom: spacing.xs,
+    },
+    subtitle: {
+      fontSize: fontSizes.sm,
+      color: colors.text.secondary,
+      textAlign: 'center',
+      marginBottom: spacing.lg,
+    },
+    inputWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.default,
+      borderRadius: borderRadius.lg,
+      borderWidth: 1.5,
+      borderColor: colors.divider,
+      paddingHorizontal: spacing.md,
+      height: 52,
+      marginBottom: spacing.md,
+    },
+    inputIcon: {
+      marginRight: spacing.sm,
+    },
+    input: {
+      flex: 1,
+      fontSize: fontSizes.md,
+      color: colors.text.primary,
+    },
+    codeRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: spacing.sm,
+      marginBottom: spacing.md,
+    },
+    codeInput: {
+      flex: 1,
+      marginBottom: 0,
+    },
+    sendCodeButton: {
+      height: 52,
+      minWidth: 110,
+      borderRadius: borderRadius.lg,
+      backgroundColor: colors.primary.main,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: spacing.md,
+    },
+    sendCodeButtonDisabled: {
+      opacity: 0.6,
+    },
+    sendCodeButtonText: {
+      color: '#fff',
+      fontSize: fontSizes.sm,
+      fontWeight: '600',
+    },
+    submitButton: {
+      height: 50,
+      borderRadius: borderRadius.lg,
+      backgroundColor: colors.primary.main,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: spacing.sm,
+    },
+    submitButtonDisabled: {
+      opacity: 0.6,
+    },
+    submitButtonText: {
+      color: '#fff',
+      fontSize: fontSizes.lg,
+      fontWeight: '700',
+    },
+    backButton: {
+      alignItems: 'center',
+      marginTop: spacing.md,
+    },
+    backButtonText: {
+      color: colors.primary.main,
+      fontSize: fontSizes.md,
+      fontWeight: '500',
+    },
+  });
+}
+
 export const ForgotPasswordScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createForgotPasswordStyles(colors), [colors]);
   const router = useRouter();
   const [email, setEmail] = useState('');
   const [verificationCode, setVerificationCode] = useState('');
@@ -199,106 +305,4 @@ export const ForgotPasswordScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  gradient: { flex: 1 },
-  keyboardView: { flex: 1 },
-  scrollContent: {
-    flexGrow: 1,
-    justifyContent: 'center',
-    paddingHorizontal: spacing.xl,
-    paddingVertical: spacing['2xl'],
-  },
-  formCard: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius['2xl'],
-    padding: spacing.xl,
-    ...shadows.md,
-  },
-  title: {
-    fontSize: fontSizes['2xl'],
-    fontWeight: '700',
-    color: colors.text.primary,
-    textAlign: 'center',
-    marginBottom: spacing.xs,
-  },
-  subtitle: {
-    fontSize: fontSizes.sm,
-    color: colors.text.secondary,
-    textAlign: 'center',
-    marginBottom: spacing.lg,
-  },
-  inputWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.background.default,
-    borderRadius: borderRadius.lg,
-    borderWidth: 1.5,
-    borderColor: colors.divider,
-    paddingHorizontal: spacing.md,
-    height: 52,
-    marginBottom: spacing.md,
-  },
-  inputIcon: {
-    marginRight: spacing.sm,
-  },
-  input: {
-    flex: 1,
-    fontSize: fontSizes.md,
-    color: colors.text.primary,
-  },
-  codeRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.sm,
-    marginBottom: spacing.md,
-  },
-  codeInput: {
-    flex: 1,
-    marginBottom: 0,
-  },
-  sendCodeButton: {
-    height: 52,
-    minWidth: 110,
-    borderRadius: borderRadius.lg,
-    backgroundColor: colors.primary.main,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: spacing.md,
-  },
-  sendCodeButtonDisabled: {
-    opacity: 0.6,
-  },
-  sendCodeButtonText: {
-    color: '#fff',
-    fontSize: fontSizes.sm,
-    fontWeight: '600',
-  },
-  submitButton: {
-    height: 50,
-    borderRadius: borderRadius.lg,
-    backgroundColor: colors.primary.main,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: spacing.sm,
-  },
-  submitButtonDisabled: {
-    opacity: 0.6,
-  },
-  submitButtonText: {
-    color: '#fff',
-    fontSize: fontSizes.lg,
-    fontWeight: '700',
-  },
-  backButton: {
-    alignItems: 'center',
-    marginTop: spacing.md,
-  },
-  backButtonText: {
-    color: colors.primary.main,
-    fontSize: fontSizes.md,
-    fontWeight: '500',
-  },
-});
-
 export default ForgotPasswordScreen;

src/screens/auth/LoginScreen.tsx

@@ -7,7 +7,7 @@
  * - 屏幕宽度 >= 768px：分栏布局，左侧橙色右侧中性灰
  */
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import {
   View,
   Text,
@@ -25,7 +25,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
-import { colors, spacing, borderRadius, shadows, fontSizes } from '../../theme';
+import { spacing, borderRadius, shadows, fontSizes, useAppColors, type AppColors } from '../../theme';
 import { useAuthStore } from '../../stores';
 import * as hrefs from '../../navigation/hrefs';
 import { useResponsive, useResponsiveValue } from '../../hooks';
@@ -35,6 +35,8 @@ import { showPrompt } from '../../services/promptService';
 const SPLIT_BREAKPOINT = 768;
 
 export const LoginScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createLoginStyles(colors), [colors]);
   const router = useRouter();
   const login = useAuthStore((state) => state.login);
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
@@ -453,7 +455,8 @@ export const LoginScreen: React.FC = () => {
   return isSplitLayout ? renderSplitLayout() : renderSingleLayout();
 };
 
-const styles = StyleSheet.create({
+function createLoginStyles(colors: AppColors) {
+  return StyleSheet.create({
   container: {
     flex: 1,
   },
@@ -762,6 +765,7 @@ const styles = StyleSheet.create({
     width: '100%',
     // 移除这里的阴影，避免重复
   },
-});
+  });
+}
 
 export default LoginScreen;

src/screens/auth/QRCodeConfirmScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   View,
   Text,
@@ -12,11 +12,148 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import { qrcodeApi } from '../../services/authService';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 import { AppBackButton } from '../../components/common';
 
+function createQrCodeConfirmStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm,
+      backgroundColor: colors.background.paper,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.divider,
+    },
+    closeButton: {
+      padding: spacing.sm,
+    },
+    headerTitle: {
+      fontSize: fontSizes.lg,
+      fontWeight: '600',
+      color: colors.text.primary,
+    },
+    placeholder: {
+      width: 40,
+    },
+    content: {
+      flex: 1,
+      padding: spacing.lg,
+      justifyContent: 'center',
+    },
+    infoCard: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      padding: spacing.xl,
+      alignItems: 'center',
+      marginBottom: spacing.xl,
+      shadowColor: colors.chat.shadow,
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 3,
+    },
+    infoText: {
+      fontSize: fontSizes.md,
+      color: colors.text.secondary,
+      marginBottom: spacing.lg,
+    },
+    userInfo: {
+      alignItems: 'center',
+    },
+    avatar: {
+      width: 80,
+      height: 80,
+      borderRadius: 40,
+      marginBottom: spacing.md,
+    },
+    avatarPlaceholder: {
+      width: 80,
+      height: 80,
+      borderRadius: 40,
+      backgroundColor: colors.background.disabled,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: spacing.md,
+    },
+    nickname: {
+      fontSize: fontSizes.lg,
+      fontWeight: '600',
+      color: colors.text.primary,
+    },
+    buttonContainer: {
+      gap: spacing.md,
+    },
+    button: {
+      paddingVertical: spacing.md,
+      paddingHorizontal: spacing.xl,
+      borderRadius: borderRadius.md,
+      alignItems: 'center',
+    },
+    confirmButton: {
+      backgroundColor: colors.primary.main,
+    },
+    confirmButtonText: {
+      color: colors.text.inverse,
+      fontSize: fontSizes.md,
+      fontWeight: '600',
+    },
+    cancelButton: {
+      backgroundColor: colors.background.paper,
+      borderWidth: 1,
+      borderColor: colors.divider,
+    },
+    cancelButtonText: {
+      color: colors.text.secondary,
+      fontSize: fontSizes.md,
+    },
+    loadingContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    loadingText: {
+      marginTop: spacing.md,
+      fontSize: fontSizes.md,
+      color: colors.text.secondary,
+    },
+    errorContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: spacing.xl,
+    },
+    errorText: {
+      marginTop: spacing.md,
+      fontSize: fontSizes.md,
+      color: colors.text.secondary,
+      textAlign: 'center',
+    },
+    backButton: {
+      marginTop: spacing.xl,
+      paddingVertical: spacing.md,
+      paddingHorizontal: spacing.xl,
+      backgroundColor: colors.primary.main,
+      borderRadius: borderRadius.md,
+    },
+    backButtonText: {
+      color: colors.text.inverse,
+      fontSize: fontSizes.md,
+      fontWeight: '600',
+    },
+  });
+}
+
 export const QRCodeConfirmScreen: React.FC = () => {
   const router = useRouter();
+  const colors = useAppColors();
+  const styles = useMemo(() => createQrCodeConfirmStyles(colors), [colors]);
   const { sessionId: sessionIdParam } = useLocalSearchParams<{ sessionId?: string }>();
   const sessionId = sessionIdParam || '';
 
@@ -37,9 +174,7 @@ export const QRCodeConfirmScreen: React.FC = () => {
     } catch (err: any) {
       const errorMsg = err.response?.data?.message || '扫码失败';
       setError(errorMsg);
-      Alert.alert('扫码失败', errorMsg, [
-        { text: '确定', onPress: () => router.back() }
-      ]);
+      Alert.alert('扫码失败', errorMsg, [{ text: '确定', onPress: () => router.back() }]);
     } finally {
       setLoading(false);
     }
@@ -49,9 +184,7 @@ export const QRCodeConfirmScreen: React.FC = () => {
     try {
       setLoading(true);
       await qrcodeApi.confirm(sessionId);
-      Alert.alert('登录成功', '网页端已登录', [
-        { text: '确定', onPress: () => router.back() }
-      ]);
+      Alert.alert('登录成功', '网页端已登录', [{ text: '确定', onPress: () => router.back() }]);
     } catch (err: any) {
       const errorMsg = err.response?.data?.message || '确认登录失败';
       Alert.alert('登录失败', errorMsg);
@@ -63,7 +196,7 @@ export const QRCodeConfirmScreen: React.FC = () => {
   const handleCancel = async () => {
     try {
       await qrcodeApi.cancel(sessionId);
-    } catch (err) {
+    } catch {
       // 忽略取消错误
     }
     router.back();
@@ -97,7 +230,12 @@ export const QRCodeConfirmScreen: React.FC = () => {
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.header}>
-        <AppBackButton onPress={handleCancel} icon="close" style={styles.closeButton} iconColor="#666" />
+        <AppBackButton
+          onPress={handleCancel}
+          icon="close"
+          style={styles.closeButton}
+          iconColor={colors.text.secondary}
+        />
         <Text style={styles.headerTitle}>确认登录</Text>
         <View style={styles.placeholder} />
       </View>
@@ -105,14 +243,14 @@ export const QRCodeConfirmScreen: React.FC = () => {
       <View style={styles.content}>
         <View style={styles.infoCard}>
           <Text style={styles.infoText}>您正在登录网页端</Text>
-          
+
           {userInfo && (
             <View style={styles.userInfo}>
               {userInfo.avatar ? (
                 <Image source={{ uri: userInfo.avatar }} style={styles.avatar} />
               ) : (
                 <View style={styles.avatarPlaceholder}>
-                  <MaterialCommunityIcons name="account" size={40} color="#999" />
+                  <MaterialCommunityIcons name="account" size={40} color={colors.text.disabled} />
                 </View>
               )}
               <Text style={styles.nickname}>{userInfo.nickname}</Text>
@@ -127,7 +265,7 @@ export const QRCodeConfirmScreen: React.FC = () => {
             disabled={loading}
           >
             {loading ? (
-              <ActivityIndicator color="#fff" />
+              <ActivityIndicator color={colors.text.inverse} />
             ) : (
               <Text style={styles.confirmButtonText}>确认登录</Text>
             )}
@@ -146,137 +284,4 @@ export const QRCodeConfirmScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    backgroundColor: '#fff',
-    borderBottomWidth: 1,
-    borderBottomColor: '#eee',
-  },
-  closeButton: {
-    padding: spacing.sm,
-  },
-  headerTitle: {
-    fontSize: fontSizes.lg,
-    fontWeight: '600',
-    color: '#333',
-  },
-  placeholder: {
-    width: 40,
-  },
-  content: {
-    flex: 1,
-    padding: spacing.lg,
-    justifyContent: 'center',
-  },
-  infoCard: {
-    backgroundColor: '#fff',
-    borderRadius: borderRadius.lg,
-    padding: spacing.xl,
-    alignItems: 'center',
-    marginBottom: spacing.xl,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
-  },
-  infoText: {
-    fontSize: fontSizes.md,
-    color: '#666',
-    marginBottom: spacing.lg,
-  },
-  userInfo: {
-    alignItems: 'center',
-  },
-  avatar: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    marginBottom: spacing.md,
-  },
-  avatarPlaceholder: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    backgroundColor: '#f0f0f0',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: spacing.md,
-  },
-  nickname: {
-    fontSize: fontSizes.lg,
-    fontWeight: '600',
-    color: '#333',
-  },
-  buttonContainer: {
-    gap: spacing.md,
-  },
-  button: {
-    paddingVertical: spacing.md,
-    paddingHorizontal: spacing.xl,
-    borderRadius: borderRadius.md,
-    alignItems: 'center',
-  },
-  confirmButton: {
-    backgroundColor: colors.primary.main,
-  },
-  confirmButtonText: {
-    color: '#fff',
-    fontSize: fontSizes.md,
-    fontWeight: '600',
-  },
-  cancelButton: {
-    backgroundColor: '#fff',
-    borderWidth: 1,
-    borderColor: '#ddd',
-  },
-  cancelButtonText: {
-    color: '#666',
-    fontSize: fontSizes.md,
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  loadingText: {
-    marginTop: spacing.md,
-    fontSize: fontSizes.md,
-    color: '#666',
-  },
-  errorContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: spacing.xl,
-  },
-  errorText: {
-    marginTop: spacing.md,
-    fontSize: fontSizes.md,
-    color: '#666',
-    textAlign: 'center',
-  },
-  backButton: {
-    marginTop: spacing.xl,
-    paddingVertical: spacing.md,
-    paddingHorizontal: spacing.xl,
-    backgroundColor: colors.primary.main,
-    borderRadius: borderRadius.md,
-  },
-  backButtonText: {
-    color: '#fff',
-    fontSize: fontSizes.md,
-    fontWeight: '600',
-  },
-});
-
-export default QRCodeConfirmScreen;
+export default QRCodeConfirmScreen;

src/screens/auth/RegisterScreen.tsx

@@ -7,7 +7,7 @@
  * - 屏幕宽度 >= 768px：分栏布局，左侧橙色右侧中性灰
  */
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import {
   View,
   Text,
@@ -25,7 +25,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
-import { colors, spacing, borderRadius, shadows, fontSizes } from '../../theme';
+import { spacing, borderRadius, shadows, fontSizes, useAppColors, type AppColors } from '../../theme';
 import { authService, resolveAuthApiError } from '../../services/authService';
 import { useAuthStore } from '../../stores';
 import * as hrefs from '../../navigation/hrefs';
@@ -36,6 +36,8 @@ import { showPrompt } from '../../services/promptService';
 const SPLIT_BREAKPOINT = 768;
 
 export const RegisterScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createRegisterStyles(colors), [colors]);
   const router = useRouter();
   const register = useAuthStore((state) => state.register);
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
@@ -739,7 +741,8 @@ export const RegisterScreen: React.FC = () => {
   return isSplitLayout ? renderSplitLayout() : renderSingleLayout();
 };
 
-const styles = StyleSheet.create({
+function createRegisterStyles(colors: AppColors) {
+  return StyleSheet.create({
   container: {
     flex: 1,
   },
@@ -1076,6 +1079,7 @@ const styles = StyleSheet.create({
     marginBottom: spacing.xl,
     textAlign: 'center',
   },
-});
+  });
+}
 
 export default RegisterScreen;