chore: merge master-bug → master (v1.0.8 暗黑模式 + 节流模式 + 本地二维码)

2026-07-08 07:28:37 +08:00 · 2026-03-25 00:00:35 +08:00
parent db3f2db5cd 7870c83b12
commit ea96c01569
21 changed files with 712 additions and 278 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -49,4 +49,5 @@ docs/
 feature.md
 livePlan.md
 Promotion.md
+wordsFilter.md
 .env.local
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,19 @@

 ---

+## [1.0.8] - 2026-03-24
+
+### 新增
+- **暗黑模式**：全局主题系统（`utils/theme.ts`），支持亮色 / 暗色一键切换，覆盖所有页面和组件
+- **节流模式**：设置页新增流量节省开关，开启后使用低画质封面、首页视频不自动播放、视频默认 360p 画质
+- **本地二维码生成**：登录二维码改用 `react-native-qrcode-svg` 本地渲染，移除对 `api.qrserver.com` 的外部依赖，提升可靠性
+
+### 修复
+- **SeasonSection 背景色**：合集组件背景色与父容器不一致，现跟随主题色 (`theme.card`) 正确显示
+- **推荐列表 Loading 状态**：空列表加载中未显示 spinner（`ListEmptyComponent` 条件逻辑反转）
+- **合集滚动定位偏移**：`getItemLayout` offset 计算未计入卡片间距（`gap: 10`），导致 `scrollToIndex` 定位不准
+- **推荐视频卡片双边框**：相邻推荐视频卡片之间出现双分割线
+
 ## [1.0.0] — 2026-03-20

 ### 首个正式版本
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -6,6 +6,7 @@ import { useEffect } from 'react';
 import { useAuthStore } from '../store/authStore';
 import { useDownloadStore } from '../store/downloadStore';
 import { useSettingsStore } from '../store/settingsStore';
+import { useTheme } from '../utils/theme';
 import { MiniPlayer } from '../components/MiniPlayer';
 import * as Sentry from '@sentry/react-native';
 import { ErrorBoundary } from '@sentry/react-native';
