From 12e770a0bf4885adc553ac6bb26314ea70586853 Mon Sep 17 00:00:00 2001
From: Developer <dev@bilibili-app.local>
Date: Tue, 24 Mar 2026 23:08:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8E=A8=E8=8D=90=E5=9B=BE=E5=8D=A0?=
 =?UTF-8?q?=E4=BD=8D=E8=89=B2=E3=80=81=E8=AF=84=E8=AE=BA=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E3=80=81=E5=BC=B9=E5=B9=95=E8=83=8C=E6=99=AF=E8=89=B2=E8=B7=9F?=
 =?UTF-8?q?=E9=9A=8F=E6=9A=97=E9=BB=91=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/video/[bvid].tsx       |  2 +-
 components/CommentItem.tsx |  6 ++++--
 components/DanmakuList.tsx | 18 ++++++++++--------
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/video/[bvid].tsx b/app/video/[bvid].tsx
index f1fef41..62604de 100644
--- a/app/video/[bvid].tsx
+++ b/app/video/[bvid].tsx
@@ -209,7 +209,7 @@ export default function VideoDetailScreen() {
                   onPress={() => router.push(`/video/${item.bvid}` as any)}
                   activeOpacity={0.85}
                 >
-                  <View style={[styles.relatedThumbWrap, { backgroundColor: theme.bg }]}>
+                  <View style={[styles.relatedThumbWrap, { backgroundColor: theme.card }]}>
                     <Image
                       source={{ uri: proxyImageUrl(item.pic) }}
                       style={styles.relatedThumb}
diff --git a/components/CommentItem.tsx b/components/CommentItem.tsx
index ceb1b88..3ea0b1e 100644
--- a/components/CommentItem.tsx
+++ b/components/CommentItem.tsx
@@ -4,16 +4,18 @@ import { Ionicons } from '@expo/vector-icons';
 import type { Comment } from '../services/types';
 import { formatTime } from '../utils/format';
 import { proxyImageUrl } from '../utils/imageUrl';
+import { useTheme } from '../utils/theme';
 
 interface Props { item: Comment; }
 
 export function CommentItem({ item }: Props) {
+  const theme = useTheme();
   return (
-    <View style={styles.row}>
+    <View style={[styles.row, { borderBottomColor: theme.border }]}>
       <Image source={{ uri: proxyImageUrl(item.member.avatar) }} style={styles.avatar} />
       <View style={styles.content}>
         <Text style={styles.username}>{item.member.uname}</Text>
-        <Text style={styles.message}>{item.content.message}</Text>
+        <Text style={[styles.message, { color: theme.text }]}>{item.content.message}</Text>
         <View style={styles.footer}>
           <Text style={styles.time}>{formatTime(item.ctime)}</Text>
           <View style={styles.likeRow}>
diff --git a/components/DanmakuList.tsx b/components/DanmakuList.tsx
index e93416e..f7c990f 100644
--- a/components/DanmakuList.tsx
+++ b/components/DanmakuList.tsx
@@ -12,6 +12,7 @@ import {
 import { Ionicons } from "@expo/vector-icons";
 import { DanmakuItem } from "../services/types";
 import { danmakuColorToCss } from "../utils/danmaku";
+import { useTheme } from "../utils/theme";
 
 interface Props {
   danmakus: DanmakuItem[];
@@ -65,6 +66,7 @@ export default function DanmakuList({
   maxItems = 100,
   giftCounts,
 }: Props) {
+  const theme = useTheme();
   const flatListRef = useRef<FlatList>(null);
   const [displayedItems, setDisplayedItems] = useState<DisplayedDanmaku[]>([]);
   const [unseenCount, setUnseenCount] = useState(0);
@@ -213,7 +215,7 @@ export default function DanmakuList({
     const guard = item.guardLevel ? GUARD_LABELS[item.guardLevel] : null;
     const timeStr = formatLiveTime(item.timeline);
     return (
-      <Animated.View style={[liveStyles.row, { opacity: item._fadeAnim }]}>
+      <Animated.View style={[liveStyles.row, { opacity: item._fadeAnim, borderBottomColor: theme.border }]}>
         {timeStr ? (
           <Text style={liveStyles.time}>{timeStr}</Text>
         ) : null}
@@ -240,27 +242,27 @@ export default function DanmakuList({
             {item.uname ?? "匿名"}
           </Text>
           <Text style={liveStyles.colon}>：</Text>
-          <Text style={liveStyles.text} numberOfLines={2}>
+          <Text style={[liveStyles.text, { color: theme.text }]} numberOfLines={2}>
             {item.text}
           </Text>
         </View>
       </Animated.View>
     );
-  }, []);
+  }, [theme]);
 
   // ─── Video mode render (original bubble) ───────────────────────────────────
   const renderVideoItem = useCallback(({ item }: { item: DisplayedDanmaku }) => {
     const dotColor = danmakuColorToCss(item.color);
     return (
-      <Animated.View style={[styles.bubble, { opacity: item._fadeAnim }]}>
+      <Animated.View style={[styles.bubble, { opacity: item._fadeAnim, backgroundColor: theme.bg }]}>
         <View style={[styles.colorDot, { backgroundColor: dotColor }]} />
-        <Text style={styles.bubbleText} numberOfLines={3}>
+        <Text style={[styles.bubbleText, { color: theme.text }]} numberOfLines={3}>
           {item.text}
         </Text>
         <Text style={styles.timestamp}>{formatTimestamp(item.time)}</Text>
       </Animated.View>
     );
-  }, []);
+  }, [theme]);
 
   const keyExtractor = useCallback(
     (item: DisplayedDanmaku) => String(item._key),
@@ -268,7 +270,7 @@ export default function DanmakuList({
   );
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container, { backgroundColor: theme.card, borderTopColor: theme.border }, style]}>
       {!hideHeader && (
         <TouchableOpacity
           style={styles.header}
@@ -298,7 +300,7 @@ export default function DanmakuList({
             data={displayedItems}
             keyExtractor={keyExtractor}
             renderItem={isLive ? renderLiveItem : renderVideoItem}
-            style={isLive ? liveStyles.list : styles.list}
+            style={[isLive ? liveStyles.list : styles.list, { backgroundColor: theme.bg }]}
             contentContainerStyle={isLive ? liveStyles.listContent : styles.listContent}
             onScroll={handleScroll}
             onScrollBeginDrag={handleScrollBeginDrag}