feat(Theme): enhance theming and UI consistency across components

- Updated app.json to set userInterfaceStyle to automatic for improved theme adaptability.
- Refactored layout components to utilize useAppColors for dynamic theming, ensuring consistent color usage.
- Introduced SystemChrome component to manage system UI background color based on theme.
- Enhanced TabsLayout, ProfileStackLayout, and other components to leverage new theming structure.
- Improved QRCodeScanner, SearchBar, and CommentItem styles to align with the updated theme system.
- Consolidated styles in SystemMessageItem and TabBar for better maintainability and visual coherence.

src/screens/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',
-    fontSize: 12,
-    backgroundColor: 'rgba(142, 142, 147, 0.12)',
-    paddingHorizontal: spacing.md,
-    paddingVertical: 6,
-    borderRadius: 14,
-    fontWeight: '600',
+    color: 'rgba(142, 142, 147, 0.95)',
+    fontSize: 11,
+    backgroundColor: 'rgba(142, 142, 147, 0.1)',
+    paddingHorizontal: spacing.sm + 4,
+    paddingVertical: 5,
+    borderRadius: 12,
+    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风格：浅色背景，统一字体颜色
-  messageBubble: {
+  // 消息气泡 - 外层极轻阴影（纯文字气泡更接近扁平 IM）
+  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: {
-    backgroundColor: '#DFF2FF', // Telegram风格的浅蓝色
-    borderBottomRightRadius: 4, // 右下角尖，箭头在右下
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.08,
-    shadowRadius: 2,
-    elevation: 2,
+  myBubbleInner: {
+    backgroundColor: colors.chat.replyTint,
+    borderBottomRightRadius: 4,
   },
-  theirBubble: {
-    backgroundColor: '#FFFFFF',
-    borderTopLeftRadius: 4, // 左上角尖，箭头在左上
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.08,
-    shadowRadius: 2,
-    elevation: 2,
+  theirBubbleInner: {
+    backgroundColor: colors.chat.card,
+    borderTopLeftRadius: 4,
   },
   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',
-    borderRadius: 14,
-    paddingHorizontal: 4,
-    paddingBottom: 4,
+    alignItems: 'flex-end',
   },
   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,
-    borderWidth: 1,
-    borderColor: colors.divider,
-    borderRadius: 24,
-    marginHorizontal: 14,
-    marginBottom: 12,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    borderRadius: 0,
+    marginHorizontal: 10,
+    marginBottom: 10,
+    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',
-    shadowColor: '#000',
+    borderTopColor: colors.chat.border,
+    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',
-    backgroundColor: '#FFFFFF',
+    borderTopColor: colors.chat.border,
+    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',
-    shadowColor: '#000',
+    backgroundColor: colors.chat.card,
+    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',
-    borderColor: '#7FB6E6',
+    backgroundColor: colors.chat.replyBorder,
+    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]);
+}