@@ -21,6 +22,7 @@ function RootLayout() {
  const restore = useAuthStore(s => s.restore);
  const loadDownloads = useDownloadStore(s => s.loadFromStorage);
  const restoreSettings = useSettingsStore(s => s.restore);
+  const darkMode = useSettingsStore(s => s.darkMode);

  useEffect(() => {
    restore();
@@ -31,7 +33,7 @@ function RootLayout() {

  return (
    <SafeAreaProvider>
-      <StatusBar style="dark" />
+      <StatusBar style={darkMode ? 'light' : 'dark'} />
      <View style={{ flex: 1 }}>
        <ErrorBoundary fallback={<Text style={{ padding: 32, textAlign: 'center' }}>发生错误，请重启 App</Text>}>
          <Stack screenOptions={{ headerShown: false }}>
--- a/app/downloads.tsx
+++ b/app/downloads.tsx
@@ -27,9 +27,11 @@ function formatFileSize(bytes?: number): string {
  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
 }
 import { proxyImageUrl } from '../utils/imageUrl';
+import { useTheme } from '../utils/theme';

 export default function DownloadsScreen() {
  const router = useRouter();
+  const theme = useTheme();
  const { tasks, loadFromStorage, removeTask } = useDownloadStore();
  const [playingUri, setPlayingUri] = useState<string | null>(null);
  const [playingTitle, setPlayingTitle] = useState('');
@@ -61,12 +63,12 @@ export default function DownloadsScreen() {
  if (done.length > 0) sections.push({ title: '已下载', data: done });

  return (
-    <SafeAreaView style={styles.safe}>
-      <View style={styles.topBar}>
+    <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]}>
+      <View style={[styles.topBar, { backgroundColor: theme.card, borderBottomColor: theme.border }]}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
-          <Ionicons name="chevron-back" size={24} color="#212121" />
+          <Ionicons name="chevron-back" size={24} color={theme.text} />
        </TouchableOpacity>
-        <Text style={styles.topTitle}>我的下载</Text>
+        <Text style={[styles.topTitle, { color: theme.text }]}>我的下载</Text>
        <View style={{ width: 32 }} />
      </View>

--- a/app/index.tsx
+++ b/app/index.tsx
@@ -40,6 +40,7 @@ import {
 } from "../utils/videoRows";
 import { BigVideoCard } from "../components/BigVideoCard";
 import { FollowedLiveStrip } from "../components/FollowedLiveStrip";
+import { useTheme } from "../utils/theme";
 import type { LiveRoom } from "../services/types";

 const HEADER_H = 44;
@@ -83,6 +84,7 @@ export default function HomeScreen() {
  const [activeTab, setActiveTab] = useState<TabKey>("hot");
  const [liveAreaId, setLiveAreaId] = useState(0);

+  const theme = useTheme();
  const [visibleBigKey, setVisibleBigKey] = useState<string | null>(null);
  const rows = useMemo(() => toListRows(pages, liveRooms), [pages, liveRooms]);
  const pagerRef = useRef<PagerView>(null);
@@ -286,7 +288,7 @@ export default function HomeScreen() {
    activeTab === "hot" ? headerOpacity : liveHeaderOpacity;

  return (
-    <SafeAreaView style={styles.safe} edges={["left", "right"]}>
+    <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]} edges={["left", "right"]}>
      {/* 滑动切换容器 */}
      <PagerView
        ref={pagerRef}
@@ -410,6 +412,7 @@ export default function HomeScreen() {
          styles.navBar,
          {
            paddingTop: insets.top,
+            backgroundColor: theme.card,
            transform: [{ translateY: currentHeaderTranslate }],
          },
        ]}
@@ -419,6 +422,7 @@ export default function HomeScreen() {
            styles.header,
            {
              opacity: currentHeaderOpacity,
+              borderBottomColor: theme.border,
            },
          ]}
        >
@@ -439,19 +443,19 @@ export default function HomeScreen() {
            </TouchableOpacity>
          </View>
          <TouchableOpacity
-            style={styles.searchBar}
+            style={[styles.searchBar, { backgroundColor: theme.inputBg }]}
            onPress={() => router.push("/search" as any)}
            activeOpacity={0.7}
          >
-            <Ionicons name="search" size={14} color="#999" />
-            <Text style={styles.searchPlaceholder}>搜索视频、UP主...</Text>
+            <Ionicons name="search" size={14} color={theme.textSub} />
+            <Text style={[styles.searchPlaceholder, { color: theme.textSub }]}>搜索视频、UP主...</Text>
          </TouchableOpacity>
          <DownloadProgressBtn
            onPress={() => router.push("/downloads" as any)}
          />
        </Animated.View>

-        <View style={styles.tabRow}>
+        <View style={[styles.tabRow, { backgroundColor: theme.card }]}>
          {TABS.map((tab) => (
            <TouchableOpacity
              key={tab.key}
@@ -462,6 +466,7 @@ export default function HomeScreen() {
              <Text
                style={[
                  styles.tabText,
+                  { color: theme.textSub },
                  activeTab === tab.key && styles.tabTextActive,
                ]}
              >
--- a/app/live/[roomId].tsx
+++ b/app/live/[roomId].tsx
@@ -17,12 +17,14 @@ import { LivePlayer } from "../../components/LivePlayer";
 import DanmakuList from "../../components/DanmakuList";
 import { formatCount } from "../../utils/format";
 import { proxyImageUrl } from "../../utils/imageUrl";
+import { useTheme } from "../../utils/theme";

 type Tab = "intro" | "danmaku";

 export default function LiveDetailScreen() {
  const { roomId } = useLocalSearchParams<{ roomId: string }>();
  const router = useRouter();
+  const theme = useTheme();
  const id = parseInt(roomId ?? "0", 10);
  const { room, anchor, stream, loading, error, changeQuality } =
    useLiveDetail(id);
@@ -34,17 +36,17 @@ export default function LiveDetailScreen() {
  const qualities = stream?.qualities ?? [];
  const currentQn = stream?.qn ?? 0;

-  // Use actual roomid from room detail (not the short/alias ID from the URL)
  const actualRoomId = room?.roomid ?? id;
  const { danmakus, giftCounts } = useLiveDanmaku(isLive ? actualRoomId : 0);
+
  return (
-    <SafeAreaView style={styles.safe}>
+    <SafeAreaView style={[styles.safe, { backgroundColor: theme.card }]}>
      {/* TopBar */}
-      <View style={styles.topBar}>
+      <View style={[styles.topBar, { borderBottomColor: theme.border }]}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
-          <Ionicons name="chevron-back" size={24} color="#212121" />
+          <Ionicons name="chevron-back" size={24} color={theme.text} />
        </TouchableOpacity>
-        <Text style={styles.topTitle} numberOfLines={1}>
+        <Text style={[styles.topTitle, { color: theme.text }]} numberOfLines={1}>
          {room?.title ?? "直播间"}
        </Text>
      </View>
@@ -60,12 +62,12 @@ export default function LiveDetailScreen() {
      />

      {/* TabBar */}
-      <View style={styles.tabBar}>
+      <View style={[styles.tabBar, { backgroundColor: theme.card, borderBottomColor: theme.border }]}>
        <TouchableOpacity
          style={styles.tabItem}
          onPress={() => setTab("intro")}
        >
-          <Text style={[styles.tabLabel, tab === "intro" && styles.tabActive]}>
+          <Text style={[styles.tabLabel, { color: theme.textSub }, tab === "intro" && styles.tabActive]}>
            简介
          </Text>
          {tab === "intro" && <View style={styles.tabUnderline} />}
@@ -75,7 +77,7 @@ export default function LiveDetailScreen() {
          onPress={() => setTab("danmaku")}
        >
          <Text
-            style={[styles.tabLabel, tab === "danmaku" && styles.tabActive]}
+            style={[styles.tabLabel, { color: theme.textSub }, tab === "danmaku" && styles.tabActive]}
          >
            弹幕{danmakus.length > 0 ? ` ${danmakus.length}` : ""}
          </Text>
@@ -83,7 +85,7 @@ export default function LiveDetailScreen() {
        </TouchableOpacity>
      </View>

-      {/* Content — 两个面板始终挂载，通过 display 切换，保留弹幕列表状态 */}
+      {/* Content */}
      {loading ? (
        <ActivityIndicator style={styles.loader} color="#00AEEC" />
      ) : error ? (
@@ -95,7 +97,7 @@ export default function LiveDetailScreen() {
            showsVerticalScrollIndicator={false}
          >
            <View style={styles.titleSection}>
-              <Text style={styles.title}>{room?.title}</Text>
+              <Text style={[styles.title, { color: theme.text }]}>{room?.title}</Text>
              <View style={styles.metaRow}>
                {isLive ? (
                  <View style={styles.livePill}>
@@ -126,7 +128,7 @@ export default function LiveDetailScreen() {
              </View>
            </View>

-            <View style={styles.divider} />
+            <View style={[styles.divider, { backgroundColor: theme.border }]} />

            {anchor && (
              <View style={styles.anchorRow}>
@@ -134,7 +136,7 @@ export default function LiveDetailScreen() {
                  source={{ uri: proxyImageUrl(anchor.face) }}
                  style={styles.avatar}
                />
-                <Text style={styles.anchorName}>{anchor.uname}</Text>
+                <Text style={[styles.anchorName, { color: theme.text }]}>{anchor.uname}</Text>
                <TouchableOpacity style={styles.followBtn}>
                  <Text style={styles.followTxt}>+ 关注</Text>
                </TouchableOpacity>
@@ -143,7 +145,7 @@ export default function LiveDetailScreen() {

            {!!room?.description && (
              <View style={styles.descBox}>
-                <Text style={styles.descText}>{room.description}</Text>
+                <Text style={[styles.descText, { color: theme.text }]}>{room.description}</Text>
              </View>
            )}
          </ScrollView>
@@ -166,14 +168,13 @@ export default function LiveDetailScreen() {
 }

 const styles = StyleSheet.create({
-  safe: { flex: 1, backgroundColor: "#fff" },
+  safe: { flex: 1 },
  topBar: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 8,
    paddingVertical: 8,
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#eee",
  },
  backBtn: { padding: 4 },
  topTitle: {
@@ -181,15 +182,12 @@ const styles = StyleSheet.create({
    fontSize: 15,
    fontWeight: "600",
    marginLeft: 4,
-    color: "#212121",
  },
  loader: { marginVertical: 30 },
  errorText: { textAlign: "center", color: "#f00", padding: 20 },
  tabBar: {
    flexDirection: "row",
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#eee",
-    backgroundColor: "#fff",
  },
  tabItem: {
    paddingHorizontal: 20,
@@ -197,7 +195,7 @@ const styles = StyleSheet.create({
    alignItems: "center",
    position: "relative",
  },
-  tabLabel: { fontSize: 14, color: "#999", fontWeight: "500" },
+  tabLabel: { fontSize: 14, fontWeight: "500" },
  tabActive: { color: "#00AEEC", fontWeight: "700" },
  tabUnderline: {
    position: "absolute",
@@ -212,7 +210,6 @@ const styles = StyleSheet.create({
  title: {
    fontSize: 16,
    fontWeight: "600",
-    color: "#212121",
    lineHeight: 22,
    marginBottom: 8,
  },
@@ -248,7 +245,6 @@ const styles = StyleSheet.create({
  },
  divider: {
    height: StyleSheet.hairlineWidth,
-    backgroundColor: "#f0f0f0",
    marginHorizontal: 14,
  },
  anchorRow: {
@@ -258,7 +254,7 @@ const styles = StyleSheet.create({
    paddingVertical: 12,
  },
  avatar: { width: 40, height: 40, borderRadius: 20, marginRight: 10 },
-  anchorName: { flex: 1, fontSize: 14, color: "#212121", fontWeight: "500" },
+  anchorName: { flex: 1, fontSize: 14, fontWeight: "500" },
  followBtn: {
    backgroundColor: "#00AEEC",
    paddingHorizontal: 14,
@@ -267,7 +263,7 @@ const styles = StyleSheet.create({
  },
  followTxt: { color: "#fff", fontSize: 12, fontWeight: "600" },
  descBox: { padding: 14, paddingTop: 4 },
-  descText: { fontSize: 14, color: "#555", lineHeight: 22 },
+  descText: { fontSize: 14, lineHeight: 22 },
  danmakuFull: { flex: 1 },
  hidden: { display: "none" },
 });
--- a/app/search.tsx
+++ b/app/search.tsx
@@ -13,11 +13,13 @@ import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { VideoCard } from '../components/VideoCard';
 import { useSearch } from '../hooks/useSearch';
+import { useTheme } from '../utils/theme';
 import type { VideoItem } from '../services/types';

 export default function SearchScreen() {
  const router = useRouter();
  const { keyword, setKeyword, results, loading, hasMore, search, loadMore } = useSearch();
+  const theme = useTheme();
  const inputRef = useRef<TextInput>(null);

  const handleSearch = useCallback(() => {
@@ -64,7 +66,7 @@ export default function SearchScreen() {
    return (
      <View style={styles.emptyBox}>
        <Ionicons name="search-outline" size={48} color="#ddd" />
-        <Text style={styles.emptyText}>
+        <Text style={[styles.emptyText, { color: theme.textSub }]}>
          {results.length === 0 && keyword.trim()
            ? '没有找到相关视频'
            : '输入关键词搜索'}
@@ -74,16 +76,16 @@ export default function SearchScreen() {
  };

  return (
-    <SafeAreaView style={styles.safe} edges={['top', 'left', 'right']}>
+    <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]} edges={['top', 'left', 'right']}>
      {/* Search header */}
-      <View style={styles.header}>
+      <View style={[styles.header, { backgroundColor: theme.card, borderBottomColor: theme.border }]}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
-          <Ionicons name="chevron-back" size={24} color="#212121" />
+          <Ionicons name="chevron-back" size={24} color={theme.text} />
        </TouchableOpacity>
-        <View style={styles.inputWrap}>
+        <View style={[styles.inputWrap, { backgroundColor: theme.inputBg }]}>
          <TextInput
            ref={inputRef}
-            style={styles.input}
+            style={[styles.input, { color: theme.text }]}
            placeholder="搜索视频、UP主..."
            placeholderTextColor="#999"
            value={keyword}
--- a/app/settings.tsx
+++ b/app/settings.tsx
@@ -5,12 +5,14 @@ import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { useAuthStore } from '../store/authStore';
 import { useSettingsStore } from '../store/settingsStore';
+import { useTheme } from '../utils/theme';
 import { useCheckUpdate } from '../hooks/useCheckUpdate';

 export default function SettingsScreen() {
  const router = useRouter();
  const { isLoggedIn, logout } = useAuthStore();
-  const { coverQuality, setCoverQuality } = useSettingsStore();
+  const { darkMode, setDarkMode, trafficSaving, setTrafficSaving } = useSettingsStore();
+  const theme = useTheme();
  const { currentVersion, isChecking, downloadProgress, checkUpdate } = useCheckUpdate();

  const handleLogout = async () => {
@@ -19,25 +21,25 @@ export default function SettingsScreen() {
  };

  return (
-    <SafeAreaView style={styles.safe}>
-      <View style={styles.topBar}>
+    <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]}>
+      <View style={[styles.topBar, { backgroundColor: theme.card, borderBottomColor: theme.border }]}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
-          <Ionicons name="chevron-back" size={24} color="#212121" />
+          <Ionicons name="chevron-back" size={24} color={theme.text} />
        </TouchableOpacity>
-        <Text style={styles.topTitle}>设置</Text>
+        <Text style={[styles.topTitle, { color: theme.text }]}>设置</Text>
        <View style={styles.spacer} />
      </View>

-      <View style={styles.section}>
-        <Text style={styles.sectionLabel}>版本信息</Text>
+      <View style={[styles.section, { backgroundColor: theme.card, borderColor: theme.border }]}>
+        <Text style={[styles.sectionLabel, { color: theme.textSub }]}>版本信息</Text>
        <View style={styles.versionRow}>
-          <Text style={styles.versionLabel}>当前版本</Text>
-          <Text style={styles.versionValue}>v{currentVersion}</Text>
+          <Text style={[styles.versionLabel, { color: theme.text }]}>当前版本</Text>
+          <Text style={[styles.versionValue, { color: theme.textSub }]}>v{currentVersion}</Text>
        </View>
      </View>

-      <View style={styles.section}>
-        <Text style={styles.sectionLabel}>更新</Text>
+      <View style={[styles.section, { backgroundColor: theme.card, borderColor: theme.border }]}>
+        <Text style={[styles.sectionLabel, { color: theme.textSub }]}>更新</Text>
        <TouchableOpacity
          style={styles.updateBtn}
          onPress={checkUpdate}
@@ -57,30 +59,51 @@ export default function SettingsScreen() {
        </TouchableOpacity>
      </View>

-      <View style={styles.section}>
-        <Text style={styles.sectionLabel}>封面图清晰度</Text>
+      <View style={[styles.section, { backgroundColor: theme.card, borderColor: theme.border }]}>
+        <Text style={[styles.sectionLabel, { color: theme.textSub }]}>外观</Text>
        <View style={styles.optionRow}>
          <TouchableOpacity
-            style={[styles.option, coverQuality === 'hd' && styles.optionActive]}
-            onPress={() => setCoverQuality('hd')}
+            style={[styles.option, !darkMode && styles.optionActive]}
+            onPress={() => setDarkMode(false)}
            activeOpacity={0.7}
          >
-            <Text style={[styles.optionText, coverQuality === 'hd' && styles.optionTextActive]}>
-              高清
-            </Text>
+            <Text style={[styles.optionText, !darkMode && styles.optionTextActive]}>浅色</Text>
          </TouchableOpacity>
          <TouchableOpacity
-            style={[styles.option, coverQuality === 'normal' && styles.optionActive]}
-            onPress={() => setCoverQuality('normal')}
+            style={[styles.option, darkMode && styles.optionActive]}
+            onPress={() => setDarkMode(true)}
            activeOpacity={0.7}
          >
-            <Text style={[styles.optionText, coverQuality === 'normal' && styles.optionTextActive]}>
-              普通
-            </Text>
+            <Text style={[styles.optionText, darkMode && styles.optionTextActive]}>深色</Text>
          </TouchableOpacity>
        </View>
      </View>

+      <View style={[styles.section, { backgroundColor: theme.card, borderColor: theme.border }]}>
+        <Text style={[styles.sectionLabel, { color: theme.textSub }]}>流量</Text>
+        <View style={styles.optionRow}>
+          <TouchableOpacity
+            style={[styles.option, !trafficSaving && styles.optionActive]}
+            onPress={() => setTrafficSaving(false)}
+            activeOpacity={0.7}
+          >
+            <Text style={[styles.optionText, !trafficSaving && styles.optionTextActive]}>标准</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.option, trafficSaving && styles.optionActive]}
+            onPress={() => setTrafficSaving(true)}
+            activeOpacity={0.7}
+          >
+            <Text style={[styles.optionText, trafficSaving && styles.optionTextActive]}>节流</Text>
+          </TouchableOpacity>
+        </View>
+        {trafficSaving && (
+          <Text style={[styles.hint, { color: theme.textSub }]}>
+            封面低画质 · 首页视频不自动播放 · 视频默认 360p
+          </Text>
+        )}
+      </View>
+
      {isLoggedIn && (
        <TouchableOpacity style={styles.logoutBtn} onPress={handleLogout} activeOpacity={0.8}>
          <Text style={styles.logoutText}>退出登录</Text>
@@ -91,15 +114,13 @@ export default function SettingsScreen() {
 }

 const styles = StyleSheet.create({
-  safe: { flex: 1, backgroundColor: '#f4f4f4' },
+  safe: { flex: 1 },
  topBar: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
    paddingVertical: 8,
-    backgroundColor: '#fff',
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#eee',
  },
  backBtn: { padding: 4, width: 32 },
  spacer: { width: 32 },
@@ -107,20 +128,16 @@ const styles = StyleSheet.create({
    flex: 1,
    fontSize: 16,
    fontWeight: '600',
-    color: '#212121',
    textAlign: 'center',
  },
  section: {
-    backgroundColor: '#fff',
    marginTop: 16,
    paddingHorizontal: 16,
    paddingVertical: 14,
    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: '#eee',
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#eee',
  },
-  sectionLabel: { fontSize: 13, color: '#999', marginBottom: 10 },
+  sectionLabel: { fontSize: 13, marginBottom: 10 },
  optionRow: { flexDirection: 'row', gap: 10 },
  option: {
    paddingHorizontal: 20,
@@ -128,18 +145,19 @@ const styles = StyleSheet.create({
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#e0e0e0',
-    backgroundColor: '#fff',
+    backgroundColor: 'transparent',
  },
  optionActive: { borderColor: '#00AEEC', backgroundColor: '#e8f7fd' },
  optionText: { fontSize: 14, color: '#666' },
  optionTextActive: { color: '#00AEEC', fontWeight: '600' },
+  hint: { fontSize: 12, marginTop: 8 },
  versionRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
-  versionLabel: { fontSize: 14, color: '#212121' },
-  versionValue: { fontSize: 14, color: '#999' },
+  versionLabel: { fontSize: 14 },
+  versionValue: { fontSize: 14 },
  updateBtn: {
    flexDirection: 'row',
    alignItems: 'center',
@@ -150,7 +168,6 @@ const styles = StyleSheet.create({
    margin: 24,
    paddingVertical: 12,
    borderRadius: 8,
-    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#ff4757',
    alignItems: 'center',
--- a/app/video/[bvid].tsx
+++ b/app/video/[bvid].tsx
@@ -22,12 +22,14 @@ import { useRelatedVideos } from "../../hooks/useRelatedVideos";
 import { formatCount, formatDuration } from "../../utils/format";
 import { proxyImageUrl } from "../../utils/imageUrl";
 import { DownloadSheet } from "../../components/DownloadSheet";
+import { useTheme } from "../../utils/theme";

 type Tab = "intro" | "comments" | "danmaku";

 export default function VideoDetailScreen() {
  const { bvid } = useLocalSearchParams<{ bvid: string }>();
  const router = useRouter();
+  const theme = useTheme();
  const {
    video,
    playData,
@@ -67,20 +69,27 @@ export default function VideoDetailScreen() {
  }, [video?.cid]);

  return (
-    <SafeAreaView style={styles.safe}>
+    <SafeAreaView style={[styles.safe, { backgroundColor: theme.card }]}>
      {/* TopBar */}
-      <View style={styles.topBar}>
+      <View style={[styles.topBar, { borderBottomColor: theme.border }]}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
-          <Ionicons name="chevron-back" size={24} color="#212121" />
+          <Ionicons name="chevron-back" size={24} color={theme.text} />
        </TouchableOpacity>
-        <Text style={styles.topTitle} numberOfLines={1}>
+        <Text
+          style={[styles.topTitle, { color: theme.text }]}
+          numberOfLines={1}
+        >
          {video?.title ?? "视频详情"}
        </Text>
        <TouchableOpacity
          style={styles.miniBtn}
          onPress={() => setShowDownload(true)}
        >
-          <Ionicons name="cloud-download-outline" size={22} color="#212121" />
+          <Ionicons
+            name="cloud-download-outline"
+            size={22}
+            color={theme.text}
+          />
        </TouchableOpacity>
      </View>

@@ -105,15 +114,19 @@ export default function VideoDetailScreen() {
        qualities={qualities}
      />

-      {/* TabBar — sits directly below player, always visible once video loads */}
+      {/* TabBar */}
      {video && (
-        <View style={styles.tabBar}>
+        <View style={[styles.tabBar, { borderBottomColor: theme.border }]}>
          <TouchableOpacity
            style={styles.tabItem}
            onPress={() => setTab("intro")}
          >
            <Text
-              style={[styles.tabLabel, tab === "intro" && styles.tabActive]}
+              style={[
+                styles.tabLabel,
+                { color: theme.textSub },
+                tab === "intro" && styles.tabActive,
+              ]}
            >
              简介
            </Text>
@@ -124,7 +137,11 @@ export default function VideoDetailScreen() {
            onPress={() => setTab("comments")}
          >
            <Text
-              style={[styles.tabLabel, tab === "comments" && styles.tabActive]}
+              style={[
+                styles.tabLabel,
+                { color: theme.textSub },
+                tab === "comments" && styles.tabActive,
+              ]}
            >
              评论
              {video.stat?.reply > 0 ? ` ${formatCount(video.stat.reply)}` : ""}
@@ -136,7 +153,11 @@ export default function VideoDetailScreen() {
            onPress={() => setTab("danmaku")}
          >
            <Text
-              style={[styles.tabLabel, tab === "danmaku" && styles.tabActive]}
+              style={[
+                styles.tabLabel,
+                { color: theme.textSub },
+                tab === "danmaku" && styles.tabActive,
+              ]}
            >
              弹幕
              {danmakus.length > 0 ? ` ${formatCount(danmakus.length)}` : ""}
@@ -168,13 +189,25 @@ export default function VideoDetailScreen() {
                      source={{ uri: proxyImageUrl(video.owner.face) }}
                      style={styles.avatar}
                    />
-                    <Text style={styles.upName}>{video.owner.name}</Text>
+                    <Text style={[styles.upName, { color: theme.text }]}>
+                      {video.owner.name}
+                    </Text>
                    <TouchableOpacity style={styles.followBtn}>
                      <Text style={styles.followTxt}>+ 关注</Text>
                    </TouchableOpacity>
                  </View>
-                  <View style={styles.titleSection}>
-                    <Text style={styles.title}>{video.title}</Text>
+                  <View
+                    style={[
+                      styles.titleSection,
+                      { borderBottomColor: theme.border },
+                    ]}
+                  >
+                    <Text style={[styles.title, { color: theme.text }]}>
+                      {video.title}
+                    </Text>
+                    <Text style={[styles.subTitle, { color: theme.text }]}>
+                      {video.desc || "暂无简介"}
+                    </Text>
                    <View style={styles.statsRow}>
                      <StatBadge icon="play" count={video.stat.view} />
                      <StatBadge icon="heart" count={video.stat.like} />
@@ -191,23 +224,40 @@ export default function VideoDetailScreen() {
                      }
                    />
                  )}
-                  <View style={styles.descBox}>
-                    <Text style={styles.descText}>
-                      {video.desc || "暂无简介"}
+                  <View
+                    style={[
+                      styles.relatedHeader,
+                      {
+                        backgroundColor: theme.card,
+                      },
+                    ]}
+                  >
+                    <Text
+                      style={[styles.relatedHeaderText, { color: theme.text }]}
+                    >
+                      推荐视频
                    </Text>
                  </View>
-                  <View style={styles.relatedHeader}>
-                    <Text style={styles.relatedHeaderText}>推荐视频</Text>
-                  </View>
                </>
              }
              renderItem={({ item }) => (
                <TouchableOpacity
-                  style={styles.relatedCard}
+                  style={[
+                    styles.relatedCard,
+                    {
+                      backgroundColor: theme.card,
+                      borderBottomColor: theme.border,
+                    },
+                  ]}
                  onPress={() => router.push(`/video/${item.bvid}` as any)}
                  activeOpacity={0.85}
                >
-                  <View style={styles.relatedThumbWrap}>
+                  <View
+                    style={[
+                      styles.relatedThumbWrap,
+                      { backgroundColor: theme.card },
+                    ]}
+                  >
                    <Image
                      source={{ uri: proxyImageUrl(item.pic) }}
                      style={styles.relatedThumb}
@@ -220,7 +270,10 @@ export default function VideoDetailScreen() {
                    </View>
                  </View>
                  <View style={styles.relatedInfo}>
-                    <Text style={styles.relatedTitle} numberOfLines={2}>
+                    <Text
+                      style={[styles.relatedTitle, { color: theme.text }]}
+                      numberOfLines={2}
+                    >
                      {item.title}
                    </Text>
                    <View
@@ -241,7 +294,7 @@ export default function VideoDetailScreen() {
                </TouchableOpacity>
              )}
              ListEmptyComponent={
-                !relatedLoading ? (
+                relatedLoading ? (
                  <ActivityIndicator style={styles.loader} color="#00AEEC" />
                ) : null
              }
@@ -265,7 +318,9 @@ export default function VideoDetailScreen() {
              onEndReachedThreshold={0.3}
              showsVerticalScrollIndicator={false}
              ListHeaderComponent={
-                <View style={styles.sortRow}>
+                <View
+                  style={[styles.sortRow, { borderBottomColor: theme.border }]}
+                >
                  <Text style={styles.sortLabel}>排序</Text>
                  <TouchableOpacity
                    style={[
@@ -352,17 +407,17 @@ function SeasonSection({
  currentBvid: string;
  onEpisodePress: (bvid: string) => void;
 }) {
+  const theme = useTheme();
  const episodes = season.sections?.[0]?.episodes ?? [];
  const currentIndex = episodes.findIndex((ep) => ep.bvid === currentBvid);
  const listRef = useRef<FlatList>(null);

  useEffect(() => {
    if (currentIndex <= 0 || episodes.length === 0) return;
-    // 等布局完成再滚动
    const t = setTimeout(() => {
      listRef.current?.scrollToIndex({
        index: currentIndex,
-        viewPosition: 0.5, // 居中
+        viewPosition: 0.5,
        animated: false,
      });
    }, 200);
@@ -370,9 +425,16 @@ function SeasonSection({
  }, [currentIndex, episodes.length]);

  return (
-    <View style={styles.seasonBox}>
+    <View
+      style={[
+        styles.seasonBox,
+        { borderTopColor: theme.border, backgroundColor: theme.card },
+      ]}
+    >
      <View style={styles.seasonHeader}>
-        <Text style={styles.seasonTitle}>合集 · {season.title}</Text>
+        <Text style={[styles.seasonTitle, { color: theme.text }]}>
+          合集 · {season.title}
+        </Text>
        <Text style={styles.seasonCount}>{season.ep_count}个视频</Text>
        <Ionicons name="chevron-forward" size={14} color="#999" />
      </View>
@@ -383,10 +445,9 @@ function SeasonSection({
        data={episodes}
        keyExtractor={(ep) => ep.bvid}
        contentContainerStyle={{ paddingHorizontal: 12, gap: 10 }}
-        // 每个卡片宽 120，gap 10，让 FlatList 直接算任意索引的偏移量
        getItemLayout={(_data, index) => ({
          length: 130,
-          offset: 12 + index * 130,
+          offset: 12 + index * 140,
          index,
        })}
        onScrollToIndexFailed={() => {}}
@@ -394,20 +455,27 @@ function SeasonSection({
          const isCurrent = ep.bvid === currentBvid;
          return (
            <TouchableOpacity
-              style={[styles.epCard, isCurrent && styles.epCardActive]}
+              style={[
+                styles.epCard,
+                { backgroundColor: theme.card },
+                isCurrent && styles.epCardActive,
+              ]}
              onPress={() => !isCurrent && onEpisodePress(ep.bvid)}
              activeOpacity={0.8}
            >
              {ep.arc?.pic && (
                <Image
                  source={{ uri: proxyImageUrl(ep.arc.pic) }}
-                  style={styles.epThumb}
+                  style={[styles.epThumb, { backgroundColor: theme.card }]}
                />
              )}
              <Text style={[styles.epNum, isCurrent && styles.epNumActive]}>
                第{index + 1}集
              </Text>
-              <Text style={styles.epTitle} numberOfLines={2}>
+              <Text
+                style={[styles.epTitle, { color: theme.text }]}
+                numberOfLines={2}
+              >
                {ep.title}
              </Text>
            </TouchableOpacity>
@@ -419,14 +487,13 @@ function SeasonSection({
 }

 const styles = StyleSheet.create({
-  safe: { flex: 1, backgroundColor: "#fff" },
+  safe: { flex: 1 },
  topBar: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 8,
    paddingVertical: 8,
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#eee",
  },
  backBtn: { padding: 4 },
  topTitle: {
@@ -434,22 +501,23 @@ const styles = StyleSheet.create({
    fontSize: 15,
    fontWeight: "600",
    marginLeft: 4,
-    color: "#212121",
  },
  miniBtn: { padding: 4 },
  loader: { marginVertical: 30 },
  titleSection: {
    padding: 14,
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#f0f0f0",
  },
  title: {
    fontSize: 13,
    fontWeight: "600",
-    color: "#212121",
    lineHeight: 22,
    marginBottom: 8,
  },
+  subTitle: {
+    fontSize: 10,
+    marginBottom: 8,
+  },
  statsRow: { flexDirection: "row", gap: 16 },
  stat: { flexDirection: "row", alignItems: "center", gap: 3 },
  statText: { fontSize: 12, color: "#999" },
@@ -461,7 +529,7 @@ const styles = StyleSheet.create({
    paddingTop: 12,
  },
  avatar: { width: 48, height: 48, borderRadius: 30, marginRight: 10 },
-  upName: { flex: 1, fontSize: 14, color: "#212121", fontWeight: "500" },
+  upName: { flex: 1, fontSize: 14, fontWeight: "500" },
  followBtn: {
    backgroundColor: "#00AEEC",
    paddingHorizontal: 10,
@@ -471,7 +539,6 @@ const styles = StyleSheet.create({
  followTxt: { color: "#fff", fontSize: 12, fontWeight: "500" },
  seasonBox: {
    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#f0f0f0",
    paddingVertical: 10,
  },
  seasonHeader: {
@@ -481,23 +548,21 @@ const styles = StyleSheet.create({
    paddingBottom: 8,
    gap: 4,
  },
-  seasonTitle: { flex: 1, fontSize: 13, fontWeight: "600", color: "#212121" },
+  seasonTitle: { flex: 1, fontSize: 13, fontWeight: "600" },
  seasonCount: { fontSize: 12, color: "#999" },
  epCard: {
    width: 120,
    borderRadius: 6,
    overflow: "hidden",
-    backgroundColor: "#f8f8f8",
    borderWidth: 1.5,
    borderColor: "transparent",
  },
  epCardActive: { borderColor: "#00AEEC" },
-  epThumb: { width: 120, height: 68, backgroundColor: "#eee" },
+  epThumb: { width: 120, height: 68 },
  epNum: { fontSize: 11, color: "#999", paddingHorizontal: 6, paddingTop: 4 },
  epNumActive: { color: "#00AEEC", fontWeight: "600" },
  epTitle: {
    fontSize: 12,
-    color: "#333",
    paddingHorizontal: 6,
    paddingBottom: 6,
    lineHeight: 16,
@@ -505,7 +570,6 @@ const styles = StyleSheet.create({
  tabBar: {
    flexDirection: "row",
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#eee",
  },
  tabItem: {
    flex: 1,
@@ -513,7 +577,7 @@ const styles = StyleSheet.create({
    paddingVertical: 12,
    position: "relative",
  },
-  tabLabel: { fontSize: 13, color: "#999" },
+  tabLabel: { fontSize: 13 },
  tabActive: { color: "#00AEEC" },
  tabUnderline: {
    position: "absolute",
@@ -525,28 +589,23 @@ const styles = StyleSheet.create({
  },
  tabScroll: { flex: 1 },
  descBox: { padding: 16 },
-  descText: { fontSize: 14, color: "#555", lineHeight: 22 },
+  descText: { fontSize: 14, lineHeight: 22 },
  danmakuTab: { flex: 1 },
  emptyTxt: { textAlign: "center", color: "#bbb", padding: 30 },
  relatedHeader: {
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#f0f0f0",
-    backgroundColor: "#f4f4f4",
+    paddingLeft: 12,
+    paddingBottom: 8,
+    paddingTop: 8,
  },
  relatedHeaderText: {
    fontSize: 13,
    fontWeight: "600" as const,
-    color: "#212121",
  },
  relatedCard: {
    flexDirection: "row",
    paddingHorizontal: 12,
    paddingVertical: 8,
-    backgroundColor: "#fff",
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#f0f0f0",
    gap: 10,
  },
  relatedThumbWrap: {
@@ -555,7 +614,6 @@ const styles = StyleSheet.create({
    height: 68,
    borderRadius: 4,
    overflow: "hidden",
-    backgroundColor: "#eee",
    flexShrink: 0,
  },
  relatedThumb: { width: 120, height: 68 },
@@ -574,7 +632,7 @@ const styles = StyleSheet.create({
    justifyContent: "space-between",
    paddingVertical: 2,
  },
-  relatedTitle: { fontSize: 13, color: "#212121", lineHeight: 18 },
+  relatedTitle: { fontSize: 13, lineHeight: 18 },
  relatedOwner: { fontSize: 12, color: "#999" },
  relatedView: { fontSize: 11, color: "#bbb" },
  sortRow: {
@@ -584,7 +642,6 @@ const styles = StyleSheet.create({
    paddingVertical: 10,
    gap: 8,
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#f0f0f0",
  },
  sortLabel: { fontSize: 13, color: "#999", marginRight: 4 },
  sortBtn: {
--- a/components/BigVideoCard.tsx
+++ b/components/BigVideoCard.tsx
@@ -22,6 +22,7 @@ import { buildDashMpdUri } from "../utils/dash";
 import { getPlayUrl, getVideoDetail } from "../services/bilibili";
 import { coverImageUrl } from "../utils/imageUrl";
 import { useSettingsStore } from "../store/settingsStore";
+import { useTheme } from "../utils/theme";
 import { formatCount, formatDuration } from "../utils/format";
 import type { VideoItem } from "../services/types";

@@ -55,7 +56,8 @@ export const BigVideoCard = React.memo(function BigVideoCard({
  onPress,
 }: Props) {
  const { width: SCREEN_W } = useWindowDimensions();
-  const coverQuality = useSettingsStore(s => s.coverQuality);
+  const trafficSaving = useSettingsStore(s => s.trafficSaving);
+  const theme = useTheme();
  const THUMB_H = SCREEN_W * 0.5625;
  const mediaDimensions = { width: SCREEN_W - 8, height: THUMB_H };

@@ -90,7 +92,7 @@ export const BigVideoCard = React.memo(function BigVideoCard({

  // Preload: fetch play URL on mount (before card is visible)
  useEffect(() => {
-    if (videoUrl) return;
+    if (videoUrl || trafficSaving) return;
    let cancelled = false;
    (async () => {
      try {
@@ -125,8 +127,8 @@ export const BigVideoCard = React.memo(function BigVideoCard({
  // Pause/resume based on visibility and scroll state
  useEffect(() => {
    if (!videoUrl) return;
-    if (!isVisible) {
-      // Off-screen: pause, mute, show thumbnail
+    if (!isVisible || trafficSaving) {
+      // Off-screen or traffic saving: pause, mute, show thumbnail
      setPaused(true);
      setMuted(true);
      Animated.timing(thumbOpacity, {
@@ -146,10 +148,10 @@ export const BigVideoCard = React.memo(function BigVideoCard({
        useNativeDriver: true,
      }).start();
    }
-  }, [isVisible, isScrolling, videoUrl]);
+  }, [isVisible, isScrolling, videoUrl, trafficSaving]);

  const handleVideoReady = () => {
-    if (!isVisible || isScrolling) return;
+    if (!isVisible || isScrolling || trafficSaving) return;
    setPaused(false);
    Animated.timing(thumbOpacity, {
      toValue: 0,
@@ -223,7 +225,7 @@ export const BigVideoCard = React.memo(function BigVideoCard({
  const bufferedRatio = duration > 0 ? clamp(buffered / duration, 0, 1) : 0;

  return (
-    <View style={styles.card}>
+    <View style={[styles.card, { backgroundColor: theme.card }]}>
      {/* Media area */}
      <View style={[mediaDimensions, { position: "relative" }]}>
        {/* Video player — rendered first so it sits behind the thumbnail */}
@@ -260,7 +262,7 @@ export const BigVideoCard = React.memo(function BigVideoCard({
          pointerEvents="none"
        >
          <Image
-            source={{ uri: coverImageUrl(item.pic, coverQuality) }}
+            source={{ uri: coverImageUrl(item.pic, trafficSaving ? 'normal' : 'hd') }}
            style={mediaDimensions}
            resizeMode="cover"
          />
@@ -338,11 +340,11 @@ export const BigVideoCard = React.memo(function BigVideoCard({
      {/* Info */}
      <TouchableOpacity onPress={onPress} activeOpacity={0.85}>
        <View style={styles.info}>
-          <Text style={styles.title} numberOfLines={2}>
+          <Text style={[styles.title, { color: theme.text }]} numberOfLines={2}>
            {item.title}
          </Text>

-          <Text style={styles.owner} numberOfLines={1}>
+          <Text style={[styles.owner, { color: theme.textSub }]} numberOfLines={1}>
            {item.owner?.name ?? ""}
          </Text>
        </View>
--- 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}>
--- 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}
--- a/components/FollowedLiveStrip.tsx
+++ b/components/FollowedLiveStrip.tsx
@@ -12,12 +12,14 @@ import { useAuthStore } from "../store/authStore";
 import { getFollowedLiveRooms } from "../services/bilibili";
 import { LivePulse } from "./LivePulse";
 import { proxyImageUrl } from "../utils/imageUrl";
+import { useTheme } from "../utils/theme";
 import type { LiveRoom } from "../services/types";

 export function FollowedLiveStrip() {
  const { sessdata } = useAuthStore();
  const [rooms, setRooms] = useState<LiveRoom[]>([]);
  const router = useRouter();
+  const theme = useTheme();

  useEffect(() => {
    if (!sessdata) return;
@@ -29,7 +31,7 @@ export function FollowedLiveStrip() {
  if (!sessdata || rooms.length === 0) return null;

  return (
-    <View style={styles.container}>
+    <View style={[styles.container, { backgroundColor: theme.bg }]}>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
@@ -48,9 +50,9 @@ export function FollowedLiveStrip() {
            </View>
            <Image
              source={{ uri: proxyImageUrl(room.face) }}
-              style={styles.avatar}
+              style={[styles.avatar, { backgroundColor: theme.card }]}
            />
-            <Text style={styles.name} numberOfLines={1}>
+            <Text style={[styles.name, { color: theme.text }]} numberOfLines={1}>
              {room.uname.length > 5 ? room.uname.slice(0, 5) : room.uname}
            </Text>
          </TouchableOpacity>
@@ -63,7 +65,7 @@ export function FollowedLiveStrip() {
 const styles = StyleSheet.create({
  container: {
    backgroundColor: "#f4f4f4",
-    paddingHorizontal: 12,
+    paddingHorizontal: 3,
    paddingVertical: 8,
  },
  scrollContent: {
--- a/components/LiveCard.tsx
+++ b/components/LiveCard.tsx
@@ -12,6 +12,7 @@ import { LivePulse } from "./LivePulse";
 import type { LiveRoom } from "../services/types";
 import { formatCount } from "../utils/format";
 import { proxyImageUrl } from "../utils/imageUrl";
+import { useTheme } from "../utils/theme";

 const { width } = Dimensions.get("window");
 const CARD_WIDTH = (width - 14) / 2;
@@ -30,9 +31,10 @@ export const LiveCard = React.memo(function LiveCard({
  isLivePulse = false,
 }: Props) {
  const cardWidth = fullWidth ? width - 8 : CARD_WIDTH;
+  const theme = useTheme();
  return (
    <TouchableOpacity
-      style={[styles.card, { width: cardWidth }]}
+      style={[styles.card, { width: cardWidth, backgroundColor: theme.card }]}
      onPress={onPress}
      activeOpacity={0.85}
    >
@@ -41,7 +43,7 @@ export const LiveCard = React.memo(function LiveCard({
          source={{ uri: proxyImageUrl(item.cover) }}
          style={[
            styles.thumb,
-            { width: cardWidth, height: cardWidth * 0.5625 },
+            { width: cardWidth, height: cardWidth * 0.5625, backgroundColor: theme.card },
          ]}
          resizeMode="cover"
        />
@@ -58,7 +60,7 @@ export const LiveCard = React.memo(function LiveCard({
        </View>
      </View>
      <View style={styles.info}>
-        <Text style={styles.title} numberOfLines={2}>
+        <Text style={[styles.title, { color: theme.text }]} numberOfLines={2}>
          {item.title}
        </Text>
        <View style={styles.ownerRow}>
@@ -66,7 +68,7 @@ export const LiveCard = React.memo(function LiveCard({
            source={{ uri: proxyImageUrl(item.face) }}
            style={styles.avatar}
          />
-          <Text style={styles.owner} numberOfLines={1}>
+          <Text style={[styles.owner, { color: theme.textSub }]} numberOfLines={1}>
            {item.uname}
          </Text>
        </View>
--- a/components/LoginModal.tsx
+++ b/components/LoginModal.tsx
@@ -5,7 +5,6 @@ import {
  Text,
  StyleSheet,
  TouchableOpacity,
-  Image,
  ActivityIndicator,
  Animated,
  Alert,
@@ -13,6 +12,7 @@ import {
 } from "react-native";
 import * as FileSystem from "expo-file-system/legacy";
 import * as MediaLibrary from "expo-media-library";
+import QRCode from "react-native-qrcode-svg";
 import { Ionicons } from "@expo/vector-icons";
 import { generateQRCode, pollQRCode, getUserInfo } from "../services/bilibili";
 import { useAuthStore } from "../store/authStore";
@@ -23,10 +23,10 @@ interface Props {
 }

 export function LoginModal({ visible, onClose }: Props) {
-  const [qrUrl, setQrUrl] = useState<string | null>(null);
+  const [qrData, setQrData] = useState<string | null>(null);
  const [qrKey, setQrKey] = useState<string | null>(null);
-  const [qrImageLoaded, setQrImageLoaded] = useState(false);
  const [saving, setSaving] = useState(false);
+  const qrRef = useRef<any>(null);
  const [status, setStatus] = useState<
    "loading" | "waiting" | "scanned" | "done" | "error"
  >("loading");
@@ -52,14 +52,11 @@ export function LoginModal({ visible, onClose }: Props) {
  useEffect(() => {
    if (!visible) return;
    setStatus("loading");
-    setQrUrl(null);
+    setQrData(null);
    setQrKey(null);
-    setQrImageLoaded(false);
    generateQRCode()
      .then((data) => {
-        setQrUrl(
-          `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(data.url)}&size=400x400`,
-        );
+        setQrData(data.url);
        setQrKey(data.qrcode_key);
        setStatus("waiting");
      })
@@ -98,7 +95,7 @@ export function LoginModal({ visible, onClose }: Props) {
  }, [qrKey, status]);

  async function handleSaveQR() {
-    if (!qrUrl) return;
+    if (!qrRef.current) return;
    setSaving(true);
    try {
      const { status: perm } = await MediaLibrary.requestPermissionsAsync();
@@ -106,9 +103,13 @@ export function LoginModal({ visible, onClose }: Props) {
        Alert.alert("提示", "需要相册权限才能保存图片");
        return;
      }
+      qrRef.current.toDataURL(async (base64: string) => {
+        try {
          const dest = `${FileSystem.cacheDirectory}bilibili_qr.png`;
-      const { uri } = await FileSystem.downloadAsync(qrUrl, dest);
-      await MediaLibrary.saveToLibraryAsync(uri);
+          await FileSystem.writeAsStringAsync(dest, base64, {
+            encoding: FileSystem.EncodingType.Base64,
+          });
+          await MediaLibrary.saveToLibraryAsync(dest);
          Alert.alert("已保存", "二维码已存入相册，请用哔哩哔哩扫码登录", [
            { text: "关闭", style: "cancel" },
            {
@@ -121,6 +122,11 @@ export function LoginModal({ visible, onClose }: Props) {
        } finally {
          setSaving(false);
        }
+      });
+    } catch {
+      Alert.alert("失败", "保存失败，请重试");
+      setSaving(false);
+    }
  }

  return (
@@ -146,20 +152,14 @@ export function LoginModal({ visible, onClose }: Props) {
              style={styles.loader}
            />
          )}
-          {(status === "waiting" || status === "scanned") && qrUrl && (
+          {(status === "waiting" || status === "scanned") && qrData && (
            <>
              <View style={styles.qrWrapper}>
-                <Image
-                  source={{ uri: qrUrl }}
-                  style={styles.qr}
-                  onLoad={() => setQrImageLoaded(true)}
+                <QRCode
+                  value={qrData}
+                  size={200}
+                  getRef={(ref) => { qrRef.current = ref; }}
                />
-                {!qrImageLoaded && (
-                  <View style={styles.qrLoader}>
-                    <ActivityIndicator size="large" color="#00AEEC" />
-                  </View>
-                )}
-                {qrImageLoaded && (
                <TouchableOpacity
                  style={styles.saveBtn}
                  onPress={handleSaveQR}
@@ -171,7 +171,6 @@ export function LoginModal({ visible, onClose }: Props) {
                    <Ionicons name="download-outline" size={16} color="#fff" />
                  )}
                </TouchableOpacity>
-                )}
              </View>
              <Text style={styles.hint}>
                {status === "scanned"
@@ -213,13 +212,6 @@ const styles = StyleSheet.create({
  title: { fontSize: 18, fontWeight: "600", marginBottom: 20 },
  loader: { marginVertical: 40 },
  qrWrapper: { width: 200, height: 200, marginBottom: 12 },
-  qr: { width: 200, height: 200 },
-  qrLoader: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "#f4f4f4",
-  },
  saveBtn: {
    position: "absolute",
    bottom: 6,
--- a/components/VideoCard.tsx
+++ b/components/VideoCard.tsx
@@ -12,6 +12,7 @@ import type { VideoItem } from "../services/types";
 import { formatCount, formatDuration } from "../utils/format";
 import { coverImageUrl } from "../utils/imageUrl";
 import { useSettingsStore } from "../store/settingsStore";
+import { useTheme } from "../utils/theme";

 const { width } = Dimensions.get("window");
 const CARD_WIDTH = (width - 14) / 2;
@@ -22,17 +23,18 @@ interface Props {
 }

 export const VideoCard = React.memo(function VideoCard({ item, onPress }: Props) {
-  const coverQuality = useSettingsStore(s => s.coverQuality);
+  const trafficSaving = useSettingsStore(s => s.trafficSaving);
+  const theme = useTheme();
  return (
    <TouchableOpacity
-      style={styles.card}
+      style={[styles.card, { backgroundColor: theme.card }]}
      onPress={onPress}
      activeOpacity={0.85}
    >
      <View style={styles.thumbContainer}>
        <Image
-          source={{ uri: coverImageUrl(item.pic, coverQuality) }}
-          style={styles.thumb}
+          source={{ uri: coverImageUrl(item.pic, trafficSaving ? 'normal' : 'hd') }}
+          style={[styles.thumb, { backgroundColor: theme.card }]}
          resizeMode="cover"
        />
        <View style={styles.meta}>
@@ -48,10 +50,10 @@ export const VideoCard = React.memo(function VideoCard({ item, onPress }: Props)
        </View>
      </View>
      <View style={styles.info}>
-        <Text style={styles.title} numberOfLines={2}>
+        <Text style={[styles.title, { color: theme.text }]} numberOfLines={2}>
          {item.title}
        </Text>
-        <Text style={styles.owner} numberOfLines={1}>
+        <Text style={[styles.owner, { color: theme.textSub }]} numberOfLines={1}>
          {item.owner?.name ?? ""}
        </Text>
      </View>
--- a/hooks/useVideoDetail.ts
+++ b/hooks/useVideoDetail.ts
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { getVideoDetail, getPlayUrl } from '../services/bilibili';
 import { useAuthStore } from '../store/authStore';
+import { useSettingsStore } from '../store/settingsStore';
 import type { VideoItem, PlayUrlResponse } from '../services/types';

 export function useVideoDetail(bvid: string) {
@@ -12,6 +13,8 @@ export function useVideoDetail(bvid: string) {
  const [error, setError] = useState<string | null>(null);
  const cidRef = useRef<number>(0);
  const isLoggedIn = useAuthStore(s => s.isLoggedIn);
+  const trafficSaving = useSettingsStore(s => s.trafficSaving);
+  const defaultQn = trafficSaving ? 16 : 126;

  async function fetchPlayData(cid: number, qn: number, updateList = false) {
    const data = await getPlayUrl(bvid, cid, qn);
@@ -39,7 +42,7 @@ export function useVideoDetail(bvid: string) {
        setVideo(detail);
        const cid = detail.pages?.[0]?.cid ?? detail.cid as number;
        cidRef.current = cid;
-        await fetchPlayData(cid, 126, true);
+        await fetchPlayData(cid, defaultQn, true);
      } catch (e: any) {
        setError(e.message ?? 'Load failed');
      } finally {
@@ -52,7 +55,7 @@ export function useVideoDetail(bvid: string) {
  // 登录状态变化时重新拉取清晰度列表（登录后可能获得更高画质）
  useEffect(() => {
    if (cidRef.current) {
-      fetchPlayData(cidRef.current, 126, true).catch((e) => {
+      fetchPlayData(cidRef.current, defaultQn, true).catch((e) => {
        console.warn('Failed to refresh quality list after login change:', e);
      });
    }
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "jkvideo",
-  "version": "1.0.5",
+  "version": "1.0.6",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "jkvideo",
-      "version": "1.0.5",
+      "version": "1.0.6",
      "dependencies": {
        "@dr.pogodin/react-native-static-server": "^0.26.0",
        "@expo/vector-icons": "^15.0.2",
@@ -27,14 +27,15 @@
        "expo-screen-orientation": "~55.0.8",
        "expo-status-bar": "~55.0.4",
        "expo-system-ui": "~55.0.9",
-        "expo-updates": "~55.0.15",
        "pako": "^2.1.0",
        "react": "19.2.0",
        "react-dom": "19.2.0",
        "react-native": "0.83.2",
        "react-native-pager-view": "8.0.0",
+        "react-native-qrcode-svg": "^6.3.21",
        "react-native-safe-area-context": "~5.6.2",
        "react-native-screens": "~4.23.0",
+        "react-native-svg": "15.15.3",
        "react-native-video": "^6.19.0",
        "react-native-web": "^0.21.0",
        "react-native-webview": "13.16.0",
@@ -3897,6 +3898,12 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
    "node_modules/bplist-creator": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.1.0.tgz",
@@ -4436,6 +4443,56 @@
        "hyphenate-style-name": "^1.0.3"
      }
    },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
    "node_modules/csstype": {
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -4460,6 +4517,15 @@
        }
      }
    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/decode-uri-component": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
@@ -4542,12 +4608,73 @@
      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
      "license": "MIT"
    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
    "node_modules/dnssd-advertise": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/dnssd-advertise/-/dnssd-advertise-1.1.3.tgz",
      "integrity": "sha512-XENsHi3MBzWOCAXif3yZvU1Ah0l+nhJj1sjWL6TnOAYKvGiFhbTx32xHN7+wLMLUOCj7Nr0evADWG4R8JtqCDA==",
      "license": "MIT"
    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4589,6 +4716,18 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
    "node_modules/error-stack-parser": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
@@ -4848,12 +4987,6 @@
        "expo": "*"
      }
    },
-    "node_modules/expo-eas-client": {
-      "version": "55.0.2",
-      "resolved": "https://registry.npmjs.org/expo-eas-client/-/expo-eas-client-55.0.2.tgz",
-      "integrity": "sha512-fjOgSXaZFBK2Xmzn/uw0DTF3BsYv97JEa4PYXXqVCEvNJPwJB1cV1eX6Xyq6iKGIhMPH9k62sOc+oUdt094WCw==",
-      "license": "MIT"
-    },
    "node_modules/expo-file-system": {
      "version": "55.0.10",
      "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-55.0.10.tgz",
@@ -5184,12 +5317,6 @@
        "react-native": "*"
      }
    },
-    "node_modules/expo-structured-headers": {
-      "version": "55.0.0",
-      "resolved": "https://registry.npmjs.org/expo-structured-headers/-/expo-structured-headers-55.0.0.tgz",
-      "integrity": "sha512-udaNvuWb45/Sryq9FLC/blwgOChhznuqlTrUzVjC0T83pMdcmscKJX23lnNDW6hCec8p81Y3z1DIFwIyk0g/PQ==",
-      "license": "MIT"
-    },
    "node_modules/expo-symbols": {
      "version": "55.0.5",
      "resolved": "https://registry.npmjs.org/expo-symbols/-/expo-symbols-55.0.5.tgz",
@@ -5226,36 +5353,6 @@
        }
      }
    },
-    "node_modules/expo-updates": {
-      "version": "55.0.15",
-      "resolved": "https://registry.npmjs.org/expo-updates/-/expo-updates-55.0.15.tgz",
-      "integrity": "sha512-UE9Ik56trq//kNeJ/BlC5vOTYdNTvsHwhfWFYMazP1UOQK4lnX59/t0qz8Ut+3aPXZZT7+B6mnbWtic0QqN1wA==",
-      "license": "MIT",
-      "dependencies": {
-        "@expo/code-signing-certificates": "^0.0.6",
-        "@expo/plist": "^0.5.2",
-        "@expo/spawn-async": "^1.7.2",
-        "arg": "^4.1.0",
-        "chalk": "^4.1.2",
-        "debug": "^4.3.4",
-        "expo-eas-client": "~55.0.2",
-        "expo-manifests": "~55.0.11",
-        "expo-structured-headers": "~55.0.0",
-        "expo-updates-interface": "~55.1.3",
-        "getenv": "^2.0.0",
-        "glob": "^13.0.0",
-        "ignore": "^5.3.1",
-        "resolve-from": "^5.0.0"
-      },
-      "bin": {
-        "expo-updates": "bin/cli.js"
-      },
-      "peerDependencies": {
-        "expo": "*",
-        "react": "*",
-        "react-native": "*"
-      }
-    },
    "node_modules/expo-updates-interface": {
      "version": "55.1.3",
      "resolved": "https://registry.npmjs.org/expo-updates-interface/-/expo-updates-interface-55.1.3.tgz",
@@ -5265,12 +5362,6 @@
        "expo": "*"
      }
    },
-    "node_modules/expo-updates/node_modules/arg": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
-      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "license": "MIT"
-    },
    "node_modules/expo/node_modules/@expo/cli": {
      "version": "55.0.15",
      "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-55.0.15.tgz",
@@ -7106,6 +7197,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "license": "CC0-1.0"
+    },
    "node_modules/media-typer": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -7624,6 +7721,18 @@
        "node": "^16.14.0 || >=18.0.0"
      }
    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
    "node_modules/nullthrows": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -8109,6 +8218,23 @@
        "node": ">= 6"
      }
    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
    "node_modules/proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -8129,6 +8255,107 @@
      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
      "license": "MIT"
    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/qs": {
      "version": "6.14.2",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
@@ -8330,6 +8557,22 @@
        "react-native": "*"
      }
    },
+    "node_modules/react-native-qrcode-svg": {
+      "version": "6.3.21",
+      "resolved": "https://registry.npmjs.org/react-native-qrcode-svg/-/react-native-qrcode-svg-6.3.21.tgz",
+      "integrity": "sha512-6vcj4rcdpWedvphDR+NSJcudJykNuLgNGFwm2p4xYjR8RdyTzlrELKI5LkO4ANS9cQUbqsfkpippPv64Q2tUtA==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.0",
+        "qrcode": "^1.5.4",
+        "text-encoding": "^0.7.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": ">=0.63.4",
+        "react-native-svg": ">=14.0.0"
+      }
+    },
    "node_modules/react-native-safe-area-context": {
      "version": "5.6.2",
      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.2.tgz",
@@ -8354,6 +8597,21 @@
        "react-native": "*"
      }
    },
+    "node_modules/react-native-svg": {
+      "version": "15.15.3",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.15.3.tgz",
+      "integrity": "sha512-/k4KYwPBLGcx2f5d4FjE+vCScK7QOX14cl2lIASJ28u4slHHtIhL0SZKU7u9qmRBHxTCKPoPBtN6haT1NENJNA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "css-tree": "^1.1.3",
+        "warn-once": "0.1.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
    "node_modules/react-native-video": {
      "version": "6.19.0",
      "resolved": "https://registry.npmjs.org/react-native-video/-/react-native-video-6.19.0.tgz",
@@ -8637,6 +8895,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
    "node_modules/resolve": {
      "version": "1.22.11",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -8912,6 +9176,12 @@
      "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==",
      "license": "MIT"
    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
    "node_modules/setimmediate": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -9394,6 +9664,13 @@
        "node": "*"
      }
    },
+    "node_modules/text-encoding": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/text-encoding/-/text-encoding-0.7.0.tgz",
+      "integrity": "sha512-oJQ3f1hrOnbRLOcwKz0Liq2IcrvDeZRHXhd9RgLrsT+DjWY/nty1Hi7v3dtkaEYbPYe0mUoOfzRrMwfXXwgPUA==",
+      "deprecated": "no longer maintained",
+      "license": "(Unlicense OR Apache-2.0)"
+    },
    "node_modules/throat": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
@@ -9785,6 +10062,12 @@
        "node": ">= 8"
      }
    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
    "node_modules/wrap-ansi": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -34,8 +34,10 @@
    "react-dom": "19.2.0",
    "react-native": "0.83.2",
    "react-native-pager-view": "8.0.0",
+    "react-native-qrcode-svg": "^6.3.21",
    "react-native-safe-area-context": "~5.6.2",
    "react-native-screens": "~4.23.0",
+    "react-native-svg": "15.15.3",
    "react-native-video": "^6.19.0",
    "react-native-web": "^0.21.0",
    "react-native-webview": "13.16.0",
--- a/store/settingsStore.ts
+++ b/store/settingsStore.ts
@@ -2,21 +2,35 @@ import { create } from 'zustand';
 import AsyncStorage from '@react-native-async-storage/async-storage';

 interface SettingsState {
-  coverQuality: 'hd' | 'normal';
-  setCoverQuality: (q: 'hd' | 'normal') => Promise<void>;
+  darkMode: boolean;
+  trafficSaving: boolean;
+  setDarkMode: (v: boolean) => Promise<void>;
+  setTrafficSaving: (v: boolean) => Promise<void>;
  restore: () => Promise<void>;
 }

 export const useSettingsStore = create<SettingsState>((set) => ({
-  coverQuality: 'hd',
+  darkMode: false,
+  trafficSaving: false,

-  setCoverQuality: async (q) => {
-    await AsyncStorage.setItem('COVER_QUALITY', q);
-    set({ coverQuality: q });
+  setDarkMode: async (v) => {
+    await AsyncStorage.setItem('DARK_MODE', v ? '1' : '0');
+    set({ darkMode: v });
+  },
+
+  setTrafficSaving: async (v) => {
+    await AsyncStorage.setItem('TRAFFIC_SAVING', v ? '1' : '0');
+    set({ trafficSaving: v });
  },

  restore: async () => {
-    const q = await AsyncStorage.getItem('COVER_QUALITY');
-    if (q === 'hd' || q === 'normal') set({ coverQuality: q });
+    const [dm, ts] = await Promise.all([
+      AsyncStorage.getItem('DARK_MODE'),
+      AsyncStorage.getItem('TRAFFIC_SAVING'),
+    ]);
+    set({
+      darkMode: dm === '1',
+      trafficSaving: ts === '1',
+    });
  },
 }));
--- a/utils/theme.ts
+++ b/utils/theme.ts
@@ -0,0 +1,33 @@
+import { useSettingsStore } from '../store/settingsStore';
+
+export type ThemeColors = {
+  bg: string;       // 页面/列表背景
+  card: string;     // 卡片/section 背景
+  text: string;     // 主文字
+  textSub: string;  // 次要文字
+  border: string;   // 分割线
+  inputBg: string;  // 输入框背景
+};
+
+const light: ThemeColors = {
+  bg: '#f4f4f4',
+  card: '#fff',
+  text: '#212121',
+  textSub: '#999',
+  border: '#eee',
+  inputBg: '#f0f0f0',
+};
+
+const dark: ThemeColors = {
+  bg: '#0f0f0f',
+  card: '#1a1a1a',
+  text: '#e0e0e0',
+  textSub: '#666',
+  border: '#2a2a2a',
+  inputBg: '#2a2a2a',
+};
+
+export function useTheme(): ThemeColors {
+  const darkMode = useSettingsStore(s => s.darkMode);
+  return darkMode ? dark : light;
+}