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/profile/AccountSecurityScreen.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 import { Text, ResponsiveContainer } from '../../components/common';
 import { useResponsive } from '../../hooks';
 import { authService, resolveAuthApiError } from '../../services/authService';
@@ -17,6 +17,8 @@ import { showPrompt } from '../../services/promptService';
 import { useAuthStore } from '../../stores';
 
 export const AccountSecurityScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createAccountSecurityStyles(colors), [colors]);
   const { isWideScreen, isMobile } = useResponsive();
   const insets = useSafeAreaInsets();
   const currentUser = useAuthStore((state) => state.currentUser);
@@ -232,7 +234,7 @@ export const AccountSecurityScreen: React.FC = () => {
               disabled={sendingCode || countdown > 0}
             >
               {sendingCode ? (
-                <ActivityIndicator size="small" color="#fff" />
+                <ActivityIndicator size="small" color={colors.text.inverse} />
               ) : (
                 <Text style={styles.sendCodeButtonText}>{countdown > 0 ? `${countdown}s` : '发送验证码'}</Text>
               )}
@@ -244,7 +246,11 @@ export const AccountSecurityScreen: React.FC = () => {
             onPress={handleVerifyEmail}
             disabled={verifyingEmail}
           >
-            {verifyingEmail ? <ActivityIndicator size="small" color="#fff" /> : <Text style={styles.primaryButtonText}>验证邮箱</Text>}
+            {verifyingEmail ? (
+              <ActivityIndicator size="small" color={colors.text.inverse} />
+            ) : (
+              <Text style={styles.primaryButtonText}>验证邮箱</Text>
+            )}
           </TouchableOpacity>
         </View>
       </View>
@@ -298,7 +304,7 @@ export const AccountSecurityScreen: React.FC = () => {
               disabled={sendingChangePwdCode || changePwdCountdown > 0}
             >
               {sendingChangePwdCode ? (
-                <ActivityIndicator size="small" color="#fff" />
+                <ActivityIndicator size="small" color={colors.text.inverse} />
               ) : (
                 <Text style={styles.sendCodeButtonText}>
                   {changePwdCountdown > 0 ? `${changePwdCountdown}s` : '发送验证码'}
@@ -323,7 +329,11 @@ export const AccountSecurityScreen: React.FC = () => {
             onPress={handleChangePassword}
             disabled={updatingPassword}
           >
-            {updatingPassword ? <ActivityIndicator size="small" color="#fff" /> : <Text style={styles.primaryButtonText}>更新密码</Text>}
+            {updatingPassword ? (
+              <ActivityIndicator size="small" color={colors.text.inverse} />
+            ) : (
+              <Text style={styles.primaryButtonText}>更新密码</Text>
+            )}
           </TouchableOpacity>
         </View>
       </View>
@@ -343,109 +353,117 @@ export const AccountSecurityScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-  },
-  scrollContent: {
-    paddingVertical: spacing.md,
-  },
-  section: {
-    marginBottom: spacing.lg,
-  },
-  sectionHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: spacing.lg,
-    marginBottom: spacing.sm,
-    gap: spacing.xs,
-  },
-  sectionTitle: {
-    fontWeight: '600',
-  },
-  card: {
-    backgroundColor: colors.background.paper,
-    marginHorizontal: spacing.lg,
-    borderRadius: borderRadius.lg,
-    padding: spacing.md,
-  },
-  statusRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: spacing.md,
-  },
-  statusBadge: {
-    paddingHorizontal: spacing.sm,
-    paddingVertical: 4,
-    borderRadius: borderRadius.sm,
-  },
-  statusVerified: {
-    backgroundColor: '#E8F5E9',
-  },
-  statusUnverified: {
-    backgroundColor: '#FFF3E0',
-  },
-  inputWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.background.default,
-    borderRadius: borderRadius.lg,
-    borderWidth: 1,
-    borderColor: colors.divider,
-    paddingHorizontal: spacing.md,
-    height: 48,
-    marginBottom: spacing.sm,
-  },
-  inputIcon: {
-    marginRight: spacing.sm,
-  },
-  input: {
-    flex: 1,
-    color: colors.text.primary,
-    fontSize: fontSizes.md,
-  },
-  codeRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.sm,
-    marginBottom: spacing.sm,
-  },
-  codeInput: {
-    flex: 1,
-    marginBottom: 0,
-  },
-  sendCodeButton: {
-    height: 48,
-    minWidth: 110,
-    borderRadius: borderRadius.lg,
-    backgroundColor: colors.primary.main,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: spacing.sm,
-  },
-  sendCodeButtonText: {
-    color: '#fff',
-    fontSize: fontSizes.sm,
-    fontWeight: '600',
-  },
-  primaryButton: {
-    height: 48,
-    borderRadius: borderRadius.lg,
-    backgroundColor: colors.primary.main,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: spacing.xs,
-  },
-  primaryButtonText: {
-    color: '#fff',
-    fontSize: fontSizes.md,
-    fontWeight: '700',
-  },
-  buttonDisabled: {
-    opacity: 0.6,
-  },
-});
+function createAccountSecurityStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    scrollContent: {
+      paddingVertical: spacing.md,
+    },
+    section: {
+      marginBottom: spacing.lg,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: spacing.lg,
+      marginBottom: spacing.sm,
+      gap: spacing.xs,
+    },
+    sectionTitle: {
+      fontWeight: '600',
+    },
+    card: {
+      backgroundColor: colors.background.paper,
+      marginHorizontal: spacing.lg,
+      borderRadius: borderRadius.lg,
+      padding: spacing.md,
+    },
+    statusRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: spacing.md,
+    },
+    statusBadge: {
+      paddingHorizontal: spacing.sm,
+      paddingVertical: 4,
+      borderRadius: borderRadius.sm,
+    },
+    statusVerified: {
+      backgroundColor: colors.success.light + '40',
+    },
+    statusUnverified: {
+      backgroundColor: colors.warning.light + '40',
+    },
+    statusVerifiedText: {
+      color: colors.success.dark,
+    },
+    statusUnverifiedText: {
+      color: colors.warning.dark,
+    },
+    inputWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.default,
+      borderRadius: borderRadius.lg,
+      borderWidth: 1,
+      borderColor: colors.divider,
+      paddingHorizontal: spacing.md,
+      height: 48,
+      marginBottom: spacing.sm,
+    },
+    inputIcon: {
+      marginRight: spacing.sm,
+    },
+    input: {
+      flex: 1,
+      color: colors.text.primary,
+      fontSize: fontSizes.md,
+    },
+    codeRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: spacing.sm,
+      marginBottom: spacing.sm,
+    },
+    codeInput: {
+      flex: 1,
+      marginBottom: 0,
+    },
+    sendCodeButton: {
+      height: 48,
+      minWidth: 110,
+      borderRadius: borderRadius.lg,
+      backgroundColor: colors.primary.main,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: spacing.sm,
+    },
+    sendCodeButtonText: {
+      color: colors.text.inverse,
+      fontSize: fontSizes.sm,
+      fontWeight: '600',
+    },
+    primaryButton: {
+      height: 48,
+      borderRadius: borderRadius.lg,
+      backgroundColor: colors.primary.main,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: spacing.xs,
+    },
+    primaryButtonText: {
+      color: colors.text.inverse,
+      fontSize: fontSizes.md,
+      fontWeight: '700',
+    },
+    buttonDisabled: {
+      opacity: 0.6,
+    },
+  });
+}
 
 export default AccountSecurityScreen;