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.json

@@ -5,7 +5,7 @@
     "version": "1.0.11",
     "orientation": "default",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "automatic",
     "scheme": "carrotbbs",
     "splash": {
       "image": "./assets/splash-icon.png",

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';
+import { useAppColors } from '../../../../src/theme';
 
-const headerOptions = {
+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]
-export default function ProfileStackLayout() {
+  );
-  const router = useRouter();
 
   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,15 +137,15 @@ function NotificationBootstrap() {
   return null;
 }
 
-export default function RootLayout() {
+function ThemedStack() {
   const router = useRouter();
+  const colors = useAppColors();
+  const resolved = useResolvedColorScheme();
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
+    <>
-      <SafeAreaProvider>
+      <StatusBar style={resolved === 'dark' ? 'light' : 'dark'} />
-        <PaperProvider theme={paperTheme}>
+      <SystemChrome />
-          <QueryClientProvider client={queryClient}>
-            <StatusBar style="light" />
       <SessionGate>
         <NotificationBootstrap />
         <Stack screenOptions={{ headerShown: false }}>
@@ -130,8 +157,10 @@ export default function RootLayout() {
             options={{
               headerShown: true,
               title: '',
-                    headerStyle: { backgroundColor: colors.background.paper },
+              // 与 PostDetailScreen 的 SafeAreaView（background.default）同色，避免出现 header/内容之间的色差线
+              headerStyle: { backgroundColor: colors.background.default },
               headerTintColor: colors.text.primary,
+              headerShadowVisible: false,
               headerBackVisible: false,
               headerLeft: () => <AppBackButton onPress={() => router.back()} />,
             }}
@@ -149,20 +178,28 @@ export default function RootLayout() {
           />
         </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>
+        <ThemedProviders>
+          <QueryClientProvider client={queryClient}>
+            <ThemeBootstrap />
+            <ThemedStack />
             <AppPromptBar />
             <AppDialogHost />
           </QueryClientProvider>
-        </PaperProvider>
+        </ThemedProviders>
       </SafeAreaProvider>
     </GestureHandlerRootView>
   );
 }
-
-const gateStyles = StyleSheet.create({
-  loading: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: colors.background.default,
-  },
-});

src/app-navigation/AppDesktopShell.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   View,
   StyleSheet,
@@ -11,7 +11,7 @@ import { useSafeAreaInsets, SafeAreaView } from 'react-native-safe-area-context'
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { usePathname, useRouter } from 'expo-router';
 
-import { colors, shadows } from '../theme';
+import { useAppColors, shadows, type AppColors } from '../theme';
 import { useTotalUnreadCount } from '../stores';
 import { AppRouteStack } from './AppRouteStack';
 
@@ -36,106 +36,8 @@ function pathToTab(pathname: string): TabName {
   return 'HomeTab';
 }
 
-export function AppDesktopShell() {
+function createDesktopShellStyles(colors: AppColors) {
-  const insets = useSafeAreaInsets();
+  return StyleSheet.create({
-  const router = useRouter();
-  const pathname = usePathname();
-  const unreadCount = useTotalUnreadCount();
-  const [isCollapsed, setIsCollapsed] = useState(false);
-  const [isDesktop, setIsDesktop] = useState(false);
-
-  useEffect(() => {
-    if (Platform.OS !== 'web') return;
-    const check = () => {
-      const w = window.innerWidth || document.documentElement.clientWidth;
-      setIsDesktop(w >= SIDEBAR_WIDTH_DESKTOP);
-    };
-    check();
-    window.addEventListener('resize', check);
-    return () => window.removeEventListener('resize', check);
-  }, []);
-
-  const sidebarWidth = isCollapsed
-    ? SIDEBAR_COLLAPSED_WIDTH
-    : isDesktop
-      ? SIDEBAR_WIDTH_DESKTOP
-      : SIDEBAR_WIDTH_TABLET;
-
-  const currentTab = pathToTab(pathname || '/home');
-
-  const handleTabChange = useCallback(
-    (href: string) => {
-      router.replace(href);
-    },
-    [router]
-  );
-
-  return (
-    <View style={styles.container}>
-      <SafeAreaView
-        style={[
-          styles.sidebar,
-          { width: sidebarWidth, paddingTop: insets.top, paddingBottom: insets.bottom },
-        ]}
-      >
-        <View style={styles.sidebarHeader}>
-          <MaterialCommunityIcons name="carrot" size={32} color={colors.primary.main} />
-          {!isCollapsed && <Text style={styles.logoText}>胡萝卜BBS</Text>}
-        </View>
-        <ScrollView style={styles.sidebarContent} showsVerticalScrollIndicator={false}>
-          {NAV_ITEMS.map((item) => {
-            const isActive = currentTab === item.name;
-            const showBadge = item.name === 'MessageTab' && unreadCount > 0;
-            return (
-              <TouchableOpacity
-                key={item.name}
-                style={[
-                  styles.sidebarItem,
-                  isActive && styles.sidebarItemActive,
-                  isCollapsed && styles.sidebarItemCollapsed,
-                ]}
-                onPress={() => handleTabChange(item.href)}
-                activeOpacity={0.7}
-              >
-                <View style={styles.sidebarIconContainer}>
-                  <MaterialCommunityIcons
-                    name={(isActive ? item.icon : item.iconOutline) as any}
-                    size={24}
-                    color={isActive ? colors.primary.main : colors.text.secondary}
-                  />
-                  {showBadge ? (
-                    <View style={styles.badge}>
-                      <Text style={styles.badgeText}>{unreadCount > 99 ? '99+' : unreadCount}</Text>
-                    </View>
-                  ) : null}
-                </View>
-                {!isCollapsed ? (
-                  <Text style={[styles.sidebarLabel, isActive && styles.sidebarLabelActive]}>{item.label}</Text>
-                ) : null}
-              </TouchableOpacity>
-            );
-          })}
-        </ScrollView>
-        <TouchableOpacity
-          style={[styles.collapseButton, isCollapsed && styles.collapseButtonCollapsed]}
-          onPress={() => setIsCollapsed((c) => !c)}
-          activeOpacity={0.7}
-        >
-          <MaterialCommunityIcons
-            name={isCollapsed ? 'chevron-right' : 'chevron-left'}
-            size={24}
-            color={colors.text.secondary}
-          />
-        </TouchableOpacity>
-      </SafeAreaView>
-      <View style={styles.mainContent}>
-        <AppRouteStack />
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
     container: {
       flex: 1,
       flexDirection: 'row',
@@ -236,4 +138,106 @@ const styles = StyleSheet.create({
       flex: 1,
       backgroundColor: colors.background.default,
     },
-});
+  });
+}
+
+export function AppDesktopShell() {
+  const colors = useAppColors();
+  const styles = useMemo(() => createDesktopShellStyles(colors), [colors]);
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const pathname = usePathname();
+  const unreadCount = useTotalUnreadCount();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isDesktop, setIsDesktop] = useState(false);
+
+  useEffect(() => {
+    if (Platform.OS !== 'web') return;
+    const check = () => {
+      const w = window.innerWidth || document.documentElement.clientWidth;
+      setIsDesktop(w >= SIDEBAR_WIDTH_DESKTOP);
+    };
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, []);
+
+  const sidebarWidth = isCollapsed
+    ? SIDEBAR_COLLAPSED_WIDTH
+    : isDesktop
+      ? SIDEBAR_WIDTH_DESKTOP
+      : SIDEBAR_WIDTH_TABLET;
+
+  const currentTab = pathToTab(pathname || '/home');
+
+  const handleTabChange = useCallback(
+    (href: string) => {
+      router.replace(href);
+    },
+    [router]
+  );
+
+  return (
+    <View style={styles.container}>
+      <SafeAreaView
+        style={[
+          styles.sidebar,
+          { width: sidebarWidth, paddingTop: insets.top, paddingBottom: insets.bottom },
+        ]}
+      >
+        <View style={styles.sidebarHeader}>
+          <MaterialCommunityIcons name="carrot" size={32} color={colors.primary.main} />
+          {!isCollapsed && <Text style={styles.logoText}>胡萝卜BBS</Text>}
+        </View>
+        <ScrollView style={styles.sidebarContent} showsVerticalScrollIndicator={false}>
+          {NAV_ITEMS.map((item) => {
+            const isActive = currentTab === item.name;
+            const showBadge = item.name === 'MessageTab' && unreadCount > 0;
+            return (
+              <TouchableOpacity
+                key={item.name}
+                style={[
+                  styles.sidebarItem,
+                  isActive && styles.sidebarItemActive,
+                  isCollapsed && styles.sidebarItemCollapsed,
+                ]}
+                onPress={() => handleTabChange(item.href)}
+                activeOpacity={0.7}
+              >
+                <View style={styles.sidebarIconContainer}>
+                  <MaterialCommunityIcons
+                    name={(isActive ? item.icon : item.iconOutline) as any}
+                    size={24}
+                    color={isActive ? colors.primary.main : colors.text.secondary}
+                  />
+                  {showBadge ? (
+                    <View style={styles.badge}>
+                      <Text style={styles.badgeText}>{unreadCount > 99 ? '99+' : unreadCount}</Text>
+                    </View>
+                  ) : null}
+                </View>
+                {!isCollapsed ? (
+                  <Text style={[styles.sidebarLabel, isActive && styles.sidebarLabelActive]}>{item.label}</Text>
+                ) : null}
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+        <TouchableOpacity
+          style={[styles.collapseButton, isCollapsed && styles.collapseButtonCollapsed]}
+          onPress={() => setIsCollapsed((c) => !c)}
+          activeOpacity={0.7}
+        >
+          <MaterialCommunityIcons
+            name={isCollapsed ? 'chevron-right' : 'chevron-left'}
+            size={24}
+            color={colors.text.secondary}
+          />
+        </TouchableOpacity>
+      </SafeAreaView>
+      <View style={styles.mainContent}>
+        <AppRouteStack />
+      </View>
+    </View>
+  );
+}

src/components/business/CommentItem.tsx

@@ -3,12 +3,12 @@
  * 支持嵌套回复显示、楼层号、身份标识、删除评论、图片显示
  */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { View, TouchableOpacity, StyleSheet, Alert } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { formatDistanceToNow } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
-import { colors, spacing, borderRadius, fontSizes } from '../../theme';
+import { spacing, borderRadius, fontSizes, useAppColors, type AppColors } from '../../theme';
 import { Comment, CommentImage } from '../../types';
 import Text from '../common/Text';
 import Avatar from '../common/Avatar';
@@ -31,6 +31,174 @@ interface CommentItemProps {
   currentUserId?: string; // 当前用户ID，用于判断子评论作者
 }
 
+function createCommentItemStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      paddingTop: spacing.md,
+      paddingBottom: spacing.md,
+      paddingHorizontal: spacing.md,
+      backgroundColor: colors.background.paper,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: colors.divider,
+    },
+    content: {
+      flex: 1,
+      marginLeft: spacing.sm,
+      minWidth: 0,
+    },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: spacing.xs,
+      gap: spacing.xs,
+    },
+    userInfo: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      flex: 1,
+      minWidth: 0,
+    },
+    metaDot: {
+      fontSize: fontSizes.xs,
+      color: colors.text.hint,
+      marginHorizontal: 2,
+    },
+    username: {
+      fontWeight: '600',
+      fontSize: fontSizes.sm,
+      color: colors.text.primary,
+      marginRight: spacing.xs,
+    },
+    badge: {
+      paddingHorizontal: 4,
+      paddingVertical: 1,
+      borderRadius: 2,
+      marginRight: spacing.xs,
+    },
+    smallBadge: {
+      paddingHorizontal: 2,
+      paddingVertical: 0,
+    },
+    authorBadge: {
+      backgroundColor: colors.primary.main,
+    },
+    adminBadge: {
+      backgroundColor: colors.error.main,
+    },
+    badgeText: {
+      color: colors.text.inverse,
+      fontSize: fontSizes.xs,
+      fontWeight: '600',
+    },
+    smallBadgeText: {
+      color: colors.text.inverse,
+      fontSize: 9,
+      fontWeight: '600',
+    },
+    timeText: {
+      fontSize: fontSizes.xs,
+      flexShrink: 0,
+    },
+    floorPlain: {
+      fontSize: fontSizes.xs,
+      flexShrink: 0,
+    },
+    replyReference: {
+      marginBottom: spacing.xs,
+    },
+    commentContent: {
+      marginBottom: spacing.xs,
+    },
+    text: {
+      lineHeight: 22,
+      fontSize: fontSizes.md,
+      color: colors.text.primary,
+    },
+    actions: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: spacing.xs,
+      flexWrap: 'wrap',
+    },
+    actionButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginRight: spacing.lg,
+      paddingVertical: 4,
+      paddingRight: spacing.xs,
+    },
+    actionText: {
+      marginLeft: 4,
+      fontSize: fontSizes.xs,
+    },
+    subRepliesContainer: {
+      marginTop: spacing.sm,
+      marginLeft: 0,
+      paddingLeft: spacing.sm,
+      paddingVertical: spacing.xs,
+      borderLeftWidth: 2,
+      borderLeftColor: colors.divider,
+      backgroundColor: colors.background.default,
+    },
+    subReplyItem: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      marginBottom: spacing.md,
+    },
+    subReplyItemLast: {
+      marginBottom: 0,
+    },
+    subReplyBody: {
+      fontSize: fontSizes.sm,
+      lineHeight: 20,
+      marginTop: 2,
+    },
+    subReplyContent: {
+      flex: 1,
+      marginLeft: spacing.xs,
+    },
+    subReplyHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 2,
+    },
+    subReplyAuthor: {
+      fontWeight: '600',
+      color: colors.text.primary,
+      marginRight: spacing.xs,
+    },
+    moreRepliesButton: {
+      marginTop: spacing.xs,
+      paddingVertical: spacing.xs,
+    },
+    replyToText: {
+      fontSize: fontSizes.xs,
+    },
+    replyToName: {
+      fontSize: fontSizes.xs,
+      fontWeight: '500',
+    },
+    subReplyActions: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: spacing.xs,
+    },
+    subActionButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginRight: spacing.sm,
+      paddingVertical: 2,
+    },
+    subActionText: {
+      marginLeft: 2,
+      fontSize: fontSizes.xs,
+    },
+  });
+}
+
 const CommentItem: React.FC<CommentItemProps> = ({
   comment,
   onUserPress,
@@ -47,6 +215,8 @@ const CommentItem: React.FC<CommentItemProps> = ({
   onImagePress,
   currentUserId,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createCommentItemStyles(colors), [colors]);
   const [isDeleting, setIsDeleting] = useState(false);
   // 格式化时间
   const formatTime = (dateString: string): string => {
@@ -471,170 +641,4 @@ const CommentItem: React.FC<CommentItemProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    paddingTop: spacing.md,
-    paddingBottom: spacing.md,
-    paddingHorizontal: spacing.md,
-    backgroundColor: colors.background.paper,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: colors.divider,
-  },
-  content: {
-    flex: 1,
-    marginLeft: spacing.sm,
-    minWidth: 0,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: spacing.xs,
-    gap: spacing.xs,
-  },
-  userInfo: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    flex: 1,
-    minWidth: 0,
-  },
-  metaDot: {
-    fontSize: fontSizes.xs,
-    color: colors.text.hint,
-    marginHorizontal: 2,
-  },
-  username: {
-    fontWeight: '600',
-    fontSize: fontSizes.sm,
-    color: colors.text.primary,
-    marginRight: spacing.xs,
-  },
-  badge: {
-    paddingHorizontal: 4,
-    paddingVertical: 1,
-    borderRadius: 2,
-    marginRight: spacing.xs,
-  },
-  smallBadge: {
-    paddingHorizontal: 2,
-    paddingVertical: 0,
-  },
-  authorBadge: {
-    backgroundColor: colors.primary.main,
-  },
-  adminBadge: {
-    backgroundColor: colors.error.main,
-  },
-  badgeText: {
-    color: colors.text.inverse,
-    fontSize: fontSizes.xs,
-    fontWeight: '600',
-  },
-  smallBadgeText: {
-    color: colors.text.inverse,
-    fontSize: 9,
-    fontWeight: '600',
-  },
-  timeText: {
-    fontSize: fontSizes.xs,
-    flexShrink: 0,
-  },
-  floorPlain: {
-    fontSize: fontSizes.xs,
-    flexShrink: 0,
-  },
-  replyReference: {
-    marginBottom: spacing.xs,
-  },
-  commentContent: {
-    marginBottom: spacing.xs,
-  },
-  text: {
-    lineHeight: 22,
-    fontSize: fontSizes.md,
-    color: colors.text.primary,
-  },
-  actions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: spacing.xs,
-    flexWrap: 'wrap',
-  },
-  actionButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginRight: spacing.lg,
-    paddingVertical: 4,
-    paddingRight: spacing.xs,
-  },
-  actionText: {
-    marginLeft: 4,
-    fontSize: fontSizes.xs,
-  },
-  subRepliesContainer: {
-    marginTop: spacing.sm,
-    marginLeft: 0,
-    paddingLeft: spacing.sm,
-    paddingVertical: spacing.xs,
-    borderLeftWidth: 2,
-    borderLeftColor: colors.divider,
-    backgroundColor: colors.background.default,
-  },
-  subReplyItem: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    marginBottom: spacing.md,
-  },
-  subReplyItemLast: {
-    marginBottom: 0,
-  },
-  subReplyBody: {
-    fontSize: fontSizes.sm,
-    lineHeight: 20,
-    marginTop: 2,
-  },
-  subReplyContent: {
-    flex: 1,
-    marginLeft: spacing.xs,
-  },
-  subReplyHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 2,
-  },
-  subReplyAuthor: {
-    fontWeight: '600',
-    color: colors.text.primary,
-    marginRight: spacing.xs,
-  },
-  moreRepliesButton: {
-    marginTop: spacing.xs,
-    paddingVertical: spacing.xs,
-  },
-  replyToText: {
-    fontSize: fontSizes.xs,
-  },
-  replyToName: {
-    fontSize: fontSizes.xs,
-    fontWeight: '500',
-  },
-  subReplyActions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: spacing.xs,
-  },
-  subActionButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginRight: spacing.sm,
-    paddingVertical: 2,
-  },
-  subActionText: {
-    marginLeft: 2,
-    fontSize: fontSizes.xs,
-  },
-});
-
 export default CommentItem;

src/components/business/PostCard/PostCard.tsx

@@ -19,7 +19,7 @@ import { PostCardProps, PostCardAction } from './types';
 import { ImageGridItem, SmartImage } from '../../common';
 import Text from '../../common/Text';
 import Avatar from '../../common/Avatar';
-import { colors, spacing, borderRadius, fontSizes } from '../../../theme';
+import { spacing, borderRadius, fontSizes, useAppColors, type AppColors } from '../../../theme';
 import { getPreviewImageUrl } from '../../../utils/imageHelper';
 import PostImages from './components/PostImages';
 import { useResponsive } from '../../../hooks/useResponsive';
@@ -113,6 +113,270 @@ function arePostCardPropsEqual(prev: PostCardProps, next: PostCardProps): boolea
   return true;
 }
 
+function createPostCardStyles(colors: AppColors) {
+  return StyleSheet.create({
+    card: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      padding: spacing.md,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: colors.divider,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: spacing.sm,
+    },
+    authorWrap: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+      minWidth: 0,
+    },
+    authorMeta: {
+      marginLeft: spacing.sm,
+      flex: 1,
+      minWidth: 0,
+    },
+    authorName: {
+      color: colors.text.primary,
+      fontWeight: '600',
+      fontSize: fontSizes.md,
+    },
+    timeText: {
+      color: colors.text.hint,
+      fontSize: fontSizes.xs,
+      marginTop: 2,
+    },
+    metaRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+      marginTop: 2,
+      flexWrap: 'wrap',
+    },
+    channelTag: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      maxWidth: 140,
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      borderRadius: borderRadius.sm,
+      backgroundColor: `${colors.primary.main}12`,
+      gap: 4,
+    },
+    channelTagText: {
+      fontSize: fontSizes.xs,
+      color: colors.primary.main,
+      fontWeight: '600',
+      flexShrink: 1,
+    },
+    pinnedTag: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: `${colors.warning.light}22`,
+      borderRadius: borderRadius.sm,
+      paddingHorizontal: 4,
+      paddingVertical: 1,
+      gap: 2,
+    },
+    pinnedText: {
+      color: colors.warning.main,
+      fontSize: fontSizes.xs,
+    },
+    badgeText: {
+      color: colors.primary.main,
+      fontSize: fontSizes.xs,
+      fontWeight: '600',
+    },
+    deleteButton: {
+      padding: spacing.xs,
+      marginLeft: spacing.sm,
+    },
+    title: {
+      color: colors.text.primary,
+      fontSize: fontSizes.lg,
+      fontWeight: '600',
+      marginBottom: spacing.xs,
+    },
+    content: {
+      color: colors.text.secondary,
+      fontSize: fontSizes.md,
+      marginBottom: spacing.xs,
+      lineHeight: fontSizes.md * 1.45,
+    },
+    expandBtn: {
+      marginBottom: spacing.sm,
+    },
+    expandText: {
+      color: colors.primary.main,
+      fontSize: fontSizes.sm,
+    },
+    topCommentBox: {
+      backgroundColor: colors.background.default,
+      borderRadius: borderRadius.sm,
+      paddingHorizontal: spacing.sm,
+      paddingVertical: spacing.xs,
+      marginBottom: spacing.sm,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    topCommentAuthor: {
+      color: colors.text.secondary,
+      fontSize: fontSizes.sm,
+      fontWeight: '600',
+      marginRight: 4,
+    },
+    topCommentText: {
+      color: colors.text.secondary,
+      fontSize: fontSizes.sm,
+      flex: 1,
+    },
+    gridCover: {
+      width: '100%',
+      aspectRatio: 0.78,
+      backgroundColor: colors.background.default,
+    },
+    actions: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    actionsLeading: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+      minWidth: 0,
+      marginRight: spacing.sm,
+      gap: spacing.sm,
+    },
+    channelTagAfterViews: {
+      maxWidth: 130,
+      flexShrink: 1,
+    },
+    viewsWrap: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexShrink: 0,
+    },
+    viewsText: {
+      color: colors.text.hint,
+      fontSize: fontSizes.sm,
+      marginLeft: 4,
+    },
+    actionButtons: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    actionBtn: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginLeft: spacing.md,
+    },
+    actionText: {
+      color: colors.text.secondary,
+      fontSize: fontSizes.sm,
+      marginLeft: 4,
+    },
+    activeActionText: {
+      color: colors.error.main,
+    },
+    activeActionTextMerged: {
+      color: colors.error.main,
+      fontSize: fontSizes.sm,
+      marginLeft: 4,
+    },
+    gridRootCard: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      overflow: 'hidden',
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: colors.divider,
+    },
+    gridNoImagePreview: {
+      backgroundColor: colors.background.default,
+      margin: 6,
+      borderRadius: borderRadius.md,
+      minHeight: 120,
+      padding: 8,
+    },
+    gridNoImageText: {
+      color: colors.text.secondary,
+      fontSize: fontSizes.sm,
+      lineHeight: 20,
+    },
+    gridVoteTag: {
+      position: 'absolute',
+      top: 8,
+      right: 8,
+      backgroundColor: `${colors.primary.main}CC`,
+      borderRadius: borderRadius.full,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    gridVoteTagText: {
+      color: colors.primary.contrast,
+      fontSize: 10,
+      fontWeight: '600',
+    },
+    gridTitleMain: {
+      color: colors.text.primary,
+      fontSize: fontSizes.md,
+      lineHeight: 20,
+      paddingHorizontal: 8,
+      paddingTop: 8,
+      minHeight: 44,
+    },
+    gridChannelRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      paddingHorizontal: 8,
+      paddingTop: 4,
+      paddingBottom: 2,
+    },
+    gridChannelText: {
+      fontSize: fontSizes.xs,
+      color: colors.text.secondary,
+      fontWeight: '600',
+      flex: 1,
+      minWidth: 0,
+    },
+    gridFooter: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 8,
+      paddingVertical: 10,
+    },
+    gridUserArea: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+      minWidth: 0,
+    },
+    gridUsername: {
+      color: colors.text.secondary,
+      fontSize: fontSizes.sm,
+      marginLeft: 6,
+      flex: 1,
+    },
+    gridLikeArea: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    gridLikeCount: {
+      color: colors.text.secondary,
+      fontSize: fontSizes.sm,
+      marginLeft: 4,
+    },
+  });
+}
+
 /**
  * PostCard 主组件
  * 仅支持新 API
@@ -129,6 +393,8 @@ const PostCardInner: React.FC<PostCardProps> = (normalizedProps) => {
     style,
   } = normalizedProps;
 
+  const colors = useAppColors();
+  const styles = useMemo(() => createPostCardStyles(colors), [colors]);
   const [isExpanded, setIsExpanded] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
 
@@ -444,266 +710,4 @@ PostCardInner.displayName = 'PostCard';
 
 const PostCard = memo(PostCardInner, arePostCardPropsEqual);
 
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    padding: spacing.md,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: colors.divider,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: spacing.sm,
-  },
-  authorWrap: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-    minWidth: 0,
-  },
-  authorMeta: {
-    marginLeft: spacing.sm,
-    flex: 1,
-    minWidth: 0,
-  },
-  authorName: {
-    color: colors.text.primary,
-    fontWeight: '600',
-    fontSize: fontSizes.md,
-  },
-  timeText: {
-    color: colors.text.hint,
-    fontSize: fontSizes.xs,
-    marginTop: 2,
-  },
-  metaRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    marginTop: 2,
-    flexWrap: 'wrap',
-  },
-  channelTag: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    maxWidth: 140,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: borderRadius.sm,
-    backgroundColor: `${colors.primary.main}12`,
-    gap: 4,
-  },
-  channelTagText: {
-    fontSize: fontSizes.xs,
-    color: colors.primary.main,
-    fontWeight: '600',
-    flexShrink: 1,
-  },
-  pinnedTag: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: `${colors.warning.light}22`,
-    borderRadius: borderRadius.sm,
-    paddingHorizontal: 4,
-    paddingVertical: 1,
-    gap: 2,
-  },
-  pinnedText: {
-    color: colors.warning.main,
-    fontSize: fontSizes.xs,
-  },
-  badgeText: {
-    color: colors.primary.main,
-    fontSize: fontSizes.xs,
-    fontWeight: '600',
-  },
-  deleteButton: {
-    padding: spacing.xs,
-    marginLeft: spacing.sm,
-  },
-  title: {
-    color: colors.text.primary,
-    fontSize: fontSizes.lg,
-    fontWeight: '600',
-    marginBottom: spacing.xs,
-  },
-  content: {
-    color: colors.text.secondary,
-    fontSize: fontSizes.md,
-    marginBottom: spacing.xs,
-    lineHeight: fontSizes.md * 1.45,
-  },
-  expandBtn: {
-    marginBottom: spacing.sm,
-  },
-  expandText: {
-    color: colors.primary.main,
-    fontSize: fontSizes.sm,
-  },
-  topCommentBox: {
-    backgroundColor: colors.background.default,
-    borderRadius: borderRadius.sm,
-    paddingHorizontal: spacing.sm,
-    paddingVertical: spacing.xs,
-    marginBottom: spacing.sm,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  topCommentAuthor: {
-    color: colors.text.secondary,
-    fontSize: fontSizes.sm,
-    fontWeight: '600',
-    marginRight: 4,
-  },
-  topCommentText: {
-    color: colors.text.secondary,
-    fontSize: fontSizes.sm,
-    flex: 1,
-  },
-  gridCover: {
-    width: '100%',
-    aspectRatio: 0.78,
-    backgroundColor: colors.background.default,
-  },
-  actions: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  actionsLeading: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-    minWidth: 0,
-    marginRight: spacing.sm,
-    gap: spacing.sm,
-  },
-  channelTagAfterViews: {
-    maxWidth: 130,
-    flexShrink: 1,
-  },
-  viewsWrap: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexShrink: 0,
-  },
-  viewsText: {
-    color: colors.text.hint,
-    fontSize: fontSizes.sm,
-    marginLeft: 4,
-  },
-  actionButtons: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  actionBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginLeft: spacing.md,
-  },
-  actionText: {
-    color: colors.text.secondary,
-    fontSize: fontSizes.sm,
-    marginLeft: 4,
-  },
-  activeActionText: {
-    color: colors.error.main,
-  },
-  activeActionTextMerged: {
-    color: colors.error.main,
-    fontSize: fontSizes.sm,
-    marginLeft: 4,
-  },
-  gridRootCard: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    overflow: 'hidden',
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: colors.divider,
-  },
-  gridNoImagePreview: {
-    backgroundColor: colors.background.default,
-    margin: 6,
-    borderRadius: borderRadius.md,
-    minHeight: 120,
-    padding: 8,
-  },
-  gridNoImageText: {
-    color: colors.text.secondary,
-    fontSize: fontSizes.sm,
-    lineHeight: 20,
-  },
-  gridVoteTag: {
-    position: 'absolute',
-    top: 8,
-    right: 8,
-    backgroundColor: `${colors.primary.main}CC`,
-    borderRadius: borderRadius.full,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-  },
-  gridVoteTagText: {
-    color: colors.primary.contrast,
-    fontSize: 10,
-    fontWeight: '600',
-  },
-  gridTitleMain: {
-    color: colors.text.primary,
-    fontSize: fontSizes.md,
-    lineHeight: 20,
-    paddingHorizontal: 8,
-    paddingTop: 8,
-    minHeight: 44,
-  },
-  gridChannelRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    paddingHorizontal: 8,
-    paddingTop: 4,
-    paddingBottom: 2,
-  },
-  gridChannelText: {
-    fontSize: fontSizes.xs,
-    color: colors.text.secondary,
-    fontWeight: '600',
-    flex: 1,
-    minWidth: 0,
-  },
-  gridFooter: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 8,
-    paddingVertical: 10,
-  },
-  gridUserArea: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-    minWidth: 0,
-  },
-  gridUsername: {
-    color: colors.text.secondary,
-    fontSize: fontSizes.sm,
-    marginLeft: 6,
-    flex: 1,
-  },
-  gridLikeArea: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  gridLikeCount: {
-    color: colors.text.secondary,
-    fontSize: fontSizes.sm,
-    marginLeft: 4,
-  },
-});
-
 export default PostCard;

src/components/business/PostCard/components/PostImages.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { colors, spacing, borderRadius } from '../../../../theme';
+import { spacing, borderRadius } from '../../../../theme';
 import { useResponsive } from '../../../../hooks/useResponsive';
 import { ImageGrid, ImageGridItem } from '../../../common';
 import { PostImagesProps } from '../types';

src/components/business/QRCodeScanner.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   View,
   Text,
@@ -12,7 +12,7 @@ import { CameraView, useCameraPermissions } from 'expo-camera';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as hrefs from '../../navigation/hrefs';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 
 const { width, height } = Dimensions.get('window');
 
@@ -21,118 +21,8 @@ interface QRCodeScannerProps {
   onClose: () => void;
 }
 
-export const QRCodeScanner: React.FC<QRCodeScannerProps> = ({ visible, onClose }) => {
+function createQrScannerStyles(colors: AppColors) {
-  const router = useRouter();
+  return StyleSheet.create({
-  const [permission, requestPermission] = useCameraPermissions();
-  const [scanned, setScanned] = useState(false);
-
-  useEffect(() => {
-    if (visible) {
-      // 重置扫描状态，确保每次打开都能重新扫描
-      setScanned(false);
-      if (!permission?.granted) {
-        requestPermission();
-      }
-    }
-  }, [visible]);
-
-  const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
-    if (scanned) return;
-    setScanned(true);
-
-    // 先关闭扫描界面，类似微信的做法
-    onClose();
-
-    // 解析二维码内容
-    // 格式: carrotbbs://qrcode/login?session_id=xxx
-    if (data.startsWith('carrotbbs://qrcode/login')) {
-      const sessionId = extractSessionId(data);
-      if (sessionId) {
-        // 跳转到确认页面
-        router.push(hrefs.hrefQrLoginConfirm(sessionId));
-      } else {
-        Alert.alert('无效的二维码', '无法识别该二维码');
-      }
-    } else {
-      Alert.alert('无效的二维码', '请扫描网页端的登录二维码');
-    }
-  };
-
-  const extractSessionId = (url: string): string | null => {
-    try {
-      const sessionIdMatch = url.match(/session_id=([^&]+)/);
-      return sessionIdMatch ? sessionIdMatch[1] : null;
-    } catch {
-      return null;
-    }
-  };
-
-  if (!permission?.granted) {
-    return (
-      <Modal visible={visible} animationType="slide" onRequestClose={onClose}>
-        <View style={styles.container}>
-          <View style={styles.header}>
-            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-              <MaterialCommunityIcons name="close" size={24} color="#fff" />
-            </TouchableOpacity>
-            <Text style={styles.headerTitle}>扫码登录</Text>
-            <View style={styles.placeholder} />
-          </View>
-          <View style={styles.permissionContainer}>
-            <MaterialCommunityIcons name="camera-off" size={64} color="#999" />
-            <Text style={styles.permissionText}>需要相机权限才能扫码</Text>
-            <TouchableOpacity style={styles.permissionButton} onPress={requestPermission}>
-              <Text style={styles.permissionButtonText}>授予权限</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </Modal>
-    );
-  }
-
-  return (
-    <Modal visible={visible} animationType="slide" onRequestClose={onClose}>
-      <View style={styles.container}>
-        <CameraView
-          style={styles.camera}
-          facing="back"
-          onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
-          barcodeScannerSettings={{
-            barcodeTypes: ['qr'],
-          }}
-        >
-          <View style={styles.overlay}>
-            <View style={styles.header}>
-              <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-                <MaterialCommunityIcons name="close" size={24} color="#fff" />
-              </TouchableOpacity>
-              <Text style={styles.headerTitle}>扫码登录</Text>
-              <View style={styles.placeholder} />
-            </View>
-
-            <View style={styles.scanArea}>
-              <View style={styles.scanFrame}>
-                <View style={[styles.corner, styles.topLeft]} />
-                <View style={[styles.corner, styles.topRight]} />
-                <View style={[styles.corner, styles.bottomLeft]} />
-                <View style={[styles.corner, styles.bottomRight]} />
-              </View>
-              <Text style={styles.scanText}>将二维码放入框内即可扫描</Text>
-            </View>
-
-            <View style={styles.footer}>
-              <TouchableOpacity style={styles.flashButton} onPress={() => {}}>
-                <MaterialCommunityIcons name="flashlight" size={24} color="#fff" />
-              </TouchableOpacity>
-            </View>
-          </View>
-        </CameraView>
-      </View>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: '#000',
@@ -228,7 +118,7 @@ const styles = StyleSheet.create({
     permissionText: {
       marginTop: spacing.lg,
       fontSize: fontSizes.md,
-    color: '#666',
+      color: 'rgba(255,255,255,0.72)',
       textAlign: 'center',
     },
     permissionButton: {
@@ -243,6 +133,114 @@ const styles = StyleSheet.create({
       fontSize: fontSizes.md,
       fontWeight: '600',
     },
-});
+  });
+}
+
+export const QRCodeScanner: React.FC<QRCodeScannerProps> = ({ visible, onClose }) => {
+  const router = useRouter();
+  const themeColors = useAppColors();
+  const styles = useMemo(() => createQrScannerStyles(themeColors), [themeColors]);
+  const [permission, requestPermission] = useCameraPermissions();
+  const [scanned, setScanned] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      setScanned(false);
+      if (!permission?.granted) {
+        requestPermission();
+      }
+    }
+  }, [visible]);
+
+  const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
+    if (scanned) return;
+    setScanned(true);
+    onClose();
+
+    if (data.startsWith('carrotbbs://qrcode/login')) {
+      const sessionId = extractSessionId(data);
+      if (sessionId) {
+        router.push(hrefs.hrefQrLoginConfirm(sessionId));
+      } else {
+        Alert.alert('无效的二维码', '无法识别该二维码');
+      }
+    } else {
+      Alert.alert('无效的二维码', '请扫描网页端的登录二维码');
+    }
+  };
+
+  const extractSessionId = (url: string): string | null => {
+    try {
+      const sessionIdMatch = url.match(/session_id=([^&]+)/);
+      return sessionIdMatch ? sessionIdMatch[1] : null;
+    } catch {
+      return null;
+    }
+  };
+
+  if (!permission?.granted) {
+    return (
+      <Modal visible={visible} animationType="slide" onRequestClose={onClose}>
+        <View style={styles.container}>
+          <View style={styles.header}>
+            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+              <MaterialCommunityIcons name="close" size={24} color="#fff" />
+            </TouchableOpacity>
+            <Text style={styles.headerTitle}>扫码登录</Text>
+            <View style={styles.placeholder} />
+          </View>
+          <View style={styles.permissionContainer}>
+            <MaterialCommunityIcons name="camera-off" size={64} color="rgba(255,255,255,0.5)" />
+            <Text style={styles.permissionText}>需要相机权限才能扫码</Text>
+            <TouchableOpacity style={styles.permissionButton} onPress={requestPermission}>
+              <Text style={styles.permissionButtonText}>授予权限</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal visible={visible} animationType="slide" onRequestClose={onClose}>
+      <View style={styles.container}>
+        <CameraView
+          style={styles.camera}
+          facing="back"
+          onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
+          barcodeScannerSettings={{
+            barcodeTypes: ['qr'],
+          }}
+        >
+          <View style={styles.overlay}>
+            <View style={styles.header}>
+              <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                <MaterialCommunityIcons name="close" size={24} color="#fff" />
+              </TouchableOpacity>
+              <Text style={styles.headerTitle}>扫码登录</Text>
+              <View style={styles.placeholder} />
+            </View>
+
+            <View style={styles.scanArea}>
+              <View style={styles.scanFrame}>
+                <View style={[styles.corner, styles.topLeft]} />
+                <View style={[styles.corner, styles.topRight]} />
+                <View style={[styles.corner, styles.bottomLeft]} />
+                <View style={[styles.corner, styles.bottomRight]} />
+              </View>
+              <Text style={styles.scanText}>将二维码放入框内即可扫描</Text>
+            </View>
+
+            <View style={styles.footer}>
+              <TouchableOpacity style={styles.flashButton} onPress={() => {}}>
+                <MaterialCommunityIcons name="flashlight" size={24} color="#fff" />
+              </TouchableOpacity>
+            </View>
+          </View>
+        </CameraView>
+      </View>
+    </Modal>
+  );
+};
 
 export default QRCodeScanner;

src/components/business/SearchBar.tsx

@@ -3,10 +3,10 @@
  * 用于搜索内容
  */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 
 interface SearchBarProps {
   value: string;
@@ -18,69 +18,8 @@ interface SearchBarProps {
   autoFocus?: boolean;
 }
 
-const SearchBar: React.FC<SearchBarProps> = ({
+function createSearchBarStyles(colors: AppColors) {
-  value,
+  return StyleSheet.create({
-  onChangeText,
-  onSubmit,
-  placeholder = '搜索...',
-  onFocus,
-  onBlur,
-  autoFocus = false,
-}) => {
-  const [isFocused, setIsFocused] = useState(false);
-
-  const handleFocus = () => {
-    setIsFocused(true);
-    onFocus?.();
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-    onBlur?.();
-  };
-
-  return (
-    <View style={[styles.container, isFocused && styles.containerFocused]}>
-      <View style={[styles.searchIconWrap, isFocused && styles.searchIconWrapFocused]}>
-        <MaterialCommunityIcons
-          name="magnify"
-          size={18}
-          color={isFocused ? colors.primary.main : colors.text.secondary}
-        />
-      </View>
-      <TextInput
-        style={styles.input}
-        value={value}
-        onChangeText={onChangeText}
-        placeholder={placeholder}
-        placeholderTextColor={colors.text.hint}
-        returnKeyType="search"
-        onSubmitEditing={onSubmit}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        autoFocus={autoFocus}
-        // 确保光标可见
-        cursorColor={colors.primary.main}
-        selectionColor={`${colors.primary.main}40`}
-      />
-      {value.length > 0 && (
-        <TouchableOpacity
-          onPress={() => onChangeText('')}
-          style={styles.clearButton}
-          activeOpacity={0.7}
-        >
-          <MaterialCommunityIcons
-            name="close"
-            size={14}
-            color={colors.text.secondary}
-          />
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
     container: {
       flexDirection: 'row',
       alignItems: 'center',
@@ -89,8 +28,7 @@ const styles = StyleSheet.create({
       paddingHorizontal: spacing.xs,
       height: 46,
       borderWidth: 1,
-    borderColor: '#E7E7E7',
+      borderColor: colors.divider,
-    // 减少常态阴影，避免看起来像"黑框"
       shadowColor: 'transparent',
       shadowOffset: { width: 0, height: 0 },
       shadowOpacity: 0,
@@ -98,9 +36,7 @@ const styles = StyleSheet.create({
       elevation: 0,
     },
     containerFocused: {
-    // 焦点时使用更柔和的边框颜色
       borderColor: colors.primary.main,
-    // 不添加额外的阴影，保持简洁
       shadowColor: 'transparent',
       shadowOffset: { width: 0, height: 0 },
       shadowOpacity: 0,
@@ -136,6 +72,66 @@ const styles = StyleSheet.create({
       alignItems: 'center',
       justifyContent: 'center',
     },
-});
+  });
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({
+  value,
+  onChangeText,
+  onSubmit,
+  placeholder = '搜索...',
+  onFocus,
+  onBlur,
+  autoFocus = false,
+}) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createSearchBarStyles(colors), [colors]);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    onBlur?.();
+  };
+
+  return (
+    <View style={[styles.container, isFocused && styles.containerFocused]}>
+      <View style={[styles.searchIconWrap, isFocused && styles.searchIconWrapFocused]}>
+        <MaterialCommunityIcons
+          name="magnify"
+          size={18}
+          color={isFocused ? colors.primary.main : colors.text.secondary}
+        />
+      </View>
+      <TextInput
+        style={styles.input}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={colors.text.hint}
+        returnKeyType="search"
+        onSubmitEditing={onSubmit}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        autoFocus={autoFocus}
+        cursorColor={colors.primary.main}
+        selectionColor={`${colors.primary.main}40`}
+      />
+      {value.length > 0 && (
+        <TouchableOpacity
+          onPress={() => onChangeText('')}
+          style={styles.clearButton}
+          activeOpacity={0.7}
+        >
+          <MaterialCommunityIcons name="close" size={14} color={colors.text.secondary} />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
 
 export default SearchBar;

src/components/business/SystemMessageItem.tsx

@@ -4,12 +4,12 @@
  * 采用卡片式设计，符合胡萝卜BBS整体风格
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
-import { View, TouchableOpacity, StyleSheet, Animated } from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { formatDistanceToNow } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
-import { colors, spacing, borderRadius, shadows, fontSizes } from '../../theme';
+import { spacing, borderRadius, shadows, fontSizes, useAppColors, type AppColors } from '../../theme';
 import { SystemMessageResponse, SystemMessageType } from '../../types/dto';
 import Text from '../common/Text';
 import Avatar from '../common/Avatar';
@@ -23,9 +23,9 @@ interface SystemMessageItemProps {
   index?: number; // 用于交错动画
 }
 
-// 系统消息类型到图标和颜色的映射
 const getSystemMessageIcon = (
-  systemType: SystemMessageType
+  systemType: SystemMessageType,
+  colors: AppColors
 ): { icon: keyof typeof MaterialCommunityIcons.glyphMap; color: string; bgColor: string; gradient: string[] } => {
   switch (systemType) {
     case 'like_post':
@@ -119,241 +119,8 @@ const getSystemMessageIcon = (
   }
 };
 
-// 获取系统消息标题
+function createSystemMessageStyles(colors: AppColors) {
-const getSystemMessageTitle = (message: SystemMessageResponse): string => {
+  return StyleSheet.create({
-  const { system_type, extra_data } = message;
-  const operatorName = extra_data?.actor_name || extra_data?.operator_name;
-  const groupName = extra_data?.group_name || extra_data?.target_title;
-
-  switch (system_type) {
-    case 'like_post':
-      return operatorName ? `${operatorName} 赞了你的帖子` : '有人赞了你的帖子';
-    case 'like_comment':
-      return operatorName ? `${operatorName} 赞了你的评论` : '有人赞了你的评论';
-    case 'like_reply':
-      return operatorName ? `${operatorName} 赞了你的回复` : '有人赞了你的回复';
-    case 'favorite_post':
-      return operatorName ? `${operatorName} 收藏了你的帖子` : '有人收藏了你的帖子';
-    case 'comment':
-      return operatorName ? `${operatorName} 评论了你的帖子` : '有人评论了你的帖子';
-    case 'reply':
-      return operatorName ? `${operatorName} 回复了你` : '有人回复了你';
-    case 'follow':
-      return operatorName ? `${operatorName} 关注了你` : '有人关注了你';
-    case 'mention':
-      return operatorName ? `${operatorName} @提到了你` : '有人@提到了你';
-    case 'system':
-      return '系统通知';
-    case 'announcement':
-      return '公告';
-    case 'group_invite':
-      return operatorName
-        ? `${operatorName} 邀请加入群聊 ${groupName || ''}`.trim()
-        : `收到群邀请${groupName ? `：${groupName}` : ''}`;
-    case 'group_join_apply':
-      if (extra_data?.request_status === 'accepted') {
-        return operatorName ? `${operatorName} 已同意` : '该请求已同意';
-      }
-      if (extra_data?.request_status === 'rejected') {
-        return operatorName ? `${operatorName} 已拒绝` : '该请求已拒绝';
-      }
-      return operatorName
-        ? `${operatorName} 申请加入群聊 ${groupName || ''}`.trim()
-        : `收到加群申请${groupName ? `：${groupName}` : ''}`;
-    case 'group_join_approved':
-      return '加群申请已通过';
-    case 'group_join_rejected':
-      return '加群申请被拒绝';
-    default:
-      return '通知';
-  }
-};
-
-const SystemMessageItem: React.FC<SystemMessageItemProps> = ({
-  message,
-  onPress,
-  onAvatarPress,
-  onRequestAction,
-  requestActionLoading = false,
-  index = 0,
-}) => {
-  // 格式化时间
-  const formatTime = (dateString: string): string => {
-    try {
-      return formatDistanceToNow(new Date(dateString), {
-        addSuffix: true,
-        locale: zhCN,
-      });
-    } catch {
-      return '';
-    }
-  };
-
-  const { icon, color, bgColor } = getSystemMessageIcon(message.system_type);
-  const title = getSystemMessageTitle(message);
-  const { extra_data } = message;
-  const operatorName = extra_data?.actor_name || extra_data?.operator_name;
-  const operatorAvatar = extra_data?.avatar_url || extra_data?.operator_avatar;
-  const groupAvatar = extra_data?.group_avatar;
-  const requestStatus = extra_data?.request_status;
-  const isActionable =
-    (message.system_type === 'group_invite' || message.system_type === 'group_join_apply') &&
-    requestStatus === 'pending' &&
-    !!onRequestAction;
-  const isUnread = message.is_read !== true;
-
-  // 判断是否显示操作者头像
-  const showOperatorAvatar = ['follow', 'like_post', 'like_comment', 'like_reply', 'favorite_post', 'comment', 'reply', 'mention', 'group_join_apply'].includes(
-    message.system_type
-  );
-  const showGroupAvatar = message.system_type === 'group_invite';
-
-  // 获取状态标签
-  const getStatusBadge = () => {
-    if (requestStatus === 'accepted') {
-      return (
-        <View style={[styles.statusBadge, { backgroundColor: '#E8F5E9' }]}>
-          <MaterialCommunityIcons name="check" size={10} color="#4CAF50" />
-          <Text variant="caption" color="#4CAF50" style={styles.statusText}>已同意</Text>
-        </View>
-      );
-    }
-    if (requestStatus === 'rejected') {
-      return (
-        <View style={[styles.statusBadge, { backgroundColor: '#FFEBEE' }]}>
-          <MaterialCommunityIcons name="close" size={10} color="#F44336" />
-          <Text variant="caption" color="#F44336" style={styles.statusText}>已拒绝</Text>
-        </View>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <TouchableOpacity
-      style={[
-        styles.container,
-        isUnread && styles.unreadContainer,
-      ]}
-      onPress={onPress}
-      activeOpacity={onPress ? 0.85 : 1}
-      disabled={!onPress}
-    >
-      {/* 左侧未读指示器 */}
-      {isUnread && <View style={styles.unreadIndicator} />}
-
-      {/* 图标/头像区域 */}
-      <View style={styles.iconContainer}>
-        {showGroupAvatar ? (
-          <View style={styles.avatarWrapper}>
-            <Avatar
-              source={groupAvatar || ''}
-              size={48}
-              name={extra_data?.group_name || '群聊'}
-            />
-            <View style={[styles.typeIconBadge, { backgroundColor: bgColor }]}>
-              <MaterialCommunityIcons name={icon} size={12} color={color} />
-            </View>
-          </View>
-        ) : showOperatorAvatar ? (
-          <View style={styles.avatarWrapper}>
-            <Avatar
-              source={operatorAvatar || ''}
-              size={48}
-              name={operatorName}
-              onPress={onAvatarPress}
-            />
-            <View style={[styles.typeIconBadge, { backgroundColor: bgColor }]}>
-              <MaterialCommunityIcons name={icon} size={12} color={color} />
-            </View>
-          </View>
-        ) : (
-          <View style={[styles.iconWrapper, { backgroundColor: bgColor }]}>
-            <MaterialCommunityIcons name={icon} size={24} color={color} />
-          </View>
-        )}
-      </View>
-
-      {/* 内容区域 */}
-      <View style={styles.content}>
-        {/* 标题行 */}
-        <View style={styles.titleRow}>
-          <View style={styles.titleLeft}>
-            <Text
-              variant="body"
-              style={[styles.title, ...(isUnread ? [styles.unreadTitle] : [])]}
-              numberOfLines={1}
-            >
-              {title}
-            </Text>
-            {getStatusBadge()}
-          </View>
-          <Text variant="caption" color={colors.text.hint} style={styles.time}>
-            {formatTime(message.created_at)}
-          </Text>
-        </View>
-
-        {/* 消息内容 */}
-        <Text 
-          variant="caption" 
-          color={colors.text.secondary} 
-          numberOfLines={2} 
-          style={styles.messageContent}
-        >
-          {message.content}
-        </Text>
-
-        {/* 附加信息 */}
-        {(extra_data?.target_title || extra_data?.post_title || extra_data?.comment_preview) &&
-          !['group_invite', 'group_join_apply', 'group_join_approved', 'group_join_rejected'].includes(message.system_type) &&
-          (() => {
-            const isCommentType = ['comment', 'reply'].includes(extra_data?.target_type ?? '');
-            const previewText = extra_data?.target_title || extra_data?.post_title || extra_data?.comment_preview;
-            const iconName = isCommentType ? 'comment-text-outline' : 'file-document-outline';
-            return (
-              <View style={styles.extraInfo}>
-                <MaterialCommunityIcons name={iconName} size={12} color={colors.primary.main} />
-                <Text variant="caption" color={colors.primary.main} numberOfLines={1} style={styles.extraText}>
-                  {previewText}
-                </Text>
-              </View>
-            );
-          })()}
-
-        {/* 操作按钮 */}
-        {isActionable && (
-          <View style={styles.actionsRow}>
-            <TouchableOpacity
-              style={[styles.actionBtn, styles.rejectBtn]}
-              onPress={() => onRequestAction?.(false)}
-              disabled={requestActionLoading}
-            >
-              <MaterialCommunityIcons name="close" size={14} color="#F44336" />
-              <Text variant="caption" color="#F44336" style={styles.actionBtnText}>拒绝</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={[styles.actionBtn, styles.approveBtn]}
-              onPress={() => onRequestAction?.(true)}
-              disabled={requestActionLoading}
-            >
-              <MaterialCommunityIcons name="check" size={14} color="#4CAF50" />
-              <Text variant="caption" color="#4CAF50" style={styles.actionBtnText}>同意</Text>
-            </TouchableOpacity>
-          </View>
-        )}
-      </View>
-
-      {/* 右侧箭头 */}
-      {onPress && (
-        <View style={styles.arrowContainer}>
-          <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
-        </View>
-      )}
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
     container: {
       flexDirection: 'row',
       alignItems: 'flex-start',
@@ -481,12 +248,12 @@ const styles = StyleSheet.create({
       gap: spacing.xs,
     },
     rejectBtn: {
-    borderColor: '#FFCDD2',
+      borderColor: `${colors.error.main}55`,
-    backgroundColor: '#FFEBEE',
+      backgroundColor: `${colors.error.main}18`,
     },
     approveBtn: {
-    borderColor: '#C8E6C9',
+      borderColor: `${colors.success.main}55`,
-    backgroundColor: '#E8F5E9',
+      backgroundColor: `${colors.success.main}18`,
     },
     actionBtnText: {
       fontWeight: '500',
@@ -498,6 +265,244 @@ const styles = StyleSheet.create({
       height: 20,
       width: 20,
     },
-});
+  });
+}
+
+// 获取系统消息标题
+const getSystemMessageTitle = (message: SystemMessageResponse): string => {
+  const { system_type, extra_data } = message;
+  const operatorName = extra_data?.actor_name || extra_data?.operator_name;
+  const groupName = extra_data?.group_name || extra_data?.target_title;
+
+  switch (system_type) {
+    case 'like_post':
+      return operatorName ? `${operatorName} 赞了你的帖子` : '有人赞了你的帖子';
+    case 'like_comment':
+      return operatorName ? `${operatorName} 赞了你的评论` : '有人赞了你的评论';
+    case 'like_reply':
+      return operatorName ? `${operatorName} 赞了你的回复` : '有人赞了你的回复';
+    case 'favorite_post':
+      return operatorName ? `${operatorName} 收藏了你的帖子` : '有人收藏了你的帖子';
+    case 'comment':
+      return operatorName ? `${operatorName} 评论了你的帖子` : '有人评论了你的帖子';
+    case 'reply':
+      return operatorName ? `${operatorName} 回复了你` : '有人回复了你';
+    case 'follow':
+      return operatorName ? `${operatorName} 关注了你` : '有人关注了你';
+    case 'mention':
+      return operatorName ? `${operatorName} @提到了你` : '有人@提到了你';
+    case 'system':
+      return '系统通知';
+    case 'announcement':
+      return '公告';
+    case 'group_invite':
+      return operatorName
+        ? `${operatorName} 邀请加入群聊 ${groupName || ''}`.trim()
+        : `收到群邀请${groupName ? `：${groupName}` : ''}`;
+    case 'group_join_apply':
+      if (extra_data?.request_status === 'accepted') {
+        return operatorName ? `${operatorName} 已同意` : '该请求已同意';
+      }
+      if (extra_data?.request_status === 'rejected') {
+        return operatorName ? `${operatorName} 已拒绝` : '该请求已拒绝';
+      }
+      return operatorName
+        ? `${operatorName} 申请加入群聊 ${groupName || ''}`.trim()
+        : `收到加群申请${groupName ? `：${groupName}` : ''}`;
+    case 'group_join_approved':
+      return '加群申请已通过';
+    case 'group_join_rejected':
+      return '加群申请被拒绝';
+    default:
+      return '通知';
+  }
+};
+
+const SystemMessageItem: React.FC<SystemMessageItemProps> = ({
+  message,
+  onPress,
+  onAvatarPress,
+  onRequestAction,
+  requestActionLoading = false,
+  index = 0,
+}) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createSystemMessageStyles(colors), [colors]);
+
+  // 格式化时间
+  const formatTime = (dateString: string): string => {
+    try {
+      return formatDistanceToNow(new Date(dateString), {
+        addSuffix: true,
+        locale: zhCN,
+      });
+    } catch {
+      return '';
+    }
+  };
+
+  const { icon, color, bgColor } = getSystemMessageIcon(message.system_type, colors);
+  const title = getSystemMessageTitle(message);
+  const { extra_data } = message;
+  const operatorName = extra_data?.actor_name || extra_data?.operator_name;
+  const operatorAvatar = extra_data?.avatar_url || extra_data?.operator_avatar;
+  const groupAvatar = extra_data?.group_avatar;
+  const requestStatus = extra_data?.request_status;
+  const isActionable =
+    (message.system_type === 'group_invite' || message.system_type === 'group_join_apply') &&
+    requestStatus === 'pending' &&
+    !!onRequestAction;
+  const isUnread = message.is_read !== true;
+
+  // 判断是否显示操作者头像
+  const showOperatorAvatar = ['follow', 'like_post', 'like_comment', 'like_reply', 'favorite_post', 'comment', 'reply', 'mention', 'group_join_apply'].includes(
+    message.system_type
+  );
+  const showGroupAvatar = message.system_type === 'group_invite';
+
+  // 获取状态标签
+  const getStatusBadge = () => {
+    if (requestStatus === 'accepted') {
+      return (
+        <View style={[styles.statusBadge, { backgroundColor: `${colors.success.main}22` }]}>
+          <MaterialCommunityIcons name="check" size={10} color={colors.success.main} />
+          <Text variant="caption" color={colors.success.main} style={styles.statusText}>已同意</Text>
+        </View>
+      );
+    }
+    if (requestStatus === 'rejected') {
+      return (
+        <View style={[styles.statusBadge, { backgroundColor: `${colors.error.main}22` }]}>
+          <MaterialCommunityIcons name="close" size={10} color={colors.error.main} />
+          <Text variant="caption" color={colors.error.main} style={styles.statusText}>已拒绝</Text>
+        </View>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        isUnread && styles.unreadContainer,
+      ]}
+      onPress={onPress}
+      activeOpacity={onPress ? 0.85 : 1}
+      disabled={!onPress}
+    >
+      {/* 左侧未读指示器 */}
+      {isUnread && <View style={styles.unreadIndicator} />}
+
+      {/* 图标/头像区域 */}
+      <View style={styles.iconContainer}>
+        {showGroupAvatar ? (
+          <View style={styles.avatarWrapper}>
+            <Avatar
+              source={groupAvatar || ''}
+              size={48}
+              name={extra_data?.group_name || '群聊'}
+            />
+            <View style={[styles.typeIconBadge, { backgroundColor: bgColor }]}>
+              <MaterialCommunityIcons name={icon} size={12} color={color} />
+            </View>
+          </View>
+        ) : showOperatorAvatar ? (
+          <View style={styles.avatarWrapper}>
+            <Avatar
+              source={operatorAvatar || ''}
+              size={48}
+              name={operatorName}
+              onPress={onAvatarPress}
+            />
+            <View style={[styles.typeIconBadge, { backgroundColor: bgColor }]}>
+              <MaterialCommunityIcons name={icon} size={12} color={color} />
+            </View>
+          </View>
+        ) : (
+          <View style={[styles.iconWrapper, { backgroundColor: bgColor }]}>
+            <MaterialCommunityIcons name={icon} size={24} color={color} />
+          </View>
+        )}
+      </View>
+
+      {/* 内容区域 */}
+      <View style={styles.content}>
+        {/* 标题行 */}
+        <View style={styles.titleRow}>
+          <View style={styles.titleLeft}>
+            <Text
+              variant="body"
+              style={[styles.title, ...(isUnread ? [styles.unreadTitle] : [])]}
+              numberOfLines={1}
+            >
+              {title}
+            </Text>
+            {getStatusBadge()}
+          </View>
+          <Text variant="caption" color={colors.text.hint} style={styles.time}>
+            {formatTime(message.created_at)}
+          </Text>
+        </View>
+
+        {/* 消息内容 */}
+        <Text 
+          variant="caption" 
+          color={colors.text.secondary} 
+          numberOfLines={2} 
+          style={styles.messageContent}
+        >
+          {message.content}
+        </Text>
+
+        {/* 附加信息 */}
+        {(extra_data?.target_title || extra_data?.post_title || extra_data?.comment_preview) &&
+          !['group_invite', 'group_join_apply', 'group_join_approved', 'group_join_rejected'].includes(message.system_type) &&
+          (() => {
+            const isCommentType = ['comment', 'reply'].includes(extra_data?.target_type ?? '');
+            const previewText = extra_data?.target_title || extra_data?.post_title || extra_data?.comment_preview;
+            const iconName = isCommentType ? 'comment-text-outline' : 'file-document-outline';
+            return (
+              <View style={styles.extraInfo}>
+                <MaterialCommunityIcons name={iconName} size={12} color={colors.primary.main} />
+                <Text variant="caption" color={colors.primary.main} numberOfLines={1} style={styles.extraText}>
+                  {previewText}
+                </Text>
+              </View>
+            );
+          })()}
+
+        {/* 操作按钮 */}
+        {isActionable && (
+          <View style={styles.actionsRow}>
+            <TouchableOpacity
+              style={[styles.actionBtn, styles.rejectBtn]}
+              onPress={() => onRequestAction?.(false)}
+              disabled={requestActionLoading}
+            >
+              <MaterialCommunityIcons name="close" size={14} color={colors.error.main} />
+              <Text variant="caption" color={colors.error.main} style={styles.actionBtnText}>拒绝</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.actionBtn, styles.approveBtn]}
+              onPress={() => onRequestAction?.(true)}
+              disabled={requestActionLoading}
+            >
+              <MaterialCommunityIcons name="check" size={14} color={colors.success.main} />
+              <Text variant="caption" color={colors.success.main} style={styles.actionBtnText}>同意</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      </View>
+
+      {/* 右侧箭头 */}
+      {onPress && (
+        <View style={styles.arrowContainer}>
+          <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
 
 export default SystemMessageItem;

src/components/business/TabBar.tsx

@@ -4,10 +4,10 @@
  * 新增胶囊式、分段式等现代设计风格
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useMemo } from 'react';
-import { View, TouchableOpacity, StyleSheet, ScrollView, Animated, ViewStyle, StyleProp } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, ScrollView, ViewStyle, StyleProp } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 import Text from '../common/Text';
 
 type TabBarVariant = 'default' | 'pill' | 'segmented' | 'modern';
@@ -20,10 +20,168 @@ interface TabBarProps {
   rightContent?: ReactNode;
   variant?: TabBarVariant;
   icons?: string[];
-  /** 合并到最外层容器，用于按页面微调外边距等 */
   style?: StyleProp<ViewStyle>;
 }
 
+function createTabBarStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      backgroundColor: colors.background.paper,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.divider,
+      alignItems: 'center',
+      paddingRight: spacing.xs,
+    },
+    scrollableContainer: {
+      flexDirection: 'row',
+      paddingHorizontal: spacing.md,
+      backgroundColor: colors.background.paper,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.divider,
+      flex: 1,
+    },
+    tab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: spacing.md,
+      position: 'relative',
+    },
+    activeTab: {},
+    tabText: {
+      fontWeight: '500',
+    },
+    activeTabText: {
+      fontWeight: '600',
+    },
+    activeIndicator: {
+      position: 'absolute',
+      bottom: 0,
+      left: '25%',
+      right: '25%',
+      height: 3,
+      backgroundColor: colors.primary.main,
+      borderTopLeftRadius: borderRadius.sm,
+      borderTopRightRadius: borderRadius.sm,
+    },
+    rightContent: {
+      paddingLeft: spacing.sm,
+    },
+    pillContainer: {
+      flexDirection: 'row',
+      backgroundColor: colors.background.default,
+      padding: spacing.sm,
+      gap: spacing.sm,
+    },
+    pillTab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: spacing.sm,
+      paddingHorizontal: spacing.md,
+      borderRadius: borderRadius.lg,
+      backgroundColor: colors.background.paper,
+    },
+    pillTabActive: {
+      backgroundColor: colors.primary.main,
+    },
+    pillTabText: {
+      fontWeight: '600',
+    },
+    segmentedContainer: {
+      flexDirection: 'row',
+      backgroundColor: colors.background.default,
+      padding: spacing.xs,
+      marginHorizontal: spacing.md,
+      marginVertical: spacing.sm,
+      borderRadius: borderRadius.lg,
+    },
+    segmentedTab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: spacing.sm,
+      backgroundColor: 'transparent',
+    },
+    segmentedTabActive: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.md,
+      shadowColor: colors.chat.shadow,
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 2,
+      elevation: 2,
+    },
+    segmentedTabFirst: {
+      borderTopLeftRadius: borderRadius.md,
+      borderBottomLeftRadius: borderRadius.md,
+    },
+    segmentedTabLast: {
+      borderTopRightRadius: borderRadius.md,
+      borderBottomRightRadius: borderRadius.md,
+    },
+    segmentedTabText: {
+      fontWeight: '600',
+    },
+    segmentedTabContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    segmentedTabIcon: {
+      marginRight: spacing.xs,
+    },
+    modernContainer: {
+      flexDirection: 'row',
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.xl,
+      marginHorizontal: spacing.lg,
+      marginVertical: spacing.md,
+      padding: spacing.xs,
+      shadowColor: colors.chat.shadow,
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.08,
+      shadowRadius: 8,
+      elevation: 3,
+    },
+    modernTab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: spacing.sm,
+      borderRadius: borderRadius.lg,
+      position: 'relative',
+    },
+    modernTabActive: {
+      backgroundColor: colors.primary.main + '15',
+    },
+    modernTabContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    modernTabIcon: {
+      marginRight: spacing.xs,
+    },
+    modernTabText: {
+      fontWeight: '500',
+      fontSize: fontSizes.md,
+    },
+    modernTabTextActive: {
+      fontWeight: '700',
+    },
+    modernTabIndicator: {
+      position: 'absolute',
+      bottom: 4,
+      width: 20,
+      height: 3,
+      backgroundColor: colors.primary.main,
+      borderRadius: borderRadius.full,
+    },
+  });
+}
+
 const TabBar: React.FC<TabBarProps> = ({
   tabs,
   activeIndex,
@@ -34,6 +192,9 @@ const TabBar: React.FC<TabBarProps> = ({
   icons,
   style,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createTabBarStyles(colors), [colors]);
+
   const renderTabs = () => {
     return tabs.map((tab, index) => {
       const isActive = index === activeIndex;
@@ -112,11 +273,7 @@ const TabBar: React.FC<TabBarProps> = ({
                   style={styles.segmentedTabIcon}
                 />
               )}
-              <Text
+              <Text variant="body" color={isActive ? colors.primary.main : colors.text.secondary} style={styles.segmentedTabText}>
-                variant="body"
-                color={isActive ? colors.primary.main : colors.text.secondary}
-                style={styles.segmentedTabText}
-              >
                 {tab}
               </Text>
             </View>
@@ -124,7 +281,6 @@ const TabBar: React.FC<TabBarProps> = ({
         );
       }
 
-      // default variant
       return (
         <TouchableOpacity
           key={index}
@@ -161,11 +317,7 @@ const TabBar: React.FC<TabBarProps> = ({
   if (scrollable) {
     return (
       <View style={[getContainerStyle(), style]}>
-        <ScrollView
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scrollableContainer}>
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.scrollableContainer}
-        >
           {renderTabs()}
         </ScrollView>
         {rightContent && <View style={styles.rightContent}>{rightContent}</View>}
@@ -181,170 +333,4 @@ const TabBar: React.FC<TabBarProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  // Default variant
-  container: {
-    flexDirection: 'row',
-    backgroundColor: colors.background.paper,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
-    alignItems: 'center',
-    paddingRight: spacing.xs,
-  },
-  scrollableContainer: {
-    flexDirection: 'row',
-    paddingHorizontal: spacing.md,
-    backgroundColor: colors.background.paper,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
-    flex: 1,
-  },
-  tab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: spacing.md,
-    position: 'relative',
-  },
-  activeTab: {
-    // 激活状态样式
-  },
-  tabText: {
-    fontWeight: '500',
-  },
-  activeTabText: {
-    fontWeight: '600',
-  },
-  activeIndicator: {
-    position: 'absolute',
-    bottom: 0,
-    left: '25%',
-    right: '25%',
-    height: 3,
-    backgroundColor: colors.primary.main,
-    borderTopLeftRadius: borderRadius.sm,
-    borderTopRightRadius: borderRadius.sm,
-  },
-  rightContent: {
-    paddingLeft: spacing.sm,
-  },
-  
-  // Pill variant
-  pillContainer: {
-    flexDirection: 'row',
-    backgroundColor: colors.background.default,
-    padding: spacing.sm,
-    gap: spacing.sm,
-  },
-  pillTab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: spacing.sm,
-    paddingHorizontal: spacing.md,
-    borderRadius: borderRadius.lg,
-    backgroundColor: colors.background.paper,
-  },
-  pillTabActive: {
-    backgroundColor: colors.primary.main,
-  },
-  pillTabText: {
-    fontWeight: '600',
-  },
-  
-  // Segmented variant
-  segmentedContainer: {
-    flexDirection: 'row',
-    backgroundColor: colors.background.default,
-    padding: spacing.xs,
-    marginHorizontal: spacing.md,
-    marginVertical: spacing.sm,
-    borderRadius: borderRadius.lg,
-  },
-  segmentedTab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: spacing.sm,
-    backgroundColor: 'transparent',
-  },
-  segmentedTabActive: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.md,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  segmentedTabFirst: {
-    borderTopLeftRadius: borderRadius.md,
-    borderBottomLeftRadius: borderRadius.md,
-  },
-  segmentedTabLast: {
-    borderTopRightRadius: borderRadius.md,
-    borderBottomRightRadius: borderRadius.md,
-  },
-  segmentedTabText: {
-    fontWeight: '600',
-  },
-  segmentedTabContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  segmentedTabIcon: {
-    marginRight: spacing.xs,
-  },
-
-  // Modern variant - 现代化标签栏
-  modernContainer: {
-    flexDirection: 'row',
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.xl,
-    marginHorizontal: spacing.lg,
-    marginVertical: spacing.md,
-    padding: spacing.xs,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.08,
-    shadowRadius: 8,
-    elevation: 3,
-  },
-  modernTab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: spacing.sm,
-    borderRadius: borderRadius.lg,
-    position: 'relative',
-  },
-  modernTabActive: {
-    backgroundColor: colors.primary.main + '15', // 10% opacity
-  },
-  modernTabContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  modernTabIcon: {
-    marginRight: spacing.xs,
-  },
-  modernTabText: {
-    fontWeight: '500',
-    fontSize: fontSizes.md,
-  },
-  modernTabTextActive: {
-    fontWeight: '700',
-  },
-  modernTabIndicator: {
-    position: 'absolute',
-    bottom: 4,
-    width: 20,
-    height: 3,
-    backgroundColor: colors.primary.main,
-    borderRadius: borderRadius.full,
-  },
-});
-
 export default TabBar;

src/components/business/UserProfileHeader.tsx

@@ -6,7 +6,7 @@
  * 在宽屏下显示更大的头像和封面
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   Image,
@@ -15,7 +15,7 @@ import {
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
-import { colors, spacing, fontSizes, borderRadius, shadows } from '../../theme';
+import { spacing, fontSizes, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { User } from '../../types';
 import Text from '../common/Text';
 import Button from '../common/Button';
@@ -49,7 +49,8 @@ const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
   onFollowersPress,
   onAvatarPress,
 }) => {
-  // 响应式布局
+  const colors = useAppColors();
+  const styles = useMemo(() => createUserProfileHeaderStyles(colors), [colors]);
   const { isWideScreen, isDesktop, width } = useResponsive();
 
   // 格式化数字
@@ -317,7 +318,8 @@ const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+function createUserProfileHeaderStyles(colors: AppColors) {
+  return StyleSheet.create({
   container: {
     backgroundColor: colors.background.default,
   },
@@ -533,7 +535,8 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     padding: spacing.sm,
   },
-});
+  });
+}
 
 // 使用 React.memo 避免不必要的重新渲染
 const MemoizedUserProfileHeader = React.memo(UserProfileHeader);

src/components/business/VoteCard.tsx

@@ -4,7 +4,7 @@
  * 风格与现代整体UI保持一致
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   View,
   TouchableOpacity,
@@ -12,7 +12,7 @@ import {
   Animated,
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 import { VoteOptionDTO } from '../../types';
 import Text from '../common/Text';
 
@@ -28,208 +28,8 @@ interface VoteCardProps {
   compact?: boolean;
 }
 
-const VoteCard: React.FC<VoteCardProps> = ({
+function createVoteCardStyles(colors: AppColors) {
-  options,
+  return StyleSheet.create({
-  totalVotes,
-  hasVoted,
-  votedOptionId,
-  onVote,
-  onUnvote,
-  isLoading = false,
-  compact = false,
-}) => {
-  // 动画值
-  const progressAnim = React.useRef(new Animated.Value(0)).current;
-
-  React.useEffect(() => {
-    Animated.timing(progressAnim, {
-      toValue: 1,
-      duration: 400,
-      useNativeDriver: false,
-    }).start();
-  }, [hasVoted, totalVotes]);
-
-  // 计算百分比
-  const calculatePercentage = useCallback((votes: number): number => {
-    if (totalVotes === 0) return 0;
-    return Math.round((votes / totalVotes) * 100);
-  }, [totalVotes]);
-
-  // 格式化票数
-  const formatVoteCount = useCallback((count: number): string => {
-    if (count >= 10000) {
-      return (count / 10000).toFixed(1) + '万';
-    }
-    if (count >= 1000) {
-      return (count / 1000).toFixed(1) + 'k';
-    }
-    return count.toString();
-  }, []);
-
-  // 处理投票
-  const handleVote = useCallback((optionId: string) => {
-    if (isLoading || hasVoted) return;
-    onVote(optionId);
-  }, [isLoading, hasVoted, onVote]);
-
-  // 处理取消投票
-  const handleUnvote = useCallback(() => {
-    if (isLoading || !hasVoted) return;
-    onUnvote();
-  }, [isLoading, hasVoted, onUnvote]);
-
-  // 渲染投票选项
-  const renderOption = useCallback((option: VoteOptionDTO, index: number) => {
-    const isVotedOption = votedOptionId === option.id;
-    const percentage = calculatePercentage(option.votes_count);
-    const showResults = hasVoted;
-
-    return (
-      <View key={option.id} style={styles.optionContainer}>
-        {/* 进度条背景 */}
-        {showResults && (
-          <Animated.View
-            style={[
-              styles.progressBar,
-              {
-                width: progressAnim.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: ['0%', `${percentage}%`],
-                }),
-                backgroundColor: isVotedOption
-                  ? colors.primary.light + '40'
-                  : colors.background.disabled,
-              },
-            ]}
-          />
-        )}
-
-        {/* 选项按钮 */}
-        <TouchableOpacity
-          style={[
-            styles.optionButton,
-            isVotedOption && styles.optionButtonVoted,
-          ]}
-          onPress={() => handleVote(option.id)}
-          disabled={isLoading || hasVoted}
-          activeOpacity={hasVoted ? 1 : 0.8}
-        >
-          {/* 选择指示器 */}
-          <View style={[
-            styles.optionIndicator,
-            isVotedOption && styles.optionIndicatorVoted,
-          ]}>
-            {isVotedOption && (
-              <MaterialCommunityIcons
-                name="check"
-                size={12}
-                color={colors.primary.contrast}
-              />
-            )}
-          </View>
-
-          {/* 选项内容 */}
-          <Text
-            variant={compact ? 'caption' : 'body'}
-            style={compact ? [styles.optionText, styles.optionTextCompact] : styles.optionText}
-            numberOfLines={compact ? 1 : 2}
-          >
-            {option.content}
-          </Text>
-
-          {/* 投票结果 */}
-          {showResults && (
-            <View style={styles.resultContainer}>
-              <Text
-                variant="caption"
-                style={isVotedOption ? [styles.percentage, styles.percentageVoted] : styles.percentage}
-              >
-                {percentage}%
-              </Text>
-            </View>
-          )}
-        </TouchableOpacity>
-      </View>
-    );
-  }, [hasVoted, votedOptionId, calculatePercentage, handleVote, isLoading, progressAnim, compact]);
-
-  // 排序后的选项（已投票的排在前面）
-  const sortedOptions = React.useMemo(() => {
-    if (!hasVoted) return options;
-    return [...options].sort((a, b) => {
-      if (a.id === votedOptionId) return -1;
-      if (b.id === votedOptionId) return 1;
-      return b.votes_count - a.votes_count;
-    });
-  }, [options, hasVoted, votedOptionId]);
-
-  return (
-    <View style={[styles.container, compact && styles.containerCompact]}>
-      {/* 投票图标和标题 */}
-      <View style={styles.header}>
-        <View style={styles.headerIcon}>
-          <MaterialCommunityIcons
-            name="vote"
-            size={compact ? 14 : 16}
-            color={colors.primary.main}
-          />
-        </View>
-        <Text variant={compact ? 'caption' : 'body'} style={styles.headerTitle}>
-          投票
-        </Text>
-      </View>
-
-      {/* 投票选项列表 */}
-      <View style={styles.optionsList}>
-        {sortedOptions.map((option, index) => renderOption(option, index))}
-      </View>
-
-      {/* 底部信息栏 */}
-      <View style={styles.footer}>
-        <View style={styles.footerLeft}>
-          <MaterialCommunityIcons
-            name="account-group-outline"
-            size={14}
-            color={colors.text.hint}
-          />
-          <Text variant="caption" color={colors.text.hint} style={styles.footerText}>
-            {formatVoteCount(totalVotes)} 人参与
-          </Text>
-        </View>
-        
-        {hasVoted && (
-          <TouchableOpacity
-            style={styles.unvoteButton}
-            onPress={handleUnvote}
-            disabled={isLoading}
-          >
-            <MaterialCommunityIcons
-              name="refresh"
-              size={14}
-              color={colors.text.hint}
-            />
-            <Text variant="caption" color={colors.text.hint} style={styles.unvoteText}>
-              重选
-            </Text>
-          </TouchableOpacity>
-        )}
-      </View>
-
-      {/* 加载遮罩 */}
-      {isLoading && (
-        <View style={styles.loadingOverlay}>
-          <MaterialCommunityIcons
-            name="loading"
-            size={24}
-            color={colors.primary.main}
-          />
-        </View>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
     container: {
       backgroundColor: colors.background.paper,
       borderRadius: borderRadius.lg,
@@ -365,6 +165,209 @@ const styles = StyleSheet.create({
       alignItems: 'center',
       borderRadius: borderRadius.lg,
     },
-});
+  });
+}
+
+const VoteCard: React.FC<VoteCardProps> = ({
+  options,
+  totalVotes,
+  hasVoted,
+  votedOptionId,
+  onVote,
+  onUnvote,
+  isLoading = false,
+  compact = false,
+}) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createVoteCardStyles(colors), [colors]);
+  const progressAnim = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    Animated.timing(progressAnim, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: false,
+    }).start();
+  }, [hasVoted, totalVotes]);
+
+  // 计算百分比
+  const calculatePercentage = useCallback((votes: number): number => {
+    if (totalVotes === 0) return 0;
+    return Math.round((votes / totalVotes) * 100);
+  }, [totalVotes]);
+
+  // 格式化票数
+  const formatVoteCount = useCallback((count: number): string => {
+    if (count >= 10000) {
+      return (count / 10000).toFixed(1) + '万';
+    }
+    if (count >= 1000) {
+      return (count / 1000).toFixed(1) + 'k';
+    }
+    return count.toString();
+  }, []);
+
+  // 处理投票
+  const handleVote = useCallback((optionId: string) => {
+    if (isLoading || hasVoted) return;
+    onVote(optionId);
+  }, [isLoading, hasVoted, onVote]);
+
+  // 处理取消投票
+  const handleUnvote = useCallback(() => {
+    if (isLoading || !hasVoted) return;
+    onUnvote();
+  }, [isLoading, hasVoted, onUnvote]);
+
+  // 渲染投票选项
+  const renderOption = useCallback((option: VoteOptionDTO, index: number) => {
+    const isVotedOption = votedOptionId === option.id;
+    const percentage = calculatePercentage(option.votes_count);
+    const showResults = hasVoted;
+
+    return (
+      <View key={option.id} style={styles.optionContainer}>
+        {/* 进度条背景 */}
+        {showResults && (
+          <Animated.View
+            style={[
+              styles.progressBar,
+              {
+                width: progressAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: ['0%', `${percentage}%`],
+                }),
+                backgroundColor: isVotedOption
+                  ? colors.primary.light + '40'
+                  : colors.background.disabled,
+              },
+            ]}
+          />
+        )}
+
+        {/* 选项按钮 */}
+        <TouchableOpacity
+          style={[
+            styles.optionButton,
+            isVotedOption && styles.optionButtonVoted,
+          ]}
+          onPress={() => handleVote(option.id)}
+          disabled={isLoading || hasVoted}
+          activeOpacity={hasVoted ? 1 : 0.8}
+        >
+          {/* 选择指示器 */}
+          <View style={[
+            styles.optionIndicator,
+            isVotedOption && styles.optionIndicatorVoted,
+          ]}>
+            {isVotedOption && (
+              <MaterialCommunityIcons
+                name="check"
+                size={12}
+                color={colors.primary.contrast}
+              />
+            )}
+          </View>
+
+          {/* 选项内容 */}
+          <Text
+            variant={compact ? 'caption' : 'body'}
+            style={compact ? [styles.optionText, styles.optionTextCompact] : styles.optionText}
+            numberOfLines={compact ? 1 : 2}
+          >
+            {option.content}
+          </Text>
+
+          {/* 投票结果 */}
+          {showResults && (
+            <View style={styles.resultContainer}>
+              <Text
+                variant="caption"
+                style={isVotedOption ? [styles.percentage, styles.percentageVoted] : styles.percentage}
+              >
+                {percentage}%
+              </Text>
+            </View>
+          )}
+        </TouchableOpacity>
+      </View>
+    );
+  }, [hasVoted, votedOptionId, calculatePercentage, handleVote, isLoading, progressAnim, compact, colors, styles]);
+
+  // 排序后的选项（已投票的排在前面）
+  const sortedOptions = React.useMemo(() => {
+    if (!hasVoted) return options;
+    return [...options].sort((a, b) => {
+      if (a.id === votedOptionId) return -1;
+      if (b.id === votedOptionId) return 1;
+      return b.votes_count - a.votes_count;
+    });
+  }, [options, hasVoted, votedOptionId]);
+
+  return (
+    <View style={[styles.container, compact && styles.containerCompact]}>
+      {/* 投票图标和标题 */}
+      <View style={styles.header}>
+        <View style={styles.headerIcon}>
+          <MaterialCommunityIcons
+            name="vote"
+            size={compact ? 14 : 16}
+            color={colors.primary.main}
+          />
+        </View>
+        <Text variant={compact ? 'caption' : 'body'} style={styles.headerTitle}>
+          投票
+        </Text>
+      </View>
+
+      {/* 投票选项列表 */}
+      <View style={styles.optionsList}>
+        {sortedOptions.map((option, index) => renderOption(option, index))}
+      </View>
+
+      {/* 底部信息栏 */}
+      <View style={styles.footer}>
+        <View style={styles.footerLeft}>
+          <MaterialCommunityIcons
+            name="account-group-outline"
+            size={14}
+            color={colors.text.hint}
+          />
+          <Text variant="caption" color={colors.text.hint} style={styles.footerText}>
+            {formatVoteCount(totalVotes)} 人参与
+          </Text>
+        </View>
+        
+        {hasVoted && (
+          <TouchableOpacity
+            style={styles.unvoteButton}
+            onPress={handleUnvote}
+            disabled={isLoading}
+          >
+            <MaterialCommunityIcons
+              name="refresh"
+              size={14}
+              color={colors.text.hint}
+            />
+            <Text variant="caption" color={colors.text.hint} style={styles.unvoteText}>
+              重选
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {/* 加载遮罩 */}
+      {isLoading && (
+        <View style={styles.loadingOverlay}>
+          <MaterialCommunityIcons
+            name="loading"
+            size={24}
+            color={colors.primary.main}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
 
 export default VoteCard;

src/components/business/VoteEditor.tsx

@@ -3,7 +3,7 @@
  * 用于创建帖子时编辑投票选项
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   View,
   TouchableOpacity,
@@ -11,7 +11,7 @@ import {
   TextInput,
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 import Text from '../common/Text';
 
 interface VoteEditorProps {
@@ -24,6 +24,86 @@ interface VoteEditorProps {
   maxLength?: number;
 }
 
+function createVoteEditorStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      backgroundColor: colors.background.default,
+      borderRadius: borderRadius.lg,
+      marginHorizontal: spacing.lg,
+      marginTop: spacing.md,
+      marginBottom: spacing.md,
+      padding: spacing.md,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: spacing.md,
+    },
+    headerLeft: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: spacing.sm,
+    },
+    headerTitle: {
+      fontWeight: '600',
+      color: colors.text.primary,
+    },
+    optionsContainer: {
+      gap: spacing.sm,
+    },
+    optionRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: spacing.sm,
+    },
+    optionIndex: {
+      width: 20,
+      height: 20,
+      borderRadius: borderRadius.full,
+      backgroundColor: colors.background.disabled,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    optionInput: {
+      flex: 1,
+      fontSize: fontSizes.md,
+      color: colors.text.primary,
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.md,
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm,
+      borderWidth: 1,
+      borderColor: colors.divider,
+      height: 44,
+    },
+    removeButton: {
+      padding: spacing.xs,
+    },
+    removeButtonPlaceholder: {
+      width: 28,
+    },
+    addOptionButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: spacing.sm,
+      paddingVertical: spacing.sm,
+      marginTop: spacing.xs,
+    },
+    addOptionText: {
+      fontWeight: '500',
+    },
+    hintContainer: {
+      marginTop: spacing.md,
+      paddingTop: spacing.sm,
+      borderTopWidth: StyleSheet.hairlineWidth,
+      borderTopColor: colors.divider,
+      alignItems: 'center',
+    },
+  });
+}
+
 const VoteEditor: React.FC<VoteEditorProps> = ({
   options,
   onAddOption,
@@ -33,6 +113,8 @@ const VoteEditor: React.FC<VoteEditorProps> = ({
   minOptions = 2,
   maxLength = 50,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createVoteEditorStyles(colors), [colors]);
   const validOptionsCount = options.filter(opt => opt.trim() !== '').length;
   const canAddOption = options.length < maxOptions;
   const canRemoveOption = options.length > minOptions;
@@ -122,82 +204,4 @@ const VoteEditor: React.FC<VoteEditorProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: colors.background.default,
-    borderRadius: borderRadius.lg,
-    marginHorizontal: spacing.lg,
-    marginTop: spacing.md,
-    marginBottom: spacing.md,
-    padding: spacing.md,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: spacing.md,
-  },
-  headerLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.sm,
-  },
-  headerTitle: {
-    fontWeight: '600',
-    color: colors.text.primary,
-  },
-  optionsContainer: {
-    gap: spacing.sm,
-  },
-  optionRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.sm,
-  },
-  optionIndex: {
-    width: 20,
-    height: 20,
-    borderRadius: borderRadius.full,
-    backgroundColor: colors.background.disabled,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  optionInput: {
-    flex: 1,
-    fontSize: fontSizes.md,
-    color: colors.text.primary,
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.md,
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    borderWidth: 1,
-    borderColor: colors.divider,
-    height: 44,
-  },
-  removeButton: {
-    padding: spacing.xs,
-  },
-  removeButtonPlaceholder: {
-    width: 28,
-  },
-  addOptionButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: spacing.sm,
-    paddingVertical: spacing.sm,
-    marginTop: spacing.xs,
-  },
-  addOptionText: {
-    fontWeight: '500',
-  },
-  hintContainer: {
-    marginTop: spacing.md,
-    paddingTop: spacing.sm,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: colors.divider,
-    alignItems: 'center',
-  },
-});
-
 export default VoteEditor;

src/components/business/VotePreview.tsx

@@ -3,14 +3,14 @@
  * 用于帖子列表中显示投票预览，类似微博风格
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   TouchableOpacity,
   StyleSheet,
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 import Text from '../common/Text';
 
 interface VotePreviewProps {
@@ -19,11 +19,51 @@ interface VotePreviewProps {
   onPress?: () => void;
 }
 
+function createVotePreviewStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.primary.light + '08',
+      borderRadius: borderRadius.md,
+      padding: spacing.md,
+      marginTop: spacing.sm,
+      borderWidth: 1,
+      borderColor: colors.primary.light + '30',
+    },
+    iconContainer: {
+      width: 36,
+      height: 36,
+      borderRadius: borderRadius.md,
+      backgroundColor: colors.primary.light + '20',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: spacing.sm,
+    },
+    content: {
+      flex: 1,
+    },
+    title: {
+      fontSize: fontSizes.md,
+      fontWeight: '600',
+      color: colors.text.primary,
+      marginBottom: 2,
+    },
+    subtitle: {
+      fontSize: fontSizes.sm,
+      color: colors.text.secondary,
+    },
+  });
+}
+
 const VotePreview: React.FC<VotePreviewProps> = ({
   totalVotes = 0,
   optionsCount = 0,
   onPress,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createVotePreviewStyles(colors), [colors]);
+
   // 格式化票数
   const formatVoteCount = (count: number): string => {
     if (count >= 10000) {
@@ -71,39 +111,4 @@ const VotePreview: React.FC<VotePreviewProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.primary.light + '08',
-    borderRadius: borderRadius.md,
-    padding: spacing.md,
-    marginTop: spacing.sm,
-    borderWidth: 1,
-    borderColor: colors.primary.light + '30',
-  },
-  iconContainer: {
-    width: 36,
-    height: 36,
-    borderRadius: borderRadius.md,
-    backgroundColor: colors.primary.light + '20',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: spacing.sm,
-  },
-  content: {
-    flex: 1,
-  },
-  title: {
-    fontSize: fontSizes.md,
-    fontWeight: '600',
-    color: colors.text.primary,
-    marginBottom: 2,
-  },
-  subtitle: {
-    fontSize: fontSizes.sm,
-    color: colors.text.secondary,
-  },
-});
-
 export default VotePreview;

src/components/common/AppBackButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { TouchableOpacity, StyleProp, ViewStyle, StyleSheet } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
-import { borderRadius, colors, spacing } from '../../theme';
+import { borderRadius, spacing, useAppColors } from '../../theme';
 
 type AppBackButtonIcon = 'arrow-left' | 'close';
 
@@ -20,11 +20,15 @@ const AppBackButton: React.FC<AppBackButtonProps> = ({
   onPress,
   icon = 'arrow-left',
   style,
-  iconColor = colors.text.primary,
+  iconColor: iconColorProp,
-  backgroundColor = colors.background.paper,
+  backgroundColor: backgroundColorProp,
   hitSlop = 8,
   testID,
 }) => {
+  const colors = useAppColors();
+  const iconColor = iconColorProp ?? colors.text.primary;
+  const backgroundColor = backgroundColorProp ?? colors.background.paper;
+
   return (
     <TouchableOpacity
       onPress={onPress}

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;

src/components/common/AppPromptBar.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
 import { bindPromptListener, PromptPayload, PromptType } from '../../services/promptService';
-import { borderRadius, colors, shadows, spacing } from '../../theme';
+import { borderRadius, shadows, spacing, useAppColors, type AppColors } from '../../theme';
 
 interface PromptState extends PromptPayload {
   id: number;
@@ -12,29 +12,96 @@ interface PromptState extends PromptPayload {
 
 const DEFAULT_DURATION = 2200;
 
-const styleMap: Record<PromptType, { backgroundColor: string; icon: React.ComponentProps<typeof MaterialCommunityIcons>['name'] }> = {
+function createPromptBarStyles(colors: AppColors) {
-  info: { backgroundColor: '#FFFFFF', icon: 'information-outline' },
+  return StyleSheet.create({
-  success: { backgroundColor: '#FFFFFF', icon: 'check-circle-outline' },
+    wrapper: {
-  warning: { backgroundColor: '#FFFFFF', icon: 'alert-outline' },
+      position: 'absolute',
-  error: { backgroundColor: '#FFFFFF', icon: 'alert-circle-outline' },
+      left: spacing.md,
-};
+      right: spacing.md,
+      zIndex: 9999,
+    },
+    card: {
+      borderRadius: borderRadius.xl,
+      paddingVertical: spacing.md,
+      paddingHorizontal: spacing.md,
+      borderWidth: 1,
+      borderColor: `${colors.primary.main}22`,
+      flexDirection: 'row',
+      alignItems: 'center',
+      overflow: 'hidden',
+      ...shadows.lg,
+    },
+    accentBar: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      bottom: 0,
+      width: 4,
+    },
+    iconWrap: {
+      width: 32,
+      height: 32,
+      borderRadius: borderRadius.full,
+      backgroundColor: `${colors.primary.main}12`,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: spacing.md,
+    },
+    textWrap: {
+      flex: 1,
+      paddingRight: spacing.sm,
+    },
+    title: {
+      color: colors.text.primary,
+      fontWeight: '700',
+      fontSize: 14,
+      marginBottom: 2,
+    },
+    message: {
+      color: colors.text.primary,
+      fontSize: 13,
+      lineHeight: 18,
+    },
+  });
+}
 
-const iconColorMap: Record<PromptType, string> = {
+const AppPromptBar: React.FC = () => {
+  const insets = useSafeAreaInsets();
+  const colors = useAppColors();
+  const styles = useMemo(() => createPromptBarStyles(colors), [colors]);
+
+  const styleMap = useMemo<
+    Record<PromptType, { backgroundColor: string; icon: React.ComponentProps<typeof MaterialCommunityIcons>['name'] }>
+  >(
+    () => ({
+      info: { backgroundColor: colors.background.paper, icon: 'information-outline' },
+      success: { backgroundColor: colors.background.paper, icon: 'check-circle-outline' },
+      warning: { backgroundColor: colors.background.paper, icon: 'alert-outline' },
+      error: { backgroundColor: colors.background.paper, icon: 'alert-circle-outline' },
+    }),
+    [colors.background.paper],
+  );
+
+  const iconColorMap = useMemo(
+    () => ({
       info: colors.primary.main,
       success: colors.success.main,
       warning: colors.warning.dark,
       error: colors.error.main,
-};
+    }),
+    [colors.primary.main, colors.success.main, colors.warning.dark, colors.error.main],
+  );
 
-const accentColorMap: Record<PromptType, string> = {
+  const accentColorMap = useMemo(
+    () => ({
       info: colors.primary.main,
       success: colors.success.main,
       warning: colors.warning.main,
       error: colors.error.main,
-};
+    }),
+    [colors.primary.main, colors.success.main, colors.warning.main, colors.error.main],
+  );
 
-const AppPromptBar: React.FC = () => {
-  const insets = useSafeAreaInsets();
   const [prompt, setPrompt] = useState<PromptState | null>(null);
   const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const animation = useRef(new Animated.Value(0)).current;
@@ -131,55 +198,4 @@ const AppPromptBar: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'absolute',
-    left: spacing.md,
-    right: spacing.md,
-    zIndex: 9999,
-  },
-  card: {
-    borderRadius: borderRadius.xl,
-    paddingVertical: spacing.md,
-    paddingHorizontal: spacing.md,
-    borderWidth: 1,
-    borderColor: `${colors.primary.main}22`,
-    flexDirection: 'row',
-    alignItems: 'center',
-    overflow: 'hidden',
-    ...shadows.lg,
-  },
-  accentBar: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    bottom: 0,
-    width: 4,
-  },
-  iconWrap: {
-    width: 32,
-    height: 32,
-    borderRadius: borderRadius.full,
-    backgroundColor: `${colors.primary.main}12`,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: spacing.md,
-  },
-  textWrap: {
-    flex: 1,
-    paddingRight: spacing.sm,
-  },
-  title: {
-    color: colors.text.primary,
-    fontWeight: '700',
-    fontSize: 14,
-    marginBottom: 2,
-  },
-  message: {
-    color: colors.text.primary,
-    fontSize: 13,
-    lineHeight: 18,
-  },
-});
-
 export default AppPromptBar;

src/components/common/Avatar.tsx

@@ -4,7 +4,7 @@
  * 使用 expo-image 实现内存+磁盘双级缓存，头像秒加载
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   TouchableOpacity,
@@ -12,7 +12,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
-import { colors, borderRadius } from '../../theme';
+import { borderRadius, useAppColors, type AppColors } from '../../theme';
 import Text from './Text';
 
 type AvatarSource = string | { uri: string } | number | null;
@@ -27,29 +27,50 @@ interface AvatarProps {
   style?: ViewStyle;
 }
 
+function createAvatarStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      position: 'relative',
+    },
+    image: {
+      backgroundColor: colors.background.disabled,
+    },
+    placeholder: {
+      backgroundColor: colors.primary.main,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    badge: {
+      position: 'absolute',
+      borderWidth: 2,
+      borderColor: colors.background.paper,
+    },
+  });
+}
+
 const Avatar: React.FC<AvatarProps> = ({
   source,
   size = 40,
   name,
   onPress,
   showBadge = false,
-  badgeColor = colors.success.main,
+  badgeColor,
   style,
 }) => {
-  // 获取首字母
+  const colors = useAppColors();
+  const styles = useMemo(() => createAvatarStyles(colors), [colors]);
+  const resolvedBadgeColor = badgeColor ?? colors.success.main;
+
   const getInitial = (): string => {
     if (!name) return '?';
     const firstChar = name.charAt(0).toUpperCase();
-    // 中文字符
     if (/[\u4e00-\u9fa5]/.test(firstChar)) {
       return firstChar;
     }
     return firstChar;
   };
 
-  // 渲染头像内容
   const renderAvatarContent = () => {
-    // 如果有图片源
     if (source) {
       const imageSource =
         typeof source === 'string' ? { uri: source } : source;
@@ -72,7 +93,6 @@ const Avatar: React.FC<AvatarProps> = ({
       );
     }
 
-    // 显示首字母
     const fontSize = size / 2;
     return (
       <View
@@ -100,7 +120,7 @@ const Avatar: React.FC<AvatarProps> = ({
           style={[
             styles.badge,
             {
-              backgroundColor: badgeColor,
+              backgroundColor: resolvedBadgeColor,
               width: size * 0.3,
               height: size * 0.3,
               borderRadius: (size * 0.3) / 2,
@@ -124,23 +144,4 @@ const Avatar: React.FC<AvatarProps> = ({
   return avatarContainer;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    position: 'relative',
-  },
-  image: {
-    backgroundColor: colors.background.disabled,
-  },
-  placeholder: {
-    backgroundColor: colors.primary.main,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  badge: {
-    position: 'absolute',
-    borderWidth: 2,
-    borderColor: colors.background.paper,
-  },
-});
-
 export default Avatar;

src/components/common/Button.tsx

@@ -3,7 +3,7 @@
  * 支持多种变体、尺寸、加载状态和图标
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   TouchableOpacity,
   ActivityIndicator,
@@ -13,7 +13,7 @@ import {
   TextStyle,
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, borderRadius, spacing, fontSizes, shadows } from '../../theme';
+import { borderRadius, spacing, fontSizes, useAppColors, type AppColors } from '../../theme';
 import Text from './Text';
 
 type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
@@ -27,12 +27,86 @@ interface ButtonProps {
   size?: ButtonSize;
   disabled?: boolean;
   loading?: boolean;
-  icon?: string; // MaterialCommunityIcons name
+  icon?: string;
   iconPosition?: IconPosition;
   fullWidth?: boolean;
   style?: ViewStyle;
 }
 
+function createButtonStyles(colors: AppColors) {
+  return StyleSheet.create({
+    base: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: borderRadius.md,
+    },
+    content: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    size_sm: {
+      paddingVertical: spacing.sm,
+      paddingHorizontal: spacing.md,
+      minHeight: 32,
+    },
+    size_md: {
+      paddingVertical: spacing.md,
+      paddingHorizontal: spacing.lg,
+      minHeight: 40,
+    },
+    size_lg: {
+      paddingVertical: spacing.lg,
+      paddingHorizontal: spacing.xl,
+      minHeight: 48,
+    },
+    primary: {
+      backgroundColor: colors.primary.main,
+    },
+    secondary: {
+      backgroundColor: colors.secondary.main,
+    },
+    outline: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderColor: colors.primary.main,
+    },
+    text: {
+      backgroundColor: 'transparent',
+      shadowColor: 'transparent',
+      elevation: 0,
+    },
+    danger: {
+      backgroundColor: colors.error.main,
+    },
+    disabled: {
+      backgroundColor: colors.background.disabled,
+      borderColor: colors.background.disabled,
+    },
+    fullWidth: {
+      width: '100%',
+    },
+    textBase: {
+      fontWeight: '600',
+    },
+    textSize_sm: {
+      fontSize: fontSizes.sm,
+    },
+    textSize_md: {
+      fontSize: fontSizes.md,
+    },
+    textSize_lg: {
+      fontSize: fontSizes.lg,
+    },
+    iconLeft: {
+      marginRight: spacing.sm,
+    },
+    iconRight: {
+      marginLeft: spacing.sm,
+    },
+  });
+}
+
 const Button: React.FC<ButtonProps> = ({
   title,
   onPress,
@@ -45,11 +119,12 @@ const Button: React.FC<ButtonProps> = ({
   fullWidth = false,
   style,
 }) => {
-  // 获取按钮样式
+  const colors = useAppColors();
+  const styles = useMemo(() => createButtonStyles(colors), [colors]);
+
   const getButtonStyle = (): ViewStyle[] => {
     const baseStyle: ViewStyle[] = [styles.base, styles[`size_${size}`]];
 
-    // 变体样式
     switch (variant) {
       case 'primary':
         baseStyle.push(styles.primary);
@@ -68,12 +143,10 @@ const Button: React.FC<ButtonProps> = ({
         break;
     }
 
-    // 禁用状态
     if (disabled || loading) {
       baseStyle.push(styles.disabled);
     }
 
-    // 全宽度
     if (fullWidth) {
       baseStyle.push(styles.fullWidth);
     }
@@ -81,7 +154,6 @@ const Button: React.FC<ButtonProps> = ({
     return baseStyle;
   };
 
-  // 获取文本样式
   const getTextStyle = (): TextStyle => {
     const baseStyle: TextStyle = {
       ...styles.textBase,
@@ -109,7 +181,6 @@ const Button: React.FC<ButtonProps> = ({
     return baseStyle;
   };
 
-  // 获取图标大小
   const getIconSize = (): number => {
     switch (size) {
       case 'sm':
@@ -121,7 +192,6 @@ const Button: React.FC<ButtonProps> = ({
     }
   };
 
-  // 获取图标颜色
   const getIconColor = (): string => {
     if (disabled || loading) {
       return colors.text.disabled;
@@ -150,9 +220,9 @@ const Button: React.FC<ButtonProps> = ({
       {loading ? (
         <ActivityIndicator
           size="small"
-          color={variant === 'outline' || variant === 'text' 
+          color={
-            ? colors.primary.main 
+            variant === 'outline' || variant === 'text' ? colors.primary.main : colors.text.inverse
-            : colors.text.inverse}
+          }
         />
       ) : (
         <View style={styles.content}>
@@ -179,82 +249,4 @@ const Button: React.FC<ButtonProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  base: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: borderRadius.md,
-  },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  // 尺寸样式
-  size_sm: {
-    paddingVertical: spacing.sm,
-    paddingHorizontal: spacing.md,
-    minHeight: 32,
-  },
-  size_md: {
-    paddingVertical: spacing.md,
-    paddingHorizontal: spacing.lg,
-    minHeight: 40,
-  },
-  size_lg: {
-    paddingVertical: spacing.lg,
-    paddingHorizontal: spacing.xl,
-    minHeight: 48,
-  },
-  // 变体样式
-  primary: {
-    backgroundColor: colors.primary.main,
-  },
-  secondary: {
-    backgroundColor: colors.secondary.main,
-  },
-  outline: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderColor: colors.primary.main,
-  },
-  text: {
-    backgroundColor: 'transparent',
-    shadowColor: 'transparent',
-    elevation: 0,
-  },
-  danger: {
-    backgroundColor: colors.error.main,
-  },
-  // 禁用状态
-  disabled: {
-    backgroundColor: colors.background.disabled,
-    borderColor: colors.background.disabled,
-  },
-  // 全宽度
-  fullWidth: {
-    width: '100%',
-  },
-  // 文本样式
-  textBase: {
-    fontWeight: '600',
-  },
-  textSize_sm: {
-    fontSize: fontSizes.sm,
-  },
-  textSize_md: {
-    fontSize: fontSizes.md,
-  },
-  textSize_lg: {
-    fontSize: fontSizes.lg,
-  },
-  // 图标样式
-  iconLeft: {
-    marginRight: spacing.sm,
-  },
-  iconRight: {
-    marginLeft: spacing.sm,
-  },
-});
-
 export default Button;

src/components/common/Card.tsx

@@ -3,9 +3,9 @@
  * 白色背景、圆角、阴影，支持点击
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
-import { colors, borderRadius, spacing, shadows } from '../../theme';
+import { borderRadius, spacing, shadows, useAppColors, type AppColors } from '../../theme';
 
 type ShadowSize = 'sm' | 'md' | 'lg';
 
@@ -13,10 +13,20 @@ interface CardProps {
   children: React.ReactNode;
   onPress?: () => void;
   padding?: number;
-  shadow?: ShadowSize;
+  shadow?: ShadowSize | 'none';
   style?: ViewStyle;
 }
 
+function createCardStyles(colors: AppColors) {
+  return StyleSheet.create({
+    card: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      overflow: 'hidden',
+    },
+  });
+}
+
 const Card: React.FC<CardProps> = ({
   children,
   onPress,
@@ -24,13 +34,11 @@ const Card: React.FC<CardProps> = ({
   shadow = 'none',
   style,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createCardStyles(colors), [colors]);
   const shadowStyle = shadow !== 'none' ? shadows[shadow as keyof typeof shadows] : undefined;
 
-  const cardStyle = [
+  const cardStyle = [styles.card, { padding }, shadowStyle].filter(Boolean);
-    styles.card,
-    { padding },
-    shadowStyle,
-  ].filter(Boolean);
 
   if (onPress) {
     return (
@@ -47,12 +55,4 @@ const Card: React.FC<CardProps> = ({
   return <View style={[...cardStyle, style]}>{children}</View>;
 };
 
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    overflow: 'hidden',
-  },
-});
-
 export default Card;

src/components/common/Divider.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { View, StyleSheet, ViewStyle } from 'react-native';
-import { colors, spacing } from '../../theme';
+import { spacing, useAppColors } from '../../theme';
 
 interface DividerProps {
   margin?: number;
@@ -13,16 +13,14 @@ interface DividerProps {
   style?: ViewStyle;
 }
 
-const Divider: React.FC<DividerProps> = ({
+const Divider: React.FC<DividerProps> = ({ margin = spacing.lg, color, style }) => {
-  margin = spacing.lg,
+  const colors = useAppColors();
-  color = colors.divider,
+  const lineColor = color ?? colors.divider;
-  style,
-}) => {
   return (
     <View
       style={[
         styles.divider,
-        { marginVertical: margin, backgroundColor: color },
+        { marginVertical: margin, backgroundColor: lineColor },
         style,
       ]}
     />

src/components/common/EmptyState.tsx

@@ -3,10 +3,10 @@
  * 显示空数据时的占位界面，采用现代插图风格设计
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
-import { View, StyleSheet, ViewStyle, Dimensions } from 'react-native';
+import { View, StyleSheet, ViewStyle } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 import Text from './Text';
 import Button from './Button';
 
@@ -20,121 +20,8 @@ interface EmptyStateProps {
   variant?: 'default' | 'modern' | 'compact';
 }
 
-const EmptyState: React.FC<EmptyStateProps> = ({
+function createEmptyStateStyles(colors: AppColors) {
-  icon = 'folder-open-outline',
+  return StyleSheet.create({
-  title,
-  description,
-  actionLabel,
-  onAction,
-  style,
-  variant = 'modern',
-}) => {
-  // 现代风格空状态
-  if (variant === 'modern') {
-    return (
-      <View style={[styles.modernContainer, style]}>
-        <View style={styles.illustrationContainer}>
-          <View style={styles.iconBackground}>
-            <MaterialCommunityIcons
-              name={icon as any}
-              size={48}
-              color={colors.primary.main}
-              style={styles.modernIcon}
-            />
-          </View>
-          <View style={styles.decorativeCircle1} />
-          <View style={styles.decorativeCircle2} />
-        </View>
-        <Text
-          variant="h3"
-          color={colors.text.primary}
-          style={styles.modernTitle}
-        >
-          {title}
-        </Text>
-        {description && (
-          <Text
-            variant="body"
-            color={colors.text.secondary}
-            style={styles.modernDescription}
-          >
-            {description}
-          </Text>
-        )}
-        {actionLabel && onAction && (
-          <Button
-            title={actionLabel}
-            onPress={onAction}
-            variant="primary"
-            size="md"
-            style={styles.modernButton}
-          />
-        )}
-      </View>
-    );
-  }
-
-  // 紧凑风格
-  if (variant === 'compact') {
-    return (
-      <View style={[styles.compactContainer, style]}>
-        <MaterialCommunityIcons
-          name={icon as any}
-          size={40}
-          color={colors.text.disabled}
-          style={styles.compactIcon}
-        />
-        <Text
-          variant="body"
-          color={colors.text.secondary}
-          style={styles.compactTitle}
-        >
-          {title}
-        </Text>
-      </View>
-    );
-  }
-
-  // 默认风格
-  return (
-    <View style={[styles.container, style]}>
-      <MaterialCommunityIcons
-        name={icon as any}
-        size={64}
-        color={colors.text.disabled}
-        style={styles.icon}
-      />
-      <Text
-        variant="h3"
-        color={colors.text.secondary}
-        style={styles.title}
-      >
-        {title}
-      </Text>
-      {description && (
-        <Text
-          variant="body"
-          color={colors.text.secondary}
-          style={styles.description}
-        >
-          {description}
-        </Text>
-      )}
-      {actionLabel && onAction && (
-        <Button
-          title={actionLabel}
-          onPress={onAction}
-          variant="outline"
-          size="md"
-          style={styles.button}
-        />
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  // 默认风格
     container: {
       flex: 1,
       alignItems: 'center',
@@ -155,8 +42,6 @@ const styles = StyleSheet.create({
     button: {
       minWidth: 120,
     },
-
-  // 现代风格
     modernContainer: {
       flex: 1,
       alignItems: 'center',
@@ -223,8 +108,6 @@ const styles = StyleSheet.create({
       minWidth: 140,
       borderRadius: borderRadius.lg,
     },
-
-  // 紧凑风格
     compactContainer: {
       flexDirection: 'row',
       alignItems: 'center',
@@ -237,6 +120,100 @@ const styles = StyleSheet.create({
     compactTitle: {
       fontSize: fontSizes.md,
     },
-});
+  });
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({
+  icon = 'folder-open-outline',
+  title,
+  description,
+  actionLabel,
+  onAction,
+  style,
+  variant = 'modern',
+}) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createEmptyStateStyles(colors), [colors]);
+
+  if (variant === 'modern') {
+    return (
+      <View style={[styles.modernContainer, style]}>
+        <View style={styles.illustrationContainer}>
+          <View style={styles.iconBackground}>
+            <MaterialCommunityIcons
+              name={icon as any}
+              size={48}
+              color={colors.primary.main}
+              style={styles.modernIcon}
+            />
+          </View>
+          <View style={styles.decorativeCircle1} />
+          <View style={styles.decorativeCircle2} />
+        </View>
+        <Text variant="h3" color={colors.text.primary} style={styles.modernTitle}>
+          {title}
+        </Text>
+        {description && (
+          <Text variant="body" color={colors.text.secondary} style={styles.modernDescription}>
+            {description}
+          </Text>
+        )}
+        {actionLabel && onAction && (
+          <Button
+            title={actionLabel}
+            onPress={onAction}
+            variant="primary"
+            size="md"
+            style={styles.modernButton}
+          />
+        )}
+      </View>
+    );
+  }
+
+  if (variant === 'compact') {
+    return (
+      <View style={[styles.compactContainer, style]}>
+        <MaterialCommunityIcons
+          name={icon as any}
+          size={40}
+          color={colors.text.disabled}
+          style={styles.compactIcon}
+        />
+        <Text variant="body" color={colors.text.secondary} style={styles.compactTitle}>
+          {title}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <MaterialCommunityIcons
+        name={icon as any}
+        size={64}
+        color={colors.text.disabled}
+        style={styles.icon}
+      />
+      <Text variant="h3" color={colors.text.secondary} style={styles.title}>
+        {title}
+      </Text>
+      {description && (
+        <Text variant="body" color={colors.text.secondary} style={styles.description}>
+          {description}
+        </Text>
+      )}
+      {actionLabel && onAction && (
+        <Button
+          title={actionLabel}
+          onPress={onAction}
+          variant="outline"
+          size="md"
+          style={styles.button}
+        />
+      )}
+    </View>
+  );
+};
 
 export default EmptyState;

src/components/common/ImageGallery.tsx

@@ -31,7 +31,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as MediaLibrary from 'expo-media-library';
 import { File, Paths } from 'expo-file-system';
-import { colors, spacing, borderRadius, fontSizes } from '../../theme';
+import { spacing, borderRadius, fontSizes } from '../../theme';
 
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
 

src/components/common/ImageGrid.tsx

@@ -5,7 +5,7 @@
  * 支持预览图优化
  */
 
-import React, { useMemo, useCallback, useState, useEffect } from 'react';
+import React, { useMemo, useCallback, useState, useEffect, createContext, useContext } from 'react';
 import {
   View,
   StyleSheet,
@@ -16,7 +16,7 @@ import {
   Image,
 } from 'react-native';
 import { SmartImage } from './SmartImage';
-import { colors, spacing, borderRadius } from '../../theme';
+import { spacing, borderRadius, fontSizes, useAppColors, type AppColors } from '../../theme';
 import { getPreviewImageUrl, ImageDisplayMode } from '../../utils/imageHelper';
 
 const { width: SCREEN_WIDTH } = Dimensions.get('window');
@@ -101,6 +101,89 @@ const calculateGridDimensions = (
   };
 };
 
+function createImageGridStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      marginTop: spacing.sm,
+    },
+    fullSize: {
+      flex: 1,
+      width: '100%',
+      height: '100%',
+    },
+    singleContainer: {
+      overflow: 'hidden',
+      backgroundColor: colors.background.disabled,
+    },
+    horizontalContainer: {
+      flexDirection: 'row',
+    },
+    horizontalItem: {
+      overflow: 'hidden',
+      backgroundColor: colors.background.disabled,
+    },
+    gridContainer: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    },
+    gridItem: {
+      overflow: 'hidden',
+      backgroundColor: colors.background.disabled,
+      aspectRatio: 1,
+    },
+    gridItem2: {
+      width: '48%',
+    },
+    gridItem3: {
+      width: '31%',
+    },
+    masonryContainer: {
+      flexDirection: 'row',
+    },
+    masonryColumn: {
+      flex: 1,
+    },
+    masonryItem: {
+      overflow: 'hidden',
+      backgroundColor: colors.background.disabled,
+    },
+    moreOverlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: 'rgba(0, 0, 0, 0.4)',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: borderRadius.md,
+    },
+    moreText: {
+      color: colors.text.inverse,
+      fontSize: fontSizes.xl,
+      fontWeight: '500',
+    },
+    compactContainer: {
+      marginTop: spacing.xs,
+    },
+    compactGrid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    },
+    compactItem: {
+      overflow: 'hidden',
+      backgroundColor: colors.background.disabled,
+    },
+  });
+}
+
+type ImageGridStyles = ReturnType<typeof createImageGridStyles>;
+const ImageGridStylesContext = createContext<ImageGridStyles | null>(null);
+
+function useImageGridStyles(): ImageGridStyles {
+  const ctx = useContext(ImageGridStylesContext);
+  if (!ctx) {
+    throw new Error('useImageGridStyles must be used within ImageGrid or CompactImageGrid');
+  }
+  return ctx;
+}
+
 // ─── 单张图片子组件 ───────────────────────────────────────────────────────────
 // 独立成组件，方便用 useState 管理异步加载到的实际尺寸
 
@@ -123,6 +206,7 @@ const SingleImageItem: React.FC<SingleImageItemProps> = ({
   usePreview,
   displayMode,
 }) => {
+  const styles = useImageGridStyles();
   const [aspectRatio, setAspectRatio] = useState<number | null>(null);
   const mainUri = image.uri || image.url || '';
   const thumbnailUri =
@@ -245,7 +329,8 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
   displayMode = 'list',
   usePreview = true,
 }) => {
-  // 通过 onLayout 拿到容器实际宽度
+  const colors = useAppColors();
+  const gridStyles = useMemo(() => createImageGridStyles(colors), [colors]);
   const [containerWidth, setContainerWidth] = useState(0);
 
   // 过滤有效图片 - 支持 uri 或 url 字段
@@ -303,7 +388,7 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
   // 渲染横向双图
   const renderHorizontal = () => {
     return (
-      <View style={[styles.horizontalContainer, { gap }]}>
+      <View style={[gridStyles.horizontalContainer, { gap }]}>
         {displayImages.map((image, index) => {
           const previewUrl = usePreview && displayMode
             ? getPreviewImageUrl(image as any, displayMode)
@@ -314,7 +399,7 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
               key={image.id || index}
               onPress={() => handleImagePress(index)}
               style={[
-                styles.horizontalItem,
+                gridStyles.horizontalItem,
                 {
                   flex: 1,
                   aspectRatio: 1,
@@ -324,7 +409,7 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
             >
               <SmartImage
                 source={{ uri: previewUrl }}
-                style={styles.fullSize}
+                style={gridStyles.fullSize}
                 resizeMode="cover"
                 borderRadius={borderRadiusValue}
               />
@@ -338,7 +423,7 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
   // 渲染网格布局
   const renderGrid = () => {
     return (
-      <View style={[styles.gridContainer, { gap }]}>
+      <View style={[gridStyles.gridContainer, { gap }]}>
         {displayImages.map((image, index) => {
           const isLastVisible = index === displayImages.length - 1;
           const showOverlay = isLastVisible && remainingCount > 0 && showMoreOverlay;
@@ -352,8 +437,8 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
               key={image.id || index}
               onPress={() => handleImagePress(index)}
               style={[
-                styles.gridItem,
+                gridStyles.gridItem,
-                gridColumns === 3 ? styles.gridItem3 : styles.gridItem2,
+                gridColumns === 3 ? gridStyles.gridItem3 : gridStyles.gridItem2,
                 {
                   borderRadius: borderRadiusValue,
                 },
@@ -361,13 +446,13 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
             >
               <SmartImage
                 source={{ uri: previewUrl }}
-                style={styles.fullSize}
+                style={gridStyles.fullSize}
                 resizeMode="cover"
                 borderRadius={borderRadiusValue}
               />
               {showOverlay && (
-                <View style={styles.moreOverlay}>
+                <View style={gridStyles.moreOverlay}>
-                  <Text style={styles.moreText}>+{remainingCount}</Text>
+                  <Text style={gridStyles.moreText}>+{remainingCount}</Text>
                 </View>
               )}
             </Pressable>
@@ -397,7 +482,7 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
 
     const renderColumn = (columnImages: ImageGridItem[], columnIndex: number) => {
       return (
-        <View style={[styles.masonryColumn, { gap }]}>
+        <View style={[gridStyles.masonryColumn, { gap }]}>
           {columnImages.map((image, index) => {
             const actualIndex = columnIndex + index * 2;
             const aspectRatio = image.width && image.height
@@ -414,7 +499,7 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
                 key={image.id || actualIndex}
                 onPress={() => handleImagePress(actualIndex)}
                 style={[
-                  styles.masonryItem,
+                  gridStyles.masonryItem,
                   {
                     width: itemWidth,
                     height: Math.max(height, itemWidth * 0.7),
@@ -424,7 +509,7 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
               >
                 <SmartImage
                   source={{ uri: previewUrl }}
-                  style={styles.fullSize}
+                  style={gridStyles.fullSize}
                   resizeMode="cover"
                   borderRadius={borderRadiusValue}
                 />
@@ -436,7 +521,7 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
     };
 
     return (
-      <View style={[styles.masonryContainer, { gap }]}>
+      <View style={[gridStyles.masonryContainer, { gap }]}>
         {renderColumn(leftColumn, 0)}
         {renderColumn(rightColumn, 1)}
       </View>
@@ -464,13 +549,15 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
   }
 
   return (
+    <ImageGridStylesContext.Provider value={gridStyles}>
       <View
-      style={[styles.container, style]}
+        style={[gridStyles.container, style]}
         testID={testID}
         onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}
       >
         {renderContent()}
       </View>
+    </ImageGridStylesContext.Provider>
   );
 };
 
@@ -490,6 +577,8 @@ export const CompactImageGrid: React.FC<CompactImageGridProps> = ({
   borderRadius: borderRadiusValue = borderRadius.sm,
   ...props
 }) => {
+  const colors = useAppColors();
+  const gridStyles = useMemo(() => createImageGridStyles(colors), [colors]);
   const containerWidth = maxWidth || SCREEN_WIDTH - DEFAULT_CONTAINER_PADDING - 36 - spacing.sm; // 36是头像宽度
 
   const renderCompactGrid = () => {
@@ -506,7 +595,7 @@ export const CompactImageGrid: React.FC<CompactImageGridProps> = ({
         <Pressable
           onPress={() => props.onImagePress?.(images, 0)}
           style={[
-            styles.compactItem,
+            gridStyles.compactItem,
             {
               width: size,
               height: size,
@@ -516,7 +605,7 @@ export const CompactImageGrid: React.FC<CompactImageGridProps> = ({
         >
           <SmartImage
             source={{ uri: image.uri || image.url, width: image.width, height: image.height }}
-            style={styles.fullSize}
+            style={gridStyles.fullSize}
             resizeMode="cover"
             borderRadius={borderRadiusValue}
           />
@@ -529,13 +618,13 @@ export const CompactImageGrid: React.FC<CompactImageGridProps> = ({
     const { itemSize } = calculateGridDimensions(count, containerWidth, gap, columns);
 
     return (
-      <View style={[styles.compactGrid, { gap }]}>
+      <View style={[gridStyles.compactGrid, { gap }]}>
         {images.slice(0, 6).map((image, index) => (
           <Pressable
             key={image.id || index}
             onPress={() => props.onImagePress?.(images, index)}
             style={[
-              styles.compactItem,
+              gridStyles.compactItem,
               {
                 width: itemSize,
                 height: itemSize,
@@ -545,13 +634,13 @@ export const CompactImageGrid: React.FC<CompactImageGridProps> = ({
           >
             <SmartImage
               source={{ uri: image.uri || image.url, width: image.width, height: image.height }}
-              style={styles.fullSize}
+              style={gridStyles.fullSize}
               resizeMode="cover"
               borderRadius={borderRadiusValue}
             />
             {index === 5 && images.length > 6 && (
-              <View style={styles.moreOverlay}>
+              <View style={gridStyles.moreOverlay}>
-                <Text style={styles.moreText}>+{images.length - 6}</Text>
+                <Text style={gridStyles.moreText}>+{images.length - 6}</Text>
               </View>
             )}
           </Pressable>
@@ -560,86 +649,11 @@ export const CompactImageGrid: React.FC<CompactImageGridProps> = ({
     );
   };
 
-  return <View style={styles.compactContainer}>{renderCompactGrid()}</View>;
+  return (
+    <ImageGridStylesContext.Provider value={gridStyles}>
+      <View style={gridStyles.compactContainer}>{renderCompactGrid()}</View>
+    </ImageGridStylesContext.Provider>
+  );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    marginTop: spacing.sm,
-  },
-  fullSize: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  // 单图样式
-  singleContainer: {
-    overflow: 'hidden',
-    backgroundColor: colors.background.disabled,
-  },
-  // 横向布局样式
-  horizontalContainer: {
-    flexDirection: 'row',
-  },
-  horizontalItem: {
-    overflow: 'hidden',
-    backgroundColor: colors.background.disabled,
-  },
-  // 网格布局样式
-  gridContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  gridItem: {
-    overflow: 'hidden',
-    backgroundColor: colors.background.disabled,
-    aspectRatio: 1,
-  },
-  gridItem2: {
-    width: '48%', // 2列布局，每列约48%宽度，留有余量避免换行
-  },
-  gridItem3: {
-    width: '31%', // 3列布局，每列约31%宽度，留有余量避免换行
-  },
-  // 瀑布流样式
-  masonryContainer: {
-    flexDirection: 'row',
-  },
-  masonryColumn: {
-    flex: 1,
-  },
-  masonryItem: {
-    overflow: 'hidden',
-    backgroundColor: colors.background.disabled,
-  },
-  // 更多遮罩 - 类似微博的灰色蒙版
-  moreOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.4)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: borderRadius.md,
-  },
-  moreText: {
-    color: colors.text.inverse,
-    fontSize: fontSizes.xl,
-    fontWeight: '500',
-  },
-  // 紧凑模式样式
-  compactContainer: {
-    marginTop: spacing.xs,
-  },
-  compactGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  compactItem: {
-    overflow: 'hidden',
-    backgroundColor: colors.background.disabled,
-  },
-});
-
-// 导入字体大小
-import { fontSizes } from '../../theme';
-
 export default ImageGrid;

src/components/common/Input.tsx

@@ -3,7 +3,7 @@
  * 支持标签、错误提示、图标、多行输入等
  */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   View,
   TextInput,
@@ -13,7 +13,7 @@ import {
   TextStyle,
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, borderRadius, spacing, fontSizes } from '../../theme';
+import { borderRadius, spacing, fontSizes, useAppColors, type AppColors } from '../../theme';
 import Text from './Text';
 
 interface InputProps {
@@ -36,6 +36,46 @@ interface InputProps {
   autoCorrect?: boolean;
 }
 
+function createInputStyles(colors: AppColors) {
+  return StyleSheet.create({
+    wrapper: {
+      width: '100%',
+    },
+    label: {
+      marginBottom: spacing.xs,
+    },
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.paper,
+      borderWidth: 1,
+      borderRadius: borderRadius.md,
+      paddingHorizontal: spacing.md,
+      borderColor: colors.divider,
+    },
+    input: {
+      flex: 1,
+      fontSize: fontSizes.md,
+      color: colors.text.primary,
+      paddingVertical: spacing.md,
+      minHeight: 44,
+    },
+    multilineInput: {
+      textAlignVertical: 'top',
+      minHeight: 100,
+    },
+    leftIcon: {
+      marginRight: spacing.sm,
+    },
+    rightIcon: {
+      marginLeft: spacing.sm,
+    },
+    error: {
+      marginTop: spacing.xs,
+    },
+  });
+}
+
 const Input: React.FC<InputProps> = ({
   value,
   onChangeText,
@@ -55,6 +95,8 @@ const Input: React.FC<InputProps> = ({
   keyboardType = 'default',
   autoCorrect = true,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createInputStyles(colors), [colors]);
   const [isFocused, setIsFocused] = useState(false);
 
   const getBorderColor = () => {
@@ -87,11 +129,7 @@ const Input: React.FC<InputProps> = ({
           />
         )}
         <TextInput
-          style={[
+          style={[styles.input, multiline && styles.multilineInput, inputStyle]}
-            styles.input,
-            multiline && styles.multilineInput,
-            inputStyle,
-          ]}
           value={value}
           onChangeText={onChangeText}
           placeholder={placeholder}
@@ -105,15 +143,11 @@ const Input: React.FC<InputProps> = ({
           autoCapitalize={autoCapitalize}
           keyboardType={keyboardType}
           autoCorrect={autoCorrect}
-          // 确保光标可见
           cursorColor={colors.primary.main}
           selectionColor={`${colors.primary.main}40`}
         />
         {rightIcon && (
-          <TouchableOpacity
+          <TouchableOpacity onPress={onRightIconPress} disabled={!onRightIconPress}>
-            onPress={onRightIconPress}
-            disabled={!onRightIconPress}
-          >
             <MaterialCommunityIcons
               name={rightIcon as any}
               size={20}
@@ -132,43 +166,4 @@ const Input: React.FC<InputProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  wrapper: {
-    width: '100%',
-  },
-  label: {
-    marginBottom: spacing.xs,
-  },
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.background.paper,
-    borderWidth: 1,
-    borderRadius: borderRadius.md,
-    paddingHorizontal: spacing.md,
-    // 减少非焦点状态的边框明显度
-    borderColor: colors.divider,
-  },
-  input: {
-    flex: 1,
-    fontSize: fontSizes.md,
-    color: colors.text.primary,
-    paddingVertical: spacing.md,
-    minHeight: 44,
-  },
-  multilineInput: {
-    textAlignVertical: 'top',
-    minHeight: 100,
-  },
-  leftIcon: {
-    marginRight: spacing.sm,
-  },
-  rightIcon: {
-    marginLeft: spacing.sm,
-  },
-  error: {
-    marginTop: spacing.xs,
-  },
-});
-
 export default Input;

src/components/common/Loading.tsx

@@ -3,9 +3,9 @@
  * 支持不同尺寸、全屏模式
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, ActivityIndicator, StyleSheet, ViewStyle } from 'react-native';
-import { colors } from '../../theme';
+import { useAppColors, type AppColors } from '../../theme';
 
 type LoadingSize = 'sm' | 'md' | 'lg';
 
@@ -16,12 +16,32 @@ interface LoadingProps {
   style?: ViewStyle;
 }
 
+function createLoadingStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      padding: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    fullScreen: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: colors.background.default,
+    },
+  });
+}
+
 const Loading: React.FC<LoadingProps> = ({
   size = 'md',
-  color = colors.primary.main,
+  color,
   fullScreen = false,
   style,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createLoadingStyles(colors), [colors]);
+  const indicatorColor = color ?? colors.primary.main;
+
   const getSize = (): 'small' | 'large' | undefined => {
     switch (size) {
       case 'sm':
@@ -36,30 +56,16 @@ const Loading: React.FC<LoadingProps> = ({
   if (fullScreen) {
     return (
       <View style={[styles.fullScreen, style]}>
-        <ActivityIndicator size={getSize()} color={color} />
+        <ActivityIndicator size={getSize()} color={indicatorColor} />
       </View>
     );
   }
 
   return (
     <View style={[styles.container, style]}>
-      <ActivityIndicator size={getSize()} color={color} />
+      <ActivityIndicator size={getSize()} color={indicatorColor} />
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  fullScreen: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: colors.background.default,
-  },
-});
-
 export default Loading;

src/components/common/SearchBar.tsx

@@ -0,0 +1,137 @@
+/**
+ * SearchBar 搜索栏组件
+ * 用于搜索内容
+ */
+
+import React, { useMemo, useState } from 'react';
+import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
+
+interface SearchBarProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  onSubmit: () => void;
+  placeholder?: string;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  autoFocus?: boolean;
+}
+
+function createSearchBarStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.full,
+      paddingHorizontal: spacing.xs,
+      height: 46,
+      borderWidth: 1,
+      borderColor: colors.divider,
+      shadowColor: 'transparent',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0,
+    },
+    containerFocused: {
+      borderColor: colors.primary.main,
+      shadowColor: 'transparent',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0,
+    },
+    searchIconWrap: {
+      width: 30,
+      height: 30,
+      marginLeft: spacing.xs,
+      marginRight: spacing.xs,
+      borderRadius: borderRadius.full,
+      backgroundColor: `${colors.text.secondary}12`,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    searchIconWrapFocused: {
+      backgroundColor: `${colors.primary.main}1A`,
+    },
+    input: {
+      flex: 1,
+      fontSize: fontSizes.md,
+      color: colors.text.primary,
+      paddingVertical: spacing.sm + 1,
+      paddingHorizontal: spacing.xs,
+    },
+    clearButton: {
+      width: 24,
+      height: 24,
+      marginHorizontal: spacing.xs,
+      borderRadius: borderRadius.full,
+      backgroundColor: `${colors.text.secondary}14`,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  });
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({
+  value,
+  onChangeText,
+  onSubmit,
+  placeholder = '搜索...',
+  onFocus,
+  onBlur,
+  autoFocus = false,
+}) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createSearchBarStyles(colors), [colors]);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    onBlur?.();
+  };
+
+  return (
+    <View style={[styles.container, isFocused && styles.containerFocused]}>
+      <View style={[styles.searchIconWrap, isFocused && styles.searchIconWrapFocused]}>
+        <MaterialCommunityIcons
+          name="magnify"
+          size={18}
+          color={isFocused ? colors.primary.main : colors.text.secondary}
+        />
+      </View>
+      <TextInput
+        style={styles.input}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={colors.text.hint}
+        returnKeyType="search"
+        onSubmitEditing={onSubmit}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        autoFocus={autoFocus}
+        cursorColor={colors.primary.main}
+        selectionColor={`${colors.primary.main}40`}
+      />
+      {value.length > 0 && (
+        <TouchableOpacity
+          onPress={() => onChangeText('')}
+          style={styles.clearButton}
+          activeOpacity={0.7}
+        >
+          <MaterialCommunityIcons name="close" size={14} color={colors.text.secondary} />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+export default SearchBar;

src/components/common/SmartImage.tsx

@@ -4,7 +4,7 @@
  * 基于 expo-image 封装，原生支持 GIF/WebP 动图
  */
 
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -17,7 +17,36 @@ import {
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, borderRadius } from '../../theme';
+import { borderRadius, useAppColors, type AppColors } from '../../theme';
+
+function createSmartImageStyles(colors: AppColors) {
+  return StyleSheet.create({
+    image: {
+      flex: 1,
+      width: '100%',
+      height: '100%',
+    },
+    variantImage: {
+      flex: 1,
+    },
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: colors.background.disabled,
+    },
+    loadingContainer: {
+      padding: 8,
+      borderRadius: borderRadius.md,
+      backgroundColor: `${colors.background.paper}E6`,
+    },
+    errorContainer: {
+      padding: 12,
+      borderRadius: borderRadius.md,
+      backgroundColor: `${colors.text.primary}0D`,
+    },
+  });
+}
 
 // 图片加载状态
 export type ImageLoadState = 'loading' | 'success' | 'error';
@@ -91,6 +120,8 @@ export const SmartImage: React.FC<SmartImageProps> = ({
   lazyRootMargin = '160px',
   cachePolicy = 'memory-disk',
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createSmartImageStyles(colors), [colors]);
   const [loadState, setLoadState] = useState<ImageLoadState>('loading');
   const [isVisible, setIsVisible] = useState(() => !lazyLoad || Platform.OS !== 'web');
   const [shouldLoadOriginal, setShouldLoadOriginal] = useState(false);
@@ -244,7 +275,7 @@ export const SmartImage: React.FC<SmartImageProps> = ({
       <View
         ref={Platform.OS === 'web' ? lazyTargetRef : undefined}
         collapsable={false}
-        style={[containerStyle, style as ViewStyle, { backgroundColor: '#F5F5F5' }]}
+        style={[containerStyle, style as ViewStyle, { backgroundColor: colors.background.default }]}
         testID={testID}
       />
     );
@@ -328,36 +359,15 @@ export const VariantImage: React.FC<ImageVariantProps> = ({
     <SmartImage
       {...props}
       style={finalStyle}
-      imageStyle={[styles.variantImage, imageStyle]}
+      imageStyle={[variantStyles.variantImage, imageStyle]}
     />
   );
 };
 
-const styles = StyleSheet.create({
+const variantStyles = StyleSheet.create({
-  image: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
   variantImage: {
     flex: 1,
   },
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: colors.background.disabled,
-  },
-  loadingContainer: {
-    padding: 8,
-    borderRadius: borderRadius.md,
-    backgroundColor: 'rgba(255, 255, 255, 0.9)',
-  },
-  errorContainer: {
-    padding: 12,
-    borderRadius: borderRadius.md,
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-  },
 });
 
 export default SmartImage;

src/components/common/Text.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { Text as RNText, TextProps, StyleSheet, TextStyle, ViewStyle } from 'react-native';
-import { colors, fontSizes } from '../../theme';
+import { useAppColors, fontSizes } from '../../theme';
 
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
 
@@ -60,6 +60,7 @@ const Text: React.FC<CustomTextProps> = ({
   style,
   ...props
 }) => {
+  const colors = useAppColors();
   const textStyle = [
     styles.base,
     variantStyles[variant],

src/screens/apps/AppsScreen.tsx

@@ -2,13 +2,21 @@
  * 应用中心：与首页顶栏、个人主页帖子卡片同一套圆角 / 阴影 / 主色体系
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { View, StyleSheet, ScrollView, TouchableOpacity, StatusBar } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
-import { colors, spacing, fontSizes, borderRadius, shadows } from '../../theme';
+import {
+  spacing,
+  fontSizes,
+  borderRadius,
+  shadows,
+  useAppColors,
+  useResolvedColorScheme,
+  type AppColors,
+} from '../../theme';
 import * as hrefs from '../../navigation/hrefs';
 import { Text, ResponsiveContainer } from '../../components/common';
 import { useResponsive, useResponsiveSpacing, useBreakpointGTE } from '../../hooks/useResponsive';
@@ -31,8 +39,14 @@ const APP_ENTRIES: AppItem[] = [
   },
 ];
 
-/** 与个人主页 PostCard 外层 `postWrapper` 一致 */
+export const AppsScreen: React.FC = () => {
-const postCardShell = {
+  const colors = useAppColors();
+  const resolvedScheme = useResolvedColorScheme();
+  const statusBarStyle = resolvedScheme === 'dark' ? 'light-content' : 'dark-content';
+  const styles = useMemo(() => createAppsStyles(colors), [colors]);
+  /** 与个人主页 PostCard 外层 `postWrapper` 一致 */
+  const postCardShell = useMemo(
+    () => ({
       marginBottom: spacing.md,
       backgroundColor: colors.background.paper,
       borderRadius: 16,
@@ -42,9 +56,9 @@ const postCardShell = {
       shadowOpacity: 0.06,
       shadowRadius: 8,
       elevation: 2,
-};
+    }),
-
+    [colors]
-export const AppsScreen: React.FC = () => {
+  );
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const { isMobile } = useResponsive();
@@ -100,7 +114,7 @@ export const AppsScreen: React.FC = () => {
 
   return (
     <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
-      <StatusBar barStyle="dark-content" backgroundColor="#FAFAFA" />
+      <StatusBar barStyle={statusBarStyle} backgroundColor={colors.background.default} />
 
       {/* 与 MessageListScreen 顶栏同一结构 / 样式 */}
       <View style={[styles.msgHeader, isWideScreen && styles.msgHeaderWide]}>
@@ -143,7 +157,9 @@ export const AppsScreen: React.FC = () => {
 
 export default AppsScreen;
 
-const styles = StyleSheet.create({
+function createAppsStyles(colors: AppColors) {
+  const headerBg = colors.background.default;
+  return StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -154,7 +170,7 @@ const styles = StyleSheet.create({
       justifyContent: 'space-between',
       paddingHorizontal: spacing.md,
       paddingVertical: spacing.md,
-    backgroundColor: '#FAFAFA',
+      backgroundColor: headerBg,
       ...shadows.sm,
     },
     msgHeaderWide: {
@@ -172,7 +188,7 @@ const styles = StyleSheet.create({
     msgHeaderTitle: {
       fontSize: 19,
       fontWeight: '700',
-    color: '#333',
+      color: colors.text.primary,
     },
     msgHeaderTitleWide: {
       fontSize: 22,
@@ -193,12 +209,12 @@ const styles = StyleSheet.create({
     /** 与消息列表区同色，避免顶栏阴影落在灰底上像一条线 */
     scroll: {
       flex: 1,
-    backgroundColor: '#FAFAFA',
+      backgroundColor: headerBg,
     },
     scrollContent: {
       paddingTop: spacing.md,
       flexGrow: 1,
-    backgroundColor: '#FAFAFA',
+      backgroundColor: headerBg,
     },
     appCardInner: {
       flexDirection: 'row',
@@ -232,4 +248,5 @@ const styles = StyleSheet.create({
       paddingTop: spacing.xl,
       paddingBottom: spacing.md,
     },
-});
+  });
+}

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, [
+      Alert.alert('扫码失败', errorMsg, [{ text: '确定', onPress: () => router.back() }]);
-        { 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('登录成功', '网页端已登录', [
+      Alert.alert('登录成功', '网页端已登录', [{ text: '确定', onPress: () => router.back() }]);
-        { 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>
@@ -112,7 +250,7 @@ export const QRCodeConfirmScreen: React.FC = () => {
                 <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;

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;

src/screens/create/CreatePostScreen.tsx

@@ -7,7 +7,7 @@
  * 投票编辑器在宽屏下优化布局
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import {
   View,
   ScrollView,
@@ -25,7 +25,14 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter, useLocalSearchParams, useNavigation } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
-import { colors, spacing, fontSizes, borderRadius, shadows } from '../../theme';
+import {
+  spacing,
+  fontSizes,
+  borderRadius,
+  shadows,
+  useAppColors,
+  type AppColors,
+} from '../../theme';
 import { Text, ResponsiveContainer } from '../../components/common';
 import { channelService, postService, showPrompt, voteService } from '../../services';
 import { ApiError } from '../../services/api';
@@ -84,6 +91,8 @@ const getPublishErrorMessage = (error: unknown): string => {
 };
 
 export const CreatePostScreen: React.FC<CreatePostScreenProps> = (props) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createCreatePostStyles(colors), [colors]);
   const { onClose } = props;
   const router = useRouter();
   const navigation = useNavigation();
@@ -805,7 +814,8 @@ export const CreatePostScreen: React.FC<CreatePostScreenProps> = (props) => {
   );
 };
 
-const styles = StyleSheet.create({
+function createCreatePostStyles(colors: AppColors) {
+  return StyleSheet.create({
   flex: {
     flex: 1,
   },
@@ -1050,6 +1060,7 @@ const styles = StyleSheet.create({
   loadingText: {
     fontSize: fontSizes.md,
   },
-});
+  });
+}
 
 export default CreatePostScreen;

src/screens/home/HomeScreen.tsx

@@ -24,7 +24,7 @@ import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useRouter, useFocusEffect } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import { colors, spacing, borderRadius, shadows } from '../../theme';
+import { useAppColors, useResolvedColorScheme, spacing, borderRadius, shadows, type AppColors } from '../../theme';
 import { Post } from '../../types';
 import { useUserStore, useHomeTabBarVisibilityStore } from '../../stores';
 import { useCurrentUser } from '../../stores/authStore';
@@ -56,11 +56,124 @@ type ViewMode = 'list' | 'grid';
 type PostType = 'follow' | 'hot' | 'latest';
 type LatestCapsule = { id: string; name: string };
 
+function createHomeStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    header: {
+      backgroundColor: colors.background.paper,
+    },
+    searchWrapper: {
+      paddingTop: spacing.lg,
+      paddingBottom: spacing.sm,
+      shadowColor: 'transparent',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0,
+    },
+    homeTabBar: {
+      marginTop: spacing.xs,
+      marginBottom: spacing.sm,
+    },
+    viewToggleBtn: {
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    capsuleWrapper: {
+      paddingBottom: spacing.sm,
+      backgroundColor: colors.background.paper,
+    },
+    capsuleList: {
+      gap: spacing.xs,
+      paddingRight: spacing.lg,
+    },
+    capsuleItem: {
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.xs,
+      borderRadius: 999,
+    },
+    capsuleText: {
+      fontSize: 13,
+      fontWeight: '600',
+      color: colors.text.secondary,
+    },
+    capsuleTextActive: {
+      color: colors.primary.main,
+    },
+    listContent: {
+      flexGrow: 1,
+    },
+    listHeader: {
+      width: '100%',
+    },
+    contentContainer: {
+      flex: 1,
+    },
+    listItem: {},
+    waterfallScroll: {
+      flex: 1,
+    },
+    waterfallContainer: {
+      width: '100%',
+      flexGrow: 1,
+    },
+    waterfallColumnsRow: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+    },
+    waterfallColumn: {
+      flex: 1,
+    },
+    waterfallItem: {},
+    floatingButton: {
+      position: 'absolute',
+      right: 20,
+      bottom: 20,
+      width: 56,
+      height: 56,
+      borderRadius: 28,
+      backgroundColor: colors.primary.main,
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...shadows.lg,
+    },
+    floatingButtonDesktop: {
+      right: 40,
+      bottom: 40,
+      width: 64,
+      height: 64,
+      borderRadius: 32,
+    },
+    floatingButtonWide: {
+      right: 60,
+      bottom: 60,
+      width: 72,
+      height: 72,
+      borderRadius: 36,
+    },
+    loadingMoreFooter: {
+      paddingVertical: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  });
+}
+
 export const HomeScreen: React.FC = () => {
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const { posts: storePosts } = useUserStore();
   const currentUser = useCurrentUser();
+  const colors = useAppColors();
+  const resolvedScheme = useResolvedColorScheme();
+  const styles = useMemo(() => createHomeStyles(colors), [colors]);
+  const statusBarStyle = resolvedScheme === 'dark' ? 'light-content' : 'dark-content';
 
   // 使用响应式 hook
   const { 
@@ -827,7 +940,7 @@ export const HomeScreen: React.FC = () => {
   if (showSearch) {
     return (
       <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
-        <StatusBar barStyle="dark-content" backgroundColor={colors.background.paper} />
+        <StatusBar barStyle={statusBarStyle} backgroundColor={colors.background.paper} />
         <SearchScreen
           onBack={() => setShowSearch(false)}
         />
@@ -838,7 +951,7 @@ export const HomeScreen: React.FC = () => {
   // 正常首页内容
   return (
     <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
-      <StatusBar barStyle="dark-content" backgroundColor={colors.background.paper} />
+      <StatusBar barStyle={statusBarStyle} backgroundColor={colors.background.paper} />
 
       {/* 顶部Header */}
       <View style={styles.header}>
@@ -942,115 +1055,3 @@ export const HomeScreen: React.FC = () => {
     </SafeAreaView>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-  },
-  header: {
-    backgroundColor: colors.background.paper,
-  },
-  searchWrapper: {
-    paddingTop: spacing.lg,
-    paddingBottom: spacing.xs,
-    // 移除阴影效果
-    shadowColor: 'transparent',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-    elevation: 0,
-  },
-  homeTabBar: {
-    marginTop: 0,
-    marginBottom: spacing.sm,
-  },
-  viewToggleBtn: {
-    width: 44,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  capsuleWrapper: {
-    paddingBottom: spacing.sm,
-    backgroundColor: colors.background.paper,
-  },
-  capsuleList: {
-    gap: spacing.xs,
-    paddingRight: spacing.lg,
-  },
-  capsuleItem: {
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.xs,
-    borderRadius: 999,
-  },
-  capsuleText: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: colors.text.secondary,
-  },
-  capsuleTextActive: {
-    color: colors.primary.main,
-  },
-  listContent: {
-    flexGrow: 1,
-  },
-  listHeader: {
-    width: '100%',
-  },
-  contentContainer: {
-    flex: 1,
-  },
-  listItem: {
-    // 动态设置 marginBottom
-  },
-  waterfallScroll: {
-    flex: 1,
-  },
-  waterfallContainer: {
-    width: '100%',
-    flexGrow: 1,
-  },
-  waterfallColumnsRow: {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  waterfallColumn: {
-    flex: 1,
-  },
-  waterfallItem: {
-    // 动态设置 marginBottom
-  },
-  floatingButton: {
-    position: 'absolute',
-    right: 20,
-    bottom: 20,
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    backgroundColor: colors.primary.main,
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...shadows.lg,
-  },
-  floatingButtonDesktop: {
-    right: 40,
-    bottom: 40,
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-  },
-  floatingButtonWide: {
-    right: 60,
-    bottom: 60,
-    width: 72,
-    height: 72,
-    borderRadius: 36,
-  },
-  loadingMoreFooter: {
-    paddingVertical: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

src/screens/home/PostDetailScreen.tsx

@@ -26,7 +26,13 @@ import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useNavigation, useRouter, useLocalSearchParams } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import {
+  spacing,
+  fontSizes,
+  borderRadius,
+  useAppColors,
+  type AppColors,
+} from '../../theme';
 import { Post, Comment, VoteResultDTO } from '../../types';
 import { useUserStore } from '../../stores';
 import { useCurrentUser } from '../../stores/authStore';
@@ -39,6 +45,8 @@ import { useResponsive, useResponsiveValue, useResponsiveSpacing } from '../../h
 import * as hrefs from '../../navigation/hrefs';
 
 export const PostDetailScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createPostDetailStyles(colors), [colors]);
   const navigation = useNavigation();
   const router = useRouter();
   const insets = useSafeAreaInsets();
@@ -290,6 +298,9 @@ export const PostDetailScreen: React.FC = () => {
     };
     
     navigation.setOptions({
+      // 与页面容器 background.default 一致，并去掉原生 header 底部分隔阴影，避免「一条线」
+      headerStyle: { backgroundColor: colors.background.default },
+      headerShadowVisible: false,
       headerBackVisible: false,
       headerTitleAlign: 'left',
       headerLeft: () => (
@@ -324,7 +335,7 @@ export const PostDetailScreen: React.FC = () => {
         </View>
       ),
     });
-  }, [post?.author, isFollowing, isFollowingMe, isFollowLoading, navigation]);
+  }, [post?.author, isFollowing, isFollowingMe, isFollowLoading, navigation, colors.background.default, styles]);
 
   // 监听键盘事件
   useEffect(() => {
@@ -1702,7 +1713,8 @@ export const PostDetailScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createPostDetailStyles(colors: AppColors) {
+  return StyleSheet.create({
   flex: {
     flex: 1,
   },
@@ -2124,4 +2136,5 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     paddingVertical: spacing.md,
   },
-});
+  });
+}

src/screens/home/SearchScreen.tsx

@@ -4,7 +4,7 @@
  * 支持响应式布局，宽屏下显示更大的搜索结果区域
  */
 
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import {
   View,
   FlatList,
@@ -16,7 +16,7 @@ import {
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 import { Post, User } from '../../types';
 import { useUserStore } from '../../stores';
 import { postService, authService } from '../../services';
@@ -37,6 +37,8 @@ interface SearchScreenProps {
 }
 
 export const SearchScreen: React.FC<SearchScreenProps> = ({ onBack }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createSearchScreenStyles(colors), [colors]);
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const { searchHistory: history, addSearchHistory, clearSearchHistory } = useUserStore();
@@ -544,7 +546,8 @@ export const SearchScreen: React.FC<SearchScreenProps> = ({ onBack }) => {
   );
 };
 
-const styles = StyleSheet.create({
+function createSearchScreenStyles(colors: AppColors) {
+  return StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -655,4 +658,5 @@ const styles = StyleSheet.create({
       paddingVertical: spacing.md,
       alignItems: 'center',
     },
-});
+  });
+}

src/screens/message/ChatScreen.tsx

@@ -26,18 +26,20 @@ import {
   ActivityIndicator,
   KeyboardAvoidingView,
   Platform,
+  TouchableOpacity,
 } from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useNavigation, useRouter } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Text, ImageGallery, ImageGridItem } from '../../components/common';
-import { colors } from '../../theme';
+import { useAppColors } from '../../theme';
 import * as hrefs from '../../navigation/hrefs';
 import { messageManager } from '../../stores';
 import { useBreakpointGTE } from '../../hooks/useResponsive';
 import {
   useChatScreen,
-  chatScreenStyles as baseStyles,
+  useChatScreenStyles,
   EmojiPanel,
   MorePanel,
   MentionPanel,
@@ -53,10 +55,11 @@ export const ChatScreen: React.FC = () => {
   const navigation = useNavigation();
   const router = useRouter();
   const insets = useSafeAreaInsets();
+  const colors = useAppColors();
+  const styles = useChatScreenStyles();
 
   // 响应式布局
   const isWideScreen = useBreakpointGTE('lg');
-  const styles = baseStyles;
 
   // 监听屏幕宽度变化，当变为大屏幕时自动跳转到web端首页
   useEffect(() => {
@@ -79,6 +82,8 @@ export const ChatScreen: React.FC = () => {
     beforeHeight: 0,
   });
   const preloadCooldownTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const showJumpToLatestRef = useRef(false);
+  const [showJumpToLatest, setShowJumpToLatest] = useState(false);
 
   const containerStyle = useMemo(() => ([
     styles.container,
@@ -200,6 +205,7 @@ export const ChatScreen: React.FC = () => {
     loadMoreHistory,
     handleMessageListContentSizeChange,
     handleReachLatestEdge,
+    jumpToLatestMessages,
     setBrowsingHistory,
   } = useChatScreen();
   const displayMessages = useMemo(() => [...messages].reverse(), [messages]);
@@ -210,6 +216,18 @@ export const ChatScreen: React.FC = () => {
     }
   }, [loadingMore, showEdgeLoadingIndicator]);
 
+  useEffect(() => {
+    if (loading) {
+      showJumpToLatestRef.current = false;
+      setShowJumpToLatest(false);
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    showJumpToLatestRef.current = false;
+    setShowJumpToLatest(false);
+  }, [conversationId]);
+
   useEffect(() => {
     return () => {
       if (preloadCooldownTimerRef.current) {
@@ -314,6 +332,14 @@ export const ChatScreen: React.FC = () => {
       viewportHeight: layoutMeasurement.height,
     };
 
+    // inverted：offset 越大离最新消息端越远，与 setBrowsingHistory(120) 阈值一致
+    const shouldShowJump =
+      contentOffset.y > 120 && !loading && messages.length > 0;
+    if (showJumpToLatestRef.current !== shouldShowJump) {
+      showJumpToLatestRef.current = shouldShowJump;
+      setShowJumpToLatest(shouldShowJump);
+    }
+
     // 离开最新消息端后进入“浏览历史”模式，屏蔽自动跟随到底
     if (contentOffset.y > 120) {
       setBrowsingHistory(true);
@@ -360,7 +386,17 @@ export const ChatScreen: React.FC = () => {
         }, 350);
       });
     }
-  }, [scrollPositionRef, hasMoreHistory, loadingMore, loading, loadMoreHistory, handleReachLatestEdge, showEdgeLoadingIndicator, setBrowsingHistory]);
+  }, [
+    scrollPositionRef,
+    hasMoreHistory,
+    loadingMore,
+    loading,
+    messages.length,
+    loadMoreHistory,
+    handleReachLatestEdge,
+    showEdgeLoadingIndicator,
+    setBrowsingHistory,
+  ]);
 
   const handleContentSizeChange = useCallback((contentWidth: number, contentHeight: number) => {
     handleMessageListContentSizeChange(contentWidth, contentHeight);
@@ -474,6 +510,18 @@ export const ChatScreen: React.FC = () => {
             </View>
           </View>
         )}
+        {showJumpToLatest && (
+          <TouchableOpacity
+            style={styles.jumpToLatestFab}
+            onPress={jumpToLatestMessages}
+            activeOpacity={0.85}
+            accessibilityRole="button"
+            accessibilityLabel="回到最新消息"
+          >
+            <MaterialCommunityIcons name="chevron-down" size={20} color={colors.primary.main} />
+            <Text style={styles.jumpToLatestFabText}>最新消息</Text>
+          </TouchableOpacity>
+        )}
       </View>
 
       {/* 底部区域：输入框 + 面板 */}

src/screens/message/CreateGroupScreen.tsx

@@ -4,7 +4,7 @@
  * 支持响应式布局
  */
 
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -19,7 +19,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
-import { colors, spacing, fontSizes, borderRadius, shadows } from '../../theme';
+import { spacing, fontSizes, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { groupService } from '../../services/groupService';
 import { uploadService } from '../../services/uploadService';
 import { Avatar, Text, Button, Loading } from '../../components/common';
@@ -27,6 +27,8 @@ import { User } from '../../types';
 import MutualFollowSelectorModal from './components/MutualFollowSelectorModal';
 
 const CreateGroupScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createCreateGroupStyles(colors), [colors]);
   const router = useRouter();
 
   // 表单状态
@@ -310,7 +312,8 @@ const CreateGroupScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createCreateGroupStyles(colors: AppColors) {
+  return StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -475,6 +478,7 @@ const styles = StyleSheet.create({
       borderTopWidth: 1,
       borderTopColor: colors.divider,
     },
-});
+  });
+}
 
 export default CreateGroupScreen;

src/screens/message/GroupInfoScreen.tsx

@@ -25,7 +25,14 @@ import { useFocusEffect } from '@react-navigation/native';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
-import { colors, spacing, fontSizes, borderRadius, shadows } from '../../theme';
+import {
+  spacing,
+  fontSizes,
+  borderRadius,
+  shadows,
+  useAppColors,
+  type AppColors,
+} from '../../theme';
 import { useAuthStore } from '../../stores';
 import { groupService } from '../../services/groupService';
 import { uploadService } from '../../services/uploadService';
@@ -56,6 +63,8 @@ const JOIN_TYPE_OPTIONS: { value: JoinType; label: string; icon: string; desc: s
 ];
 
 const GroupInfoScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createGroupInfoStyles(colors), [colors]);
   const router = useRouter();
   const { groupId: groupIdParam, conversationId: conversationIdParam } = useLocalSearchParams<{
     groupId?: string | string[];
@@ -1071,7 +1080,8 @@ const GroupInfoScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createGroupInfoStyles(colors: AppColors) {
+  return StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: colors.background.default,
@@ -1594,6 +1604,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.primary.main,
     borderColor: colors.primary.main,
   },
-});
+  });
+}
 
 export default GroupInfoScreen;

src/screens/message/GroupInviteDetailScreen.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, ActivityIndicator, Alert, ScrollView, TouchableOpacit
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, borderRadius, shadows } from '../../theme';
+import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { Avatar, Text } from '../../components/common';
 import { routePayloadCache } from '../../stores/routePayloadCache';
 import { groupService } from '../../services/groupService';
@@ -12,6 +12,8 @@ import { GroupMemberResponse } from '../../types/dto';
 import { GroupInfoSummaryCard, DecisionFooter } from './components/GroupRequestShared';
 
 const GroupInviteDetailScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createGroupInviteDetailStyles(colors), [colors]);
   const router = useRouter();
   const { messageId } = useLocalSearchParams<{ messageId?: string }>();
   const message = messageId ? routePayloadCache.getSystemMessage(messageId) : undefined;
@@ -174,7 +176,8 @@ const GroupInviteDetailScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createGroupInviteDetailStyles(colors: AppColors) {
+  return StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -252,6 +255,7 @@ const styles = StyleSheet.create({
       fontSize: 10,
       fontWeight: '700',
     },
-});
+  });
+}
 
 export default GroupInviteDetailScreen;

src/screens/message/GroupMembersScreen.tsx

@@ -21,7 +21,7 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useLocalSearchParams } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 import { useAuthStore } from '../../stores';
 import { groupService } from '../../services/groupService';
 import {
@@ -55,6 +55,8 @@ interface MemberGroup {
 }
 
 const GroupMembersScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createGroupMembersStyles(colors), [colors]);
   const { groupId: groupIdParam } = useLocalSearchParams<{ groupId?: string | string[] }>();
   const groupId = firstRouteParam(groupIdParam) ?? '';
   const { currentUser } = useAuthStore();
@@ -646,7 +648,8 @@ const GroupMembersScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createGroupMembersStyles(colors: AppColors) {
+  return StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -762,6 +765,7 @@ const styles = StyleSheet.create({
       textAlign: 'center',
       paddingVertical: spacing.md,
     },
-});
+  });
+}
 
 export default GroupMembersScreen;

src/screens/message/GroupRequestDetailScreen.tsx

@@ -4,7 +4,7 @@ import { useRouter, useLocalSearchParams } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { colors, spacing, borderRadius, shadows } from '../../theme';
+import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { Avatar, Text } from '../../components/common';
 import * as hrefs from '../../navigation/hrefs';
 import { routePayloadCache } from '../../stores/routePayloadCache';
@@ -14,6 +14,8 @@ import { userManager } from '../../stores/userManager';
 import { GroupInfoSummaryCard, DecisionFooter } from './components/GroupRequestShared';
 
 const GroupRequestDetailScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createGroupRequestDetailStyles(colors), [colors]);
   const router = useRouter();
   const { messageId } = useLocalSearchParams<{ messageId?: string }>();
   const message = messageId ? routePayloadCache.getSystemMessage(messageId) : undefined;
@@ -174,7 +176,8 @@ const GroupRequestDetailScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createGroupRequestDetailStyles(colors: AppColors) {
+  return StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -220,6 +223,7 @@ const styles = StyleSheet.create({
     subDesc: {
       marginTop: spacing.sm,
     },
-});
+  });
+}
 
 export default GroupRequestDetailScreen;

src/screens/message/JoinGroupScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -13,7 +13,7 @@ import {
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
-import { colors, spacing, borderRadius } from '../../theme';
+import { spacing, borderRadius, useAppColors, type AppColors } from '../../theme';
 import Avatar from '../../components/common/Avatar';
 import Text from '../../components/common/Text';
 import { groupService } from '../../services/groupService';
@@ -22,7 +22,160 @@ import { GroupResponse, JoinType } from '../../types/dto';
 import { useCursorPagination } from '../../hooks/useCursorPagination';
 import { EmptyState } from '../../components/common';
 
+function createJoinGroupStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+      padding: spacing.lg,
+    },
+    heroCard: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      padding: spacing.lg,
+      marginBottom: spacing.lg,
+    },
+    heroIconWrap: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: colors.primary.light + '26',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: spacing.md,
+    },
+    heroTitle: {
+      marginBottom: spacing.xs,
+    },
+    tip: {
+      lineHeight: 20,
+    },
+    formCard: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      padding: spacing.lg,
+      flex: 1,
+    },
+    label: {
+      marginBottom: spacing.xs,
+    },
+    input: {
+      flex: 1,
+      borderWidth: 1,
+      borderColor: colors.divider,
+      borderRadius: borderRadius.md,
+      backgroundColor: colors.background.paper,
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.md,
+      color: colors.text.primary,
+    },
+    searchRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: spacing.md,
+    },
+    searchBtn: {
+      width: 46,
+      height: 46,
+      borderRadius: borderRadius.md,
+      backgroundColor: colors.primary.main,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: spacing.sm,
+    },
+    searchResultSection: {
+      marginBottom: spacing.lg,
+    },
+    sectionTitle: {
+      marginBottom: spacing.sm,
+      fontWeight: '600',
+    },
+    listSection: {
+      flex: 1,
+    },
+    groupCard: {
+      borderWidth: 1,
+      borderColor: colors.divider,
+      borderRadius: borderRadius.md,
+      padding: spacing.md,
+      backgroundColor: colors.background.default,
+      marginBottom: spacing.md,
+    },
+    groupHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    groupMeta: {
+      marginLeft: spacing.md,
+      flex: 1,
+    },
+    groupName: {
+      marginBottom: spacing.xs,
+      fontWeight: '600',
+    },
+    groupDesc: {
+      marginTop: spacing.sm,
+      lineHeight: 18,
+    },
+    groupInfoRow: {
+      marginTop: spacing.sm,
+      marginBottom: spacing.xs,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    groupNoRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: spacing.md,
+    },
+    copyBtn: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: spacing.sm,
+      paddingVertical: 4,
+      borderRadius: borderRadius.sm,
+      backgroundColor: colors.primary.light + '22',
+    },
+    copyBtnText: {
+      marginLeft: 4,
+    },
+    submitBtn: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: borderRadius.md,
+      backgroundColor: colors.primary.main,
+      minHeight: 46,
+    },
+    submitBtnDisabled: {
+      opacity: 0.5,
+    },
+    submitText: {
+      marginLeft: spacing.xs,
+    },
+    emptyText: {
+      marginTop: spacing.sm,
+      textAlign: 'center',
+    },
+    loadingFooter: {
+      paddingVertical: spacing.md,
+      alignItems: 'center',
+    },
+    loadMoreBtn: {
+      paddingVertical: spacing.md,
+      alignItems: 'center',
+    },
+    noMoreText: {
+      textAlign: 'center',
+      paddingVertical: spacing.md,
+    },
+  });
+}
+
 const JoinGroupScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createJoinGroupStyles(colors), [colors]);
   const router = useRouter();
   const [keyword, setKeyword] = useState('');
   const [searching, setSearching] = useState(false);
@@ -295,153 +448,4 @@ const JoinGroupScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-    padding: spacing.lg,
-  },
-  heroCard: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    padding: spacing.lg,
-    marginBottom: spacing.lg,
-  },
-  heroIconWrap: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: colors.primary.light + '26',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: spacing.md,
-  },
-  heroTitle: {
-    marginBottom: spacing.xs,
-  },
-  tip: {
-    lineHeight: 20,
-  },
-  formCard: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    padding: spacing.lg,
-    flex: 1,
-  },
-  label: {
-    marginBottom: spacing.xs,
-  },
-  input: {
-    flex: 1,
-    borderWidth: 1,
-    borderColor: colors.divider,
-    borderRadius: borderRadius.md,
-    backgroundColor: colors.background.paper,
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.md,
-    color: colors.text.primary,
-  },
-  searchRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: spacing.md,
-  },
-  searchBtn: {
-    width: 46,
-    height: 46,
-    borderRadius: borderRadius.md,
-    backgroundColor: colors.primary.main,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: spacing.sm,
-  },
-  searchResultSection: {
-    marginBottom: spacing.lg,
-  },
-  sectionTitle: {
-    marginBottom: spacing.sm,
-    fontWeight: '600',
-  },
-  listSection: {
-    flex: 1,
-  },
-  groupCard: {
-    borderWidth: 1,
-    borderColor: colors.divider,
-    borderRadius: borderRadius.md,
-    padding: spacing.md,
-    backgroundColor: colors.background.default,
-    marginBottom: spacing.md,
-  },
-  groupHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  groupMeta: {
-    marginLeft: spacing.md,
-    flex: 1,
-  },
-  groupName: {
-    marginBottom: spacing.xs,
-    fontWeight: '600',
-  },
-  groupDesc: {
-    marginTop: spacing.sm,
-    lineHeight: 18,
-  },
-  groupInfoRow: {
-    marginTop: spacing.sm,
-    marginBottom: spacing.xs,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  groupNoRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: spacing.md,
-  },
-  copyBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: spacing.sm,
-    paddingVertical: 4,
-    borderRadius: borderRadius.sm,
-    backgroundColor: colors.primary.light + '22',
-  },
-  copyBtnText: {
-    marginLeft: 4,
-  },
-  submitBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: borderRadius.md,
-    backgroundColor: colors.primary.main,
-    minHeight: 46,
-  },
-  submitBtnDisabled: {
-    opacity: 0.5,
-  },
-  submitText: {
-    marginLeft: spacing.xs,
-  },
-  emptyText: {
-    marginTop: spacing.sm,
-    textAlign: 'center',
-  },
-  loadingFooter: {
-    paddingVertical: spacing.md,
-    alignItems: 'center',
-  },
-  loadMoreBtn: {
-    paddingVertical: spacing.md,
-    alignItems: 'center',
-  },
-  noMoreText: {
-    textAlign: 'center',
-    paddingVertical: spacing.md,
-  },
-});
-
 export default JoinGroupScreen;

src/screens/message/MessageListScreen.tsx

@@ -30,7 +30,14 @@ import { useRouter } from 'expo-router';
 import { useIsFocused } from '@react-navigation/native';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, shadows, borderRadius } from '../../theme';
+import {
+  spacing,
+  fontSizes,
+  shadows,
+  borderRadius,
+  useAppColors,
+  type AppColors,
+} from '../../theme';
 import { ConversationResponse, UserDTO, MessageResponse, extractTextFromSegments } from '../../types/dto';
 import { authService } from '../../services';
 import { useUserStore, useAuthStore } from '../../stores';
@@ -73,6 +80,8 @@ interface SearchResultItem {
  * 支持响应式双栏布局
  */
 export const MessageListScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createMessageListStyles(colors), [colors]);
   const router = useRouter();
   const isFocused = useIsFocused();
   const insets = useSafeAreaInsets();
@@ -565,7 +574,7 @@ export const MessageListScreen: React.FC = () => {
               ))}
             </View>
           </View>
-          <MaterialCommunityIcons name="chevron-right" size={20} color="#CCC" />
+          <MaterialCommunityIcons name="chevron-right" size={20} color={colors.chat.iconSoft} />
         </TouchableOpacity>
       );
     }
@@ -614,7 +623,7 @@ export const MessageListScreen: React.FC = () => {
             </View>
           )}
           {!user.is_following && (
-            <MaterialCommunityIcons name="chevron-right" size={20} color="#CCC" />
+            <MaterialCommunityIcons name="chevron-right" size={20} color={colors.chat.iconSoft} />
           )}
         </TouchableOpacity>
       );
@@ -661,11 +670,11 @@ export const MessageListScreen: React.FC = () => {
   const renderSearchMode = () => (
     <View style={styles.searchModeContainer}>
       <View style={styles.searchInputContainer}>
-        <AppBackButton onPress={handleCloseSearch} iconColor="#666" />
+        <AppBackButton onPress={handleCloseSearch} iconColor={colors.text.secondary} />
         <TextInput
           style={styles.searchInput}
           placeholder={activeSearchTab === 'chat' ? '搜索聊天记录' : '搜索用户'}
-          placeholderTextColor="#999"
+          placeholderTextColor={colors.text.hint}
           value={searchText}
           onChangeText={setSearchText}
           autoFocus
@@ -676,7 +685,7 @@ export const MessageListScreen: React.FC = () => {
         />
         {searchText.length > 0 && (
           <TouchableOpacity onPress={() => setSearchText('')}>
-            <MaterialCommunityIcons name="close-circle" size={18} color="#999" />
+            <MaterialCommunityIcons name="close-circle" size={18} color={colors.text.hint} />
           </TouchableOpacity>
         )}
       </View>
@@ -733,7 +742,7 @@ export const MessageListScreen: React.FC = () => {
 
         <View style={styles.headerRightContainer}>
           <TouchableOpacity style={styles.headerRightBtn} onPress={handleOpenActionMenu}>
-            <MaterialCommunityIcons name="plus" size={24} color="#666" />
+            <MaterialCommunityIcons name="plus" size={24} color={colors.text.secondary} />
           </TouchableOpacity>
         </View>
       </View>
@@ -744,7 +753,7 @@ export const MessageListScreen: React.FC = () => {
         activeOpacity={0.7}
       >
         <View style={styles.searchBox}>
-          <MaterialCommunityIcons name="magnify" size={18} color="#999" />
+          <MaterialCommunityIcons name="magnify" size={18} color={colors.text.hint} />
           <Text style={styles.searchPlaceholder}>搜索</Text>
         </View>
       </TouchableOpacity>
@@ -793,19 +802,19 @@ export const MessageListScreen: React.FC = () => {
       <Pressable style={styles.actionMenuBackdrop} onPress={() => setActionMenuVisible(false)}>
         <View style={styles.actionMenu}>
           <TouchableOpacity style={styles.actionMenuItem} onPress={() => runMenuAction('scanQRCode')}>
-            <MaterialCommunityIcons name="qrcode-scan" size={21} color="#444" />
+            <MaterialCommunityIcons name="qrcode-scan" size={21} color={colors.text.primary} />
             <Text style={styles.actionMenuText}>扫码登录</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.actionMenuItem} onPress={() => runMenuAction('join')}>
-            <MaterialCommunityIcons name="account-plus-outline" size={21} color="#444" />
+            <MaterialCommunityIcons name="account-plus-outline" size={21} color={colors.text.primary} />
             <Text style={styles.actionMenuText}>加入群聊</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.actionMenuItem} onPress={() => runMenuAction('create')}>
-            <MaterialCommunityIcons name="account-multiple-plus" size={21} color="#444" />
+            <MaterialCommunityIcons name="account-multiple-plus" size={21} color={colors.text.primary} />
             <Text style={styles.actionMenuText}>创建群聊</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.actionMenuItem} onPress={() => runMenuAction('readAll')} disabled={isMarking}>
-            <MaterialCommunityIcons name="message-check-outline" size={21} color="#444" />
+            <MaterialCommunityIcons name="message-check-outline" size={21} color={colors.text.primary} />
             <Text style={styles.actionMenuText}>{isMarking ? '处理中...' : '全部已读'}</Text>
           </TouchableOpacity>
         </View>
@@ -838,7 +847,7 @@ export const MessageListScreen: React.FC = () => {
               // 默认占位符
               <View style={styles.chatPlaceholder}>
                 <View style={styles.chatPlaceholderContent}>
-                  <MaterialCommunityIcons name="message-text-outline" size={64} color="#DDD" />
+                  <MaterialCommunityIcons name="message-text-outline" size={64} color={colors.chat.iconMuted} />
                   <Text style={styles.chatPlaceholderText}>选择一个会话开始聊天</Text>
                 </View>
               </View>
@@ -870,10 +879,11 @@ export const MessageListScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createMessageListStyles(colors: AppColors) {
+  return StyleSheet.create({
     container: {
       flex: 1,
-    backgroundColor: '#FAFAFA',
+      backgroundColor: colors.background.default,
     },
     // 桌面端双栏布局
     desktopContainer: {
@@ -881,17 +891,17 @@ const styles = StyleSheet.create({
       flexDirection: 'row',
     },
     sidebar: {
-    backgroundColor: '#FAFAFA',
+      backgroundColor: colors.background.default,
       borderRightWidth: 1,
-    borderRightColor: '#E8E8E8',
+      borderRightColor: colors.chat.border,
     },
     chatArea: {
       flex: 1,
-    backgroundColor: '#F5F7FA',
+      backgroundColor: colors.chat.surfaceMuted,
     },
     chatPlaceholder: {
       flex: 1,
-    backgroundColor: '#F5F7FA',
+      backgroundColor: colors.chat.surfaceMuted,
       alignItems: 'center',
       justifyContent: 'center',
     },
@@ -902,7 +912,7 @@ const styles = StyleSheet.create({
     chatPlaceholderText: {
       marginTop: spacing.md,
       fontSize: 16,
-    color: '#999',
+      color: colors.text.hint,
     },
     header: {
       flexDirection: 'row',
@@ -910,7 +920,7 @@ const styles = StyleSheet.create({
       justifyContent: 'space-between',
       paddingHorizontal: spacing.md,
       paddingVertical: spacing.md,
-    backgroundColor: '#FAFAFA',
+      backgroundColor: colors.background.default,
       ...shadows.sm,
     },
     headerWide: {
@@ -937,19 +947,19 @@ const styles = StyleSheet.create({
     headerTitle: {
       fontSize: 19,
       fontWeight: '700',
-    color: '#333',
+      color: colors.text.primary,
     },
     totalBadge: {
       minWidth: 18,
       height: 18,
       borderRadius: 9,
-    backgroundColor: '#FF4757',
+      backgroundColor: colors.error.main,
       alignItems: 'center',
       justifyContent: 'center',
       paddingHorizontal: 5,
     },
     totalBadgeText: {
-    color: '#FFF',
+      color: colors.primary.contrast,
       fontSize: 11,
       fontWeight: '600',
     },
@@ -978,7 +988,7 @@ const styles = StyleSheet.create({
       top: 88,
       right: spacing.md,
       width: 188,
-    backgroundColor: '#FFF',
+      backgroundColor: colors.background.paper,
       borderRadius: 12,
       paddingVertical: spacing.sm,
       ...shadows.md,
@@ -992,29 +1002,29 @@ const styles = StyleSheet.create({
     actionMenuText: {
       marginLeft: spacing.sm,
       fontSize: 16,
-    color: '#333',
+      color: colors.text.primary,
     },
     searchContainer: {
       paddingHorizontal: spacing.md,
       paddingBottom: spacing.sm,
-    backgroundColor: '#FAFAFA',
+      backgroundColor: colors.background.default,
     },
     searchBox: {
       flexDirection: 'row',
       alignItems: 'center',
-    backgroundColor: '#F0F0F0',
+      backgroundColor: colors.chat.surfaceInput,
       borderRadius: 10,
       paddingHorizontal: spacing.sm,
       paddingVertical: 10,
     },
     searchPlaceholder: {
       fontSize: 14,
-    color: '#999',
+      color: colors.text.hint,
       marginLeft: spacing.xs,
     },
     listContent: {
       flexGrow: 1,
-    backgroundColor: '#FAFAFA',
+      backgroundColor: colors.background.default,
     },
     loadingContainer: {
       flex: 1,
@@ -1031,16 +1041,16 @@ const styles = StyleSheet.create({
     loadingMoreText: {
       marginLeft: spacing.sm,
       fontSize: 14,
-    color: '#999',
+      color: colors.text.hint,
     },
     searchModeContainer: {
       flex: 1,
-    backgroundColor: '#FAFAFA',
+      backgroundColor: colors.background.default,
     },
     searchInputContainer: {
       flexDirection: 'row',
       alignItems: 'center',
-    backgroundColor: '#F0F0F0',
+      backgroundColor: colors.chat.surfaceInput,
       borderRadius: 10,
       paddingHorizontal: spacing.md,
       marginHorizontal: spacing.md,
@@ -1050,7 +1060,7 @@ const styles = StyleSheet.create({
     searchInput: {
       flex: 1,
       fontSize: 15,
-    color: '#333',
+      color: colors.text.primary,
       marginLeft: spacing.md,
     },
     searchTabs: {
@@ -1063,7 +1073,7 @@ const styles = StyleSheet.create({
       flex: 1,
       paddingVertical: spacing.sm,
       alignItems: 'center',
-    backgroundColor: '#F0F0F0',
+      backgroundColor: colors.chat.surfaceInput,
       borderRadius: 8,
     },
     searchTabActive: {
@@ -1071,11 +1081,11 @@ const styles = StyleSheet.create({
     },
     searchTabText: {
       fontSize: 14,
-    color: '#666',
+      color: colors.text.secondary,
       fontWeight: '500',
     },
     searchTabTextActive: {
-    color: '#FFF',
+      color: colors.primary.contrast,
     },
     searchResultsContent: {
       flexGrow: 1,
@@ -1085,7 +1095,7 @@ const styles = StyleSheet.create({
       flexDirection: 'row',
       alignItems: 'center',
       paddingVertical: spacing.md,
-    backgroundColor: '#FFF',
+      backgroundColor: colors.background.paper,
       borderRadius: 10,
       marginBottom: spacing.sm,
       paddingHorizontal: spacing.md,
@@ -1103,20 +1113,20 @@ const styles = StyleSheet.create({
     searchResultName: {
       fontSize: 15,
       fontWeight: '600',
-    color: '#333',
+      color: colors.text.primary,
     },
     searchResultTime: {
       fontSize: 12,
-    color: '#999',
+      color: colors.text.hint,
     },
     searchResultMessage: {
       fontSize: 13,
-    color: '#888',
+      color: colors.text.secondary,
     },
     searchingText: {
       marginTop: spacing.sm,
       fontSize: 14,
-    color: '#999',
+      color: colors.text.hint,
     },
     followingBadge: {
       width: 24,
@@ -1140,18 +1150,19 @@ const styles = StyleSheet.create({
       alignItems: 'flex-start',
       paddingVertical: spacing.xs,
       borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#F0F0F0',
+      borderBottomColor: colors.divider,
     },
     matchedMessageText: {
       flex: 1,
       fontSize: 13,
-    color: '#555',
+      color: colors.text.secondary,
       lineHeight: 18,
     },
     matchedMessageTime: {
       fontSize: 11,
-    color: '#AAA',
+      color: colors.text.hint,
       marginLeft: spacing.sm,
       minWidth: 45,
     },
-});
+  });
+}

src/screens/message/NotificationsScreen.tsx

@@ -16,11 +16,11 @@ import {
   Dimensions,
   BackHandler,
 } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useIsFocused } from '@react-navigation/native';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, borderRadius, shadows } from '../../theme';
+import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { SystemMessageResponse } from '../../types/dto';
 import { messageService } from '../../services/messageService';
 import { commentService } from '../../services/commentService';
@@ -45,6 +45,8 @@ const LIKE_SYSTEM_TYPES = new Set(['like_post', 'like_comment', 'like_reply', 'f
 const GROUP_SYSTEM_TYPES = new Set(['group_invite', 'group_join_apply', 'group_join_approved', 'group_join_rejected']);
 
 export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createNotificationsStyles(colors), [colors]);
   const isFocused = useIsFocused();
   const { setSystemUnreadCount, decrementSystemUnreadCount } = useMessageManagerSystemUnreadCount();
   const router = useRouter();
@@ -554,7 +556,8 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
   );
 };
 
-const styles = StyleSheet.create({
+function createNotificationsStyles(colors: AppColors) {
+  return StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -693,4 +696,5 @@ const styles = StyleSheet.create({
       justifyContent: 'center',
       paddingTop: 100,
     },
-});
+  });
+}

src/screens/message/PrivateChatInfoScreen.tsx

@@ -4,7 +4,7 @@
  * 参考QQ和微信的实现，提供聊天管理功能
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -16,7 +16,7 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius, shadows } from '../../theme';
+import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { useAuthStore } from '../../stores';
 import { authService } from '../../services/authService';
 import { messageService } from '../../services/messageService';
@@ -33,6 +33,8 @@ import * as hrefs from '../../navigation/hrefs';
 import { AppBackButton } from '../../components/common';
 
 const PrivateChatInfoScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createPrivateChatInfoStyles(colors), [colors]);
   const router = useRouter();
   const raw = useLocalSearchParams<{
     conversationId?: string;
@@ -277,7 +279,7 @@ const PrivateChatInfoScreen: React.FC = () => {
         value={value}
         onValueChange={onValueChange}
         trackColor={{ false: '#E0E0E0', true: colors.primary.light }}
-        thumbColor={value ? colors.primary.main : '#F5F5F5'}
+        thumbColor={value ? colors.primary.main : colors.background.default}
       />
     </View>
   );
@@ -420,7 +422,8 @@ const PrivateChatInfoScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createPrivateChatInfoStyles(colors: AppColors) {
+  return StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -515,6 +518,7 @@ const styles = StyleSheet.create({
     deleteButton: {
       marginTop: spacing.sm,
     },
-});
+  });
+}
 
 export default PrivateChatInfoScreen;

src/screens/message/components/ChatScreen/ChatHeader.tsx

@@ -7,8 +7,8 @@ import React, { useMemo } from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Avatar, Text, AppBackButton } from '../../../../components/common';
-import { colors, spacing } from '../../../../theme';
+import { useAppColors, spacing } from '../../../../theme';
-import { chatScreenStyles as baseStyles } from './styles';
+import { useChatScreenStyles } from './styles';
 import { useBreakpointGTE } from '../../../../hooks/useResponsive';
 import { ChatHeaderProps } from './types';
 
@@ -24,6 +24,9 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
   onGroupInfoPress,
   isWideScreen: propIsWideScreen,
 }) => {
+  const colors = useAppColors();
+  const baseStyles = useChatScreenStyles();
+
   // 响应式布局
   // 使用 768px 作为大屏幕和小屏幕的分界线
   const isWideScreenHook = useBreakpointGTE('lg');
@@ -57,7 +60,7 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
         fontSize: isWideScreen ? 13 : 12,
       },
     });
-  }, [isWideScreen]);
+  }, [isWideScreen, baseStyles]);
 
   // 获取显示标题
   const getDisplayTitle = () => {

src/screens/message/components/ChatScreen/ChatInput.tsx

@@ -7,8 +7,8 @@ import React, { useMemo } from 'react';
 import { View, TouchableOpacity, TextInput, ActivityIndicator, ScrollView, StyleSheet, Image as RNImage } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Text } from '../../../../components/common';
-import { colors } from '../../../../theme';
+import { useAppColors } from '../../../../theme';
-import { chatScreenStyles as baseStyles } from './styles';
+import { useChatScreenStyles } from './styles';
 import { useBreakpointGTE } from '../../../../hooks/useResponsive';
 import { ChatInputProps, GroupMessage, SenderInfo } from './types';
 import { extractTextFromSegments } from '../../../../types/dto';
@@ -39,6 +39,8 @@ export const ChatInput: React.FC<ChatInputProps & {
   otherUser,
   getSenderInfo,
 }) => {
+  const colors = useAppColors();
+  const styles = useChatScreenStyles();
   const isDisabled = isGroupChat && isMuted;
 
   // 获取当前用户ID
@@ -46,7 +48,6 @@ export const ChatInput: React.FC<ChatInputProps & {
 
   // 响应式布局
   const isWideScreen = useBreakpointGTE('lg');
-  const styles = baseStyles;
 
   const inputContainerStyle = useMemo(() => ([
     styles.inputContainer,

src/screens/message/components/ChatScreen/EmojiPanel.tsx

@@ -10,11 +10,11 @@ import { Image as ExpoImage } from 'expo-image';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
 import { Text } from '../../../../components/common';
-import { chatScreenStyles as baseStyles } from './styles';
+import { useChatScreenStyles } from './styles';
 import { useResponsive, useBreakpointGTE } from '../../../../hooks/useResponsive';
 import { EMOJIS } from './constants';
 import { CustomSticker, getCustomStickers, batchDeleteStickers, addStickerFromUrl } from '../../../../services/stickerService';
-import { colors, spacing } from '../../../../theme';
+import { useAppColors, spacing } from '../../../../theme';
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
 
@@ -41,6 +41,8 @@ export const EmojiPanel: React.FC<EmojiPanelProps> = ({
   onInsertSticker,
   onClose,
 }) => {
+  const colors = useAppColors();
+  const baseStyles = useChatScreenStyles();
   const [activeTab, setActiveTab] = useState<TabType>('emoji');
   const [stickers, setStickers] = useState<CustomSticker[]>([]);
   const [loadingStickers, setLoadingStickers] = useState(false);
@@ -82,7 +84,7 @@ export const EmojiPanel: React.FC<EmojiPanelProps> = ({
         lineHeight: emojiSize.size + 6,
       },
     });
-  }, [emojiSize, emojiColumns]);
+  }, [emojiSize, emojiColumns, baseStyles]);
 
   // 加载自定义表情
   const loadStickers = useCallback(async () => {

src/screens/message/components/ChatScreen/GroupInfoPanel.tsx

@@ -5,7 +5,7 @@
  * 实现手机端群信息界面的核心功能
  */
 
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -17,7 +17,7 @@ import {
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Avatar, Text } from '../../../../components/common';
-import { colors, spacing, fontSizes, shadows } from '../../../../theme';
+import { useAppColors, spacing, fontSizes, shadows, type AppColors } from '../../../../theme';
 import { GroupMemberResponse, GroupResponse, GroupAnnouncementResponse } from '../../../../types/dto';
 import { useBreakpointGTE } from '../../../../hooks/useResponsive';
 import { groupManager } from '../../../../stores/groupManager';
@@ -53,6 +53,8 @@ export const GroupInfoPanel: React.FC<GroupInfoPanelProps> = ({
   onInviteMembers,
   onViewAllMembers,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createGroupInfoPanelStyles(colors), [colors]);
   const isWideScreen = useBreakpointGTE('lg');
   const slideAnim = React.useRef(new Animated.Value(PANEL_WIDTH)).current;
   const fadeAnim = React.useRef(new Animated.Value(0)).current;
@@ -363,7 +365,8 @@ export const GroupInfoPanel: React.FC<GroupInfoPanelProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+function createGroupInfoPanelStyles(colors: AppColors) {
+  return StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
@@ -378,7 +381,7 @@ const styles = StyleSheet.create({
     top: 0,
     bottom: 0,
     width: PANEL_WIDTH,
-    backgroundColor: '#FFF',
+    backgroundColor: colors.background.paper,
     zIndex: 101,
     ...shadows.lg,
   },
@@ -389,12 +392,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.md,
     borderBottomWidth: 1,
-    borderBottomColor: '#E8E8E8',
+    borderBottomColor: colors.divider,
   },
   headerTitle: {
     fontSize: fontSizes.xl,
     fontWeight: '600',
-    color: '#333',
+    color: colors.text.primary,
   },
   closeButton: {
     padding: spacing.xs,
@@ -409,12 +412,12 @@ const styles = StyleSheet.create({
   groupName: {
     fontSize: fontSizes.xl,
     fontWeight: '600',
-    color: '#333',
+    color: colors.text.primary,
     marginTop: spacing.md,
   },
   memberCount: {
     fontSize: fontSizes.md,
-    color: '#999',
+    color: colors.text.secondary,
     marginTop: spacing.xs,
   },
   joinType: {
@@ -442,7 +445,7 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#E8E8E8',
+    backgroundColor: colors.divider,
     marginHorizontal: spacing.md,
   },
   section: {
@@ -456,11 +459,11 @@ const styles = StyleSheet.create({
   sectionTitle: {
     fontSize: fontSizes.md,
     fontWeight: '600',
-    color: '#333',
+    color: colors.text.primary,
     marginLeft: spacing.xs,
   },
   noticeBox: {
-    backgroundColor: '#FFF9E6',
+    backgroundColor: colors.chat.tipBg,
     padding: spacing.md,
     borderRadius: 8,
     borderLeftWidth: 3,
@@ -468,23 +471,23 @@ const styles = StyleSheet.create({
   },
   noticeText: {
     fontSize: fontSizes.sm,
-    color: '#666',
+    color: colors.text.secondary,
     lineHeight: 20,
   },
   noticeTime: {
     fontSize: fontSizes.xs,
-    color: '#999',
+    color: colors.text.hint,
     marginTop: spacing.xs,
     textAlign: 'right',
   },
   descriptionBox: {
-    backgroundColor: '#F5F7FA',
+    backgroundColor: colors.chat.surfaceMuted,
     padding: spacing.md,
     borderRadius: 8,
   },
   description: {
     fontSize: fontSizes.sm,
-    color: '#666',
+    color: colors.text.secondary,
     lineHeight: 20,
   },
   memberList: {
@@ -518,7 +521,7 @@ const styles = StyleSheet.create({
   },
   memberName: {
     fontSize: fontSizes.md,
-    color: '#333',
+    color: colors.text.primary,
     flex: 1,
   },
   ownerBadge: {
@@ -541,7 +544,7 @@ const styles = StyleSheet.create({
   },
   moreMembers: {
     fontSize: fontSizes.sm,
-    color: '#999',
+    color: colors.text.secondary,
     textAlign: 'center',
     paddingVertical: spacing.sm,
   },
@@ -550,15 +553,15 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     paddingVertical: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: '#F0F0F0',
+    borderBottomColor: colors.chat.borderHairline,
   },
   infoLabel: {
     fontSize: fontSizes.sm,
-    color: '#999',
+    color: colors.text.secondary,
   },
   infoValue: {
     fontSize: fontSizes.sm,
-    color: '#333',
+    color: colors.text.primary,
   },
   actionSection: {
     padding: spacing.md,
@@ -588,6 +591,7 @@ const styles = StyleSheet.create({
   leaveButtonText: {
     color: colors.error.main,
   },
-});
+  });
+}
 
 export default GroupInfoPanel;

src/screens/message/components/ChatScreen/LongPressMenu.tsx

@@ -15,7 +15,7 @@ import {
   Platform,
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { chatScreenStyles as styles } from './styles';
+import { useChatScreenStyles } from './styles';
 import { LongPressMenuProps } from './types';
 import { RECALL_TIME_LIMIT } from './constants';
 import { extractTextFromSegments, ImageSegmentData } from '../../../../types/dto';
@@ -34,6 +34,7 @@ export const LongPressMenu: React.FC<LongPressMenuProps> = ({
   onDelete,
   onAddSticker,
 }) => {
+  const styles = useChatScreenStyles();
   const scaleAnimation = useRef(new Animated.Value(0)).current;
   const opacityAnimation = useRef(new Animated.Value(0)).current;
   const blurActiveElementOnWeb = () => {

src/screens/message/components/ChatScreen/MentionPanel.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import { View, ScrollView, TouchableOpacity } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Avatar, Text } from '../../../../components/common';
-import { chatScreenStyles as styles } from './styles';
+import { useChatScreenStyles } from './styles';
 import { MentionPanelProps } from './types';
 
 export const MentionPanel: React.FC<MentionPanelProps> = ({
@@ -18,6 +18,7 @@ export const MentionPanel: React.FC<MentionPanelProps> = ({
   onMentionAll,
   onClose,
 }) => {
+  const styles = useChatScreenStyles();
   // 过滤成员列表
   const filteredMembers = members.filter(member => {
     if (member.user_id === currentUserId) return false; // 排除自己

src/screens/message/components/ChatScreen/MessageBubble.tsx

@@ -15,20 +15,12 @@ import {
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Avatar, Text, ImageGridItem } from '../../../../components/common';
-import { chatScreenStyles as baseStyles } from './styles';
+import { useChatScreenStyles } from './styles';
 import { useResponsive, useBreakpointGTE } from '../../../../hooks/useResponsive';
 import { MessageBubbleProps, SenderInfo, MenuPosition, GroupMessage } from './types';
 import { MessageSegmentsRenderer } from './SegmentRenderer';
 import { MessageSegment, ImageSegmentData, extractTextFromSegments } from '../../../../types/dto';
 import { SwipeableMessageBubble } from './SwipeableMessageBubble';
-import { 
-  getBubbleBorderRadius, 
-  getMessageGroupPosition, 
-  shouldShowSenderInfo,
-  bubbleColors,
-  bubbleStyles,
-} from './bubbleStyles';
-
 // 获取屏幕宽度
 const { width: SCREEN_WIDTH } = Dimensions.get('window');
 
@@ -61,6 +53,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
 }) => {
   const bubbleRef = useRef<View>(null);
   const pressPositionRef = useRef({ x: 0, y: 0 });
+  const baseStyles = useChatScreenStyles();
 
   // 响应式布局
   const { width } = useResponsive();
@@ -89,7 +82,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
         height: isWideScreen ? 280 : 220,
       },
     });
-  }, [maxContentWidth, isWideScreen]);
+  }, [maxContentWidth, isWideScreen, baseStyles]);
 
   // 系统通知消息特殊处理
   // 支持两种判断方式：
@@ -236,16 +229,36 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
     }
   };
 
+  const renderBubbleShell = useCallback(
+    (
+      child: React.ReactNode,
+      innerExtra: (object | undefined | null | false)[] = []
+    ) => (
+      <View
+        style={[
+          styles.messageBubbleOuter,
+          isMe ? styles.myBubbleOuter : styles.theirBubbleOuter,
+        ]}
+      >
+        <View
+          style={[
+            styles.messageBubbleInner,
+            isMe ? styles.myBubbleInner : styles.theirBubbleInner,
+            ...innerExtra.filter(Boolean),
+          ]}
+        >
+          {child}
+        </View>
+      </View>
+    ),
+    [isMe, styles]
+  );
+
   // 渲染消息内容
   const renderMessageContent = () => {
     // 撤回消息
     if (isRecalled) {
-      return (
+      return renderBubbleShell(
-        <View style={[
-          styles.messageBubble,
-          isMe ? styles.myBubble : styles.theirBubble,
-          styles.recalledBubble,
-        ]}>
         <Text
           style={[
             isMe ? styles.myBubbleText : styles.theirBubbleText,
@@ -254,8 +267,8 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
           selectable={false}
         >
           消息已撤回
-          </Text>
+        </Text>,
-        </View>
+        [styles.recalledBubble]
       );
     }
 
@@ -282,11 +295,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
     
     // 如果没有 segments，显示空内容或错误提示
     if (!hasSegments) {
-      return (
+      return renderBubbleShell(
-        <View style={[
-          styles.messageBubble,
-          isMe ? styles.myBubble : styles.theirBubble,
-        ]}>
         <Text
           style={[
             isMe ? styles.myBubbleText : styles.theirBubbleText,
@@ -296,20 +305,13 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
         >
           [消息格式错误]
         </Text>
-        </View>
       );
     }
     
     // 检查是否有回复，用于调整气泡样式
     const hasReply = segments.some(s => s.type === 'reply');
 
-    return (
+    return renderBubbleShell(
-      <View style={[
-        styles.messageBubble,
-        isMe ? styles.myBubble : styles.theirBubble,
-        hasReply && segmentStyles.replyBubble,
-        isPureImageMessage && segmentStyles.pureImageBubble,
-      ]}>
       <MessageSegmentsRenderer
         segments={segments}
         isMe={isMe}
@@ -345,8 +347,8 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
           }
         }}
         onLinkPress={() => undefined}
-        />
+      />,
-      </View>
+      [hasReply && segmentStyles.replyBubble, isPureImageMessage && segmentStyles.pureImageBubble]
     );
   };
 

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}>

src/screens/message/components/ChatScreen/SegmentRenderer.tsx

@@ -31,7 +31,7 @@ import {
   UserDTO,
   extractTextFromSegments,
 } from '../../../../types/dto';
-import { colors, spacing } from '../../../../theme';
+import { spacing, useAppColors, type AppColors } from '../../../../theme';
 import { SenderInfo } from './types';
 
 const IMAGE_MAX_WIDTH = 200;
@@ -142,12 +142,11 @@ export const renderSegment = (
 /**
  * 渲染文本 Segment
  */
-const renderTextSegment = (data: TextSegmentData, isMe: boolean): React.ReactNode => {
+const TextSegmentBody: React.FC<{ data: TextSegmentData; isMe: boolean }> = ({ data, isMe }) => {
-  // 兼容 content 和 text 两种字段
+  const styles = useSegmentStyles();
   const text = data.content ?? data.text ?? '';
   return (
     <Text
-      key={`text-${text.substring(0, 10)}`}
       style={[styles.textContent, isMe ? styles.textMe : styles.textOther]}
       selectable={false}
     >
@@ -156,6 +155,11 @@ const renderTextSegment = (data: TextSegmentData, isMe: boolean): React.ReactNod
   );
 };
 
+const renderTextSegment = (data: TextSegmentData, isMe: boolean): React.ReactNode => {
+  const key = `text-${(data.content ?? data.text ?? '').substring(0, 10)}`;
+  return <TextSegmentBody key={key} data={data} isMe={isMe} />;
+};
+
 /**
  * 渲染图片 Segment
  */
@@ -166,6 +170,7 @@ const ImageSegment: React.FC<{
   onImagePress?: (url: string) => void;
   onImageLongPress?: (position?: { x: number; y: number }) => void;
 }> = ({ data, isMe, onImagePress, onImageLongPress }) => {
+  const styles = useSegmentStyles();
   const pressPositionRef = useRef({ x: 0, y: 0 });
   const [dimensions, setDimensions] = useState<{ width: number; height: number } | null>(null);
   const [loadError, setLoadError] = useState(false);
@@ -362,16 +367,13 @@ const renderImageSegment = (
 /**
  * 渲染 @ Segment
  */
-const renderAtSegment = (
+const AtSegmentBody: React.FC<{
-  data: AtSegmentData, 
+  data: AtSegmentData;
-  props: Omit<SegmentRendererProps, 'segment'>
+  props: Omit<SegmentRendererProps, 'segment'>;
-): React.ReactNode => {
+}> = ({ data, props }) => {
+  const styles = useSegmentStyles();
   const { currentUserId, memberMap, onAtPress, isMe } = props;
-  
-  // 判断是否@当前用户
   const isAtMe = data.user_id === currentUserId || data.user_id === 'all';
-  
-  // 优先从 memberMap 中查找昵称，兜底使用 data.nickname（兼容旧消息），再兜底显示"用户"
   let displayName: string;
   if (data.user_id === 'all') {
     displayName = '所有人';
@@ -379,10 +381,8 @@ const renderAtSegment = (
     const member = memberMap?.get(data.user_id);
     displayName = member?.nickname || data.nickname || '用户';
   }
-  
   return (
     <Text
-      key={`at-${data.user_id}`}
       style={[
         styles.atText,
         isMe ? styles.atTextMe : styles.atTextOther,
@@ -395,15 +395,19 @@ const renderAtSegment = (
   );
 };
 
+const renderAtSegment = (
+  data: AtSegmentData,
+  props: Omit<SegmentRendererProps, 'segment'>
+): React.ReactNode => <AtSegmentBody key={`at-${data.user_id}`} data={data} props={props} />;
+
 /**
  * 渲染表情 Segment
  */
-const renderFaceSegment = (data: FaceSegmentData, isMe: boolean): React.ReactNode => {
+const FaceSegmentBody: React.FC<{ data: FaceSegmentData }> = ({ data }) => {
-  // 如果有自定义表情URL，显示图片
+  const styles = useSegmentStyles();
   if (data.url) {
     return (
       <ExpoImage
-        key={`face-${data.id}`}
         source={{ uri: data.url }}
         style={styles.faceImage}
         contentFit="cover"
@@ -411,29 +415,32 @@ const renderFaceSegment = (data: FaceSegmentData, isMe: boolean): React.ReactNod
       />
     );
   }
-  
-  // 否则显示表情名称（后续可以映射到本地表情）
   return (
-    <Text key={`face-${data.id}`} style={styles.faceText}>
+    <Text style={styles.faceText}>
       [{data.name || `表情${data.id}`}]
     </Text>
   );
 };
 
+const renderFaceSegment = (data: FaceSegmentData, _isMe: boolean): React.ReactNode => (
+  <FaceSegmentBody key={`face-${data.id}`} data={data} />
+);
+
 /**
  * 渲染语音 Segment
  */
-const renderVoiceSegment = (data: VoiceSegmentData, isMe: boolean): React.ReactNode => {
+const VoiceSegmentBody: React.FC<{ data: VoiceSegmentData; isMe: boolean }> = ({ data, isMe }) => {
+  const styles = useSegmentStyles();
+  const themeColors = useAppColors();
   return (
     <TouchableOpacity
-      key={`voice-${data.url}`}
       style={[styles.voiceContainer, isMe ? styles.voiceMe : styles.voiceOther]}
       activeOpacity={0.7}
     >
       <MaterialCommunityIcons
         name="microphone"
         size={20}
-        color={isMe ? '#FFFFFF' : '#666666'}
+        color={isMe ? themeColors.primary.contrast : themeColors.chat.textTertiary}
       />
       <Text style={[styles.voiceDuration, isMe ? styles.textMe : styles.textOther]}>
         {data.duration ? `${data.duration}"` : '语音'}
@@ -442,10 +449,16 @@ const renderVoiceSegment = (data: VoiceSegmentData, isMe: boolean): React.ReactN
   );
 };
 
+const renderVoiceSegment = (data: VoiceSegmentData, isMe: boolean): React.ReactNode => (
+  <VoiceSegmentBody key={`voice-${data.url}`} data={data} isMe={isMe} />
+);
+
 /**
  * 视频 Segment 组件 - 支持点击播放
  */
 const VideoSegment: React.FC<{ data: VideoSegmentData; isMe: boolean }> = ({ data, isMe }) => {
+  const styles = useSegmentStyles();
+  const themeColors = useAppColors();
   const [playerVisible, setPlayerVisible] = useState(false);
 
   const handlePress = useCallback(() => {
@@ -469,11 +482,11 @@ const VideoSegment: React.FC<{ data: VideoSegmentData; isMe: boolean }> = ({ dat
           />
         ) : (
           <View style={styles.videoPlaceholder}>
-            <MaterialCommunityIcons name="video" size={32} color="#FFFFFF" />
+            <MaterialCommunityIcons name="video" size={32} color={themeColors.primary.contrast} />
           </View>
         )}
         <View style={styles.videoPlayIcon}>
-          <MaterialCommunityIcons name="play-circle" size={40} color="#FFFFFF" />
+          <MaterialCommunityIcons name="play-circle" size={40} color={themeColors.primary.contrast} />
         </View>
         {data.duration && (
           <Text style={styles.videoDuration}>{formatDuration(data.duration)}</Text>
@@ -496,12 +509,12 @@ const renderVideoSegment = (data: VideoSegmentData, isMe: boolean): React.ReactN
 /**
  * 渲染文件 Segment
  */
-const renderFileSegment = (data: FileSegmentData, isMe: boolean): React.ReactNode => {
+const FileSegmentBody: React.FC<{ data: FileSegmentData; isMe: boolean }> = ({ data, isMe }) => {
+  const styles = useSegmentStyles();
+  const themeColors = useAppColors();
   const fileSize = data.size ? formatFileSize(data.size) : '';
-  
   return (
     <TouchableOpacity
-      key={`file-${data.url}`}
       style={[styles.fileContainer, isMe ? styles.fileMe : styles.fileOther]}
       activeOpacity={0.7}
     >
@@ -509,7 +522,7 @@ const renderFileSegment = (data: FileSegmentData, isMe: boolean): React.ReactNod
         <MaterialCommunityIcons
           name="file-document"
           size={28}
-          color={isMe ? '#FFFFFF' : colors.primary.main}
+          color={isMe ? themeColors.primary.contrast : themeColors.primary.main}
         />
       </View>
       <View style={styles.fileInfo}>
@@ -519,21 +532,24 @@ const renderFileSegment = (data: FileSegmentData, isMe: boolean): React.ReactNod
         >
           {data.name}
         </Text>
-        {fileSize && (
+        {fileSize ? <Text style={styles.fileSize}>{fileSize}</Text> : null}
-          <Text style={styles.fileSize}>{fileSize}</Text>
-        )}
       </View>
     </TouchableOpacity>
   );
 };
 
+const renderFileSegment = (data: FileSegmentData, isMe: boolean): React.ReactNode => (
+  <FileSegmentBody key={`file-${data.url}`} data={data} isMe={isMe} />
+);
+
 /**
  * 渲染链接 Segment
  */
-const renderLinkSegment = (
+const LinkSegmentBody: React.FC<{
-  data: LinkSegmentData, 
+  data: LinkSegmentData;
-  props: Omit<SegmentRendererProps, 'segment'>
+  props: Omit<SegmentRendererProps, 'segment'>;
-): React.ReactNode => {
+}> = ({ data, props }) => {
+  const styles = useSegmentStyles();
   const { onLinkPress, isMe } = props;
 
   const handlePress = async () => {
@@ -555,23 +571,22 @@ const renderLinkSegment = (
 
   return (
     <TouchableOpacity
-      key={`link-${data.url}`}
       style={[styles.linkContainer, isMe ? styles.linkMe : styles.linkOther]}
       onPress={handlePress}
       activeOpacity={0.7}
     >
-      {data.image && (
+      {data.image ? (
         <ExpoImage source={{ uri: data.image }} style={styles.linkImage} contentFit="cover" cachePolicy="memory" />
-      )}
+      ) : null}
       <View style={styles.linkContent}>
         <Text style={styles.linkTitle} numberOfLines={2}>
           {data.title || data.url}
         </Text>
-        {data.description && (
+        {data.description ? (
           <Text style={styles.linkDescription} numberOfLines={2}>
             {data.description}
           </Text>
-        )}
+        ) : null}
         <Text style={styles.linkUrl} numberOfLines={1}>
           {(() => {
             try {
@@ -586,6 +601,11 @@ const renderLinkSegment = (
   );
 };
 
+const renderLinkSegment = (
+  data: LinkSegmentData,
+  props: Omit<SegmentRendererProps, 'segment'>
+): React.ReactNode => <LinkSegmentBody key={`link-${data.url}`} data={data} props={props} />;
+
 /**
  * 回复预览组件（用于消息气泡内显示回复引用）
  */
@@ -596,6 +616,9 @@ export const ReplyPreviewSegment: React.FC<ReplyPreviewSegmentProps> = ({
   onPress,
   getSenderInfo,
 }) => {
+  const themeColors = useAppColors();
+  const styles = useMemo(() => createSegmentStyles(themeColors), [themeColors]);
+
   if (!replyMessage) {
     // 如果没有引用消息详情，只显示引用ID
     return (
@@ -605,9 +628,11 @@ export const ReplyPreviewSegment: React.FC<ReplyPreviewSegmentProps> = ({
         activeOpacity={0.7}
       >
         <View style={styles.replyLine} />
+        <View style={styles.replyContent}>
           <Text style={styles.replyText} numberOfLines={2}>
             引用消息
           </Text>
+        </View>
       </TouchableOpacity>
     );
   }
@@ -658,6 +683,7 @@ export const ReplyPreviewSegment: React.FC<ReplyPreviewSegmentProps> = ({
       onPress={onPress}
       activeOpacity={0.7}
     >
+      <View style={styles.replyLine} />
       <View style={styles.replyContent}>
         <Text style={styles.replySender} numberOfLines={1}>
           {senderName}:
@@ -702,7 +728,9 @@ export const MessageSegmentsRenderer: React.FC<{
   onLinkPress,
   getSenderInfo,
 }) => {
-  // 找出 reply segment（如果有）
+  const themeColors = useAppColors();
+  const segStyles = useMemo(() => createSegmentStyles(themeColors), [themeColors]);
+
   const replySegment = segments.find(s => s.type === 'reply');
   const otherSegments = segments.filter(s => s.type !== 'reply');
   const chunks = partitionMessageSegments(otherSegments);
@@ -719,24 +747,23 @@ export const MessageSegmentsRenderer: React.FC<{
   };
 
   return (
-    <View style={styles.segmentsContainer}>
+    <SegmentStylesContext.Provider value={segStyles}>
-      {/* 回复预览 */}
+      <View style={segStyles.segmentsContainer}>
-      {replySegment && (
+        {replySegment ? (
           <ReplyPreviewSegment
-          replyData={(replySegment.data as ReplySegmentData)}
+            replyData={replySegment.data as ReplySegmentData}
             replyMessage={replyMessage}
             isMe={isMe}
             onPress={() => onReplyPress?.((replySegment.data as ReplySegmentData).id)}
             getSenderInfo={getSenderInfo}
           />
-      )}
+        ) : null}
 
-      {/* 其他 Segment：行内文案与块级图片/媒体分行展示，多图纵向排列 */}
+        <View style={segStyles.segmentsColumn}>
-      <View style={styles.segmentsColumn}>
           {chunks.map((chunk, i) => {
             if (chunk.kind === 'inline') {
               return (
-              <View key={`inl-${i}`} style={styles.inlineChunk}>
+                <View key={`inl-${i}`} style={segStyles.inlineChunk}>
                   {chunk.parts.map((segment, j) => (
                     <React.Fragment
                       key={`segment-${segment.type}-${(segment as any)?.data?.url || (segment as any)?.data?.id || (segment as any)?.data?.user_id || j}`}
@@ -749,11 +776,11 @@ export const MessageSegmentsRenderer: React.FC<{
             }
             if (chunk.kind === 'images') {
               return (
-              <View key={`imgs-${i}`} style={styles.imagesChunk}>
+                <View key={`imgs-${i}`} style={segStyles.imagesChunk}>
                   {chunk.parts.map((segment, j) => (
                     <View
                       key={`img-${(segment.data as ImageSegmentData)?.url || j}`}
-                    style={j < chunk.parts.length - 1 ? styles.imageStackItem : styles.imageStackItemLast}
+                      style={j < chunk.parts.length - 1 ? segStyles.imageStackItem : segStyles.imageStackItemLast}
                     >
                       {renderSegment(segment, renderProps)}
                     </View>
@@ -762,13 +789,14 @@ export const MessageSegmentsRenderer: React.FC<{
               );
             }
             return (
-            <View key={`blk-${i}`} style={styles.blockChunk}>
+              <View key={`blk-${i}`} style={segStyles.blockChunk}>
                 {renderSegment(chunk.segment, renderProps)}
               </View>
             );
           })}
         </View>
       </View>
+    </SegmentStylesContext.Provider>
   );
 };
 
@@ -787,7 +815,8 @@ const formatDuration = (seconds: number): string => {
   return mins > 0 ? `${mins}:${secs.toString().padStart(2, '0')}` : `0:${secs.toString().padStart(2, '0')}`;
 };
 
-const styles = StyleSheet.create({
+function createSegmentStyles(colors: AppColors) {
+  return StyleSheet.create({
   // 容器
   segmentsContainer: {
     flexDirection: 'column',
@@ -826,10 +855,10 @@ const styles = StyleSheet.create({
     fontWeight: '400',
   },
   textMe: {
-    color: '#1A1A1A', // 统一使用深色字体
+    color: colors.chat.textPrimary,
   },
   textOther: {
-    color: '#1A1A1A', // 统一使用深色字体
+    color: colors.chat.textPrimary,
   },
 
   // @提及 - Telegram风格：蓝色高亮
@@ -845,7 +874,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
   },
   atTextOther: {
-    color: '#4A88C7',
+    color: colors.chat.link,
     backgroundColor: 'rgba(74, 136, 199, 0.12)',
     borderRadius: 4,
   },
@@ -860,7 +889,7 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     overflow: 'hidden',
     marginTop: 4,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.15,
     shadowRadius: 4,
@@ -892,7 +921,7 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm + 2,
     borderRadius: 20,
     minWidth: 100,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.1,
     shadowRadius: 2,
@@ -916,7 +945,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     width: 220,
     height: 165,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.15,
     shadowRadius: 4,
@@ -953,7 +982,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     bottom: 10,
     right: 10,
-    color: '#FFFFFF',
+    color: colors.primary.contrast,
     fontSize: 13,
     fontWeight: '600',
     backgroundColor: 'rgba(0, 0, 0, 0.6)',
@@ -971,7 +1000,7 @@ const styles = StyleSheet.create({
     borderRadius: 16,
     minWidth: 220,
     maxWidth: 300,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.08,
     shadowRadius: 2,
@@ -981,7 +1010,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(255, 255, 255, 0.25)',
   },
   fileOther: {
-    backgroundColor: '#F8F9FA',
+    backgroundColor: colors.chat.surfaceRaised,
   },
   fileIcon: {
     marginRight: spacing.md,
@@ -998,11 +1027,11 @@ const styles = StyleSheet.create({
   fileName: {
     fontSize: 15,
     fontWeight: '600',
-    color: '#1A1A1A',
+    color: colors.chat.textPrimary,
   },
   fileSize: {
     fontSize: 13,
-    color: '#8E8E93',
+    color: colors.chat.textSecondary,
     marginTop: 4,
     fontWeight: '500',
   },
@@ -1012,8 +1041,8 @@ const styles = StyleSheet.create({
     borderRadius: 16,
     overflow: 'hidden',
     maxWidth: 280,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.1,
     shadowRadius: 4,
@@ -1023,7 +1052,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(255, 255, 255, 0.95)',
   },
   linkOther: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
   },
   linkImage: {
     width: '100%',
@@ -1035,12 +1064,12 @@ const styles = StyleSheet.create({
   linkTitle: {
     fontSize: 15,
     fontWeight: '600',
-    color: '#1A1A1A',
+    color: colors.chat.textPrimary,
     lineHeight: 20,
   },
   linkDescription: {
     fontSize: 13,
-    color: '#666666',
+    color: colors.chat.textTertiary,
     marginTop: 6,
     lineHeight: 18,
   },
@@ -1051,16 +1080,17 @@ const styles = StyleSheet.create({
     fontWeight: '500',
   },
 
-  // 回复预览 - Telegram风格：简洁设计
+  // 回复预览 - Telegram风格：左侧色条 + 简洁背景
   replyPreview: {
     flexDirection: 'row',
+    alignItems: 'center',
     marginBottom: 0,
     paddingVertical: spacing.sm,
     paddingHorizontal: spacing.sm + 2,
     borderRadius: 6,
     width: '100%',
     minWidth: 200,
-    // 移除阴影
+    gap: 8,
     shadowColor: 'transparent',
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0,
@@ -1074,28 +1104,45 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0, 0, 0, 0.03)',
   },
   replyLine: {
-    width: 0,
+    width: 3,
-    marginRight: 0,
+    alignSelf: 'stretch',
+    minHeight: 28,
+    borderRadius: 2,
+    backgroundColor: colors.chat.link,
   },
   replyContent: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     flexWrap: 'nowrap',
+    minWidth: 0,
   },
   replySender: {
     fontSize: 13,
     fontWeight: '600',
-    color: '#4A88C7',
+    color: colors.chat.link,
     marginRight: 6,
     flexShrink: 0,
   },
   replyText: {
     fontSize: 13,
-    color: '#666666',
+    color: colors.chat.textTertiary,
     flex: 1,
     flexShrink: 1,
   },
-});
+  });
+}
+
+type SegmentStyles = ReturnType<typeof createSegmentStyles>;
+
+const SegmentStylesContext = React.createContext<SegmentStyles | null>(null);
+
+function useSegmentStyles(): SegmentStyles {
+  const ctx = React.useContext(SegmentStylesContext);
+  if (!ctx) {
+    throw new Error('useSegmentStyles 必须在 MessageSegmentsRenderer 内使用');
+  }
+  return ctx;
+}
 
 export default MessageSegmentsRenderer;

src/screens/message/components/ChatScreen/SwipeableMessageBubble.tsx

@@ -8,7 +8,7 @@ import { View, StyleSheet, Animated } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { PanGestureHandler, State } from 'react-native-gesture-handler';
 import * as Haptics from 'expo-haptics';
-import { colors } from '../../../../theme';
+import { useAppColors } from '../../../../theme';
 
 // 滑动阈值
 const SWIPE_THRESHOLD = 30;
@@ -27,6 +27,7 @@ export const SwipeableMessageBubble: React.FC<SwipeableMessageBubbleProps> = ({
   onReply,
   enabled = true,
 }) => {
+  const colors = useAppColors();
   const translateX = useRef(new Animated.Value(0)).current;
   const hasTriggeredRef = useRef(false);
 

src/screens/message/components/ChatScreen/bubbleStyles.ts

@@ -4,52 +4,40 @@
  */
 
 import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { colors, spacing } from '../../../../theme';
+import { spacing, type AppColors } from '../../../../theme';
 
-// 气泡圆角大小（参考 Element X: 12pt）
 export const BUBBLE_RADIUS = 16;
 
-// 气泡颜色方案（参考 Element X 的语义化颜色）
+export function getBubbleColors(colors: AppColors) {
-export const bubbleColors = {
+  return {
-  // 自己发送的消息
     outgoing: {
-    background: '#E8E8E8', // Element X 风格：灰色系
+      background: colors.chat.bubbleOutgoing,
-    text: '#1A1A1A',
+      text: colors.chat.textPrimary,
     },
-  // 收到的消息
     incoming: {
-    background: '#FFFFFF',
+      background: colors.chat.bubbleIncoming,
-    text: '#1A1A1A',
+      text: colors.chat.textPrimary,
     },
-  // 被回复的消息高亮
     replyHighlight: {
-    background: 'rgba(74, 136, 199, 0.1)',
+      background: colors.chat.replyTint,
-    borderLeft: '#4A88C7',
+      borderLeft: colors.chat.replyBorder,
     },
-};
+  };
+}
 
-// 消息在组中的位置类型
 export type MessageGroupPosition = 'single' | 'first' | 'middle' | 'last';
 
-/**
+export const getBubbleBorderRadius = (isMe: boolean, position: MessageGroupPosition): ViewStyle => {
- * 根据消息在组中的位置获取圆角样式
- * 参考 Element X 的动态圆角逻辑
- */
-export const getBubbleBorderRadius = (
-  isMe: boolean,
-  position: MessageGroupPosition
-): ViewStyle => {
   const radius = BUBBLE_RADIUS;
 
   if (isMe) {
-    // 自己发送的消息
     switch (position) {
       case 'single':
         return {
           borderTopLeftRadius: radius,
           borderTopRightRadius: radius,
           borderBottomLeftRadius: radius,
-          borderBottomRightRadius: 4, // 尖角在右下
+          borderBottomRightRadius: 4,
         };
       case 'first':
         return {
@@ -74,11 +62,10 @@ export const getBubbleBorderRadius = (
         };
     }
   } else {
-    // 收到的消息
     switch (position) {
       case 'single':
         return {
-          borderTopLeftRadius: 4, // 尖角在左上
+          borderTopLeftRadius: 4,
           borderTopRightRadius: radius,
           borderBottomLeftRadius: radius,
           borderBottomRightRadius: radius,
@@ -108,9 +95,6 @@ export const getBubbleBorderRadius = (
   }
 };
 
-/**
- * 判断消息在组中的位置
- */
 export const getMessageGroupPosition = (
   index: number,
   messages: Array<{ sender_id: string }>,
@@ -136,12 +120,9 @@ export const getMessageGroupPosition = (
   }
 };
 
-/**
- * 判断是否显示发送者信息（只在组的第一条消息显示）
- */
 export const shouldShowSenderInfo = (
   index: number,
-  messages: Array<{ sender_id: string }>,
+  messages: Array<{ sender_id: string }>
 ): boolean => {
   if (index === 0) return true;
 
@@ -151,120 +132,102 @@ export const shouldShowSenderInfo = (
   return prevMessage.sender_id !== currentMessage.sender_id;
 };
 
-/**
+export const getBubbleBaseStyle = (isMe: boolean, colors: AppColors): ViewStyle => {
- * 获取气泡基础样式
+  const bc = getBubbleColors(colors);
- */
+  return {
-export const getBubbleBaseStyle = (isMe: boolean): ViewStyle => ({
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm + 4,
     minWidth: 60,
     maxWidth: '75%',
-  backgroundColor: isMe ? bubbleColors.outgoing.background : bubbleColors.incoming.background,
+    backgroundColor: isMe ? bc.outgoing.background : bc.incoming.background,
-  // Element X 风格的微妙阴影
+    shadowColor: colors.chat.shadow,
-  shadowColor: '#000',
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.06,
     shadowRadius: 2,
     elevation: 2,
-});
+  };
+};
 
-/**
+export const getBubbleTextStyle = (isMe: boolean, colors: AppColors): TextStyle => {
- * 获取文本样式
+  const bc = getBubbleColors(colors);
- */
+  return {
-export const getBubbleTextStyle = (isMe: boolean): TextStyle => ({
+    color: isMe ? bc.outgoing.text : bc.incoming.text,
-  color: isMe ? bubbleColors.outgoing.text : bubbleColors.incoming.text,
     fontSize: 16,
     lineHeight: 23,
     letterSpacing: 0.2,
     fontWeight: '400',
-});
+  };
+};
 
-/**
+export function createBubbleStyles(colors: AppColors) {
- * 消息气泡样式集合
+  const bc = getBubbleColors(colors);
- */
+  return StyleSheet.create({
-export const bubbleStyles = StyleSheet.create({
-  // 基础气泡
     bubble: {
       paddingHorizontal: spacing.md,
       paddingVertical: spacing.sm + 4,
       minWidth: 60,
     },
-  
-  // 自己发送的消息
     outgoing: {
-    backgroundColor: bubbleColors.outgoing.background,
+      backgroundColor: bc.outgoing.background,
     },
-  
-  // 收到的消息
     incoming: {
-    backgroundColor: bubbleColors.incoming.background,
+      backgroundColor: bc.incoming.background,
     },
-  
-  // 文本样式
     text: {
       fontSize: 16,
       lineHeight: 23,
       letterSpacing: 0.2,
       fontWeight: '400',
     },
-  
-  // 阴影样式（Element X 风格）
     shadow: {
-    shadowColor: '#000',
+      shadowColor: colors.chat.shadow,
       shadowOffset: { width: 0, height: 1 },
       shadowOpacity: 0.06,
       shadowRadius: 2,
       elevation: 2,
     },
-  
-  // 长按反馈阴影
     longPressShadow: {
-    shadowColor: '#000',
+      shadowColor: colors.chat.shadow,
       shadowOffset: { width: 0, height: 3 },
       shadowOpacity: 0.12,
       shadowRadius: 8,
       elevation: 6,
     },
-  
-  // 被回复消息的高亮边框
     replyHighlight: {
       borderLeftWidth: 3,
       borderLeftColor: colors.primary.main,
-    backgroundColor: bubbleColors.replyHighlight.background,
+      backgroundColor: bc.replyHighlight.background,
     },
-  
-  // 已撤回消息
     recalled: {
-    backgroundColor: '#F5F7FA',
+      backgroundColor: colors.chat.surfaceMuted,
       borderWidth: 1,
-    borderColor: '#E8E8E8',
+      borderColor: colors.chat.border,
       borderStyle: 'dashed',
       borderRadius: 12,
     },
-  
-  // 系统通知
     systemNotice: {
       alignItems: 'center',
       marginVertical: spacing.sm,
     },
     systemNoticeText: {
       fontSize: 12,
-    color: '#8E8E93',
+      color: colors.chat.textSecondary,
-    backgroundColor: 'rgba(142, 142, 147, 0.12)',
+      backgroundColor: colors.chat.surfaceMuted,
       paddingHorizontal: spacing.md,
       paddingVertical: spacing.xs,
       borderRadius: 12,
       overflow: 'hidden',
     },
-});
+  });
+}
 
 export default {
   BUBBLE_RADIUS,
-  bubbleColors,
+  getBubbleColors,
   getBubbleBorderRadius,
   getMessageGroupPosition,
   shouldShowSenderInfo,
   getBubbleBaseStyle,
   getBubbleTextStyle,
-  bubbleStyles,
+  createBubbleStyles,
 };

src/screens/message/components/ChatScreen/index.ts

@@ -9,7 +9,7 @@ export * from './types';
 export * from './constants';
 
 // 样式
-export { chatScreenStyles } from './styles';
+export { createChatScreenStyles, useChatScreenStyles } from './styles';
 
 // 组件
 export { EmojiPanel } from './EmojiPanel';

src/screens/message/components/ChatScreen/styles.ts

@@ -3,8 +3,9 @@
  * 支持响应式布局
  */
 
+import { useMemo } from 'react';
 import { StyleSheet, Dimensions } from 'react-native';
-import { colors, spacing, shadows } from '../../../../theme';
+import { spacing, shadows, useAppColors, type AppColors } from '../../../../theme';
 
 const { width: SCREEN_WIDTH } = Dimensions.get('window');
 
@@ -18,19 +19,20 @@ const BREAKPOINTS = {
 const isWideScreen = SCREEN_WIDTH >= BREAKPOINTS.desktop;
 const isTablet = SCREEN_WIDTH >= BREAKPOINTS.tablet;
 
-export const chatScreenStyles = StyleSheet.create({
+export function createChatScreenStyles(colors: AppColors) {
+  return StyleSheet.create({
   // 容器
   container: {
     flex: 1,
-    backgroundColor: '#F0F2F5',
+    backgroundColor: colors.chat.screen,
   },
   
   // 头部
   headerContainer: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
     borderBottomWidth: 1,
     borderBottomColor: 'rgba(255, 107, 53, 0.12)',
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 3 },
     shadowOpacity: 0.06,
     shadowRadius: 10,
@@ -42,7 +44,7 @@ export const chatScreenStyles = StyleSheet.create({
     justifyContent: 'space-between',
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm + 2,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
   },
   backButton: {
     width: 38,
@@ -112,36 +114,61 @@ export const chatScreenStyles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 19,
-    backgroundColor: '#F7F8FA',
+    backgroundColor: colors.chat.surfaceRaised,
     borderWidth: 1,
-    borderColor: '#ECEFF3',
+    borderColor: colors.chat.borderLight,
   },
   
   // 消息列表
   messageListContainer: {
     flex: 1,
   },
+  // 回到底部（Telegram 式浮动条）
+  jumpToLatestFab: {
+    position: 'absolute',
+    right: 14,
+    bottom: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 20,
+    backgroundColor: 'rgba(255, 255, 255, 0.96)',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(0, 0, 0, 0.08)',
+    shadowColor: colors.chat.shadow,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.12,
+    shadowRadius: 6,
+    elevation: 4,
+  },
+  jumpToLatestFabText: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: colors.primary.main,
+  },
   listContent: {
     paddingHorizontal: spacing.md,
     paddingTop: spacing.md,
     paddingBottom: spacing.xl,
   },
   
-  // 时间分隔 - QQ风格：更明显的时间标签
+  // 时间分隔 - 轻量胶囊（弱化字重，接近 Telegram 日期条）
   timeContainer: {
     alignItems: 'center',
     marginVertical: spacing.lg,
   },
   timeText: {
-    color: '#8E8E93',
+    color: 'rgba(142, 142, 147, 0.95)',
-    fontSize: 12,
+    fontSize: 11,
-    backgroundColor: 'rgba(142, 142, 147, 0.12)',
+    backgroundColor: 'rgba(142, 142, 147, 0.1)',
-    paddingHorizontal: spacing.md,
+    paddingHorizontal: spacing.sm + 4,
-    paddingVertical: 6,
+    paddingVertical: 5,
-    borderRadius: 14,
+    borderRadius: 12,
-    fontWeight: '600',
+    fontWeight: '500',
     overflow: 'hidden',
-    letterSpacing: 0.3,
+    letterSpacing: 0.2,
   },
   
   // 系统通知
@@ -152,7 +179,7 @@ export const chatScreenStyles = StyleSheet.create({
   },
   systemNoticeText: {
     fontSize: 12,
-    color: '#8E8E93',
+    color: colors.chat.textSecondary,
     backgroundColor: 'rgba(142, 142, 147, 0.12)',
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.xs,
@@ -177,7 +204,7 @@ export const chatScreenStyles = StyleSheet.create({
   // 头像
   avatarWrapper: {
     marginHorizontal: 2,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.08,
     shadowRadius: 2,
@@ -185,7 +212,7 @@ export const chatScreenStyles = StyleSheet.create({
   },
   groupAvatarWrapper: {
     marginHorizontal: 2,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.08,
     shadowRadius: 2,
@@ -200,53 +227,59 @@ export const chatScreenStyles = StyleSheet.create({
   },
   senderName: {
     fontSize: 13,
-    color: '#4A88C7',
+    color: colors.chat.link,
     marginBottom: 4,
     marginLeft: 4,
     fontWeight: '600',
   },
   
-  // 消息气泡 - Telegram风格：浅色背景，统一字体颜色
+  // 消息气泡 - 外层极轻阴影（纯文字气泡更接近扁平 IM）
-  messageBubble: {
+  messageBubbleOuter: {
+    borderRadius: 16,
+    minWidth: 60,
+    shadowColor: colors.chat.shadow,
+    shadowOffset: { width: 0, height: 0.5 },
+    shadowOpacity: 0.04,
+    shadowRadius: 1,
+    elevation: 1,
+  },
+  myBubbleOuter: {
+    borderBottomRightRadius: 4,
+  },
+  theirBubbleOuter: {
+    borderTopLeftRadius: 4,
+  },
+  // 内层：背景 + 裁剪，防止回复条/@ 高亮在圆角外露出颜色
+  messageBubbleInner: {
+    borderRadius: 16,
+    overflow: 'hidden',
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm + 4,
-    borderRadius: 16,
-    // 自适应内容宽度
     minWidth: 60,
   },
-  myBubble: {
+  myBubbleInner: {
-    backgroundColor: '#DFF2FF', // Telegram风格的浅蓝色
+    backgroundColor: colors.chat.replyTint,
-    borderBottomRightRadius: 4, // 右下角尖，箭头在右下
+    borderBottomRightRadius: 4,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.08,
-    shadowRadius: 2,
-    elevation: 2,
   },
-  theirBubble: {
+  theirBubbleInner: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
-    borderTopLeftRadius: 4, // 左上角尖，箭头在左上
+    borderTopLeftRadius: 4,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.08,
-    shadowRadius: 2,
-    elevation: 2,
   },
   recalledBubble: {
-    backgroundColor: '#F5F7FA',
+    backgroundColor: colors.chat.surfaceMuted,
     borderWidth: 1,
-    borderColor: '#E8E8E8',
+    borderColor: colors.chat.border,
     borderStyle: 'dashed',
   },
   myBubbleText: {
-    color: '#1A1A1A', // 统一使用深色字体
+    color: colors.chat.textPrimary, // 主文案
     fontSize: 16,
     lineHeight: 23,
     letterSpacing: 0.2,
     fontWeight: '400',
   },
   theirBubbleText: {
-    color: '#1A1A1A', // 统一使用深色字体
+    color: colors.chat.textPrimary, // 主文案
     fontSize: 16,
     lineHeight: 23,
     letterSpacing: 0.2,
@@ -255,29 +288,27 @@ export const chatScreenStyles = StyleSheet.create({
   // 选中状态
   selectedBubble: {
     borderWidth: 2,
-    borderColor: '#7FB6E6',
+    borderColor: colors.chat.replyBorder,
   },
+  // 仅对齐右侧，不再套一层浅色底，避免与气泡叠色产生「边缘多出一块蓝」
   myMessageContentPanel: {
-    backgroundColor: '#DFF2FF',
+    alignItems: 'flex-end',
-    borderRadius: 14,
-    paddingHorizontal: 4,
-    paddingBottom: 4,
   },
   mySelectedBubble: {
-    backgroundColor: '#CFEAFF',
+    backgroundColor: colors.chat.replyTintActive,
     borderWidth: 2,
-    borderColor: '#7FB6E6',
+    borderColor: colors.chat.replyBorder,
   },
   theirSelectedBubble: {
-    backgroundColor: '#EEF5FC',
+    backgroundColor: colors.chat.menuHighlight,
     borderWidth: 2,
-    borderColor: '#7FB6E6',
+    borderColor: colors.chat.replyBorder,
   },
   selectedText: {
     // 文本选中时的样式
   },
   recalledText: {
-    color: '#8E8E93',
+    color: colors.chat.textSecondary,
     fontStyle: 'italic',
   },
   
@@ -285,7 +316,7 @@ export const chatScreenStyles = StyleSheet.create({
   imageBubble: {
     borderRadius: 18,
     overflow: 'hidden',
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 3 },
     shadowOpacity: 0.15,
     shadowRadius: 6,
@@ -314,27 +345,28 @@ export const chatScreenStyles = StyleSheet.create({
   },
   readStatusText: {
     fontSize: 10,
-    color: '#8E8E93',
+    color: colors.chat.textSecondary,
     fontWeight: '500',
   },
   readStatusTextRead: {
-    color: '#34C759',
+    color: colors.chat.success,
   },
   
-  // 输入框区域
+  // 输入框区域 - 与列表背景同色底栏，顶部细分隔
   inputWrapper: {
-    backgroundColor: 'transparent',
+    backgroundColor: colors.chat.screen,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: 'rgba(0, 0, 0, 0.06)',
   },
   inputContainer: {
-    backgroundColor: colors.background.paper,
+    backgroundColor: 'transparent',
-    borderWidth: 1,
+    borderWidth: 0,
-    borderColor: colors.divider,
+    borderRadius: 0,
-    borderRadius: 24,
+    marginHorizontal: 10,
-    marginHorizontal: 14,
+    marginBottom: 10,
-    marginBottom: 12,
+    marginTop: 2,
     paddingHorizontal: spacing.sm,
     paddingVertical: spacing.sm,
-    // 移除明显的阴影效果，改用更微妙的边框
     shadowColor: 'transparent',
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0,
@@ -344,7 +376,7 @@ export const chatScreenStyles = StyleSheet.create({
   inputInner: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#F7F8FA',
+    backgroundColor: colors.chat.surfaceRaised,
     borderRadius: 20,
     paddingHorizontal: spacing.xs,
     paddingVertical: 4,
@@ -357,7 +389,7 @@ export const chatScreenStyles = StyleSheet.create({
     elevation: 0,
   },
   inputInnerMuted: {
-    backgroundColor: '#F0F0F0',
+    backgroundColor: colors.chat.borderHairline,
     opacity: 0.7,
   },
   
@@ -366,7 +398,7 @@ export const chatScreenStyles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#FFF5F5',
+    backgroundColor: colors.chat.warningBg,
     paddingVertical: spacing.xs,
     paddingHorizontal: spacing.md,
     marginBottom: spacing.xs,
@@ -375,7 +407,7 @@ export const chatScreenStyles = StyleSheet.create({
   },
   mutedBannerText: {
     fontSize: 13,
-    color: '#FF3B30',
+    color: colors.chat.danger,
     fontWeight: '500',
   },
   
@@ -421,14 +453,14 @@ export const chatScreenStyles = StyleSheet.create({
   },
   input: {
     fontSize: 16,
-    color: '#1A1A1A',
+    color: colors.chat.textPrimary,
     paddingTop: 8,
     paddingBottom: 8,
     maxHeight: 100,
     lineHeight: 20,
   },
   inputMuted: {
-    color: '#CCC',
+    color: colors.chat.iconMuted,
   },
   inputTransparent: {
     color: 'transparent',
@@ -444,7 +476,7 @@ export const chatScreenStyles = StyleSheet.create({
   },
   inputHighlightText: {
     fontSize: 16,
-    color: '#1A1A1A',
+    color: colors.chat.textPrimary,
     lineHeight: 20,
   },
   inputHighlightMention: {
@@ -462,10 +494,10 @@ export const chatScreenStyles = StyleSheet.create({
   
   // 面板
   panelWrapper: {
-    backgroundColor: '#F5F7FA',
+    backgroundColor: colors.chat.surfaceMuted,
     borderTopWidth: 1,
-    borderTopColor: '#E8E8E8',
+    borderTopColor: colors.chat.border,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: -2 },
     shadowOpacity: 0.1,
     shadowRadius: 8,
@@ -473,11 +505,11 @@ export const chatScreenStyles = StyleSheet.create({
   },
   // 表情面板包装器 - 底部 tab 栏是白色，安全区域也用白色填充
   emojiPanelWrapper: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
   },
   panelContainer: {
     flex: 1,
-    backgroundColor: '#F5F7FA',
+    backgroundColor: colors.chat.surfaceMuted,
   },
   
   // 表情面板
@@ -505,16 +537,16 @@ export const chatScreenStyles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
     borderTopWidth: 1,
-    borderTopColor: '#E8E8E8',
+    borderTopColor: colors.chat.border,
   },
   panelCloseButton: {
     width: 40,
     height: 40,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
     borderRadius: 8,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.1,
     shadowRadius: 2,
@@ -533,8 +565,8 @@ export const chatScreenStyles = StyleSheet.create({
     paddingHorizontal: spacing.sm,
     paddingVertical: spacing.xs,
     borderTopWidth: 1,
-    borderTopColor: '#E8E8E8',
+    borderTopColor: colors.chat.border,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
   },
   panelTab: {
     width: 44,
@@ -545,7 +577,7 @@ export const chatScreenStyles = StyleSheet.create({
     marginRight: spacing.xs,
   },
   panelTabActive: {
-    backgroundColor: '#DFF2FF',
+    backgroundColor: colors.chat.replyTint,
   },
   panelTabEmoji: {
     fontSize: 24,
@@ -553,7 +585,7 @@ export const chatScreenStyles = StyleSheet.create({
   panelTabDivider: {
     width: 1,
     height: 24,
-    backgroundColor: '#E8E8E8',
+    backgroundColor: colors.chat.bubbleOutgoing,
     marginHorizontal: spacing.sm,
   },
 
@@ -571,13 +603,13 @@ export const chatScreenStyles = StyleSheet.create({
   },
   stickerEmptyText: {
     fontSize: 16,
-    color: '#666',
+    color: colors.chat.textTertiary,
     marginTop: spacing.md,
     fontWeight: '500',
   },
   stickerEmptySubText: {
     fontSize: 13,
-    color: '#999',
+    color: colors.chat.textMuted,
     marginTop: spacing.xs,
   },
   stickerGrid: {
@@ -593,7 +625,7 @@ export const chatScreenStyles = StyleSheet.create({
     margin: 4,
     borderRadius: 8,
     overflow: 'hidden',
-    backgroundColor: '#F5F5F5',
+    backgroundColor: colors.chat.surfaceInput,
   },
   stickerImage: {
     width: '100%',
@@ -618,8 +650,8 @@ export const chatScreenStyles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     marginBottom: spacing.sm,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.08,
     shadowRadius: 4,
@@ -627,7 +659,7 @@ export const chatScreenStyles = StyleSheet.create({
   },
   moreItemText: {
     fontSize: 13,
-    color: '#666',
+    color: colors.chat.textTertiary,
     fontWeight: '500',
   },
   
@@ -636,7 +668,7 @@ export const chatScreenStyles = StyleSheet.create({
     position: 'absolute',
     left: 12,
     right: 12,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
     borderRadius: 18,
     shadowColor: colors.primary.main,
     shadowOffset: { width: 0, height: -3 },
@@ -651,7 +683,7 @@ export const chatScreenStyles = StyleSheet.create({
   // @成员选择面板
   mentionPanelContainer: {
     flex: 1,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
     borderRadius: 18,
   },
   mentionPanelDragHandle: {
@@ -663,7 +695,7 @@ export const chatScreenStyles = StyleSheet.create({
     width: 32,
     height: 3,
     borderRadius: 2,
-    backgroundColor: '#E0E0E0',
+    backgroundColor: colors.chat.sheetGrip,
   },
   mentionPanelHeader: {
     flexDirection: 'row',
@@ -673,12 +705,12 @@ export const chatScreenStyles = StyleSheet.create({
     paddingTop: 4,
     paddingBottom: 8,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#F0F0F0',
+    borderBottomColor: colors.chat.borderHairline,
   },
   mentionPanelTitle: {
     fontSize: 12,
     fontWeight: '600',
-    color: '#AAAAAA',
+    color: colors.chat.textPlaceholder,
     letterSpacing: 0.5,
     textTransform: 'uppercase',
   },
@@ -686,7 +718,7 @@ export const chatScreenStyles = StyleSheet.create({
     width: 26,
     height: 26,
     borderRadius: 13,
-    backgroundColor: '#F5F5F5',
+    backgroundColor: colors.chat.surfaceInput,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -728,7 +760,7 @@ export const chatScreenStyles = StyleSheet.create({
   mentionItemName: {
     fontSize: 15,
     fontWeight: '500',
-    color: '#1A1A1A',
+    color: colors.chat.textPrimary,
   },
   mentionItemNameAll: {
     fontSize: 15,
@@ -737,7 +769,7 @@ export const chatScreenStyles = StyleSheet.create({
   },
   mentionItemSub: {
     fontSize: 12,
-    color: '#BBBBBB',
+    color: colors.chat.iconMuted,
     marginTop: 1,
   },
   mentionItemRole: {
@@ -752,7 +784,7 @@ export const chatScreenStyles = StyleSheet.create({
   },
   mentionEmptyText: {
     fontSize: 14,
-    color: '#C8C8C8',
+    color: colors.chat.iconSoft,
   },
   
   // 长按菜单 - 底部横条形式（类似QQ）
@@ -763,10 +795,10 @@ export const chatScreenStyles = StyleSheet.create({
   },
   // 旧版菜单样式（保留兼容）
   menuContainer: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
     borderRadius: 12,
     minWidth: 160,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.15,
     shadowRadius: 12,
@@ -781,21 +813,21 @@ export const chatScreenStyles = StyleSheet.create({
   },
   menuItemBorder: {
     borderBottomWidth: 1,
-    borderBottomColor: '#F0F0F0',
+    borderBottomColor: colors.chat.borderHairline,
   },
   menuItemText: {
     fontSize: 15,
-    color: '#333',
+    color: colors.text.primary,
     fontWeight: '500',
   },
   // 底部菜单容器
   bottomMenuContainer: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     paddingTop: spacing.md,
     paddingBottom: spacing.xl,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: -4 },
     shadowOpacity: 0.1,
     shadowRadius: 8,
@@ -803,7 +835,7 @@ export const chatScreenStyles = StyleSheet.create({
   },
   // 消息预览区域
   messagePreviewContainer: {
-    backgroundColor: '#F5F7FA',
+    backgroundColor: colors.chat.surfaceMuted,
     marginHorizontal: spacing.md,
     marginBottom: spacing.md,
     paddingHorizontal: spacing.md,
@@ -813,7 +845,7 @@ export const chatScreenStyles = StyleSheet.create({
   },
   messagePreviewText: {
     fontSize: 14,
-    color: '#666',
+    color: colors.chat.textTertiary,
     lineHeight: 20,
   },
   // 操作按钮横条
@@ -824,7 +856,7 @@ export const chatScreenStyles = StyleSheet.create({
     paddingHorizontal: spacing.sm,
     paddingVertical: spacing.md,
     borderBottomWidth: 1,
-    borderBottomColor: '#F0F0F0',
+    borderBottomColor: colors.chat.borderHairline,
     marginBottom: spacing.md,
   },
   menuActionItem: {
@@ -839,19 +871,19 @@ export const chatScreenStyles = StyleSheet.create({
     width: 56,
     height: 56,
     borderRadius: 16,
-    backgroundColor: '#F0F7FF',
+    backgroundColor: colors.chat.overlayQuote,
     alignItems: 'center',
     justifyContent: 'center',
     marginBottom: 8,
   },
   menuActionLabel: {
     fontSize: 13,
-    color: '#333',
+    color: colors.text.primary,
     fontWeight: '500',
   },
   // 取消按钮
   menuCancelButton: {
-    backgroundColor: '#F5F7FA',
+    backgroundColor: colors.chat.surfaceMuted,
     marginHorizontal: spacing.md,
     paddingVertical: spacing.md,
     borderRadius: 12,
@@ -859,7 +891,7 @@ export const chatScreenStyles = StyleSheet.create({
   },
   menuCancelText: {
     fontSize: 16,
-    color: '#333',
+    color: colors.text.primary,
     fontWeight: '600',
   },
   
@@ -874,7 +906,7 @@ export const chatScreenStyles = StyleSheet.create({
     borderRadius: 6,
     paddingVertical: 6,
     paddingHorizontal: 2,
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.3,
     shadowRadius: 4,
@@ -901,20 +933,21 @@ export const chatScreenStyles = StyleSheet.create({
   },
   qqMenuItemLabel: {
     fontSize: 11,
-    color: '#FFFFFF',
+    color: colors.primary.contrast,
     fontWeight: '500',
   },
   
-  // 回复预览
+  // 回复预览（输入区）- 与气泡内引用同色条
   replyPreviewContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#F5F7FA',
+    backgroundColor: 'rgba(74, 136, 199, 0.08)',
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
     borderLeftWidth: 3,
-    borderLeftColor: colors.primary.main,
+    borderLeftColor: colors.chat.link,
     marginBottom: spacing.xs,
+    borderRadius: 8,
   },
   replyPreviewContent: {
     flex: 1,
@@ -932,7 +965,7 @@ export const chatScreenStyles = StyleSheet.create({
   },
   replyPreviewMessage: {
     fontSize: 12,
-    color: '#8E8E93',
+    color: colors.chat.textSecondary,
     marginTop: 2,
   },
   replyPreviewClose: {
@@ -948,11 +981,11 @@ export const chatScreenStyles = StyleSheet.create({
     zIndex: 1000,
   },
   overlayContent: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
     padding: spacing.xl,
     borderRadius: 16,
     alignItems: 'center',
-    shadowColor: '#000',
+    shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.15,
     shadowRadius: 12,
@@ -961,13 +994,13 @@ export const chatScreenStyles = StyleSheet.create({
   overlayText: {
     marginTop: spacing.md,
     fontSize: 15,
-    color: '#666',
+    color: colors.chat.textTertiary,
     fontWeight: '500',
   },
 
   // 表情包添加按钮（管理界面第一位）
   stickerAddButton: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
     borderWidth: 1.5,
     borderColor: colors.primary.main,
     borderStyle: 'dashed',
@@ -986,9 +1019,9 @@ export const chatScreenStyles = StyleSheet.create({
 
   // 表情包管理按钮（表情面板第一位）
   stickerManageButton: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
     borderWidth: 1,
-    borderColor: '#E8E8E8',
+    borderColor: colors.chat.border,
     borderStyle: 'dashed',
     alignItems: 'center',
     justifyContent: 'center',
@@ -1000,7 +1033,7 @@ export const chatScreenStyles = StyleSheet.create({
   },
   stickerManageText: {
     fontSize: 12,
-    color: '#666',
+    color: colors.chat.textTertiary,
     marginTop: 4,
     fontWeight: '500',
   },
@@ -1018,20 +1051,20 @@ export const chatScreenStyles = StyleSheet.create({
     width: 36,
     height: 5,
     borderRadius: 3,
-    backgroundColor: '#E0E0E0',
+    backgroundColor: colors.chat.sheetGrip,
     alignSelf: 'center',
     marginTop: 8,
     marginBottom: 4,
   },
   manageHeaderDivider: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: '#F0F0F0',
+    backgroundColor: colors.chat.borderHairline,
   },
 
   // 表情包选择状态
   stickerItemSelected: {
     borderWidth: 2,
-    borderColor: '#7FB6E6',
+    borderColor: colors.chat.replyBorder,
   },
   stickerCheckOverlay: {
     ...StyleSheet.absoluteFillObject,
@@ -1045,19 +1078,19 @@ export const chatScreenStyles = StyleSheet.create({
     height: 22,
     borderRadius: 11,
     borderWidth: 2,
-    borderColor: '#FFF',
+    borderColor: colors.chat.card,
     backgroundColor: 'rgba(255, 255, 255, 0.8)',
     alignItems: 'center',
     justifyContent: 'center',
   },
   stickerCheckBoxSelected: {
-    backgroundColor: '#7FB6E6',
+    backgroundColor: colors.chat.replyBorder,
-    borderColor: '#7FB6E6',
+    borderColor: colors.chat.replyBorder,
   },
 
   // 表情管理模态框
   manageModalContainer: {
-    backgroundColor: '#F5F7FA',
+    backgroundColor: colors.chat.surfaceMuted,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     overflow: 'hidden',
@@ -1068,9 +1101,9 @@ export const chatScreenStyles = StyleSheet.create({
     justifyContent: 'space-between',
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.md,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
     borderBottomWidth: 1,
-    borderBottomColor: '#E8E8E8',
+    borderBottomColor: colors.chat.border,
   },
   manageHeaderButton: {
     minWidth: 60,
@@ -1079,28 +1112,28 @@ export const chatScreenStyles = StyleSheet.create({
   manageModalTitle: {
     fontSize: 17,
     fontWeight: '600',
-    color: '#1A1A1A',
+    color: colors.chat.textPrimary,
   },
   manageDoneText: {
     fontSize: 16,
-    color: '#4A88C7',
+    color: colors.chat.link,
     fontWeight: '500',
   },
   manageSelectText: {
     fontSize: 16,
-    color: '#4A88C7',
+    color: colors.chat.link,
     fontWeight: '500',
   },
   manageInfoBar: {
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
     borderBottomWidth: 1,
-    borderBottomColor: '#E8E8E8',
+    borderBottomColor: colors.chat.border,
   },
   manageInfoText: {
     fontSize: 13,
-    color: '#8E8E93',
+    color: colors.chat.textSecondary,
   },
   manageStickerGrid: {
     flexDirection: 'row',
@@ -1115,9 +1148,9 @@ export const chatScreenStyles = StyleSheet.create({
     justifyContent: 'space-between',
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.md,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.chat.card,
     borderTopWidth: 1,
-    borderTopColor: '#E8E8E8',
+    borderTopColor: colors.chat.border,
     paddingBottom: 34, // 安全区域
   },
   manageSelectAllButton: {
@@ -1126,24 +1159,24 @@ export const chatScreenStyles = StyleSheet.create({
   },
   manageSelectAllText: {
     fontSize: 15,
-    color: '#4A88C7',
+    color: colors.chat.link,
     fontWeight: '500',
   },
   manageDeleteButton: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#FF3B30',
+    backgroundColor: colors.chat.danger,
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.sm + 2,
     borderRadius: 20,
     gap: 6,
   },
   manageDeleteButtonDisabled: {
-    backgroundColor: '#CCC',
+    backgroundColor: colors.chat.iconMuted,
   },
   manageDeleteText: {
     fontSize: 15,
-    color: '#FFFFFF',
+    color: colors.primary.contrast,
     fontWeight: '600',
   },
   manageTipBar: {
@@ -1152,12 +1185,12 @@ export const chatScreenStyles = StyleSheet.create({
     justifyContent: 'center',
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
-    backgroundColor: '#FFF9E6',
+    backgroundColor: colors.chat.tipBg,
     gap: 6,
   },
   manageTipText: {
     fontSize: 12,
-    color: '#999',
+    color: colors.chat.textMuted,
   },
 
   // 管理界面空状态
@@ -1186,5 +1219,9 @@ export const chatScreenStyles = StyleSheet.create({
     textAlign: 'center',
   },
 });
+}
 
-export default chatScreenStyles;
+export function useChatScreenStyles() {
+  const colors = useAppColors();
+  return useMemo(() => createChatScreenStyles(colors), [colors]);
+}

src/screens/message/components/ChatScreen/useChatScreen.ts

@@ -546,6 +546,13 @@ export const useChatScreen = () => {
     isBrowsingHistoryRef.current = false;
   }, [isHistoryLoadingLocked]);
 
+  /** 用户点击「回到底部」：解除浏览历史锁并滚到最新消息端（inverted 下 offset=0） */
+  const jumpToLatestMessages = useCallback(() => {
+    suppressAutoFollowRef.current = false;
+    isBrowsingHistoryRef.current = false;
+    scrollToLatest(true, true, 'jump-latest-button');
+  }, [scrollToLatest]);
+
   const setBrowsingHistory = useCallback((browsing: boolean) => {
     isBrowsingHistoryRef.current = browsing;
   }, []);
@@ -1396,6 +1403,7 @@ export const useChatScreen = () => {
     handleClearConversation,
     handleMessageListContentSizeChange,
     handleReachLatestEdge,
+    jumpToLatestMessages,
     setBrowsingHistory,
   };
 };

src/screens/message/components/ConversationListRow.tsx

@@ -3,10 +3,10 @@
  * onPress 引用不参与比较，请配合父组件 ref + 按 id 查最新会话使用。
  */
 
-import React, { memo, useEffect, useRef, useState } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, shadows } from '../../../theme';
+import { spacing, shadows, useAppColors, type AppColors } from '../../../theme';
 import {
   ConversationResponse,
   extractTextFromSegments,
@@ -150,6 +150,124 @@ function areConversationRowEqual(
   return true;
 }
 
+function createConversationRowStyles(colors: AppColors) {
+  return StyleSheet.create({
+    conversationItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: spacing.md,
+      paddingVertical: 14,
+      backgroundColor: colors.background.paper,
+      marginHorizontal: spacing.md,
+      marginTop: spacing.sm,
+      borderRadius: 12,
+      ...shadows.sm,
+    },
+    conversationItemSelected: {
+      backgroundColor: colors.primary.light + '20',
+      borderColor: colors.primary.main,
+      borderWidth: 1,
+    },
+    avatarContainer: {
+      position: 'relative',
+    },
+    systemAvatar: {
+      width: 50,
+      height: 50,
+      borderRadius: 12,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: colors.primary.main,
+    },
+    conversationContent: {
+      flex: 1,
+      marginLeft: spacing.md,
+    },
+    conversationHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 4,
+    },
+    nameRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    officialBadge: {
+      backgroundColor: colors.primary.main,
+      borderRadius: 4,
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      marginRight: spacing.xs,
+    },
+    officialBadgeText: {
+      color: colors.primary.contrast,
+      fontSize: 10,
+      fontWeight: '600',
+    },
+    userName: {
+      fontWeight: '600',
+      color: colors.text.primary,
+      fontSize: 16,
+    },
+    groupIcon: {
+      marginRight: 4,
+    },
+    memberCount: {
+      fontSize: 12,
+      color: colors.text.secondary,
+      marginLeft: 2,
+    },
+    pinnedIcon: {
+      marginLeft: 6,
+    },
+    groupAvatar: {
+      width: 50,
+      height: 50,
+    },
+    groupAvatarPlaceholder: {
+      width: 50,
+      height: 50,
+      borderRadius: 12,
+      backgroundColor: colors.primary.main,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    timeText: {
+      color: colors.text.secondary,
+      fontSize: 12,
+    },
+    messageRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    messageText: {
+      flex: 1,
+      color: colors.text.secondary,
+      fontSize: 14,
+    },
+    unreadMessageText: {
+      color: colors.text.primary,
+      fontWeight: '500',
+    },
+    unreadBadge: {
+      minWidth: 20,
+      height: 20,
+      borderRadius: 10,
+      backgroundColor: colors.primary.main,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: spacing.sm,
+      paddingHorizontal: 6,
+    },
+    unreadBadgeText: {
+      color: colors.primary.contrast,
+      fontSize: 12,
+      fontWeight: '600',
+    },
+  });
+}
+
 const ConversationListRowInner: React.FC<ConversationListRowProps> = ({
   item,
   scale,
@@ -158,6 +276,8 @@ const ConversationListRowInner: React.FC<ConversationListRowProps> = ({
   formatTime,
   systemChannelId,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createConversationRowStyles(colors), [colors]);
   const isSystemChannel = item.id === systemChannelId;
   const isGroupChat = !!(item.type === 'group' && item.group);
 
@@ -196,7 +316,7 @@ const ConversationListRowInner: React.FC<ConversationListRowProps> = ({
       <View style={styles.avatarContainer}>
         {isSystemChannel ? (
           <View style={styles.systemAvatar}>
-            <MaterialCommunityIcons name="bell-ring" size={24} color="#FFF" />
+            <MaterialCommunityIcons name="bell-ring" size={24} color={colors.primary.contrast} />
           </View>
         ) : isGroupChat ? (
           <View style={styles.groupAvatar}>
@@ -204,7 +324,7 @@ const ConversationListRowInner: React.FC<ConversationListRowProps> = ({
               <Avatar source={displayAvatar} size={50} name={displayName} />
             ) : (
               <View style={styles.groupAvatarPlaceholder}>
-                <MaterialCommunityIcons name="account-group" size={28} color="#FFF" />
+                <MaterialCommunityIcons name="account-group" size={28} color={colors.primary.contrast} />
               </View>
             )}
           </View>
@@ -271,119 +391,3 @@ const ConversationListRowInner: React.FC<ConversationListRowProps> = ({
 ConversationListRowInner.displayName = 'ConversationListRow';
 
 export const ConversationListRow = memo(ConversationListRowInner, areConversationRowEqual);
-
-const styles = StyleSheet.create({
-  conversationItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: spacing.md,
-    paddingVertical: 14,
-    backgroundColor: '#FFF',
-    marginHorizontal: spacing.md,
-    marginTop: spacing.sm,
-    borderRadius: 12,
-    ...shadows.sm,
-  },
-  conversationItemSelected: {
-    backgroundColor: colors.primary.light + '20',
-    borderColor: colors.primary.main,
-    borderWidth: 1,
-  },
-  avatarContainer: {
-    position: 'relative',
-  },
-  systemAvatar: {
-    width: 50,
-    height: 50,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: colors.primary.main,
-  },
-  conversationContent: {
-    flex: 1,
-    marginLeft: spacing.md,
-  },
-  conversationHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 4,
-  },
-  nameRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  officialBadge: {
-    backgroundColor: colors.primary.main,
-    borderRadius: 4,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    marginRight: spacing.xs,
-  },
-  officialBadgeText: {
-    color: '#FFF',
-    fontSize: 10,
-    fontWeight: '600',
-  },
-  userName: {
-    fontWeight: '600',
-    color: '#333',
-    fontSize: 16,
-  },
-  groupIcon: {
-    marginRight: 4,
-  },
-  memberCount: {
-    fontSize: 12,
-    color: '#999',
-    marginLeft: 2,
-  },
-  pinnedIcon: {
-    marginLeft: 6,
-  },
-  groupAvatar: {
-    width: 50,
-    height: 50,
-  },
-  groupAvatarPlaceholder: {
-    width: 50,
-    height: 50,
-    borderRadius: 12,
-    backgroundColor: colors.primary.main,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  timeText: {
-    color: '#999',
-    fontSize: 12,
-  },
-  messageRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  messageText: {
-    flex: 1,
-    color: '#888',
-    fontSize: 14,
-  },
-  unreadMessageText: {
-    color: '#333',
-    fontWeight: '500',
-  },
-  unreadBadge: {
-    minWidth: 20,
-    height: 20,
-    borderRadius: 10,
-    backgroundColor: colors.primary.main,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: spacing.sm,
-    paddingHorizontal: 6,
-  },
-  unreadBadgeText: {
-    color: '#FFF',
-    fontSize: 12,
-    fontWeight: '600',
-  },
-});

src/screens/message/components/EmbeddedChat.tsx

@@ -3,7 +3,7 @@
  * 嵌入式聊天组件 - 用于桌面端双栏布局右侧
  */
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import {
   View,
   FlatList,
@@ -19,7 +19,7 @@ import {
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Image as ExpoImage } from 'expo-image';
-import { colors, spacing, fontSizes, shadows } from '../../../theme';
+import { spacing, fontSizes, shadows, useAppColors, type AppColors } from '../../../theme';
 import { ConversationResponse, MessageResponse, MessageSegment, GroupMemberResponse, ImageSegmentData } from '../../../types/dto';
 import { Avatar, Text, ImageGallery, AppBackButton } from '../../../components/common';
 import { useAuthStore, messageManager, MessageEvent, MessageSubscriber } from '../../../stores';
@@ -34,12 +34,210 @@ import { LongPressMenu, MenuPosition, GroupMessage } from './ChatScreen';
 const { width: screenWidth } = Dimensions.get('window');
 const PANEL_WIDTH = 360;
 
+function createEmbeddedChatStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.chat.screen,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm,
+      backgroundColor: colors.background.paper,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: colors.divider,
+      shadowColor: 'transparent',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0,
+      height: 56,
+    },
+    headerButton: {
+      padding: spacing.xs,
+      width: 40,
+      height: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    headerCenter: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+      justifyContent: 'center',
+    },
+    headerTitle: {
+      fontSize: fontSizes.lg,
+      fontWeight: '600',
+      color: colors.text.primary,
+      marginLeft: spacing.sm,
+      maxWidth: 200,
+    },
+    messageList: {
+      flex: 1,
+      backgroundColor: colors.chat.screen,
+    },
+    centerContainer: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: spacing.xl,
+    },
+    emptyText: {
+      marginTop: spacing.md,
+      fontSize: 16,
+      color: colors.text.secondary,
+    },
+    emptySubtext: {
+      marginTop: spacing.xs,
+      fontSize: 14,
+      color: colors.text.disabled,
+    },
+    listContent: {
+      padding: spacing.md,
+      paddingBottom: spacing.xl,
+    },
+    messageRow: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      marginBottom: spacing.md,
+      maxWidth: screenWidth * 0.7,
+    },
+    messageRowLeft: {
+      alignSelf: 'flex-start',
+    },
+    messageRowRight: {
+      alignSelf: 'flex-end',
+      justifyContent: 'flex-end',
+    },
+    messageBubble: {
+      maxWidth: screenWidth * 0.5,
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm,
+      borderRadius: 18,
+      marginHorizontal: spacing.sm,
+    },
+    messageBubbleMe: {
+      backgroundColor: colors.chat.replyTint,
+      borderBottomRightRadius: 4,
+    },
+    messageBubbleOther: {
+      backgroundColor: colors.chat.bubbleIncoming,
+      borderBottomLeftRadius: 4,
+      shadowColor: colors.chat.shadow,
+      shadowOffset: { width: 0, height: 0.5 },
+      shadowOpacity: 0.04,
+      shadowRadius: 1,
+      elevation: 1,
+    },
+    senderName: {
+      fontSize: 12,
+      color: colors.text.secondary,
+      marginBottom: 2,
+    },
+    messageText: {
+      fontSize: 15,
+      lineHeight: 20,
+    },
+    messageTextMe: {
+      color: colors.chat.textPrimary,
+    },
+    messageTextOther: {
+      color: colors.chat.textPrimary,
+    },
+    inputArea: {
+      backgroundColor: colors.chat.screen,
+      borderTopWidth: StyleSheet.hairlineWidth,
+      borderTopColor: colors.divider,
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm,
+      paddingBottom: Platform.OS === 'ios' ? spacing.md : spacing.sm,
+    },
+    inputRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    iconButton: {
+      padding: spacing.xs,
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    inputContainer: {
+      flex: 1,
+      backgroundColor: colors.chat.surfaceInput,
+      borderRadius: 20,
+      paddingHorizontal: spacing.md,
+      minHeight: 40,
+      justifyContent: 'center',
+      shadowColor: 'transparent',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0,
+    },
+    textInput: {
+      fontSize: 15,
+      color: colors.text.primary,
+      padding: 0,
+      maxHeight: 100,
+    },
+    sendButton: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      backgroundColor: colors.primary.main,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: spacing.xs,
+    },
+    sendButtonDisabled: {
+      backgroundColor: colors.background.disabled,
+    },
+    messageTextRecalled: {
+      fontStyle: 'italic',
+      color: colors.text.secondary,
+    },
+    imageGrid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      marginTop: 4,
+    },
+    messageImage: {
+      borderRadius: 8,
+      marginRight: 4,
+      marginBottom: 4,
+    },
+    imagePlaceholder: {
+      width: 120,
+      height: 120,
+      borderRadius: 8,
+      backgroundColor: colors.background.disabled,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 4,
+      marginBottom: 4,
+    },
+    imagePlaceholderText: {
+      color: colors.text.secondary,
+      fontSize: 12,
+      marginTop: 4,
+    },
+  });
+}
+
 interface EmbeddedChatProps {
   conversation: ConversationResponse;
   onBack: () => void;
 }
 
 export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createEmbeddedChatStyles(colors), [colors]);
   const router = useRouter();
   const currentUser = useAuthStore(state => state.currentUser);
   
@@ -411,7 +609,7 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
       <View style={styles.header}>
         {/* 大屏幕（>= 768px）时隐藏返回按钮 */}
         {!isWideScreen ? (
-          <AppBackButton onPress={onBack} style={styles.headerButton} iconColor="#666" />
+          <AppBackButton onPress={onBack} style={styles.headerButton} iconColor={colors.text.secondary} />
         ) : (
           <View style={styles.headerButton} />
         )}
@@ -426,11 +624,11 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
         {/* 大屏幕 + 群聊时显示群信息按钮，否则显示放大按钮 */}
         {isWideScreen && isGroupChat ? (
           <TouchableOpacity onPress={toggleGroupInfoPanel} style={styles.headerButton}>
-            <MaterialCommunityIcons name="dots-horizontal" size={22} color="#666" />
+            <MaterialCommunityIcons name="dots-horizontal" size={22} color={colors.text.secondary} />
           </TouchableOpacity>
         ) : (
           <TouchableOpacity onPress={handleNavigateToFullChat} style={styles.headerButton}>
-            <MaterialCommunityIcons name="arrow-expand" size={22} color="#666" />
+            <MaterialCommunityIcons name="arrow-expand" size={22} color={colors.text.secondary} />
           </TouchableOpacity>
         )}
       </View>
@@ -443,7 +641,7 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
           </View>
         ) : messages.length === 0 ? (
           <View style={styles.centerContainer}>
-            <MaterialCommunityIcons name="message-text-outline" size={48} color="#DDD" />
+            <MaterialCommunityIcons name="message-text-outline" size={48} color={colors.text.disabled} />
             <Text style={styles.emptyText}>暂无消息</Text>
             <Text style={styles.emptySubtext}>发送第一条消息开始聊天</Text>
           </View>
@@ -472,7 +670,7 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
         <View style={styles.inputArea}>
           <View style={styles.inputRow}>
             <TouchableOpacity style={styles.iconButton}>
-              <MaterialCommunityIcons name="plus-circle-outline" size={28} color="#666" />
+              <MaterialCommunityIcons name="plus-circle-outline" size={28} color={colors.text.secondary} />
             </TouchableOpacity>
             
             <View style={styles.inputContainer}>
@@ -480,7 +678,7 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
                 ref={inputRef}
                 style={styles.textInput}
                 placeholder="发送消息..."
-                placeholderTextColor="#999"
+                placeholderTextColor={colors.text.hint}
                 value={inputText}
                 onChangeText={setInputText}
                 multiline={false}
@@ -494,7 +692,7 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
             </View>
             
             <TouchableOpacity style={styles.iconButton}>
-              <MaterialCommunityIcons name="emoticon-outline" size={28} color="#666" />
+              <MaterialCommunityIcons name="emoticon-outline" size={28} color={colors.text.secondary} />
             </TouchableOpacity>
             
             <TouchableOpacity 
@@ -503,9 +701,9 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
               disabled={!inputText.trim() || sending}
             >
               {sending ? (
-                <ActivityIndicator size="small" color="#FFF" />
+                <ActivityIndicator size="small" color={colors.text.inverse} />
               ) : (
-                <MaterialCommunityIcons name="send" size={20} color="#FFF" />
+                <MaterialCommunityIcons name="send" size={20} color={colors.text.inverse} />
               )}
             </TouchableOpacity>
           </View>
@@ -604,190 +802,3 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F5F7FA',
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    backgroundColor: '#FFF',
-    borderBottomWidth: 1,
-    borderBottomColor: '#E8E8E8',
-    ...shadows.sm,
-    height: 56,
-  },
-  headerButton: {
-    padding: spacing.xs,
-    width: 40,
-    height: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  headerCenter: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  headerTitle: {
-    fontSize: fontSizes.lg,
-    fontWeight: '600',
-    color: '#333',
-    marginLeft: spacing.sm,
-    maxWidth: 200,
-  },
-  messageList: {
-    flex: 1,
-    backgroundColor: '#F5F7FA',
-  },
-  centerContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: spacing.xl,
-  },
-  emptyText: {
-    marginTop: spacing.md,
-    fontSize: 16,
-    color: '#999',
-  },
-  emptySubtext: {
-    marginTop: spacing.xs,
-    fontSize: 14,
-    color: '#BBB',
-  },
-  listContent: {
-    padding: spacing.md,
-    paddingBottom: spacing.xl,
-  },
-  messageRow: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    marginBottom: spacing.md,
-    maxWidth: screenWidth * 0.7,
-  },
-  messageRowLeft: {
-    alignSelf: 'flex-start',
-  },
-  messageRowRight: {
-    alignSelf: 'flex-end',
-    justifyContent: 'flex-end',
-  },
-  messageBubble: {
-    maxWidth: screenWidth * 0.5,
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    borderRadius: 18,
-    marginHorizontal: spacing.sm,
-  },
-  messageBubbleMe: {
-    backgroundColor: colors.primary.main,
-    borderBottomRightRadius: 4,
-  },
-  messageBubbleOther: {
-    backgroundColor: '#FFF',
-    borderBottomLeftRadius: 4,
-    ...shadows.sm,
-  },
-  senderName: {
-    fontSize: 12,
-    color: '#999',
-    marginBottom: 2,
-  },
-  messageText: {
-    fontSize: 15,
-    lineHeight: 20,
-  },
-  messageTextMe: {
-    color: '#FFF',
-  },
-  messageTextOther: {
-    color: '#333',
-  },
-  inputArea: {
-    backgroundColor: '#FFF',
-    borderTopWidth: 1,
-    borderTopColor: '#E8E8E8',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    paddingBottom: Platform.OS === 'ios' ? spacing.md : spacing.sm,
-  },
-  inputRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  iconButton: {
-    padding: spacing.xs,
-    width: 44,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  inputContainer: {
-    flex: 1,
-    backgroundColor: '#F5F5F5',
-    borderRadius: 20,
-    paddingHorizontal: spacing.md,
-    minHeight: 40,
-    justifyContent: 'center',
-    // 移除阴影
-    shadowColor: 'transparent',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-    elevation: 0,
-  },
-  textInput: {
-    fontSize: 15,
-    color: '#333',
-    padding: 0,
-    maxHeight: 100,
-  },
-  sendButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: colors.primary.main,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: spacing.xs,
-  },
-  sendButtonDisabled: {
-    backgroundColor: '#E0E0E0',
-  },
-  messageTextRecalled: {
-    fontStyle: 'italic',
-    color: '#999',
-  },
-  imageGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginTop: 4,
-  },
-  messageImage: {
-    borderRadius: 8,
-    marginRight: 4,
-    marginBottom: 4,
-  },
-  imagePlaceholder: {
-    width: 120,
-    height: 120,
-    borderRadius: 8,
-    backgroundColor: 'rgba(0,0,0,0.1)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 4,
-    marginBottom: 4,
-  },
-  imagePlaceholderText: {
-    color: '#999',
-    fontSize: 12,
-    marginTop: 4,
-  },
-});

src/screens/message/components/GroupRequestShared.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
 import { Avatar, Text } from '../../../components/common';
-import { colors, spacing, borderRadius, shadows } from '../../../theme';
+import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../../theme';
 
 interface GroupInfoSummaryCardProps {
   groupName?: string;
@@ -14,76 +14,8 @@ interface GroupInfoSummaryCardProps {
   memberCountText?: string;
 }
 
-export const GroupInfoSummaryCard: React.FC<GroupInfoSummaryCardProps> = ({
+function createGroupRequestSharedStyles(colors: AppColors) {
-  groupName,
+  return StyleSheet.create({
-  groupAvatar,
-  groupNo,
-  groupDescription,
-  memberCountText,
-}) => {
-  return (
-    <View style={styles.headerCard}>
-      <View style={styles.groupHeader}>
-        <Avatar source={groupAvatar || ''} size={88} name={groupName} />
-        <View style={styles.groupInfo}>
-          <Text variant="h3" style={styles.groupName} numberOfLines={1}>{groupName || '群聊'}</Text>
-          <View style={styles.groupMeta}>
-            <MaterialCommunityIcons name="account-group" size={16} color={colors.text.secondary} />
-            <Text variant="caption" color={colors.text.secondary}>
-              {memberCountText || '- 人'}
-            </Text>
-          </View>
-          <Text variant="caption" color={colors.text.secondary} style={styles.groupNoText}>
-            群号：{groupNo || '-'}
-          </Text>
-        </View>
-      </View>
-      <View style={styles.descriptionContainer}>
-        <MaterialCommunityIcons name="information-outline" size={16} color={colors.text.secondary} />
-        <Text variant="body" color={colors.text.secondary} style={styles.groupDesc}>
-          {groupDescription || '暂无群描述'}
-        </Text>
-      </View>
-    </View>
-  );
-};
-
-interface DecisionFooterProps {
-  canAction: boolean;
-  submitting: boolean;
-  onReject: () => void;
-  onApprove: () => void;
-  processedText?: string;
-}
-
-export const DecisionFooter: React.FC<DecisionFooterProps> = ({
-  canAction,
-  submitting,
-  onReject,
-  onApprove,
-  processedText = '该请求已处理',
-}) => {
-  const insets = useSafeAreaInsets();
-  if (canAction) {
-    return (
-      <View style={[styles.footer, { paddingBottom: Math.max(insets.bottom, spacing.sm) }]}>
-        <TouchableOpacity style={[styles.btn, styles.reject]} onPress={onReject} disabled={submitting}>
-          <Text variant="body" color={colors.error.main}>拒绝</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={[styles.btn, styles.approve]} onPress={onApprove} disabled={submitting}>
-          {submitting ? <ActivityIndicator color="#fff" /> : <Text variant="body" color="#fff">同意</Text>}
-        </TouchableOpacity>
-      </View>
-    );
-  }
-  return (
-    <View style={[styles.statusBox, { paddingBottom: Math.max(insets.bottom, spacing.sm) }]}>
-      <Text variant="caption" color={colors.text.secondary}>{processedText}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
     headerCard: {
       backgroundColor: colors.background.paper,
       borderRadius: borderRadius.lg,
@@ -152,4 +84,90 @@ const styles = StyleSheet.create({
       paddingTop: spacing.sm,
       backgroundColor: colors.background.default,
     },
-});
+  });
+}
+
+export const GroupInfoSummaryCard: React.FC<GroupInfoSummaryCardProps> = ({
+  groupName,
+  groupAvatar,
+  groupNo,
+  groupDescription,
+  memberCountText,
+}) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createGroupRequestSharedStyles(colors), [colors]);
+  return (
+    <View style={styles.headerCard}>
+      <View style={styles.groupHeader}>
+        <Avatar source={groupAvatar || ''} size={88} name={groupName} />
+        <View style={styles.groupInfo}>
+          <Text variant="h3" style={styles.groupName} numberOfLines={1}>
+            {groupName || '群聊'}
+          </Text>
+          <View style={styles.groupMeta}>
+            <MaterialCommunityIcons name="account-group" size={16} color={colors.text.secondary} />
+            <Text variant="caption" color={colors.text.secondary}>
+              {memberCountText || '- 人'}
+            </Text>
+          </View>
+          <Text variant="caption" color={colors.text.secondary} style={styles.groupNoText}>
+            群号：{groupNo || '-'}
+          </Text>
+        </View>
+      </View>
+      <View style={styles.descriptionContainer}>
+        <MaterialCommunityIcons name="information-outline" size={16} color={colors.text.secondary} />
+        <Text variant="body" color={colors.text.secondary} style={styles.groupDesc}>
+          {groupDescription || '暂无群描述'}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+interface DecisionFooterProps {
+  canAction: boolean;
+  submitting: boolean;
+  onReject: () => void;
+  onApprove: () => void;
+  processedText?: string;
+}
+
+export const DecisionFooter: React.FC<DecisionFooterProps> = ({
+  canAction,
+  submitting,
+  onReject,
+  onApprove,
+  processedText = '该请求已处理',
+}) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createGroupRequestSharedStyles(colors), [colors]);
+  const insets = useSafeAreaInsets();
+  if (canAction) {
+    return (
+      <View style={[styles.footer, { paddingBottom: Math.max(insets.bottom, spacing.sm) }]}>
+        <TouchableOpacity style={[styles.btn, styles.reject]} onPress={onReject} disabled={submitting}>
+          <Text variant="body" color={colors.error.main}>
+            拒绝
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={[styles.btn, styles.approve]} onPress={onApprove} disabled={submitting}>
+          {submitting ? (
+            <ActivityIndicator color={colors.text.inverse} />
+          ) : (
+            <Text variant="body" color={colors.text.inverse}>
+              同意
+            </Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    );
+  }
+  return (
+    <View style={[styles.statusBox, { paddingBottom: Math.max(insets.bottom, spacing.sm) }]}>
+      <Text variant="caption" color={colors.text.secondary}>
+        {processedText}
+      </Text>
+    </View>
+  );
+};

src/screens/message/components/MutualFollowSelectorModal.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
-import { colors, spacing, fontSizes, borderRadius } from '../../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../../theme';
 import { authService } from '../../../services/authService';
 import { useAuthStore } from '../../../stores';
 import { Avatar, EmptyState, Loading, Text } from '../../../components/common';
@@ -41,6 +41,8 @@ const MutualFollowSelectorModal: React.FC<MutualFollowSelectorModalProps> = ({
   onClose,
   onConfirm,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createMutualFollowSelectorStyles(colors), [colors]);
   const { currentUser } = useAuthStore();
 
   const [friendList, setFriendList] = useState<User[]>([]);
@@ -209,7 +211,8 @@ const MutualFollowSelectorModal: React.FC<MutualFollowSelectorModalProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+function createMutualFollowSelectorStyles(colors: AppColors) {
+  return StyleSheet.create({
     modalOverlay: {
       flex: 1,
       backgroundColor: 'rgba(0, 0, 0, 0.5)',
@@ -237,6 +240,7 @@ const styles = StyleSheet.create({
     modalTitle: {
       fontWeight: '700',
       fontSize: fontSizes.xl,
+      color: colors.text.primary,
     },
     confirmButton: {
       fontWeight: '600',
@@ -296,6 +300,7 @@ const styles = StyleSheet.create({
       backgroundColor: colors.primary.main,
       borderColor: colors.primary.main,
     },
-});
+  });
+}
 
 export default MutualFollowSelectorModal;

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,7 +353,8 @@ export const AccountSecurityScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createAccountSecurityStyles(colors: AppColors) {
+  return StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -382,10 +393,16 @@ const styles = StyleSheet.create({
       borderRadius: borderRadius.sm,
     },
     statusVerified: {
-    backgroundColor: '#E8F5E9',
+      backgroundColor: colors.success.light + '40',
     },
     statusUnverified: {
-    backgroundColor: '#FFF3E0',
+      backgroundColor: colors.warning.light + '40',
+    },
+    statusVerifiedText: {
+      color: colors.success.dark,
+    },
+    statusUnverifiedText: {
+      color: colors.warning.dark,
     },
     inputWrapper: {
       flexDirection: 'row',
@@ -426,7 +443,7 @@ const styles = StyleSheet.create({
       paddingHorizontal: spacing.sm,
     },
     sendCodeButtonText: {
-    color: '#fff',
+      color: colors.text.inverse,
       fontSize: fontSizes.sm,
       fontWeight: '600',
     },
@@ -439,13 +456,14 @@ const styles = StyleSheet.create({
       marginTop: spacing.xs,
     },
     primaryButtonText: {
-    color: '#fff',
+      color: colors.text.inverse,
       fontSize: fontSizes.md,
       fontWeight: '700',
     },
     buttonDisabled: {
       opacity: 0.6,
     },
-});
+  });
+}
 
 export default AccountSecurityScreen;

src/screens/profile/BlockedUsersScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   ActivityIndicator,
   FlatList,
@@ -12,12 +12,52 @@ import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useRouter } from 'expo-router';
 import { Avatar, Button, EmptyState, ResponsiveContainer, Text } from '../../components/common';
 import { authService } from '../../services';
-import { colors, spacing, borderRadius, shadows } from '../../theme';
+import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { User } from '../../types';
 import { useResponsive } from '../../hooks';
 import * as hrefs from '../../navigation/hrefs';
 
+function createBlockedUsersStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    loadingWrap: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    listContent: {
+      padding: spacing.md,
+      gap: spacing.sm,
+    },
+    emptyContent: {
+      flexGrow: 1,
+      justifyContent: 'center',
+    },
+    item: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.lg,
+      padding: spacing.md,
+      ...shadows.sm,
+    },
+    content: {
+      flex: 1,
+      marginLeft: spacing.md,
+      marginRight: spacing.sm,
+    },
+    nickname: {
+      fontWeight: '600',
+    },
+  });
+}
+
 export const BlockedUsersScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createBlockedUsersStyles(colors), [colors]);
   const router = useRouter();
   const { isMobile } = useResponsive();
   const insets = useSafeAreaInsets();
@@ -141,40 +181,4 @@ export const BlockedUsersScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-  },
-  loadingWrap: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  listContent: {
-    padding: spacing.md,
-    gap: spacing.sm,
-  },
-  emptyContent: {
-    flexGrow: 1,
-    justifyContent: 'center',
-  },
-  item: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    padding: spacing.md,
-    ...shadows.sm,
-  },
-  content: {
-    flex: 1,
-    marginLeft: spacing.md,
-    marginRight: spacing.sm,
-  },
-  nickname: {
-    fontWeight: '600',
-  },
-});
-
 export default BlockedUsersScreen;

src/screens/profile/EditProfileScreen.tsx

@@ -5,7 +5,7 @@
  * 表单在宽屏下居中显示
  */
 
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import {
   View,
   ScrollView,
@@ -22,12 +22,274 @@ import { useNavigation } from '@react-navigation/native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
-import { colors, spacing, fontSizes, borderRadius, shadows } from '../../theme';
+import {
+  spacing,
+  fontSizes,
+  borderRadius,
+  shadows,
+  useAppColors,
+  type AppColors,
+} from '../../theme';
 import { useAuthStore } from '../../stores';
 import { Avatar, Button, Text, ResponsiveContainer } from '../../components/common';
 import { authService, uploadService } from '../../services';
 import { useResponsive } from '../../hooks';
 
+function createEditProfileStyles(colors: AppColors) {
+  return StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background.default,
+  },
+  keyboardView: {
+    flex: 1,
+  },
+  scrollContent: {
+    padding: spacing.lg,
+  },
+
+  // ===== 预览区域 - 与 UserProfileHeader 完全一致 =====
+  previewContainer: {
+    marginBottom: spacing.lg,
+  },
+  coverContainer: {
+    position: 'relative',
+    overflow: 'hidden',
+    borderRadius: borderRadius.lg,
+  },
+  coverTouchable: {
+    width: '100%',
+    height: '100%',
+  },
+  coverImage: {
+    width: '100%',
+    height: '100%',
+  },
+  gradient: {
+    width: '100%',
+    height: '100%',
+  },
+  coverUploadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  coverEditOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  coverEditText: {
+    color: colors.text.inverse,
+    fontSize: fontSizes.sm,
+    marginTop: spacing.xs,
+    fontWeight: '500',
+  },
+  waveDecoration: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 40,
+  },
+  wave: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: colors.background.paper,
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+  },
+
+  // 用户信息卡片
+  profileCard: {
+    backgroundColor: colors.background.paper,
+    marginHorizontal: spacing.md,
+    marginTop: -50,
+    borderRadius: borderRadius.xl,
+    padding: spacing.lg,
+    ...shadows.md,
+  },
+  avatarWrapper: {
+    alignItems: 'center',
+    marginTop: -60,
+    marginBottom: spacing.md,
+  },
+  avatarContainer: {
+    position: 'relative',
+    padding: 4,
+    backgroundColor: colors.background.paper,
+    borderRadius: 50,
+  },
+  avatarUploadingOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    borderRadius: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  editAvatarButton: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: colors.primary.main,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: colors.background.paper,
+  },
+  userInfo: {
+    alignItems: 'center',
+    marginBottom: spacing.md,
+  },
+  nickname: {
+    marginBottom: spacing.xs,
+    fontWeight: '700',
+  },
+  username: {
+    marginBottom: spacing.sm,
+  },
+  bio: {
+    textAlign: 'center',
+    marginTop: spacing.sm,
+    lineHeight: 20,
+  },
+  bioPlaceholder: {
+    textAlign: 'center',
+    marginTop: spacing.sm,
+    fontStyle: 'italic',
+  },
+  metaInfo: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    marginBottom: spacing.md,
+    gap: spacing.sm,
+  },
+  metaTag: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.background.default,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+    borderRadius: borderRadius.md,
+  },
+  metaTagText: {
+    marginLeft: spacing.xs,
+    fontSize: fontSizes.xs,
+  },
+  editHint: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.md,
+    paddingVertical: spacing.sm,
+    gap: spacing.xs,
+  },
+  editHintText: {
+    fontSize: fontSizes.xs,
+  },
+
+  // ===== 表单区域 =====
+  formCard: {
+    backgroundColor: colors.background.paper,
+    borderRadius: borderRadius.lg,
+    padding: spacing.lg,
+    marginBottom: spacing.lg,
+    shadowColor: colors.text.primary,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  sectionTitle: {
+    marginBottom: spacing.lg,
+  },
+  formField: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  fieldIconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: borderRadius.md,
+    backgroundColor: colors.primary.light + '20',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: spacing.md,
+    marginTop: spacing.xs,
+  },
+  fieldContent: {
+    flex: 1,
+  },
+  fieldLabel: {
+    marginBottom: spacing.xs,
+    fontWeight: '500',
+  },
+  fieldInput: {
+    fontSize: fontSizes.md,
+    color: colors.text.primary,
+    paddingVertical: spacing.sm,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.divider,
+  },
+  textArea: {
+    height: 80,
+    textAlignVertical: 'top',
+  },
+  disabledInput: {
+    color: colors.text.disabled,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: colors.divider,
+    marginVertical: spacing.md,
+    marginLeft: 56,
+  },
+
+  // 保存按钮
+  buttonContainer: {
+    marginTop: spacing.sm,
+  },
+  saveButton: {
+    backgroundColor: colors.primary.main,
+    borderRadius: borderRadius.lg,
+    paddingVertical: spacing.md,
+    shadowColor: colors.primary.main,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  saveButtonDisabled: {
+    opacity: 0.6,
+  },
+  saveButtonContent: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonIcon: {
+    marginRight: spacing.sm,
+  },
+  saveButtonText: {
+    color: colors.text.inverse,
+  },
+  });
+}
+
+type EditProfileSheet = ReturnType<typeof createEditProfileStyles>;
+
+
 // 表单输入项组件
 interface FormFieldProps {
   icon: string;
@@ -41,6 +303,8 @@ interface FormFieldProps {
   autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
   keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'url';
   editable?: boolean;
+  sheet: EditProfileSheet;
+  colors: AppColors;
 }
 
 const FormField: React.FC<FormFieldProps> = ({
@@ -55,19 +319,21 @@ const FormField: React.FC<FormFieldProps> = ({
   autoCapitalize = 'sentences',
   keyboardType = 'default',
   editable = true,
+  sheet,
+  colors,
 }) => {
   return (
-    <View style={styles.formField}>
+    <View style={sheet.formField}>
-      <View style={styles.fieldIconContainer}>
+      <View style={sheet.fieldIconContainer}>
         <MaterialCommunityIcons name={icon as any} size={22} color={colors.primary.main} />
       </View>
-      <View style={styles.fieldContent}>
+      <View style={sheet.fieldContent}>
-        <Text variant="caption" style={styles.fieldLabel}>{label}</Text>
+        <Text variant="caption" style={sheet.fieldLabel}>{label}</Text>
         <TextInput
           style={[
-            styles.fieldInput,
+            sheet.fieldInput,
-            multiline && styles.textArea,
+            multiline && sheet.textArea,
-            !editable && styles.disabledInput
+            !editable && sheet.disabledInput
           ]}
           value={value}
           onChangeText={onChangeText}
@@ -86,6 +352,8 @@ const FormField: React.FC<FormFieldProps> = ({
 };
 
 export const EditProfileScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createEditProfileStyles(colors), [colors]);
   const navigation = useNavigation();
   const { currentUser, updateUser } = useAuthStore();
   const { isWideScreen, isMobile, width } = useResponsive();
@@ -401,6 +669,8 @@ export const EditProfileScreen: React.FC = () => {
           onChangeText={setNickname}
           placeholder="请输入昵称"
           maxLength={20}
+          sheet={styles}
+          colors={colors}
         />
 
         <View style={styles.divider} />
@@ -414,6 +684,8 @@ export const EditProfileScreen: React.FC = () => {
           maxLength={100}
           multiline
           numberOfLines={3}
+          sheet={styles}
+          colors={colors}
         />
 
         <View style={styles.divider} />
@@ -425,6 +697,8 @@ export const EditProfileScreen: React.FC = () => {
           onChangeText={setLocation}
           placeholder="你所在的城市"
           maxLength={30}
+          sheet={styles}
+          colors={colors}
         />
 
         <View style={styles.divider} />
@@ -438,6 +712,8 @@ export const EditProfileScreen: React.FC = () => {
           maxLength={100}
           autoCapitalize="none"
           keyboardType="url"
+          sheet={styles}
+          colors={colors}
         />
       </View>
 
@@ -455,6 +731,8 @@ export const EditProfileScreen: React.FC = () => {
           placeholder="请输入手机号"
           maxLength={11}
           keyboardType="phone-pad"
+          sheet={styles}
+          colors={colors}
         />
 
         <View style={styles.divider} />
@@ -468,6 +746,8 @@ export const EditProfileScreen: React.FC = () => {
           maxLength={100}
           autoCapitalize="none"
           keyboardType="email-address"
+          sheet={styles}
+          colors={colors}
         />
       </View>
 
@@ -535,254 +815,5 @@ export const EditProfileScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-  },
-  keyboardView: {
-    flex: 1,
-  },
-  scrollContent: {
-    padding: spacing.lg,
-  },
-
-  // ===== 预览区域 - 与 UserProfileHeader 完全一致 =====
-  previewContainer: {
-    marginBottom: spacing.lg,
-  },
-  coverContainer: {
-    position: 'relative',
-    overflow: 'hidden',
-    borderRadius: borderRadius.lg,
-  },
-  coverTouchable: {
-    width: '100%',
-    height: '100%',
-  },
-  coverImage: {
-    width: '100%',
-    height: '100%',
-  },
-  gradient: {
-    width: '100%',
-    height: '100%',
-  },
-  coverUploadingOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  coverEditOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  coverEditText: {
-    color: colors.text.inverse,
-    fontSize: fontSizes.sm,
-    marginTop: spacing.xs,
-    fontWeight: '500',
-  },
-  waveDecoration: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: 40,
-  },
-  wave: {
-    width: '100%',
-    height: '100%',
-    backgroundColor: colors.background.paper,
-    borderTopLeftRadius: 30,
-    borderTopRightRadius: 30,
-  },
-
-  // 用户信息卡片
-  profileCard: {
-    backgroundColor: colors.background.paper,
-    marginHorizontal: spacing.md,
-    marginTop: -50,
-    borderRadius: borderRadius.xl,
-    padding: spacing.lg,
-    ...shadows.md,
-  },
-  avatarWrapper: {
-    alignItems: 'center',
-    marginTop: -60,
-    marginBottom: spacing.md,
-  },
-  avatarContainer: {
-    position: 'relative',
-    padding: 4,
-    backgroundColor: colors.background.paper,
-    borderRadius: 50,
-  },
-  avatarUploadingOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    borderRadius: 60,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  editAvatarButton: {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    backgroundColor: colors.primary.main,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 2,
-    borderColor: colors.background.paper,
-  },
-  userInfo: {
-    alignItems: 'center',
-    marginBottom: spacing.md,
-  },
-  nickname: {
-    marginBottom: spacing.xs,
-    fontWeight: '700',
-  },
-  username: {
-    marginBottom: spacing.sm,
-  },
-  bio: {
-    textAlign: 'center',
-    marginTop: spacing.sm,
-    lineHeight: 20,
-  },
-  bioPlaceholder: {
-    textAlign: 'center',
-    marginTop: spacing.sm,
-    fontStyle: 'italic',
-  },
-  metaInfo: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-    marginBottom: spacing.md,
-    gap: spacing.sm,
-  },
-  metaTag: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.background.default,
-    paddingHorizontal: spacing.sm,
-    paddingVertical: spacing.xs,
-    borderRadius: borderRadius.md,
-  },
-  metaTagText: {
-    marginLeft: spacing.xs,
-    fontSize: fontSizes.xs,
-  },
-  editHint: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: colors.background.default,
-    borderRadius: borderRadius.md,
-    paddingVertical: spacing.sm,
-    gap: spacing.xs,
-  },
-  editHintText: {
-    fontSize: fontSizes.xs,
-  },
-
-  // ===== 表单区域 =====
-  formCard: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
-    padding: spacing.lg,
-    marginBottom: spacing.lg,
-    shadowColor: colors.text.primary,
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 8,
-    elevation: 2,
-  },
-  sectionTitle: {
-    marginBottom: spacing.lg,
-  },
-  formField: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  fieldIconContainer: {
-    width: 40,
-    height: 40,
-    borderRadius: borderRadius.md,
-    backgroundColor: colors.primary.light + '20',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: spacing.md,
-    marginTop: spacing.xs,
-  },
-  fieldContent: {
-    flex: 1,
-  },
-  fieldLabel: {
-    marginBottom: spacing.xs,
-    fontWeight: '500',
-  },
-  fieldInput: {
-    fontSize: fontSizes.md,
-    color: colors.text.primary,
-    paddingVertical: spacing.sm,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
-  },
-  textArea: {
-    height: 80,
-    textAlignVertical: 'top',
-  },
-  disabledInput: {
-    color: colors.text.disabled,
-  },
-  divider: {
-    height: 1,
-    backgroundColor: colors.divider,
-    marginVertical: spacing.md,
-    marginLeft: 56,
-  },
-
-  // 保存按钮
-  buttonContainer: {
-    marginTop: spacing.sm,
-  },
-  saveButton: {
-    backgroundColor: colors.primary.main,
-    borderRadius: borderRadius.lg,
-    paddingVertical: spacing.md,
-    shadowColor: colors.primary.main,
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 4,
-  },
-  saveButtonDisabled: {
-    opacity: 0.6,
-  },
-  saveButtonContent: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  buttonIcon: {
-    marginRight: spacing.sm,
-  },
-  saveButtonText: {
-    color: colors.text.inverse,
-  },
-});
 
 export default EditProfileScreen;

src/screens/profile/FollowListScreen.tsx

@@ -5,7 +5,7 @@
  * 在宽屏下使用网格布局
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import {
   View,
   FlatList,
@@ -17,7 +17,7 @@ import {
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter, useLocalSearchParams } from 'expo-router';
-import { colors, spacing, borderRadius, shadows } from '../../theme';
+import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { User } from '../../types';
 import { useAuthStore, useUserStore } from '../../stores';
 import { authService } from '../../services';
@@ -26,6 +26,8 @@ import * as hrefs from '../../navigation/hrefs';
 import { useResponsive, useColumnCount } from '../../hooks';
 
 const FollowListScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createFollowListStyles(colors), [colors]);
   const router = useRouter();
   const { userId = '', type: typeParam } = useLocalSearchParams<{ userId?: string; type?: string }>();
   const type = typeParam === 'followers' ? 'followers' : 'following';
@@ -356,7 +358,8 @@ const FollowListScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createFollowListStyles(colors: AppColors) {
+  return StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -486,6 +489,7 @@ const styles = StyleSheet.create({
     footerLoadingText: {
       marginLeft: spacing.xs,
     },
-});
+  });
+}
 
 export default FollowListScreen;

src/screens/profile/NotificationSettingsScreen.tsx

@@ -4,7 +4,7 @@
  * 在宽屏下居中显示
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -13,7 +13,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, borderRadius, useAppColors, type AppColors } from '../../theme';
 import { Text, ResponsiveContainer } from '../../components/common';
 import {
   loadNotificationPreferences,
@@ -33,6 +33,8 @@ interface NotificationSettingItem {
 }
 
 export const NotificationSettingsScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createNotificationSettingsStyles(colors), [colors]);
   const [vibrationEnabled, setVibrationEnabledState] = useState(true);
   const [pushEnabled, setPushEnabled] = useState(true);
   const [soundEnabled, setSoundEnabled] = useState(true);
@@ -183,7 +185,8 @@ export const NotificationSettingsScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createNotificationSettingsStyles(colors: AppColors) {
+  return StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -249,6 +252,7 @@ const styles = StyleSheet.create({
       flex: 1,
       lineHeight: 20,
     },
-});
+  });
+}
 
 export default NotificationSettingsScreen;

src/screens/profile/SettingsScreen.tsx

@@ -4,7 +4,7 @@
  * 在宽屏下居中显示，最大宽度限制
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -16,7 +16,15 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import Constants from 'expo-constants';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import {
+  useAppColors,
+  spacing,
+  fontSizes,
+  borderRadius,
+  useThemePreference,
+  useSetThemePreference,
+  type AppColors,
+} from '../../theme';
 import { useAuthStore } from '../../stores';
 import { Text, ResponsiveContainer } from '../../components/common';
 import { useResponsive } from '../../hooks';
@@ -34,11 +42,9 @@ interface SettingsItem {
   subtitle?: string;
 }
 
-// 获取应用版本号
 const APP_VERSION = Constants.expoConfig?.version || '1.0.0';
 
-// 设置分组配置
+const SETTINGS_GROUPS_BASE = [
-const SETTINGS_GROUPS = [
   {
     title: '账号与安全',
     icon: 'shield-check-outline',
@@ -66,163 +72,8 @@ const SETTINGS_GROUPS = [
   },
 ];
 
-export const SettingsScreen: React.FC = () => {
+function createSettingsStyles(colors: AppColors) {
-  const router = useRouter();
+  return StyleSheet.create({
-  const { logout } = useAuthStore();
-  const { isWideScreen } = useResponsive();
-  const insets = useSafeAreaInsets();
-  const { isMobile } = useResponsive();
-  
-  // 底部间距，避免被 TabBar 遮挡
-  const scrollBottomInset = isMobile ? 64 + 24 + insets.bottom + spacing.md : spacing.md;
-
-  // 处理设置项点击
-  const handleItemPress = (key: string) => {
-    switch (key) {
-      case 'edit_profile':
-        router.push(hrefs.hrefProfileEdit());
-        break;
-      case 'notification_settings':
-        router.push(hrefs.hrefProfileNotifications());
-        break;
-      case 'blocked_users':
-        router.push(hrefs.hrefProfileBlocked());
-        break;
-      case 'security':
-        router.push(hrefs.hrefProfileSecurity());
-        break;
-      case 'logout':
-        Alert.alert(
-          '退出登录',
-          '确定要退出登录吗？',
-          [
-            { text: '取消', style: 'cancel' },
-            {
-              text: '确定',
-              style: 'destructive',
-              onPress: async () => {
-                await logout();
-                router.replace(hrefs.hrefAuthLogin());
-              }
-            },
-          ]
-        );
-        break;
-      default:
-        break;
-    }
-  };
-
-  // 渲染单个设置项
-  const renderSettingItem = (item: SettingsItem, index: number, total: number) => (
-    <TouchableOpacity
-      key={item.key}
-      style={[
-        styles.settingItem,
-        index === 0 && styles.settingItemFirst,
-        index === total - 1 && styles.settingItemLast,
-      ]}
-      onPress={() => item.onPress ? item.onPress() : handleItemPress(item.key)}
-      activeOpacity={0.7}
-    >
-      <View style={styles.settingItemLeft}>
-        <View style={[
-          styles.iconContainer,
-          item.danger && styles.dangerIconContainer
-        ]}>
-          <MaterialCommunityIcons
-            name={item.icon as any}
-            size={20}
-            color={item.danger ? colors.error.main : colors.primary.main}
-          />
-        </View>
-        <View style={styles.settingContent}>
-          <Text
-            variant="body"
-            color={item.danger ? colors.error.main : colors.text.primary}
-          >
-            {item.title}
-          </Text>
-          {item.subtitle && (
-            <Text variant="caption" color={colors.text.secondary} style={styles.subtitle}>
-              {item.subtitle}
-            </Text>
-          )}
-        </View>
-      </View>
-      {item.showArrow && (
-        <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
-      )}
-    </TouchableOpacity>
-  );
-
-  // 渲染分组
-  const renderGroup = (group: typeof SETTINGS_GROUPS[0], groupIndex: number) => (
-    <View key={group.title} style={styles.groupContainer}>
-      <View style={styles.groupHeader}>
-        <MaterialCommunityIcons name={group.icon as any} size={16} color={colors.primary.main} />
-        <Text variant="caption" color={colors.text.secondary} style={styles.groupTitle}>
-          {group.title}
-        </Text>
-      </View>
-      <View style={styles.card}>
-        {group.items.map((item, index) =>
-          renderSettingItem(item, index, group.items.length)
-        )}
-      </View>
-    </View>
-  );
-
-  // 退出登录按钮
-  const renderLogoutButton = () => (
-    <TouchableOpacity
-      style={styles.logoutButton}
-      onPress={() => handleItemPress('logout')}
-      activeOpacity={0.7}
-    >
-      <MaterialCommunityIcons name="logout-variant" size={20} color={colors.error.main} />
-      <Text variant="body" color={colors.error.main} style={styles.logoutText}>
-        退出登录
-      </Text>
-    </TouchableOpacity>
-  );
-
-  // 渲染内容
-  const renderContent = () => (
-    <>
-      {SETTINGS_GROUPS.map((group, index) => renderGroup(group, index))}
-      {renderLogoutButton()}
-
-      {/* 底部版权信息 */}
-      <View style={styles.footer}>
-        <Text variant="caption" color={colors.text.hint}>
-          萝卜社区 v{APP_VERSION}
-        </Text>
-        <Text variant="caption" color={colors.text.hint} style={styles.copyright}>
-          © 2024 Carrot BBS. All rights reserved.
-        </Text>
-      </View>
-    </>
-  );
-
-  return (
-    <SafeAreaView style={styles.container} edges={['bottom']}>
-      {isWideScreen ? (
-        <ResponsiveContainer maxWidth={800}>
-          <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>
-            {renderContent()}
-          </ScrollView>
-        </ResponsiveContainer>
-      ) : (
-        <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>
-          {renderContent()}
-        </ScrollView>
-      )}
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -314,6 +165,196 @@ const styles = StyleSheet.create({
     copyright: {
       marginTop: spacing.xs,
     },
-});
+  });
+}
+
+export const SettingsScreen: React.FC = () => {
+  const router = useRouter();
+  const { logout } = useAuthStore();
+  const { isWideScreen } = useResponsive();
+  const insets = useSafeAreaInsets();
+  const { isMobile } = useResponsive();
+  const colors = useAppColors();
+  const styles = useMemo(() => createSettingsStyles(colors), [colors]);
+  const themePreference = useThemePreference();
+  const setThemePreference = useSetThemePreference();
+
+  const scrollBottomInset = isMobile ? 64 + 24 + insets.bottom + spacing.md : spacing.md;
+
+  const settingsGroups = useMemo(() => {
+    const themeSubtitle =
+      themePreference === 'system' ? '跟随系统' : themePreference === 'dark' ? '深色' : '浅色';
+    return [
+      {
+        title: '显示与外观',
+        icon: 'palette-outline',
+        items: [
+          {
+            key: 'theme',
+            title: '主题模式',
+            icon: 'theme-light-dark',
+            showArrow: true,
+            subtitle: themeSubtitle,
+          },
+        ],
+      },
+      ...SETTINGS_GROUPS_BASE,
+    ];
+  }, [themePreference]);
+
+  const handleItemPress = (key: string) => {
+    switch (key) {
+      case 'theme':
+        Alert.alert('主题模式', '选择应用界面明暗', [
+          { text: '取消', style: 'cancel' },
+          {
+            text: '跟随系统',
+            onPress: () => {
+              void setThemePreference('system');
+            },
+          },
+          {
+            text: '浅色',
+            onPress: () => {
+              void setThemePreference('light');
+            },
+          },
+          {
+            text: '深色',
+            onPress: () => {
+              void setThemePreference('dark');
+            },
+          },
+        ]);
+        break;
+      case 'edit_profile':
+        router.push(hrefs.hrefProfileEdit());
+        break;
+      case 'notification_settings':
+        router.push(hrefs.hrefProfileNotifications());
+        break;
+      case 'blocked_users':
+        router.push(hrefs.hrefProfileBlocked());
+        break;
+      case 'security':
+        router.push(hrefs.hrefProfileSecurity());
+        break;
+      case 'logout':
+        Alert.alert(
+          '退出登录',
+          '确定要退出登录吗？',
+          [
+            { text: '取消', style: 'cancel' },
+            {
+              text: '确定',
+              style: 'destructive',
+              onPress: async () => {
+                await logout();
+                router.replace(hrefs.hrefAuthLogin());
+              },
+            },
+          ]
+        );
+        break;
+      default:
+        break;
+    }
+  };
+
+  const renderSettingItem = (item: SettingsItem, index: number, total: number) => (
+    <TouchableOpacity
+      key={item.key}
+      style={[
+        styles.settingItem,
+        index === 0 && styles.settingItemFirst,
+        index === total - 1 && styles.settingItemLast,
+      ]}
+      onPress={() => (item.onPress ? item.onPress() : handleItemPress(item.key))}
+      activeOpacity={0.7}
+    >
+      <View style={styles.settingItemLeft}>
+        <View style={[styles.iconContainer, item.danger && styles.dangerIconContainer]}>
+          <MaterialCommunityIcons
+            name={item.icon as any}
+            size={20}
+            color={item.danger ? colors.error.main : colors.primary.main}
+          />
+        </View>
+        <View style={styles.settingContent}>
+          <Text variant="body" color={item.danger ? colors.error.main : colors.text.primary}>
+            {item.title}
+          </Text>
+          {item.subtitle && (
+            <Text variant="caption" color={colors.text.secondary} style={styles.subtitle}>
+              {item.subtitle}
+            </Text>
+          )}
+        </View>
+      </View>
+      {item.showArrow && (
+        <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
+      )}
+    </TouchableOpacity>
+  );
+
+  const renderGroup = (group: (typeof settingsGroups)[0]) => (
+    <View key={group.title} style={styles.groupContainer}>
+      <View style={styles.groupHeader}>
+        <MaterialCommunityIcons name={group.icon as any} size={16} color={colors.primary.main} />
+        <Text variant="caption" color={colors.text.secondary} style={styles.groupTitle}>
+          {group.title}
+        </Text>
+      </View>
+      <View style={styles.card}>
+        {group.items.map((item, index) => renderSettingItem(item, index, group.items.length))}
+      </View>
+    </View>
+  );
+
+  const renderLogoutButton = () => (
+    <TouchableOpacity
+      style={styles.logoutButton}
+      onPress={() => handleItemPress('logout')}
+      activeOpacity={0.7}
+    >
+      <MaterialCommunityIcons name="logout-variant" size={20} color={colors.error.main} />
+      <Text variant="body" color={colors.error.main} style={styles.logoutText}>
+        退出登录
+      </Text>
+    </TouchableOpacity>
+  );
+
+  const renderContent = () => (
+    <>
+      {settingsGroups.map((group) => renderGroup(group))}
+      {renderLogoutButton()}
+
+      <View style={styles.footer}>
+        <Text variant="caption" color={colors.text.hint}>
+          萝卜社区 v{APP_VERSION}
+        </Text>
+        <Text variant="caption" color={colors.text.hint} style={styles.copyright}>
+          © 2024 Carrot BBS. All rights reserved.
+        </Text>
+      </View>
+    </>
+  );
+
+  return (
+    <SafeAreaView style={styles.container} edges={['bottom']}>
+      {isWideScreen ? (
+        <ResponsiveContainer maxWidth={800}>
+          <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>
+            {renderContent()}
+          </ScrollView>
+        </ResponsiveContainer>
+      ) : (
+        <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>
+          {renderContent()}
+        </ScrollView>
+      )}
+    </SafeAreaView>
+  );
+};
 
 export default SettingsScreen;

src/screens/profile/UserProfileScreen.tsx

@@ -12,12 +12,12 @@ import {
   ScrollView,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { colors } from '../../theme';
+import { useAppColors } from '../../theme';
 import { Post } from '../../types';
 import { PostCard, TabBar, UserProfileHeader } from '../../components/business';
 import { Loading, EmptyState, ResponsiveContainer } from '../../components/common';
 import { useResponsive } from '../../hooks';
-import { useUserProfile, ProfileMode, TABS, TAB_ICONS, sharedStyles } from './useUserProfile';
+import { useUserProfile, ProfileMode, TABS, TAB_ICONS, createSharedProfileStyles } from './useUserProfile';
 
 interface UserProfileScreenProps {
   mode: ProfileMode;
@@ -25,6 +25,8 @@ interface UserProfileScreenProps {
 }
 
 export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, userId }) => {
+  const colors = useAppColors();
+  const sharedStyles = useMemo(() => createSharedProfileStyles(colors), [colors]);
   const { isDesktop, isTablet } = useResponsive();
   
   const {

src/screens/profile/index.ts

@@ -16,5 +16,5 @@ export { BlockedUsersScreen } from './BlockedUsersScreen';
 export { AccountSecurityScreen } from './AccountSecurityScreen';
 
 // 导出 Hook 供需要自定义的场景使用
-export { useUserProfile, sharedStyles, TABS, TAB_ICONS } from './useUserProfile';
+export { useUserProfile, createSharedProfileStyles, TABS, TAB_ICONS } from './useUserProfile';
 export type { ProfileMode, UseUserProfileOptions, UseUserProfileReturn } from './useUserProfile';

src/screens/profile/useUserProfile.ts

@@ -4,9 +4,10 @@
  */
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
 import { useRouter } from 'expo-router';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { colors, spacing } from '../../theme';
+import { spacing, type AppColors } from '../../theme';
 import { Post, User } from '../../types';
 import { useUserStore } from '../../stores';
 import { useCurrentUser } from '../../stores/authStore';
@@ -443,10 +444,8 @@ export const useUserProfile = (options: UseUserProfileOptions): UseUserProfileRe
   };
 };
 
-// 共享的样式
+export function createSharedProfileStyles(colors: AppColors) {
-import { StyleSheet } from 'react-native';
+  return StyleSheet.create({
-
-export const sharedStyles = StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -489,7 +488,7 @@ export const sharedStyles = StyleSheet.create({
       backgroundColor: colors.background.paper,
       borderRadius: 16,
       overflow: 'hidden',
-    shadowColor: '#000',
+      shadowColor: colors.chat.shadow,
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.06,
       shadowRadius: 8,
@@ -498,7 +497,8 @@ export const sharedStyles = StyleSheet.create({
     lastPost: {
       marginBottom: spacing['2xl'],
     },
-});
+  });
+}
 
 // Tab 配置
 export const TABS = ['帖子', '收藏'];

src/screens/schedule/CourseDetailScreen.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity, Alert, ScrollView, Pressable } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
-import { colors, spacing, borderRadius, fontSizes, shadows } from '../../theme';
+import { spacing, borderRadius, fontSizes, shadows, useAppColors, type AppColors } from '../../theme';
 import { routePayloadCache } from '../../stores/routePayloadCache';
 import { scheduleService } from '../../services/scheduleService';
 
@@ -32,107 +32,8 @@ const formatWeekRanges = (weeks: number[]) => {
   return ranges.join(', ');
 };
 
-const CourseDetailScreen: React.FC = () => {
+function createCourseDetailStyles(colors: AppColors) {
-  const router = useRouter();
+  return StyleSheet.create({
-  const { courseId } = useLocalSearchParams<{ courseId?: string }>();
-  const cached = courseId ? routePayloadCache.getCourseDetail(courseId) : undefined;
-  const course = cached?.course;
-  const relatedCourses = cached?.relatedCourses ?? [];
-
-  const timeLines =
-    relatedCourses.length > 0 ? relatedCourses : course ? [course] : [];
-
-  const handleDeleteCourse = () => {
-    if (!course) return;
-    Alert.alert('删除课程', '确认删除这条课程安排吗？', [
-      { text: '取消', style: 'cancel' },
-      {
-        text: '删除',
-        style: 'destructive',
-        onPress: async () => {
-          try {
-            await scheduleService.deleteCourse(course.id);
-            Alert.alert('删除成功', '课程已删除');
-            router.back();
-          } catch (error) {
-            console.error('删除课程失败:', error);
-            Alert.alert('删除失败', '删除课程失败，请稍后重试');
-          }
-        },
-      },
-    ]);
-  };
-
-  if (!course) {
-    return (
-      <SafeAreaView style={styles.container}>
-        <View style={styles.mask}>
-          <Pressable style={StyleSheet.absoluteFillObject} onPress={() => router.back()} />
-        </View>
-      </SafeAreaView>
-    );
-  }
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.mask}>
-        <Pressable style={StyleSheet.absoluteFillObject} onPress={() => router.back()} />
-        <View style={styles.card}>
-          <View style={styles.header}>
-            <View style={styles.headerLeft}>
-              <View style={styles.iconBadge}>
-                <MaterialCommunityIcons name="book-open-page-variant" size={18} color={colors.primary.main} />
-              </View>
-              <Text style={styles.title}>课程详情</Text>
-            </View>
-            <TouchableOpacity onPress={() => router.back()} style={styles.closeButton} hitSlop={10}>
-              <MaterialCommunityIcons name="close" size={18} color={colors.text.secondary} />
-            </TouchableOpacity>
-          </View>
-
-          <ScrollView
-            style={styles.contentScroll}
-            contentContainerStyle={styles.contentScrollContainer}
-            nestedScrollEnabled
-            showsVerticalScrollIndicator={false}
-          >
-            <View style={styles.row}>
-              <Text style={styles.label}>课程名称</Text>
-              <Text style={styles.value} numberOfLines={2}>{course.name}</Text>
-            </View>
-
-            <View style={[styles.row, styles.rowLast]}>
-              <Text style={styles.label}>上课时间</Text>
-              <View style={styles.timeList}>
-                {timeLines.map((item, index) => (
-                  <View key={`${item.id}-${index}`} style={styles.timeItemCard}>
-                    <Text style={styles.timeItemMain}>
-                      第{formatWeekRanges(item.weeks)}周 · {WEEKDAY_NAMES[item.dayOfWeek]} 第
-                      {getMergedSectionIndex(item.startSection)}节
-                    </Text>
-                    <Text style={styles.timeItemSub}>
-                      任课教师：{item.teacher || '未填写'}
-                    </Text>
-                    {item.location ? <Text style={styles.timeItemSub}>{item.location}</Text> : null}
-                  </View>
-                ))}
-              </View>
-            </View>
-
-            <View style={styles.actionRow}>
-              <TouchableOpacity style={styles.deleteButton} onPress={handleDeleteCourse} activeOpacity={0.85}>
-                <MaterialCommunityIcons name="delete-outline" size={16} color={colors.error.main} />
-                <Text style={styles.deleteButtonText}>删除本条课程</Text>
-              </TouchableOpacity>
-            </View>
-          </ScrollView>
-        </View>
-      </View>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
     container: {
       flex: 1,
     },
@@ -258,6 +159,108 @@ const styles = StyleSheet.create({
       fontWeight: '700',
       color: colors.error.main,
     },
-});
+  });
+}
+
+const CourseDetailScreen: React.FC = () => {
+  const router = useRouter();
+  const colors = useAppColors();
+  const styles = useMemo(() => createCourseDetailStyles(colors), [colors]);
+  const { courseId } = useLocalSearchParams<{ courseId?: string }>();
+  const cached = courseId ? routePayloadCache.getCourseDetail(courseId) : undefined;
+  const course = cached?.course;
+  const relatedCourses = cached?.relatedCourses ?? [];
+
+  const timeLines = relatedCourses.length > 0 ? relatedCourses : course ? [course] : [];
+
+  const handleDeleteCourse = () => {
+    if (!course) return;
+    Alert.alert('删除课程', '确认删除这条课程安排吗？', [
+      { text: '取消', style: 'cancel' },
+      {
+        text: '删除',
+        style: 'destructive',
+        onPress: async () => {
+          try {
+            await scheduleService.deleteCourse(course.id);
+            Alert.alert('删除成功', '课程已删除');
+            router.back();
+          } catch (error) {
+            console.error('删除课程失败:', error);
+            Alert.alert('删除失败', '删除课程失败，请稍后重试');
+          }
+        },
+      },
+    ]);
+  };
+
+  if (!course) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <View style={styles.mask}>
+          <Pressable style={StyleSheet.absoluteFillObject} onPress={() => router.back()} />
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.mask}>
+        <Pressable style={StyleSheet.absoluteFillObject} onPress={() => router.back()} />
+        <View style={styles.card}>
+          <View style={styles.header}>
+            <View style={styles.headerLeft}>
+              <View style={styles.iconBadge}>
+                <MaterialCommunityIcons name="book-open-page-variant" size={18} color={colors.primary.main} />
+              </View>
+              <Text style={styles.title}>课程详情</Text>
+            </View>
+            <TouchableOpacity onPress={() => router.back()} style={styles.closeButton} hitSlop={10}>
+              <MaterialCommunityIcons name="close" size={18} color={colors.text.secondary} />
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView
+            style={styles.contentScroll}
+            contentContainerStyle={styles.contentScrollContainer}
+            nestedScrollEnabled
+            showsVerticalScrollIndicator={false}
+          >
+            <View style={styles.row}>
+              <Text style={styles.label}>课程名称</Text>
+              <Text style={styles.value} numberOfLines={2}>
+                {course.name}
+              </Text>
+            </View>
+
+            <View style={[styles.row, styles.rowLast]}>
+              <Text style={styles.label}>上课时间</Text>
+              <View style={styles.timeList}>
+                {timeLines.map((item, index) => (
+                  <View key={`${item.id}-${index}`} style={styles.timeItemCard}>
+                    <Text style={styles.timeItemMain}>
+                      第{formatWeekRanges(item.weeks)}周 · {WEEKDAY_NAMES[item.dayOfWeek]} 第
+                      {getMergedSectionIndex(item.startSection)}节
+                    </Text>
+                    <Text style={styles.timeItemSub}>任课教师：{item.teacher || '未填写'}</Text>
+                    {item.location ? <Text style={styles.timeItemSub}>{item.location}</Text> : null}
+                  </View>
+                ))}
+              </View>
+            </View>
+
+            <View style={styles.actionRow}>
+              <TouchableOpacity style={styles.deleteButton} onPress={handleDeleteCourse} activeOpacity={0.85}>
+                <MaterialCommunityIcons name="delete-outline" size={16} color={colors.error.main} />
+                <Text style={styles.deleteButtonText}>删除本条课程</Text>
+              </TouchableOpacity>
+            </View>
+          </ScrollView>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
 
 export default CourseDetailScreen;

src/screens/schedule/ScheduleScreen.tsx

@@ -23,7 +23,14 @@ import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useFocusEffect } from '@react-navigation/native';
 import { useRouter } from 'expo-router';
-import { colors, fontSizes, spacing, borderRadius, shadows } from '../../theme';
+import {
+  fontSizes,
+  spacing,
+  borderRadius,
+  shadows,
+  useAppColors,
+  type AppColors,
+} from '../../theme';
 import { useResponsive } from '../../hooks/useResponsive';
 import {
   Course,
@@ -148,6 +155,8 @@ const getWeekDates = (weekOffset: number = 0) => {
 const INITIAL_WEEK = getCurrentWeekNumber();
 
 export const ScheduleScreen: React.FC = () => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createScheduleStyles(colors), [colors]);
   const router = useRouter();
   // 使用响应式 hook 检测屏幕尺寸
   const { width: screenWidth, height: screenHeight, isMobile, platform } = useResponsive();
@@ -1063,7 +1072,8 @@ export const ScheduleScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
+function createScheduleStyles(colors: AppColors) {
+  return StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: colors.background.paper,
@@ -1483,6 +1493,7 @@ const styles = StyleSheet.create({
     color: colors.text.secondary,
     fontWeight: '500',
   },
-});
+  });
+}
 
 export default ScheduleScreen;

src/services/alertOverride.ts

@@ -39,7 +39,9 @@ export const installAlertOverride = () => {
       return;
     }
 
-    if (actionButtons.length <= 3) {
+    // 自定义对话框支持多按钮（含「主题模式」等 4 项）；Web 上原生 Alert 常不可用
+    const MAX_CUSTOM_DIALOG_ACTIONS = 8;
+    if (actionButtons.length <= MAX_CUSTOM_DIALOG_ACTIONS) {
       showDialog({
         title: nextTitle,
         message: nextMessage,
@@ -49,7 +51,6 @@ export const installAlertOverride = () => {
       return;
     }
 
-    // 极少数复杂按钮场景，保底回退原生 Alert
     nativeAlert(nextTitle, nextMessage, buttons, options);
   };
 };

src/stores/index.ts

@@ -44,6 +44,17 @@ export { userManager } from './userManager';
 export {
   useHomeTabBarVisibilityStore,
 } from './homeTabBarVisibilityStore';
+export {
+  useAppColors,
+  useThemePreference,
+  useResolvedColorScheme,
+  useSetThemePreference,
+  usePaperThemeFromStore,
+  ThemeBootstrap,
+  useThemeStore,
+  type ThemePreference,
+  type ResolvedScheme,
+} from './themeStore';
 export {
   useConversations as useMessageManagerConversations,
   useMessages,

src/stores/themeStore.ts

@@ -0,0 +1,133 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useColorScheme } from 'react-native';
+import { create } from 'zustand';
+import { useEffect } from 'react';
+import { lightColors, darkColors, type AppColors } from '../theme/palettes';
+import { buildPaperTheme } from '../theme/paperTheme';
+import type { MD3Theme } from 'react-native-paper';
+
+const STORAGE_KEY = 'app_theme_preference';
+
+export type ThemePreference = 'light' | 'dark' | 'system';
+
+export type ResolvedScheme = 'light' | 'dark';
+
+function computeResolved(pref: ThemePreference, system: ResolvedScheme): ResolvedScheme {
+  return pref === 'system' ? system : pref;
+}
+
+function buildState(
+  preference: ThemePreference,
+  systemScheme: ResolvedScheme
+): {
+  resolvedScheme: ResolvedScheme;
+  colors: AppColors;
+  paperTheme: MD3Theme;
+} {
+  const resolvedScheme = computeResolved(preference, systemScheme);
+  const isDark = resolvedScheme === 'dark';
+  const colors = isDark ? darkColors : lightColors;
+  return {
+    resolvedScheme,
+    colors,
+    paperTheme: buildPaperTheme(colors, isDark),
+  };
+}
+
+type ThemeState = {
+  preference: ThemePreference;
+  systemScheme: ResolvedScheme;
+  hydrated: boolean;
+  resolvedScheme: ResolvedScheme;
+  colors: AppColors;
+  paperTheme: MD3Theme;
+  setPreference: (p: ThemePreference) => Promise<void>;
+  setSystemScheme: (s: ResolvedScheme) => void;
+  hydrate: () => Promise<void>;
+};
+
+const initialSystem: ResolvedScheme = 'light';
+
+export const useThemeStore = create<ThemeState>((set, get) => ({
+  preference: 'system',
+  systemScheme: initialSystem,
+  hydrated: false,
+  ...buildState('system', initialSystem),
+
+  setSystemScheme: (systemScheme) => {
+    const { preference, systemScheme: cur } = get();
+    if (cur === systemScheme) return;
+    set({
+      systemScheme,
+      ...buildState(preference, systemScheme),
+    });
+  },
+
+  setPreference: async (preference) => {
+    try {
+      await AsyncStorage.setItem(STORAGE_KEY, preference);
+    } catch {
+      /* ignore */
+    }
+    const { systemScheme } = get();
+    set({
+      preference,
+      ...buildState(preference, systemScheme),
+    });
+  },
+
+  hydrate: async () => {
+    let preference: ThemePreference = 'system';
+    try {
+      const raw = await AsyncStorage.getItem(STORAGE_KEY);
+      if (raw === 'light' || raw === 'dark' || raw === 'system') {
+        preference = raw;
+      }
+    } catch {
+      /* ignore */
+    }
+    const { systemScheme } = get();
+    set({
+      preference,
+      hydrated: true,
+      ...buildState(preference, systemScheme),
+    });
+  },
+}));
+
+/** 在根布局中同步系统配色并恢复持久化偏好 */
+export function ThemeBootstrap() {
+  const system = useColorScheme();
+  const setSystemScheme = useThemeStore((s) => s.setSystemScheme);
+  const hydrate = useThemeStore((s) => s.hydrate);
+
+  useEffect(() => {
+    void hydrate();
+  }, [hydrate]);
+
+  useEffect(() => {
+    setSystemScheme(system === 'dark' ? 'dark' : 'light');
+  }, [system, setSystemScheme]);
+
+  return null;
+}
+
+export function useAppColors() {
+  return useThemeStore((s) => s.colors);
+}
+
+export function useThemePreference() {
+  return useThemeStore((s) => s.preference);
+}
+
+export function useResolvedColorScheme() {
+  return useThemeStore((s) => s.resolvedScheme);
+}
+
+export function useSetThemePreference() {
+  return useThemeStore((s) => s.setPreference);
+}
+
+export function usePaperThemeFromStore() {
+  return useThemeStore((s) => s.paperTheme);
+}

src/theme/index.ts

@@ -1,183 +1,28 @@
 /**
- * 胡萝卜BBS主题系统
+ * 胡萝卜BBS 主题：明暗色板、Paper 主题、设计 token
- * 基于胡萝卜橙主色调的设计系统
+ * 新代码请优先使用 useAppColors()；静态 colors 为浅色快照，与深色模式不同步。
  */
 
-// ==================== 颜色系统 ====================
+export { lightColors, darkColors, type AppColors } from './palettes';
-export const colors = {
+export { buildPaperTheme } from './paperTheme';
-  primary: {
+export * from './tokens';
-    main: '#FF6B35',      // 橙色（主色）
-    light: '#FFB733',
-    dark: '#CC8400',
-    contrast: '#FFFFFF',
-  },
-  secondary: {
-    main: '#4CAF50',
-    light: '#80E27E',
-    dark: '#087F23',
-  },
-  neutral: {
-    main: '#6B7280',      // 中性灰（辅助色）
-    light: '#9CA3AF',
-    dark: '#374151',
-    bg: '#F3F4F6',        // 浅灰背景
-    bgDark: '#1F2937',    // 深灰背景
-  },
-  accent: {
-    main: '#E57373',      // 低饱和红（点缀色）
-    light: '#FFCDD2',
-    dark: '#C62828',
-  },
-  background: {
-    default: '#F5F5F5',
-    paper: '#FFFFFF',
-    disabled: '#E0E0E0',
-  },
-  text: {
-    primary: '#212121',
-    secondary: '#757575',
-    disabled: '#9E9E9E',
-    hint: '#BDBDBD',
-    inverse: '#FFFFFF',
-  },
-  divider: '#E0E0E0',
-  error: {
-    main: '#F44336',
-    light: '#FF7961',
-    dark: '#D32F2F',
-  },
-  success: {
-    main: '#4CAF50',
-    light: '#80E27E',
-    dark: '#087F23',
-  },
-  warning: {
-    main: '#FF9800',
-    light: '#FFB74D',
-    dark: '#F57C00',
-  },
-  info: {
-    main: '#2196F3',
-    light: '#64B5F6',
-    dark: '#1976D2',
-  },
-};
 
-// ==================== 字体系统 ====================
+export {
-export const fontSizes = {
+  useAppColors,
-  xs: 10,
+  useThemePreference,
-  sm: 12,
+  useResolvedColorScheme,
-  md: 14,
+  useSetThemePreference,
-  lg: 16,
+  usePaperThemeFromStore,
-  xl: 18,
+  ThemeBootstrap,
-  '2xl': 20,
+  useThemeStore,
-  '3xl': 24,
+  type ThemePreference,
-  '4xl': 30,
+  type ResolvedScheme,
-};
+} from '../stores/themeStore';
 
-// ==================== 间距系统（4px基准）====================
+import { lightColors } from './palettes';
-export const spacing = {
+import { buildPaperTheme } from './paperTheme';
-  xs: 4,
-  sm: 8,
-  md: 12,
-  lg: 16,
-  xl: 20,
-  '2xl': 24,
-  '3xl': 32,
-  '4xl': 40,
-  '5xl': 48,
-  '6xl': 56,
-};
 
-// ==================== 圆角系统 ====================
+/** 浅色静态快照；随主题切换请使用 useAppColors() */
-export const borderRadius = {
+export const colors = lightColors;
-  sm: 4,
-  md: 8,
-  lg: 12,
-  xl: 16,
-  '2xl': 24,
-  full: 9999,
-};
 
-// ==================== 阴影系统 ====================
+export const paperTheme = buildPaperTheme(lightColors, false);
-export const shadows = {
-  sm: { 
-    shadowColor: '#000', 
-    shadowOffset: { width: 0, height: 1 }, 
-    shadowOpacity: 0.18, 
-    shadowRadius: 1.0, 
-    elevation: 1 
-  },
-  md: { 
-    shadowColor: '#000', 
-    shadowOffset: { width: 0, height: 2 }, 
-    shadowOpacity: 0.22, 
-    shadowRadius: 2.22, 
-    elevation: 3 
-  },
-  lg: { 
-    shadowColor: '#000', 
-    shadowOffset: { width: 0, height: 4 }, 
-    shadowOpacity: 0.3, 
-    shadowRadius: 4.65, 
-    elevation: 6 
-  },
-};
-
-// ==================== 导出主题对象 ====================
-export const theme = { 
-  colors, 
-  fontSizes, 
-  spacing, 
-  borderRadius, 
-  shadows 
-};
-
-export type Theme = typeof theme;
-
-// ==================== 主题配置（用于React Native Paper）====================
-export const paperTheme = {
-  colors: {
-    primary: colors.primary.main,
-    primaryContainer: colors.primary.light,
-    secondary: colors.secondary.main,
-    secondaryContainer: colors.secondary.light,
-    tertiary: colors.info.main,
-    tertiaryContainer: colors.info.light,
-    surface: colors.background.paper,
-    surfaceVariant: colors.background.default,
-    surfaceDisabled: colors.background.disabled,
-    background: colors.background.default,
-    error: colors.error.main,
-    errorContainer: colors.error.light,
-    onPrimary: colors.primary.contrast,
-    onPrimaryContainer: colors.primary.dark,
-    onSecondary: colors.text.inverse,
-    onSecondaryContainer: colors.secondary.dark,
-    onTertiary: colors.text.inverse,
-    onTertiaryContainer: colors.info.dark,
-    onSurface: colors.text.primary,
-    onSurfaceVariant: colors.text.secondary,
-    onSurfaceDisabled: colors.text.disabled,
-    onError: colors.text.inverse,
-    onErrorContainer: colors.error.dark,
-    onBackground: colors.text.primary,
-    outline: colors.divider,
-    outlineVariant: colors.divider,
-    inverseSurface: colors.text.primary,
-    inverseOnSurface: colors.text.inverse,
-    inversePrimary: colors.primary.light,
-    shadow: '#000000',
-    scrim: '#000000',
-    backdrop: 'rgba(0, 0, 0, 0.5)',
-    elevation: {
-      level0: 'transparent',
-      level1: colors.background.paper,
-      level2: colors.background.paper,
-      level3: colors.background.paper,
-      level4: colors.background.paper,
-      level5: colors.background.paper,
-    },
-  },
-  roundness: borderRadius.md,
-};

src/theme/palettes.ts

@@ -0,0 +1,185 @@
+/**
+ * 浅色 / 深色色板与聊天场景语义色
+ */
+
+export const lightColors = {
+  primary: {
+    main: '#FF6B35',
+    light: '#FFB733',
+    dark: '#CC8400',
+    contrast: '#FFFFFF',
+  },
+  secondary: {
+    main: '#4CAF50',
+    light: '#80E27E',
+    dark: '#087F23',
+  },
+  neutral: {
+    main: '#6B7280',
+    light: '#9CA3AF',
+    dark: '#374151',
+    bg: '#F3F4F6',
+    bgDark: '#1F2937',
+  },
+  accent: {
+    main: '#E57373',
+    light: '#FFCDD2',
+    dark: '#C62828',
+  },
+  background: {
+    default: '#F5F5F5',
+    paper: '#FFFFFF',
+    disabled: '#E0E0E0',
+  },
+  text: {
+    primary: '#212121',
+    secondary: '#757575',
+    disabled: '#9E9E9E',
+    hint: '#BDBDBD',
+    inverse: '#FFFFFF',
+  },
+  divider: '#E0E0E0',
+  error: {
+    main: '#F44336',
+    light: '#FF7961',
+    dark: '#D32F2F',
+  },
+  success: {
+    main: '#4CAF50',
+    light: '#80E27E',
+    dark: '#087F23',
+  },
+  warning: {
+    main: '#FF9800',
+    light: '#FFB74D',
+    dark: '#F57C00',
+  },
+  info: {
+    main: '#2196F3',
+    light: '#64B5F6',
+    dark: '#1976D2',
+  },
+  chat: {
+    screen: '#F0F2F5',
+    card: '#FFFFFF',
+    surfaceRaised: '#F7F8FA',
+    surfaceMuted: '#F5F7FA',
+    surfaceInput: '#F5F5F5',
+    border: '#E8E8E8',
+    borderLight: '#ECEFF3',
+    borderHairline: '#F0F0F0',
+    textPrimary: '#1A1A1A',
+    textSecondary: '#8E8E93',
+    textTertiary: '#666666',
+    textPlaceholder: '#AAAAAA',
+    textMuted: '#999999',
+    link: '#4A88C7',
+    success: '#34C759',
+    danger: '#FF3B30',
+    bubbleOutgoing: '#E8E8E8',
+    bubbleIncoming: '#FFFFFF',
+    replyTint: '#DFF2FF',
+    replyTintActive: '#CFEAFF',
+    replyBorder: '#7FB6E6',
+    menuHighlight: '#EEF5FC',
+    iconMuted: '#BBBBBB',
+    iconSoft: '#C8C8C8',
+    sheetGrip: '#E0E0E0',
+    warningBg: '#FFF5F5',
+    tipBg: '#FFF9E6',
+    overlayQuote: '#F0F7FF',
+    shadow: '#000000',
+  },
+} as const;
+
+export type AppColors = typeof lightColors;
+
+export const darkColors = {
+  primary: {
+    main: '#FF8A50',
+    light: '#FFB733',
+    dark: '#E85D2A',
+    contrast: '#FFFFFF',
+  },
+  secondary: {
+    main: '#66BB6A',
+    light: '#81C784',
+    dark: '#388E3C',
+  },
+  neutral: {
+    main: '#9CA3AF',
+    light: '#D1D5DB',
+    dark: '#6B7280',
+    bg: '#374151',
+    bgDark: '#111827',
+  },
+  accent: {
+    main: '#EF9A9A',
+    light: '#FFCDD2',
+    dark: '#E57373',
+  },
+  background: {
+    default: '#121212',
+    paper: '#1E1E1E',
+    disabled: '#2C2C2C',
+  },
+  text: {
+    primary: '#ECECEC',
+    secondary: '#A8A8A8',
+    disabled: '#6E6E6E',
+    hint: '#888888',
+    inverse: '#121212',
+  },
+  divider: '#333333',
+  error: {
+    main: '#EF5350',
+    light: '#FF867C',
+    dark: '#C62828',
+  },
+  success: {
+    main: '#66BB6A',
+    light: '#81C784',
+    dark: '#388E3C',
+  },
+  warning: {
+    main: '#FFA726',
+    light: '#FFCC80',
+    dark: '#F57C00',
+  },
+  info: {
+    main: '#42A5F5',
+    light: '#90CAF9',
+    dark: '#1976D2',
+  },
+  chat: {
+    screen: '#0A0A0A',
+    card: '#1C1C1E',
+    surfaceRaised: '#2C2C2E',
+    surfaceMuted: '#252528',
+    surfaceInput: '#2A2A2C',
+    border: '#38383A',
+    borderLight: '#3A3A3C',
+    borderHairline: '#2C2C2E',
+    textPrimary: '#F2F2F7',
+    textSecondary: '#98989D',
+    textTertiary: '#AEAEB2',
+    textPlaceholder: '#636366',
+    textMuted: '#8E8E93',
+    link: '#5AC8FA',
+    success: '#32D74B',
+    danger: '#FF453A',
+    bubbleOutgoing: '#3A3A3C',
+    bubbleIncoming: '#2C2C2E',
+    replyTint: '#1A3A52',
+    replyTintActive: '#224060',
+    replyBorder: '#4A88C7',
+    menuHighlight: '#1C2A3A',
+    iconMuted: '#8E8E93',
+    iconSoft: '#636366',
+    sheetGrip: '#48484A',
+    warningBg: '#3A2222',
+    tipBg: '#3A3520',
+    overlayQuote: '#1A2838',
+    shadow: '#000000',
+  },
+} as unknown as AppColors;

src/theme/paperTheme.ts

@@ -0,0 +1,54 @@
+import { MD3DarkTheme, MD3LightTheme, type MD3Theme } from 'react-native-paper';
+import { borderRadius } from './tokens';
+import type { AppColors } from './palettes';
+
+export function buildPaperTheme(colors: AppColors, isDark: boolean): MD3Theme {
+  const base = isDark ? MD3DarkTheme : MD3LightTheme;
+  return {
+    ...base,
+    colors: {
+      ...base.colors,
+      primary: colors.primary.main,
+      primaryContainer: colors.primary.light,
+      secondary: colors.secondary.main,
+      secondaryContainer: colors.secondary.light,
+      tertiary: colors.info.main,
+      tertiaryContainer: colors.info.light,
+      surface: colors.background.paper,
+      surfaceVariant: colors.background.default,
+      surfaceDisabled: colors.background.disabled,
+      background: colors.background.default,
+      error: colors.error.main,
+      errorContainer: colors.error.light,
+      onPrimary: colors.primary.contrast,
+      onPrimaryContainer: colors.primary.dark,
+      onSecondary: colors.text.inverse,
+      onSecondaryContainer: colors.secondary.dark,
+      onTertiary: colors.text.inverse,
+      onTertiaryContainer: colors.info.dark,
+      onSurface: colors.text.primary,
+      onSurfaceVariant: colors.text.secondary,
+      onSurfaceDisabled: colors.text.disabled,
+      onError: colors.text.inverse,
+      onErrorContainer: colors.error.dark,
+      onBackground: colors.text.primary,
+      outline: colors.divider,
+      outlineVariant: colors.divider,
+      inverseSurface: colors.text.primary,
+      inverseOnSurface: colors.text.inverse,
+      inversePrimary: colors.primary.light,
+      shadow: '#000000',
+      scrim: '#000000',
+      backdrop: 'rgba(0, 0, 0, 0.5)',
+      elevation: {
+        level0: 'transparent',
+        level1: colors.background.paper,
+        level2: colors.background.paper,
+        level3: colors.background.paper,
+        level4: colors.background.paper,
+        level5: colors.background.paper,
+      },
+    },
+    roundness: borderRadius.md,
+  };
+}

src/theme/tokens.ts

@@ -0,0 +1,60 @@
+/**
+ * 与明暗无关的设计 token
+ */
+
+export const fontSizes = {
+  xs: 10,
+  sm: 12,
+  md: 14,
+  lg: 16,
+  xl: 18,
+  '2xl': 20,
+  '3xl': 24,
+  '4xl': 30,
+};
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 32,
+  '4xl': 40,
+  '5xl': 48,
+  '6xl': 56,
+};
+
+export const borderRadius = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  '2xl': 24,
+  full: 9999,
+};
+
+export const shadows = {
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.18,
+    shadowRadius: 1.0,
+    elevation: 1,
+  },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22,
+    elevation: 3,
+  },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4.65,
+    elevation: 6,
+  },
+};