diff --git a/CHANGELOG b/CHANGELOG
index 270a6ce..9405e03 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,3 +1,13 @@
+## [8.9.5] - 2025-09-21
+
+### Added
+- 添加内置主题，支持用户自定义CSS
+### Changed
+- 优化搜索页面缓存机制
+### Fixed
+- 镜像健康检查问题
+- 弹幕功能适配移动端
+
 ## [8.9.0] - 2025-09-15
 
 ### Added
diff --git a/Dockerfile b/Dockerfile
index ac2cfc9..eb2ec89 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -95,9 +95,45 @@ USER nextjs
 # 暴露HTTP和WebSocket端口
 EXPOSE 3000 3001
 
+# 创建健康检查脚本
+RUN echo '#!/usr/bin/env node\n\
+const http = require("http");\n\
+const options = {\n\
+  hostname: "localhost",\n\
+  port: 3000,\n\
+  path: "/api/health",\n\
+  method: "GET",\n\
+  timeout: 5000\n\
+};\n\
+\n\
+const req = http.request(options, (res) => {\n\
+  if (res.statusCode === 200) {\n\
+    console.log("Health check passed");\n\
+    process.exit(0);\n\
+  } else {\n\
+    console.log(`Health check failed with status: ${res.statusCode}`);\n\
+    process.exit(1);\n\
+  }\n\
+});\n\
+\n\
+req.on("error", (err) => {\n\
+  console.log(`Health check error: ${err.message}`);\n\
+  process.exit(1);\n\
+});\n\
+\n\
+req.on("timeout", () => {\n\
+  console.log("Health check timeout");\n\
+  req.destroy();\n\
+  process.exit(1);\n\
+});\n\
+\n\
+req.setTimeout(5000);\n\
+req.end();' > /app/healthcheck.js && \
+    chmod +x /app/healthcheck.js
+
 # 添加健康检查
 HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
-  CMD curl -f http://localhost:3000/api/health || exit 1
+  CMD node /app/healthcheck.js
 
 # 设置WebSocket端口环境变量
 ENV WS_PORT=3001
diff --git a/VERSION.txt b/VERSION.txt
index 3ecb398..a37b21d 100644
--- a/VERSION.txt
+++ b/VERSION.txt
@@ -1 +1 @@
-8.9.0
\ No newline at end of file
+8.9.5
\ No newline at end of file
diff --git a/public/theme-init.js b/public/theme-init.js
new file mode 100644
index 0000000..3a8a1c9
--- /dev/null
+++ b/public/theme-init.js
@@ -0,0 +1,48 @@
+// 主题初始化脚本 - 立即执行，避免主题闪烁
+(function () {
+  try {
+    // 应用主题函数
+    function applyTheme(themeId, css) {
+      const html = document.documentElement;
+
+      // 移除所有主题属性
+      html.removeAttribute('data-theme');
+
+      // 应用主题
+      if (themeId !== 'default') {
+        html.setAttribute('data-theme', themeId);
+      }
+
+      // 应用自定义CSS
+      if (css) {
+        let customStyleEl = document.getElementById('init-theme-css');
+        if (!customStyleEl) {
+          customStyleEl = document.createElement('style');
+          customStyleEl.id = 'init-theme-css';
+          document.head.appendChild(customStyleEl);
+        }
+        customStyleEl.textContent = css;
+      }
+    }
+
+    // 从localStorage获取保存的主题
+    const savedTheme = localStorage.getItem('app-theme');
+    const savedCustomCSS = localStorage.getItem('app-custom-css') || '';
+
+    // 立即应用已保存的主题（如果有）
+    if (savedTheme) {
+      applyTheme(savedTheme, savedCustomCSS);
+      console.log('主题已初始化(本地设置):', savedTheme);
+    } else {
+      // 没有用户设置时，先应用默认主题
+      applyTheme('default', '');
+      console.log('主题已初始化(默认)');
+    }
+
+    // 注意：GlobalThemeLoader会在React组件挂载后进一步处理全站配置
+  } catch (error) {
+    console.error('主题初始化失败:', error);
+  }
+})();
+
+
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index b43ac83..9c21c92 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -38,7 +38,7 @@ import {
   Users,
   Video,
 } from 'lucide-react';
-import { GripVertical } from 'lucide-react';
+import { GripVertical, Palette } from 'lucide-react';
 import Image from 'next/image';
 import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -47,6 +47,7 @@ import { AdminConfig, AdminConfigResult } from '../../lib/admin.types';
 import { getAuthInfoFromBrowserCookie } from '@/lib/auth';
 
 import DataMigration from '@/components/DataMigration';
+import ThemeManager from '@/components/ThemeManager';
 import PageLayout from '@/components/PageLayout';
 
 // 统一按钮样式系统
@@ -5210,6 +5211,7 @@ function AdminPageClient() {
     categoryConfig: false,
     configFile: false,
     dataMigration: false,
+    themeManager: false,
   });
 
   // 机器码管理状态
@@ -5447,6 +5449,21 @@ function AdminPageClient() {
                 <DataMigration onRefreshConfig={fetchConfig} />
               </CollapsibleTab>
             )}
+
+            {/* 主题定制标签 */}
+            <CollapsibleTab
+              title='主题定制'
+              icon={
+                <Palette
+                  size={20}
+                  className='text-gray-600 dark:text-gray-400'
+                />
+              }
+              isExpanded={expandedTabs.themeManager}
+              onToggle={() => toggleTab('themeManager')}
+            >
+              <ThemeManager showAlert={showAlert} role={role} />
+            </CollapsibleTab>
           </div>
         </div>
       </div>
diff --git a/src/app/api/admin/site/route.ts b/src/app/api/admin/site/route.ts
index aedbe73..ce69f8a 100644
--- a/src/app/api/admin/site/route.ts
+++ b/src/app/api/admin/site/route.ts
@@ -40,6 +40,7 @@ export async function POST(request: NextRequest) {
       DisableYellowFilter,
       FluidSearch,
       RequireDeviceCode,
+      CustomTheme,
     } = body as {
       SiteName: string;
       Announcement: string;
@@ -52,6 +53,10 @@ export async function POST(request: NextRequest) {
       DisableYellowFilter: boolean;
       FluidSearch: boolean;
       RequireDeviceCode: boolean;
+      CustomTheme?: {
+        selectedTheme: string;
+        customCSS: string;
+      };
     };
 
     // 参数校验
@@ -66,7 +71,11 @@ export async function POST(request: NextRequest) {
       typeof DoubanImageProxy !== 'string' ||
       typeof DisableYellowFilter !== 'boolean' ||
       typeof FluidSearch !== 'boolean' ||
-      typeof RequireDeviceCode !== 'boolean'
+      typeof RequireDeviceCode !== 'boolean' ||
+      (CustomTheme && (
+        typeof CustomTheme.selectedTheme !== 'string' ||
+        typeof CustomTheme.customCSS !== 'string'
+      ))
     ) {
       return NextResponse.json({ error: '参数格式错误' }, { status: 400 });
     }
@@ -97,6 +106,7 @@ export async function POST(request: NextRequest) {
       DisableYellowFilter,
       FluidSearch,
       RequireDeviceCode,
+      CustomTheme,
     };
 
     // 写入数据库
diff --git a/src/app/api/admin/theme/route.ts b/src/app/api/admin/theme/route.ts
new file mode 100644
index 0000000..5130bfa
--- /dev/null
+++ b/src/app/api/admin/theme/route.ts
@@ -0,0 +1,139 @@
+import { NextResponse } from 'next/server';
+import { getAuthInfoFromCookie } from '@/lib/auth';
+import { db } from '@/lib/db';
+import { AdminConfig } from '@/lib/admin.types';
+import { headers, cookies } from 'next/headers';
+
+export async function GET() {
+  try {
+    // 创建一个模拟的NextRequest对象来使用getAuthInfoFromCookie
+    const cookieStore = cookies();
+    const authCookie = cookieStore.get('auth');
+
+    if (!authCookie) {
+      return NextResponse.json({ error: '未授权' }, { status: 401 });
+    }
+
+    let authData;
+    try {
+      const decoded = decodeURIComponent(authCookie.value);
+      authData = JSON.parse(decoded);
+    } catch (error) {
+      return NextResponse.json({ error: '认证信息无效' }, { status: 401 });
+    }
+
+    const config = await db.getAdminConfig();
+    const themeConfig = config?.ThemeConfig || {
+      defaultTheme: 'default' as const,
+      customCSS: '',
+      allowUserCustomization: true,
+    };
+
+    return NextResponse.json({
+      success: true,
+      data: themeConfig,
+    });
+  } catch (error) {
+    console.error('获取主题配置失败:', error);
+    return NextResponse.json(
+      { error: '获取主题配置失败' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    // 获取认证信息
+    const cookieStore = cookies();
+    const authCookie = cookieStore.get('auth');
+
+    if (!authCookie) {
+      return NextResponse.json({ error: '未授权' }, { status: 401 });
+    }
+
+    let authData;
+    try {
+      const decoded = decodeURIComponent(authCookie.value);
+      authData = JSON.parse(decoded);
+    } catch (error) {
+      return NextResponse.json({ error: '认证信息无效' }, { status: 401 });
+    }
+
+    // 检查是否为管理员
+    if (authData.role !== 'admin' && authData.role !== 'owner') {
+      return NextResponse.json({ error: '权限不足，仅管理员可设置全局主题' }, { status: 403 });
+    }
+
+    const body = await request.json();
+    const { defaultTheme, customCSS, allowUserCustomization } = body;
+
+    // 验证主题名称
+    const validThemes = ['default', 'minimal', 'warm', 'fresh'];
+    if (!validThemes.includes(defaultTheme)) {
+      return NextResponse.json({ error: '无效的主题名称' }, { status: 400 });
+    }
+
+    // 获取当前配置
+    const currentConfig = await db.getAdminConfig();
+
+    // 如果没有配置，创建一个基础配置
+    let baseConfig: AdminConfig;
+    if (!currentConfig) {
+      baseConfig = {
+        ConfigSubscribtion: {
+          URL: "",
+          AutoUpdate: false,
+          LastCheck: "",
+        },
+        ConfigFile: "",
+        SiteConfig: {
+          SiteName: "OrangeTV",
+          Announcement: "",
+          SearchDownstreamMaxPage: 10,
+          SiteInterfaceCacheTime: 30,
+          DoubanProxyType: "direct",
+          DoubanProxy: "",
+          DoubanImageProxyType: "direct",
+          DoubanImageProxy: "",
+          DisableYellowFilter: false,
+          FluidSearch: true,
+          RequireDeviceCode: false,
+        },
+        UserConfig: {
+          Users: [],
+        },
+        SourceConfig: [],
+        CustomCategories: [],
+      };
+    } else {
+      baseConfig = currentConfig;
+    }
+
+    // 更新主题配置
+    const updatedConfig: AdminConfig = {
+      ...baseConfig,
+      ThemeConfig: {
+        defaultTheme: defaultTheme as 'default' | 'minimal' | 'warm' | 'fresh',
+        customCSS: customCSS || '',
+        allowUserCustomization: allowUserCustomization !== false,
+      },
+    };
+
+    console.log('保存主题配置:', updatedConfig.ThemeConfig);
+    await db.saveAdminConfig(updatedConfig);
+    console.log('主题配置保存成功');
+
+    return NextResponse.json({
+      success: true,
+      message: '主题配置已更新',
+      data: updatedConfig.ThemeConfig,
+    });
+  } catch (error) {
+    console.error('更新主题配置失败:', error);
+    return NextResponse.json(
+      { error: '更新主题配置失败', details: error instanceof Error ? error.message : '未知错误' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/theme/route.ts b/src/app/api/theme/route.ts
new file mode 100644
index 0000000..a0393ea
--- /dev/null
+++ b/src/app/api/theme/route.ts
@@ -0,0 +1,31 @@
+import { NextResponse } from 'next/server';
+import { db } from '@/lib/db';
+
+export async function GET() {
+  try {
+    const config = await db.getAdminConfig();
+    const themeConfig = config?.ThemeConfig || {
+      defaultTheme: 'default' as const,
+      customCSS: '',
+      allowUserCustomization: true,
+    };
+
+    return NextResponse.json({
+      success: true,
+      data: themeConfig,
+    });
+  } catch (error) {
+    console.error('获取主题配置失败:', error);
+    return NextResponse.json(
+      {
+        success: false,
+        data: {
+          defaultTheme: 'default' as const,
+          customCSS: '',
+          allowUserCustomization: true,
+        }
+      },
+      { status: 200 } // 返回默认配置而不是错误
+    );
+  }
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 879ba30..e730ab7 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -36,6 +36,1294 @@
 
 :root {
   --foreground-rgb: 255, 255, 255;
+  
+  /* 默认主题（当前蓝色系主题） */
+  --color-primary-50: 240, 249, 255;
+  --color-primary-100: 224, 242, 254;
+  --color-primary-200: 186, 230, 253;
+  --color-primary-300: 125, 211, 252;
+  --color-primary-400: 56, 189, 248;
+  --color-primary-500: 14, 165, 233;
+  --color-primary-600: 2, 132, 199;
+  --color-primary-700: 3, 105, 161;
+  --color-primary-800: 7, 89, 133;
+  --color-primary-900: 12, 74, 110;
+  --color-dark: 34, 34, 34;
+  
+  /* 主题颜色变量（默认使用蓝色系） */
+  --color-theme-bg: 255, 255, 255;
+  --color-theme-surface: 249, 250, 251;
+  --color-theme-accent: 14, 165, 233;
+  --color-theme-text: 17, 24, 39;
+  --color-theme-text-secondary: 107, 114, 128;
+  --color-theme-border: 229, 231, 235;
+  --color-theme-success: 34, 197, 94;
+  --color-theme-warning: 245, 158, 11;
+  --color-theme-error: 239, 68, 68;
+  --color-theme-info: 59, 130, 246;
+}
+
+.dark {
+  /* 默认深色主题 */
+  --color-theme-bg: 17, 24, 39;
+  --color-theme-surface: 31, 41, 55;
+  --color-theme-accent: 56, 189, 248;
+  --color-theme-text: 243, 244, 246;
+  --color-theme-text-secondary: 156, 163, 175;
+  --color-theme-border: 75, 85, 99;
+  --color-theme-success: 74, 222, 128;
+  --color-theme-warning: 251, 191, 36;
+  --color-theme-error: 248, 113, 113;
+  --color-theme-info: 96, 165, 250;
+}
+
+/* 视频卡片播放按钮hover填充颜色适配 */
+
+/* 极简主题视频卡片播放按钮适配 */
+[data-theme="minimal"] .hover\:fill-blue-500:hover {
+  fill: rgb(82, 82, 82) !important;
+}
+
+[data-theme="minimal"].dark .hover\:fill-blue-500:hover {
+  fill: rgb(163, 163, 163) !important;
+}
+
+/* 暖色主题视频卡片播放按钮适配 */
+[data-theme="warm"] .hover\:fill-blue-500:hover {
+  fill: rgb(234, 88, 12) !important;
+}
+
+[data-theme="warm"].dark .hover\:fill-blue-500:hover {
+  fill: rgb(251, 146, 60) !important;
+}
+
+/* 视频卡片hover时资源名称和视频名称适配 */
+
+/* 极简主题视频卡片文字适配 */
+[data-theme="minimal"] .group-hover\:text-blue-600:hover,
+[data-theme="minimal"] .group:hover .group-hover\:text-blue-600 {
+  color: rgb(64, 64, 64) !important;
+}
+[data-theme="minimal"] .group-hover\:text-blue-400:hover,
+[data-theme="minimal"] .group:hover .group-hover\:text-blue-400 {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"] .group-hover\:border-blue-500\/60:hover,
+[data-theme="minimal"] .group:hover .group-hover\:border-blue-500\/60 {
+  border-color: rgb(82, 82, 82, 0.6) !important;
+}
+
+[data-theme="minimal"].dark .group-hover\:text-blue-600:hover,
+[data-theme="minimal"].dark .group:hover .group-hover\:text-blue-600 {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .group-hover\:text-blue-400:hover,
+[data-theme="minimal"].dark .group:hover .group-hover\:text-blue-400 {
+  color: rgb(163, 163, 163) !important;
+}
+
+/* 暖色主题视频卡片文字适配 */
+[data-theme="warm"] .group-hover\:text-blue-600:hover,
+[data-theme="warm"] .group:hover .group-hover\:text-blue-600 {
+  color: rgb(194, 65, 12) !important;
+}
+[data-theme="warm"] .group-hover\:text-blue-400:hover,
+[data-theme="warm"] .group:hover .group-hover\:text-blue-400 {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"] .group-hover\:border-blue-500\/60:hover,
+[data-theme="warm"] .group:hover .group-hover\:border-blue-500\/60 {
+  border-color: rgb(234, 88, 12, 0.6) !important;
+}
+
+[data-theme="warm"].dark .group-hover\:text-blue-600:hover,
+[data-theme="warm"].dark .group:hover .group-hover\:text-blue-600 {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .group-hover\:text-blue-400:hover,
+[data-theme="warm"].dark .group:hover .group-hover\:text-blue-400 {
+  color: rgb(251, 146, 60) !important;
+}
+
+/* 清新主题视频卡片文字适配 */
+[data-theme="fresh"] .group-hover\:text-blue-600:hover,
+[data-theme="fresh"] .group:hover .group-hover\:text-blue-600 {
+  color: rgb(22, 163, 74) !important;
+}
+[data-theme="fresh"] .group-hover\:text-blue-400:hover,
+[data-theme="fresh"] .group:hover .group-hover\:text-blue-400 {
+  color: rgb(22, 163, 74) !important;
+}
+[data-theme="fresh"] .group-hover\:border-blue-500\/60:hover,
+[data-theme="fresh"] .group:hover .group-hover\:border-blue-500\/60 {
+  border-color: rgb(63, 204, 113, 0.6) !important;
+}
+
+[data-theme="fresh"].dark .group-hover\:text-blue-600:hover,
+[data-theme="fresh"].dark .group:hover .group-hover\:text-blue-600 {
+  color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .group-hover\:text-blue-400:hover,
+[data-theme="fresh"].dark .group:hover .group-hover\:text-blue-400 {
+  color: rgb(74, 222, 128) !important;
+}
+
+/* 侧边栏hover颜色适配 */
+
+/* 极简主题侧边栏适配 */
+[data-theme="minimal"] .hover\:text-blue-600:hover {
+  color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"] .hover\:text-blue-700:hover {
+  color: rgb(64, 64, 64) !important;
+}
+[data-theme="minimal"] .group-hover\:text-blue-600:hover,
+[data-theme="minimal"] .group:hover .group-hover\:text-blue-600 {
+  color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"] .group-data-\[active\=true\]\:text-blue-700,
+[data-theme="minimal"] .group[data-active="true"] .group-data-\[active\=true\]\:text-blue-700 {
+  color: rgb(64, 64, 64) !important;
+}
+[data-theme="minimal"] .data-\[active\=true\]\:text-blue-700[data-active="true"] {
+  color: rgb(64, 64, 64) !important;
+}
+[data-theme="minimal"] .data-\[active\=true\]\:bg-blue-500\/20[data-active="true"] {
+  background-color: rgb(82, 82, 82, 0.2) !important;
+}
+
+[data-theme="minimal"].dark .hover\:text-blue-400:hover {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .hover\:text-blue-300:hover {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .group-hover\:text-blue-400:hover,
+[data-theme="minimal"].dark .group:hover .group-hover\:text-blue-400 {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .group-data-\[active\=true\]\:text-blue-400,
+[data-theme="minimal"].dark .group[data-active="true"] .group-data-\[active\=true\]\:text-blue-400 {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .data-\[active\=true\]\:text-blue-400[data-active="true"] {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .data-\[active\=true\]\:bg-blue-500\/10[data-active="true"] {
+  background-color: rgb(163, 163, 163, 0.1) !important;
+}
+
+/* 暖色主题侧边栏适配 */
+[data-theme="warm"] .hover\:text-blue-600:hover {
+  color: rgb(234, 88, 12) !important;
+}
+[data-theme="warm"] .hover\:text-blue-700:hover {
+  color: rgb(194, 65, 12) !important;
+}
+[data-theme="warm"] .group-hover\:text-blue-600:hover,
+[data-theme="warm"] .group:hover .group-hover\:text-blue-600 {
+  color: rgb(234, 88, 12) !important;
+}
+[data-theme="warm"] .group-data-\[active\=true\]\:text-blue-700,
+[data-theme="warm"] .group[data-active="true"] .group-data-\[active\=true\]\:text-blue-700 {
+  color: rgb(194, 65, 12) !important;
+}
+[data-theme="warm"] .data-\[active\=true\]\:text-blue-700[data-active="true"] {
+  color: rgb(194, 65, 12) !important;
+}
+[data-theme="warm"] .data-\[active\=true\]\:bg-blue-500\/20[data-active="true"] {
+  background-color: rgb(234, 88, 12, 0.2) !important;
+}
+
+[data-theme="warm"].dark .hover\:text-blue-400:hover {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .hover\:text-blue-300:hover {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .group-hover\:text-blue-400:hover,
+[data-theme="warm"].dark .group:hover .group-hover\:text-blue-400 {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .group-data-\[active\=true\]\:text-blue-400,
+[data-theme="warm"].dark .group[data-active="true"] .group-data-\[active\=true\]\:text-blue-400 {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .data-\[active\=true\]\:text-blue-400[data-active="true"] {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .data-\[active\=true\]\:bg-blue-500\/10[data-active="true"] {
+  background-color: rgb(251, 146, 60, 0.1) !important;
+}
+
+/* 搜索页面聚焦状态和加载元素适配 */
+
+/* 极简主题搜索页面适配 */
+[data-theme="minimal"] .focus\:ring-blue-400:focus {
+  box-shadow: 0 0 0 3px rgb(115, 115, 115, 0.5) !important;
+}
+[data-theme="minimal"] .focus\:ring-blue-400\/50:focus {
+  box-shadow: 0 0 0 3px rgb(115, 115, 115, 0.25) !important;
+}
+[data-theme="minimal"] .border-t-blue-500 {
+  border-top-color: rgb(115, 115, 115) !important;
+}
+[data-theme="minimal"] .border-b-2.border-blue-500 {
+  border-bottom-color: rgb(115, 115, 115) !important;
+}
+[data-theme="minimal"] .hover\:shadow-blue-500\/50:hover {
+  box-shadow: 0 25px 50px -12px rgb(115, 115, 115, 0.5) !important;
+}
+
+[data-theme="minimal"].dark .focus\:ring-blue-400:focus {
+  box-shadow: 0 0 0 3px rgb(163, 163, 163, 0.5) !important;
+}
+[data-theme="minimal"].dark .focus\:ring-blue-400\/50:focus {
+  box-shadow: 0 0 0 3px rgb(163, 163, 163, 0.25) !important;
+}
+[data-theme="minimal"].dark .border-t-blue-500 {
+  border-top-color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .border-b-2.border-blue-500 {
+  border-bottom-color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .hover\:shadow-blue-500\/50:hover {
+  box-shadow: 0 25px 50px -12px rgb(163, 163, 163, 0.5) !important;
+}
+
+/* 暖色主题搜索页面适配 */
+[data-theme="warm"] .focus\:ring-blue-400:focus {
+  box-shadow: 0 0 0 3px rgb(249, 115, 22, 0.5) !important;
+}
+[data-theme="warm"] .focus\:ring-blue-400\/50:focus {
+  box-shadow: 0 0 0 3px rgb(249, 115, 22, 0.25) !important;
+}
+[data-theme="warm"] .border-t-blue-500 {
+  border-top-color: rgb(249, 115, 22) !important;
+}
+[data-theme="warm"] .border-b-2.border-blue-500 {
+  border-bottom-color: rgb(249, 115, 22) !important;
+}
+[data-theme="warm"] .hover\:shadow-blue-500\/50:hover {
+  box-shadow: 0 25px 50px -12px rgb(249, 115, 22, 0.5) !important;
+}
+
+[data-theme="warm"].dark .focus\:ring-blue-400:focus {
+  box-shadow: 0 0 0 3px rgb(251, 146, 60, 0.5) !important;
+}
+[data-theme="warm"].dark .focus\:ring-blue-400\/50:focus {
+  box-shadow: 0 0 0 3px rgb(251, 146, 60, 0.25) !important;
+}
+[data-theme="warm"].dark .border-t-blue-500 {
+  border-top-color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .border-b-2.border-blue-500 {
+  border-bottom-color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .hover\:shadow-blue-500\/50:hover {
+  box-shadow: 0 25px 50px -12px rgb(251, 146, 60, 0.5) !important;
+}
+
+/* 播放页视频加载元素适配 */
+
+/* 极简主题播放页加载适配 */
+[data-theme="minimal"] .from-blue-500 {
+  --tw-gradient-from: rgb(115, 115, 115) !important;
+}
+[data-theme="minimal"] .to-blue-600 {
+  --tw-gradient-to: rgb(82, 82, 82) !important;
+}
+
+[data-theme="minimal"].dark .from-blue-500 {
+  --tw-gradient-from: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .to-blue-600 {
+  --tw-gradient-to: rgb(212, 212, 212) !important;
+}
+
+/* 暖色主题播放页加载适配 */
+[data-theme="warm"] .from-blue-500 {
+  --tw-gradient-from: rgb(249, 115, 22) !important;
+}
+[data-theme="warm"] .to-blue-600 {
+  --tw-gradient-to: rgb(234, 88, 12) !important;
+}
+
+[data-theme="warm"].dark .from-blue-500 {
+  --tw-gradient-from: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .to-blue-600 {
+  --tw-gradient-to: rgb(253, 186, 116) !important;
+}
+
+/* 清新主题搜索页面适配 */
+[data-theme="fresh"] .focus\:ring-blue-400:focus {
+  box-shadow: 0 0 0 3px rgb(63, 204, 113, 0.5) !important;
+}
+[data-theme="fresh"] .focus\:ring-blue-400\/50:focus {
+  box-shadow: 0 0 0 3px rgb(63, 204, 113, 0.25) !important;
+}
+[data-theme="fresh"] .border-t-blue-500 {
+  border-top-color: rgb(63, 204, 113) !important;
+}
+[data-theme="fresh"] .border-b-2.border-blue-500 {
+  border-bottom-color: rgb(63, 204, 113) !important;
+}
+[data-theme="fresh"] .hover\:shadow-blue-500\/50:hover {
+  box-shadow: 0 25px 50px -12px rgb(63, 204, 113, 0.5) !important;
+}
+
+[data-theme="fresh"].dark .focus\:ring-blue-400:focus {
+  box-shadow: 0 0 0 3px rgb(74, 222, 128, 0.5) !important;
+}
+[data-theme="fresh"].dark .focus\:ring-blue-400\/50:focus {
+  box-shadow: 0 0 0 3px rgb(74, 222, 128, 0.25) !important;
+}
+[data-theme="fresh"].dark .border-t-blue-500 {
+  border-top-color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .border-b-2.border-blue-500 {
+  border-bottom-color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .hover\:shadow-blue-500\/50:hover {
+  box-shadow: 0 25px 50px -12px rgb(74, 222, 128, 0.5) !important;
+}
+
+/* 清新主题播放页加载适配 */
+[data-theme="fresh"] .from-blue-500 {
+  --tw-gradient-from: rgb(63, 204, 113) !important;
+}
+[data-theme="fresh"] .to-blue-600 {
+  --tw-gradient-to: rgb(22, 163, 74) !important;
+}
+
+[data-theme="fresh"].dark .from-blue-500 {
+  --tw-gradient-from: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .to-blue-600 {
+  --tw-gradient-to: rgb(134, 239, 172) !important;
+}
+
+/* 极简主题 */
+[data-theme="minimal"] {
+  --color-primary-50: 250, 250, 250;
+  --color-primary-100: 245, 245, 245;
+  --color-primary-200: 229, 229, 229;
+  --color-primary-300: 212, 212, 212;
+  --color-primary-400: 163, 163, 163;
+  --color-primary-500: 115, 115, 115;
+  --color-primary-600: 82, 82, 82;
+  --color-primary-700: 64, 64, 64;
+  --color-primary-800: 38, 38, 38;
+  --color-primary-900: 23, 23, 23;
+  
+  --color-theme-bg: 255, 255, 255;
+  --color-theme-surface: 252, 252, 252;
+  --color-theme-accent: 82, 82, 82;
+  --color-theme-text: 23, 23, 23;
+  --color-theme-text-secondary: 115, 115, 115;
+  --color-theme-border: 229, 229, 229;
+  --color-theme-success: 34, 197, 94;
+  --color-theme-warning: 245, 158, 11;
+  --color-theme-error: 239, 68, 68;
+  --color-theme-info: 115, 115, 115;
+}
+
+/* 极简主题蓝色元素覆盖 */
+[data-theme="minimal"] .text-blue-600 {
+  color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"] .text-blue-700 {
+  color: rgb(64, 64, 64) !important;
+}
+[data-theme="minimal"] .text-blue-400 {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"] .bg-blue-500\/20 {
+  background-color: rgb(82, 82, 82, 0.2) !important;
+}
+[data-theme="minimal"] .bg-blue-500\/10 {
+  background-color: rgb(82, 82, 82, 0.1) !important;
+}
+[data-theme="minimal"] .bg-blue-500 {
+  background-color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"] .fill-blue-500,
+[data-theme="minimal"] .hover\\:fill-blue-500:hover {
+  fill: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"] .border-blue-500\/30 {
+  border-color: rgb(82, 82, 82, 0.3) !important;
+}
+[data-theme="minimal"] .hover\\:text-blue-600:hover {
+  color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"] .bg-blue-100 {
+  background-color: rgb(245, 245, 245) !important;
+}
+[data-theme="minimal"] .text-blue-800 {
+  color: rgb(38, 38, 38) !important;
+}
+[data-theme="minimal"] .hover\\:bg-blue-200:hover {
+  background-color: rgb(229, 229, 229) !important;
+}
+
+[data-theme="minimal"].dark {
+  --color-theme-bg: 18, 18, 18;
+  --color-theme-surface: 28, 28, 28;
+  --color-theme-accent: 163, 163, 163;
+  --color-theme-text: 250, 250, 250;
+  --color-theme-text-secondary: 163, 163, 163;
+  --color-theme-border: 64, 64, 64;
+  --color-theme-success: 74, 222, 128;
+  --color-theme-warning: 251, 191, 36;
+  --color-theme-error: 248, 113, 113;
+  --color-theme-info: 163, 163, 163;
+}
+
+/* 极简主题深色模式蓝色元素覆盖 */
+[data-theme="minimal"].dark .text-blue-600 {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .text-blue-700 {
+  color: rgb(212, 212, 212) !important;
+}
+[data-theme="minimal"].dark .text-blue-400 {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .bg-blue-500\/20 {
+  background-color: rgb(163, 163, 163, 0.2) !important;
+}
+[data-theme="minimal"].dark .bg-blue-500\/10 {
+  background-color: rgb(163, 163, 163, 0.1) !important;
+}
+[data-theme="minimal"].dark .bg-blue-500 {
+  background-color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .fill-blue-500,
+[data-theme="minimal"].dark .hover\\:fill-blue-500:hover {
+  fill: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .border-blue-500\/30 {
+  border-color: rgb(163, 163, 163, 0.3) !important;
+}
+[data-theme="minimal"].dark .hover\\:text-blue-400:hover {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .bg-blue-900\/40 {
+  background-color: rgb(38, 38, 38, 0.4) !important;
+}
+[data-theme="minimal"].dark .hover\\:bg-blue-900\/60:hover {
+  background-color: rgb(38, 38, 38, 0.6) !important;
+}
+[data-theme="minimal"].dark .text-blue-200 {
+  color: rgb(212, 212, 212) !important;
+}
+
+/* 暖色主题 */
+[data-theme="warm"] {
+  --color-primary-50: 255, 247, 237;
+  --color-primary-100: 255, 237, 213;
+  --color-primary-200: 254, 215, 170;
+  --color-primary-300: 253, 186, 116;
+  --color-primary-400: 251, 146, 60;
+  --color-primary-500: 249, 115, 22;
+  --color-primary-600: 234, 88, 12;
+  --color-primary-700: 194, 65, 12;
+  --color-primary-800: 154, 52, 18;
+  --color-primary-900: 124, 45, 18;
+  
+  --color-theme-bg: 255, 253, 247;
+  --color-theme-surface: 254, 250, 240;
+  --color-theme-accent: 234, 88, 12;
+  --color-theme-text: 124, 45, 18;
+  --color-theme-text-secondary: 154, 52, 18;
+  --color-theme-border: 253, 230, 138;
+  --color-theme-success: 22, 163, 74;
+  --color-theme-warning: 217, 119, 6;
+  --color-theme-error: 220, 38, 38;
+  --color-theme-info: 194, 65, 12;
+}
+
+/* 暖色主题蓝色元素覆盖 */
+[data-theme="warm"] .text-blue-600 {
+  color: rgb(234, 88, 12) !important;
+}
+[data-theme="warm"] .text-blue-700 {
+  color: rgb(194, 65, 12) !important;
+}
+[data-theme="warm"] .text-blue-400 {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"] .bg-blue-500\/20 {
+  background-color: rgb(234, 88, 12, 0.2) !important;
+}
+[data-theme="warm"] .bg-blue-500\/10 {
+  background-color: rgb(234, 88, 12, 0.1) !important;
+}
+[data-theme="warm"] .bg-blue-500 {
+  background-color: rgb(234, 88, 12) !important;
+}
+[data-theme="warm"] .fill-blue-500,
+[data-theme="warm"] .hover\\:fill-blue-500:hover {
+  fill: rgb(234, 88, 12) !important;
+}
+[data-theme="warm"] .border-blue-500\/30 {
+  border-color: rgb(234, 88, 12, 0.3) !important;
+}
+[data-theme="warm"] .hover\\:text-blue-600:hover {
+  color: rgb(234, 88, 12) !important;
+}
+[data-theme="warm"] .bg-blue-100 {
+  background-color: rgb(255, 237, 213) !important;
+}
+[data-theme="warm"] .text-blue-800 {
+  color: rgb(154, 52, 18) !important;
+}
+[data-theme="warm"] .hover\\:bg-blue-200:hover {
+  background-color: rgb(254, 215, 170) !important;
+}
+
+[data-theme="warm"].dark {
+  --color-theme-bg: 28, 25, 23;
+  --color-theme-surface: 41, 37, 36;
+  --color-theme-accent: 251, 146, 60;
+  --color-theme-text: 254, 243, 199;
+  --color-theme-text-secondary: 214, 158, 46;
+  --color-theme-border: 87, 83, 78;
+  --color-theme-success: 74, 222, 128;
+  --color-theme-warning: 251, 191, 36;
+  --color-theme-error: 248, 113, 113;
+  --color-theme-info: 251, 146, 60;
+}
+
+/* 暖色主题深色模式蓝色元素覆盖 */
+[data-theme="warm"].dark .text-blue-600 {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .text-blue-700 {
+  color: rgb(253, 186, 116) !important;
+}
+[data-theme="warm"].dark .text-blue-400 {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .bg-blue-500\/20 {
+  background-color: rgb(251, 146, 60, 0.2) !important;
+}
+[data-theme="warm"].dark .bg-blue-500\/10 {
+  background-color: rgb(251, 146, 60, 0.1) !important;
+}
+[data-theme="warm"].dark .bg-blue-500 {
+  background-color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .fill-blue-500,
+[data-theme="warm"].dark .hover\\:fill-blue-500:hover {
+  fill: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .border-blue-500\/30 {
+  border-color: rgb(251, 146, 60, 0.3) !important;
+}
+[data-theme="warm"].dark .hover\\:text-blue-400:hover {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .bg-blue-900\/40 {
+  background-color: rgb(154, 52, 18, 0.4) !important;
+}
+[data-theme="warm"].dark .hover\\:bg-blue-900\/60:hover {
+  background-color: rgb(154, 52, 18, 0.6) !important;
+}
+[data-theme="warm"].dark .text-blue-200 {
+  color: rgb(253, 186, 116) !important;
+}
+
+/* 通用蓝色样式覆盖 - 用于其他可能的蓝色元素 */
+
+/* 清新主题 */
+[data-theme="fresh"] {
+  --color-primary-50: 240, 253, 244;
+  --color-primary-100: 220, 252, 231;
+  --color-primary-200: 187, 247, 208;
+  --color-primary-300: 134, 239, 172;
+  --color-primary-400: 74, 222, 128;
+  --color-primary-500: 63, 204, 113;
+  --color-primary-600: 22, 163, 74;
+  --color-primary-700: 21, 128, 61;
+  --color-primary-800: 22, 101, 52;
+  --color-primary-900: 20, 83, 45;
+  
+  --color-theme-bg: 247, 253, 249;
+  --color-theme-surface: 240, 253, 244;
+  --color-theme-accent: 63, 204, 113;
+  --color-theme-text: 20, 83, 45;
+  --color-theme-text-secondary: 22, 101, 52;
+  --color-theme-border: 187, 247, 208;
+  --color-theme-success: 34, 197, 94;
+  --color-theme-warning: 245, 158, 11;
+  --color-theme-error: 239, 68, 68;
+  --color-theme-info: 63, 204, 113;
+}
+
+/* 清新主题蓝色元素覆盖 */
+/* 注意：移除了通用的 .text-blue-* 覆盖，只保留有条件的状态覆盖 */
+[data-theme="fresh"] .bg-blue-500\/20 {
+  background-color: rgb(63, 204, 113, 0.2) !important;
+}
+[data-theme="fresh"] .bg-blue-500\/10 {
+  background-color: rgb(63, 204, 113, 0.1) !important;
+}
+[data-theme="fresh"] .bg-blue-500 {
+  background-color: rgb(63, 204, 113) !important;
+}
+[data-theme="fresh"] .hover\:fill-blue-500:hover {
+  fill: rgb(63, 204, 113) !important;
+}
+[data-theme="fresh"] .border-blue-500\/30 {
+  border-color: rgb(63, 204, 113, 0.3) !important;
+}
+[data-theme="fresh"] .hover\:text-blue-600:hover {
+  color: rgb(22, 163, 74) !important;
+}
+[data-theme="fresh"] .bg-blue-100 {
+  background-color: rgb(220, 252, 231) !important;
+}
+/* 注意：移除了 .text-blue-800 的通用覆盖 */
+[data-theme="fresh"] .hover\:bg-blue-200:hover {
+  background-color: rgb(187, 247, 208) !important;
+}
+[data-theme="fresh"] .border-blue-200 {
+  border-color: rgb(187, 247, 208) !important;
+}
+[data-theme="fresh"] .border-blue-300 {
+  border-color: rgb(134, 239, 172) !important;
+}
+[data-theme="fresh"] .border-blue-500 {
+  border-color: rgb(63, 204, 113) !important;
+}
+[data-theme="fresh"] .bg-blue-600 {
+  background-color: rgb(22, 163, 74) !important;
+}
+[data-theme="fresh"] .hover\:bg-blue-600:hover {
+  background-color: rgb(21, 128, 61) !important;
+}
+[data-theme="fresh"] .hover\:bg-blue-700:hover {
+  background-color: rgb(21, 128, 61) !important;
+}
+[data-theme="fresh"] .focus\:ring-blue-500:focus {
+  box-shadow: 0 0 0 3px rgb(63, 204, 113, 0.1) !important;
+}
+/* 版本面板和品牌元素适配 */
+[data-theme="fresh"] .bg-blue-100 {
+  background-color: rgb(220, 252, 231) !important;
+}
+[data-theme="fresh"] .text-blue-800 {
+  color: rgb(22, 101, 52) !important;
+}
+[data-theme="fresh"] .text-blue-700 {
+  color: rgb(21, 128, 61) !important;
+}
+[data-theme="fresh"] .text-blue-600 {
+  color: rgb(22, 163, 74) !important;
+}
+[data-theme="fresh"] .text-blue-500 {
+  color: rgb(34, 197, 94) !important;
+}
+/* 登录页面和按钮适配 */
+[data-theme="fresh"] .bg-blue-600 {
+  background-color: rgb(22, 163, 74) !important;
+}
+[data-theme="fresh"] .focus\:ring-blue-500:focus {
+  --tw-ring-color: rgb(34, 197, 94) !important;
+}
+[data-theme="fresh"] .bg-blue-50 {
+  background-color: rgb(240, 253, 244) !important;
+}
+[data-theme="fresh"] .border-blue-200 {
+  border-color: rgb(187, 247, 208) !important;
+}
+[data-theme="fresh"] .peer-focus\:text-blue-600:focus {
+  color: rgb(22, 163, 74) !important;
+}
+[data-theme="fresh"] .peer:focus ~ .peer-focus\:text-blue-600 {
+  color: rgb(22, 163, 74) !important;
+}
+
+[data-theme="fresh"].dark {
+  --color-theme-bg: 20, 29, 24;
+  --color-theme-surface: 31, 41, 35;
+  --color-theme-accent: 74, 222, 128;
+  --color-theme-text: 240, 253, 244;
+  --color-theme-text-secondary: 187, 247, 208;
+  --color-theme-border: 75, 85, 79;
+  --color-theme-success: 74, 222, 128;
+  --color-theme-warning: 251, 191, 36;
+  --color-theme-error: 248, 113, 113;
+  --color-theme-info: 74, 222, 128;
+}
+
+/* 清新主题深色模式蓝色元素覆盖 */
+/* 注意：移除了通用的 .text-blue-* 覆盖，只保留有条件的状态覆盖 */
+[data-theme="fresh"].dark .bg-blue-500\/20 {
+  background-color: rgb(74, 222, 128, 0.2) !important;
+}
+[data-theme="fresh"].dark .bg-blue-500\/10 {
+  background-color: rgb(74, 222, 128, 0.1) !important;
+}
+[data-theme="fresh"].dark .bg-blue-500 {
+  background-color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .hover\:fill-blue-500:hover {
+  fill: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .border-blue-500\/30 {
+  border-color: rgb(74, 222, 128, 0.3) !important;
+}
+[data-theme="fresh"].dark .hover\:text-blue-400:hover {
+  color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .bg-blue-900\/40 {
+  background-color: rgb(22, 101, 52, 0.4) !important;
+}
+[data-theme="fresh"].dark .hover\:bg-blue-900\/60:hover {
+  background-color: rgb(22, 101, 52, 0.6) !important;
+}
+/* 注意：移除了 .text-blue-200 的通用覆盖 */
+[data-theme="fresh"].dark .border-blue-200 {
+  border-color: rgb(22, 101, 52) !important;
+}
+[data-theme="fresh"].dark .border-blue-300 {
+  border-color: rgb(22, 163, 74) !important;
+}
+[data-theme="fresh"].dark .border-blue-500 {
+  border-color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .bg-blue-600 {
+  background-color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .hover\:bg-blue-600:hover {
+  background-color: rgb(134, 239, 172) !important;
+}
+[data-theme="fresh"].dark .hover\:bg-blue-700:hover {
+  background-color: rgb(134, 239, 172) !important;
+}
+[data-theme="fresh"].dark .focus\:ring-blue-500:focus {
+  box-shadow: 0 0 0 3px rgb(74, 222, 128, 0.1) !important;
+}
+/* 深色模式版本面板和品牌元素适配 */
+[data-theme="fresh"].dark .bg-blue-900\/30 {
+  background-color: rgb(22, 101, 52, 0.3) !important;
+}
+[data-theme="fresh"].dark .text-blue-300 {
+  color: rgb(134, 239, 172) !important;
+}
+[data-theme="fresh"].dark .text-blue-400 {
+  color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .text-blue-500 {
+  color: rgb(74, 222, 128) !important;
+}
+/* 深色模式登录页面适配 */
+[data-theme="fresh"].dark .bg-blue-600 {
+  background-color: rgb(34, 197, 94) !important;
+}
+[data-theme="fresh"].dark .bg-blue-900\/20 {
+  background-color: rgb(20, 83, 45, 0.2) !important;
+}
+[data-theme="fresh"].dark .border-blue-800 {
+  border-color: rgb(22, 101, 52) !important;
+}
+[data-theme="fresh"].dark .peer-focus\:dark\:text-blue-400:focus {
+  color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .peer:focus ~ .peer-focus\:dark\:text-blue-400 {
+  color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .text-blue-200 {
+  color: rgb(134, 239, 172) !important;
+}
+[data-theme="fresh"].dark .bg-blue-800\/40 {
+  background-color: rgb(22, 101, 52, 0.4) !important;
+}
+
+/* 极简主题额外覆盖 */
+[data-theme="minimal"] .bg-blue-50 {
+  background-color: rgb(250, 250, 250) !important;
+}
+[data-theme="minimal"] .hover\\:bg-blue-50:hover {
+  background-color: rgb(250, 250, 250) !important;
+}
+[data-theme="minimal"] .text-blue-500 {
+  color: rgb(115, 115, 115) !important;
+}
+/* 极简主题登录页面适配 */
+[data-theme="minimal"] .bg-blue-600 {
+  background-color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"] .focus\:ring-blue-500:focus {
+  --tw-ring-color: rgb(115, 115, 115) !important;
+}
+[data-theme="minimal"] .bg-blue-50 {
+  background-color: rgb(250, 250, 250) !important;
+}
+[data-theme="minimal"] .border-blue-200 {
+  border-color: rgb(229, 229, 229) !important;
+}
+[data-theme="minimal"] .peer-focus\:text-blue-600:focus {
+  color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"] .peer:focus ~ .peer-focus\:text-blue-600 {
+  color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"] .hover\\:text-blue-500:hover {
+  color: rgb(115, 115, 115) !important;
+}
+
+[data-theme="minimal"].dark .bg-blue-50 {
+  background-color: rgb(28, 28, 28) !important;
+}
+[data-theme="minimal"].dark .hover\\:bg-blue-50:hover {
+  background-color: rgb(28, 28, 28) !important;
+}
+[data-theme="minimal"].dark .text-blue-500 {
+  color: rgb(163, 163, 163) !important;
+}
+/* 极简主题深色模式登录页面适配 */
+[data-theme="minimal"].dark .bg-blue-600 {
+  background-color: rgb(115, 115, 115) !important;
+}
+[data-theme="minimal"].dark .bg-blue-900\/20 {
+  background-color: rgb(64, 64, 64, 0.2) !important;
+}
+[data-theme="minimal"].dark .border-blue-800 {
+  border-color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"].dark .peer-focus\:dark\:text-blue-400:focus {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .peer:focus ~ .peer-focus\:dark\:text-blue-400 {
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .hover\\:text-blue-500:hover {
+  color: rgb(163, 163, 163) !important;
+}
+
+/* 暖色主题额外覆盖 */
+[data-theme="warm"] .bg-blue-50 {
+  background-color: rgb(255, 247, 237) !important;
+}
+[data-theme="warm"] .hover\\:bg-blue-50:hover {
+  background-color: rgb(255, 247, 237) !important;
+}
+[data-theme="warm"] .text-blue-500 {
+  color: rgb(249, 115, 22) !important;
+}
+[data-theme="warm"] .hover\\:text-blue-500:hover {
+  color: rgb(249, 115, 22) !important;
+}
+
+[data-theme="warm"].dark .bg-blue-50 {
+  background-color: rgb(41, 37, 36) !important;
+}
+[data-theme="warm"].dark .hover\\:bg-blue-50:hover {
+  background-color: rgb(41, 37, 36) !important;
+}
+[data-theme="warm"].dark .text-blue-500 {
+  color: rgb(251, 146, 60) !important;
+}
+/* 暖色主题深色模式登录页面适配 */
+[data-theme="warm"].dark .bg-blue-600 {
+  background-color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .bg-blue-900\/20 {
+  background-color: rgb(154, 52, 18, 0.2) !important;
+}
+[data-theme="warm"].dark .border-blue-800 {
+  border-color: rgb(194, 65, 12) !important;
+}
+[data-theme="warm"].dark .peer-focus\:dark\:text-blue-400:focus {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .peer:focus ~ .peer-focus\:dark\:text-blue-400 {
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .hover\\:text-blue-500:hover {
+  color: rgb(251, 146, 60) !important;
+}
+
+/* 清新主题额外覆盖 */
+[data-theme="fresh"] .bg-blue-50 {
+  background-color: rgb(240, 253, 244) !important;
+}
+[data-theme="fresh"] .hover\\:bg-blue-50:hover {
+  background-color: rgb(240, 253, 244) !important;
+}
+/* 保留hover状态的覆盖 */
+[data-theme="fresh"] .hover\\:text-blue-500:hover {
+  color: rgb(63, 204, 113) !important;
+}
+
+[data-theme="fresh"].dark .bg-blue-50 {
+  background-color: rgb(31, 41, 35) !important;
+}
+[data-theme="fresh"].dark .hover\\:bg-blue-50:hover {
+  background-color: rgb(31, 41, 35) !important;
+}
+/* 保留hover状态的覆盖 */
+[data-theme="fresh"].dark .hover\\:text-blue-500:hover {
+  color: rgb(74, 222, 128) !important;
+}
+
+/* VideoCard 和其他组件的蓝色样式覆盖 */
+
+/* 极简主题组件样式覆盖 */
+[data-theme="minimal"] .border-blue-200 {
+  border-color: rgb(229, 229, 229) !important;
+}
+[data-theme="minimal"] .text-blue-300 {
+  color: rgb(163, 163, 163) !important;
+}
+
+[data-theme="minimal"].dark .bg-blue-900\/20 {
+  background-color: rgb(23, 23, 23, 0.2) !important;
+}
+[data-theme="minimal"].dark .border-blue-800 {
+  border-color: rgb(38, 38, 38) !important;
+}
+[data-theme="minimal"].dark .bg-blue-900\/30 {
+  background-color: rgb(23, 23, 23, 0.3) !important;
+}
+
+/* 暖色主题组件样式覆盖 */
+[data-theme="warm"] .border-blue-200 {
+  border-color: rgb(253, 230, 138) !important;
+}
+[data-theme="warm"] .peer-focus\:text-blue-600:focus {
+  color: rgb(234, 88, 12) !important;
+}
+[data-theme="warm"] .peer:focus ~ .peer-focus\:text-blue-600 {
+  color: rgb(234, 88, 12) !important;
+}
+[data-theme="warm"] .text-blue-300 {
+  color: rgb(251, 146, 60) !important;
+}
+
+[data-theme="warm"].dark .bg-blue-900\/20 {
+  background-color: rgb(124, 45, 18, 0.2) !important;
+}
+[data-theme="warm"].dark .border-blue-800 {
+  border-color: rgb(154, 52, 18) !important;
+}
+[data-theme="warm"].dark .bg-blue-900\/30 {
+  background-color: rgb(124, 45, 18, 0.3) !important;
+}
+
+/* 补充更多蓝色元素覆盖 */
+
+/* 极简主题补充覆盖 */
+[data-theme="minimal"] .text-blue-900 {
+  color: rgb(23, 23, 23) !important;
+}
+[data-theme="minimal"] .bg-blue-200 {
+  background-color: rgb(229, 229, 229) !important;
+}
+[data-theme="minimal"] .bg-blue-300 {
+  background-color: rgb(212, 212, 212) !important;
+}
+[data-theme="minimal"] .bg-blue-600 {
+  background-color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"] .bg-blue-700 {
+  background-color: rgb(64, 64, 64) !important;
+}
+[data-theme="minimal"] .border-blue-100 {
+  border-color: rgb(245, 245, 245) !important;
+}
+[data-theme="minimal"] .border-blue-300 {
+  border-color: rgb(212, 212, 212) !important;
+}
+[data-theme="minimal"] .border-blue-500 {
+  border-color: rgb(115, 115, 115) !important;
+}
+[data-theme="minimal"] .hover\\:border-blue-300:hover {
+  border-color: rgb(212, 212, 212) !important;
+}
+[data-theme="minimal"] .hover\\:bg-blue-700:hover {
+  background-color: rgb(64, 64, 64) !important;
+}
+[data-theme="minimal"] .focus\\:ring-blue-500:focus {
+  box-shadow: 0 0 0 3px rgb(115, 115, 115, 0.1) !important;
+}
+
+[data-theme="minimal"].dark .text-blue-900 {
+  color: rgb(250, 250, 250) !important;
+}
+[data-theme="minimal"].dark .bg-blue-200 {
+  background-color: rgb(64, 64, 64) !important;
+}
+[data-theme="minimal"].dark .bg-blue-300 {
+  background-color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"].dark .bg-blue-600 {
+  background-color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .bg-blue-700 {
+  background-color: rgb(212, 212, 212) !important;
+}
+[data-theme="minimal"].dark .border-blue-100 {
+  border-color: rgb(38, 38, 38) !important;
+}
+[data-theme="minimal"].dark .border-blue-300 {
+  border-color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"].dark .border-blue-500 {
+  border-color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .hover\\:border-blue-300:hover {
+  border-color: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"].dark .hover\\:bg-blue-700:hover {
+  background-color: rgb(212, 212, 212) !important;
+}
+[data-theme="minimal"].dark .focus\\:ring-blue-500:focus {
+  box-shadow: 0 0 0 3px rgb(163, 163, 163, 0.1) !important;
+}
+
+/* 暖色主题补充覆盖 */
+[data-theme="warm"] .text-blue-900 {
+  color: rgb(124, 45, 18) !important;
+}
+[data-theme="warm"] .bg-blue-200 {
+  background-color: rgb(254, 215, 170) !important;
+}
+[data-theme="warm"] .bg-blue-300 {
+  background-color: rgb(253, 186, 116) !important;
+}
+[data-theme="warm"] .bg-blue-600 {
+  background-color: rgb(234, 88, 12) !important;
+}
+[data-theme="warm"] .bg-blue-700 {
+  background-color: rgb(194, 65, 12) !important;
+}
+[data-theme="warm"] .border-blue-100 {
+  border-color: rgb(255, 237, 213) !important;
+}
+[data-theme="warm"] .border-blue-300 {
+  border-color: rgb(253, 186, 116) !important;
+}
+[data-theme="warm"] .border-blue-500 {
+  border-color: rgb(249, 115, 22) !important;
+}
+[data-theme="warm"] .hover\\:border-blue-300:hover {
+  border-color: rgb(253, 186, 116) !important;
+}
+[data-theme="warm"] .hover\\:bg-blue-700:hover {
+  background-color: rgb(194, 65, 12) !important;
+}
+[data-theme="warm"] .focus\\:ring-blue-500:focus {
+  box-shadow: 0 0 0 3px rgb(249, 115, 22, 0.1) !important;
+}
+
+[data-theme="warm"].dark .text-blue-900 {
+  color: rgb(254, 243, 199) !important;
+}
+[data-theme="warm"].dark .bg-blue-200 {
+  background-color: rgb(154, 52, 18) !important;
+}
+[data-theme="warm"].dark .bg-blue-300 {
+  background-color: rgb(194, 65, 12) !important;
+}
+[data-theme="warm"].dark .bg-blue-600 {
+  background-color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .bg-blue-700 {
+  background-color: rgb(253, 186, 116) !important;
+}
+[data-theme="warm"].dark .border-blue-100 {
+  border-color: rgb(87, 83, 78) !important;
+}
+[data-theme="warm"].dark .border-blue-300 {
+  border-color: rgb(194, 65, 12) !important;
+}
+[data-theme="warm"].dark .border-blue-500 {
+  border-color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .hover\\:border-blue-300:hover {
+  border-color: rgb(194, 65, 12) !important;
+}
+[data-theme="warm"].dark .hover\\:bg-blue-700:hover {
+  background-color: rgb(253, 186, 116) !important;
+}
+[data-theme="warm"].dark .focus\\:ring-blue-500:focus {
+  box-shadow: 0 0 0 3px rgb(251, 146, 60, 0.1) !important;
+}
+
+/* 导航组件蓝色元素覆盖 - 直接覆盖具体元素，避免复杂选择器 */
+
+/* 极简主题导航覆盖 */
+/* 选中状态背景和文字颜色 */
+[data-theme="minimal"] *[data-active="true"] {
+  background-color: rgb(82, 82, 82, 0.2) !important;
+  color: rgb(64, 64, 64) !important;
+}
+[data-theme="minimal"] .group[data-active="true"] svg {
+  color: rgb(64, 64, 64) !important;
+}
+
+[data-theme="minimal"].dark *[data-active="true"] {
+  background-color: rgb(163, 163, 163, 0.1) !important;
+  color: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .group[data-active="true"] svg {
+  color: rgb(163, 163, 163) !important;
+}
+
+/* hover状态文字颜色 */
+[data-theme="minimal"] .hover\\:text-blue-300:hover {
+  color: rgb(115, 115, 115) !important;
+}
+[data-theme="minimal"].dark .dark\\:hover\\:text-blue-300:hover {
+  color: rgb(163, 163, 163) !important;
+}
+
+/* 暖色主题导航覆盖 */
+[data-theme="warm"] *[data-active="true"] {
+  background-color: rgb(234, 88, 12, 0.2) !important;
+  color: rgb(194, 65, 12) !important;
+}
+[data-theme="warm"] .group[data-active="true"] svg {
+  color: rgb(194, 65, 12) !important;
+}
+
+[data-theme="warm"].dark *[data-active="true"] {
+  background-color: rgb(251, 146, 60, 0.1) !important;
+  color: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .group[data-active="true"] svg {
+  color: rgb(251, 146, 60) !important;
+}
+
+[data-theme="warm"] .hover\\:text-blue-300:hover {
+  color: rgb(234, 88, 12) !important;
+}
+[data-theme="warm"].dark .dark\\:hover\\:text-blue-300:hover {
+  color: rgb(251, 146, 60) !important;
+}
+
+/* 清新主题侧边栏hover颜色适配 */
+[data-theme="fresh"] .hover\:text-blue-600:hover {
+  color: rgb(22, 163, 74) !important;
+}
+[data-theme="fresh"] .hover\:text-blue-700:hover {
+  color: rgb(21, 128, 61) !important;
+}
+[data-theme="fresh"] .group-hover\:text-blue-600:hover,
+[data-theme="fresh"] .group:hover .group-hover\:text-blue-600 {
+  color: rgb(22, 163, 74) !important;
+}
+[data-theme="fresh"] .group-data-\[active\=true\]\:text-blue-700,
+[data-theme="fresh"] .group[data-active="true"] .group-data-\[active\=true\]\:text-blue-700 {
+  color: rgb(21, 128, 61) !important;
+}
+[data-theme="fresh"] .data-\[active\=true\]\:text-blue-700[data-active="true"] {
+  color: rgb(21, 128, 61) !important;
+}
+[data-theme="fresh"] .data-\[active\=true\]\:bg-blue-500\20[data-active="true"] {
+  background-color: rgb(63, 204, 113, 0.2) !important;
+}
+
+[data-theme="fresh"].dark .hover\:text-blue-400:hover {
+  color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .hover\:text-blue-300:hover {
+  color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .group-hover\:text-blue-400:hover,
+[data-theme="fresh"].dark .group:hover .group-hover\:text-blue-400 {
+  color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .group-data-\[active\=true\]\:text-blue-400,
+[data-theme="fresh"].dark .group[data-active="true"] .group-data-\[active\=true\]\:text-blue-400 {
+  color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .data-\[active\=true\]\:text-blue-400[data-active="true"] {
+  color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .data-\[active\=true\]\:bg-blue-500\10[data-active="true"] {
+  background-color: rgb(74, 222, 128, 0.1) !important;
+}
+[data-theme="fresh"].dark .dark\\:hover\\:text-blue-300:hover {
+  color: rgb(74, 222, 128) !important;
+}
+
+/* 清新主题导航覆盖 */
+/* 选中状态背景和文字颜色 */
+[data-theme="fresh"] *[data-active="true"] {
+  background-color: rgb(63, 204, 113, 0.2) !important;
+  color: rgb(21, 128, 61) !important;
+}
+
+[data-theme="fresh"].dark *[data-active="true"] {
+  background-color: rgb(74, 222, 128, 0.1) !important;
+  color: rgb(74, 222, 128) !important;
+}
+
+/* 视频卡片播放按钮和标签元素覆盖 */
+
+/* 极简主题视频卡片覆盖 */
+[data-theme="minimal"] .fill-blue-500,
+[data-theme="minimal"] .hover\\:fill-blue-500:hover {
+  fill: rgb(82, 82, 82) !important;
+}
+[data-theme="minimal"] .bg-blue-400 {
+  background-color: rgb(115, 115, 115) !important;
+}
+[data-theme="minimal"] .hover\\:bg-blue-600:hover {
+  background-color: rgb(64, 64, 64) !important;
+}
+
+[data-theme="minimal"].dark .fill-blue-500,
+[data-theme="minimal"].dark .hover\\:fill-blue-500:hover {
+  fill: rgb(163, 163, 163) !important;
+}
+[data-theme="minimal"].dark .hover\\:bg-blue-600:hover {
+  background-color: rgb(212, 212, 212) !important;
+}
+
+/* 暖色主题视频卡片覆盖 */
+[data-theme="warm"] .fill-blue-500,
+[data-theme="warm"] .hover\\:fill-blue-500:hover {
+  fill: rgb(234, 88, 12) !important;
+}
+[data-theme="warm"] .bg-blue-400 {
+  background-color: rgb(249, 115, 22) !important;
+}
+[data-theme="warm"] .hover\\:bg-blue-600:hover {
+  background-color: rgb(194, 65, 12) !important;
+}
+
+[data-theme="warm"].dark .fill-blue-500,
+[data-theme="warm"].dark .hover\\:fill-blue-500:hover {
+  fill: rgb(251, 146, 60) !important;
+}
+[data-theme="warm"].dark .hover\\:bg-blue-600:hover {
+  background-color: rgb(253, 186, 116) !important;
+}
+
+/* 清新主题视频卡片覆盖 */
+[data-theme="fresh"] .hover\\:fill-blue-500:hover {
+  fill: rgb(63, 204, 113) !important;
+}
+[data-theme="fresh"] .bg-blue-400 {
+  background-color: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"] .hover\\:bg-blue-600:hover {
+  background-color: rgb(21, 128, 61) !important;
+}
+
+[data-theme="fresh"].dark .hover\\:fill-blue-500:hover {
+  fill: rgb(74, 222, 128) !important;
+}
+[data-theme="fresh"].dark .hover\\:bg-blue-600:hover {
+  background-color: rgb(134, 239, 172) !important;
 }
 
 html,
@@ -63,6 +1351,73 @@ html:not(.dark) body {
   background-attachment: fixed;
 }
 
+/* 主题背景渐变覆盖 */
+[data-theme="minimal"]:not(.dark) body {
+  background: linear-gradient(
+    180deg,
+    #fafafa 0%,
+    #f5f5f5 25%,
+    #f0f0f0 50%,
+    #ebebeb 75%,
+    #e5e5e5 100%
+  );
+  background-attachment: fixed;
+}
+
+[data-theme="warm"]:not(.dark) body {
+  background: linear-gradient(
+    180deg,
+    #fffdf7 0%,
+    #fefaf0 25%,
+    #fef7e0 50%,
+    #fef3c7 75%,
+    #fde68a 100%
+  );
+  background-attachment: fixed;
+}
+
+[data-theme="fresh"]:not(.dark) body {
+  background: linear-gradient(
+    180deg,
+    #f7fdf9 0%,
+    #f0fdf4 25%,
+    #ecfdf5 50%,
+    #d1fae5 75%,
+    #a7f3d0 100%
+  );
+  background-attachment: fixed;
+}
+
+.dark body {
+  background: linear-gradient(
+    180deg,
+    rgb(var(--color-theme-bg)) 0%,
+    rgb(var(--color-theme-surface)) 100%
+  );
+  background-attachment: fixed;
+}
+
+/* 通用主题类 */
+.theme-transition {
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+}
+
+.theme-card {
+  @apply bg-theme-surface border border-theme-border rounded-lg shadow-sm theme-transition;
+}
+
+.theme-button {
+  @apply bg-theme-accent text-white border border-theme-accent rounded-lg px-4 py-2 hover:opacity-90 theme-transition;
+}
+
+.theme-button-secondary {
+  @apply bg-theme-surface text-theme-text border border-theme-border rounded-lg px-4 py-2 hover:bg-theme-accent/10 theme-transition;
+}
+
+.theme-input {
+  @apply bg-theme-surface text-theme-text border border-theme-border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-theme-accent/50 theme-transition;
+}
+
 /* 自定义滚动条样式 */
 ::-webkit-scrollbar {
   width: 8px;
@@ -168,6 +1523,27 @@ html:not(.dark)::view-transition-new(root) {
   animation-name: slide-from-bottom;
 }
 
+/* 确保自定义主题色类在所有主题下正确显示 */
+.bg-theme-accent {
+  background-color: rgb(var(--color-theme-accent)) !important;
+}
+
+.text-theme-accent {
+  color: rgb(var(--color-theme-accent)) !important;
+}
+
+.border-theme-accent {
+  border-color: rgb(var(--color-theme-accent)) !important;
+}
+
+.hover\:bg-theme-accent\/5:hover {
+  background-color: rgb(var(--color-theme-accent), 0.05) !important;
+}
+
+.hover\:bg-theme-accent\/10:hover {
+  background-color: rgb(var(--color-theme-accent), 0.1) !important;
+}
+
 /* 强制播放器内部的 video 元素高度为 100%，并保持内容完整显示 */
 div[data-media-provider] video {
   height: 100%;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8fb5d66..9f72b19 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -11,6 +11,7 @@ import { GlobalErrorIndicator } from '../components/GlobalErrorIndicator';
 import { SiteProvider } from '../components/SiteProvider';
 import { ThemeProvider } from '../components/ThemeProvider';
 import { ToastProvider } from '../components/Toast';
+import GlobalThemeLoader from '../components/GlobalThemeLoader';
 
 const inter = Inter({ subsets: ['latin'] });
 export const dynamic = 'force-dynamic';
@@ -110,6 +111,9 @@ export default async function RootLayout({
             __html: `window.RUNTIME_CONFIG = ${JSON.stringify(runtimeConfig)};`,
           }}
         />
+
+        {/* 主题初始化脚本 - 立即执行避免主题闪烁 */}
+        <script src="/theme-init.js" />
       </head>
       <body
         className={`${inter.className} min-h-screen bg-white text-gray-900 dark:bg-black dark:text-gray-200`}
@@ -122,6 +126,7 @@ export default async function RootLayout({
         >
           <ToastProvider>
             <SiteProvider siteName={siteName} announcement={announcement}>
+              <GlobalThemeLoader />
               {children}
               <GlobalErrorIndicator />
             </SiteProvider>
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 2805ccb..56c4c63 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -12,6 +12,7 @@ import MachineCode from '@/lib/machine-code';
 
 import { useSite } from '@/components/SiteProvider';
 import { ThemeToggle } from '@/components/ThemeToggle';
+import GlobalThemeLoader from '@/components/GlobalThemeLoader';
 
 // 版本显示组件
 function VersionDisplay() {
@@ -195,6 +196,7 @@ function LoginPageClient() {
 
   return (
     <div className='relative min-h-screen flex items-center justify-center px-4 overflow-hidden'>
+      <GlobalThemeLoader />
       <div className='absolute top-4 right-4'>
         <ThemeToggle />
       </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9caac96..3ec3cbf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -23,6 +23,7 @@ import { DoubanItem } from '@/lib/types';
 import CapsuleSwitch from '@/components/CapsuleSwitch';
 import ContinueWatching from '@/components/ContinueWatching';
 import PageLayout from '@/components/PageLayout';
+import { useThemeInit } from '@/hooks/useTheme';
 import ScrollableRow from '@/components/ScrollableRow';
 import { useSite } from '@/components/SiteProvider';
 import VideoCard from '@/components/VideoCard';
@@ -515,6 +516,8 @@ function HomeClient() {
 }
 
 export default function Home() {
+  // 初始化主题
+  useThemeInit();
   return (
     <Suspense>
       <HomeClient />
diff --git a/src/app/play/page.tsx b/src/app/play/page.tsx
index a8da66b..5b262c8 100644
--- a/src/app/play/page.tsx
+++ b/src/app/play/page.tsx
@@ -1797,6 +1797,37 @@ function PlayPageClient() {
       typeof window !== 'undefined' &&
       typeof (window as any).webkitConvertPointFromNodeToPage === 'function';
 
+    // 检测是否为移动端设备
+    const isMobile = typeof window !== 'undefined' && (
+      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+      window.innerWidth <= 768
+    );
+
+    // 根据设备类型调整弹幕配置
+    const getDanmuConfig = () => {
+      if (isMobile) {
+        return {
+          fontSize: 20, // 移动端字体稍小
+          margin: [5, '20%'], // 移动端边距更小
+          minWidth: 150, // 移动端最小宽度更小
+          maxWidth: 300, // 移动端最大宽度限制
+          maxlength: 30, // 移动端字符长度限制
+          placeholder: '发弹幕~', // 移动端简化提示文字
+        };
+      } else {
+        return {
+          fontSize: 25, // 桌面端正常字体
+          margin: [10, '25%'], // 桌面端正常边距
+          minWidth: 200, // 桌面端最小宽度
+          maxWidth: 500, // 桌面端最大宽度
+          maxlength: 50, // 桌面端字符长度
+          placeholder: '发个弹幕呗~', // 桌面端完整提示文字
+        };
+      }
+    };
+
+    const danmuConfig = getDanmuConfig();
+
     // 非WebKit浏览器且播放器已存在，使用switch方法切换
     if (!isWebkit && artPlayerRef.current) {
       artPlayerRef.current.switch = videoUrl;
@@ -1977,26 +2008,54 @@ function PlayPageClient() {
                 return [];
               }
             },
-            speed: 5,
+            speed: isMobile ? 4 : 5, // 移动端弹幕速度稍慢
             opacity: 1,
-            fontSize: 25,
+            fontSize: danmuConfig.fontSize,
             color: '#FFFFFF',
             mode: 0,
-            margin: [10, '25%'],
+            margin: danmuConfig.margin,
             antiOverlap: true,
             useWorker: true,
             synchronousPlayback: false,
-            filter: (danmu: any) => danmu.text.length < 50,
-            lockTime: 5,
-            maxLength: 100,
-            minWidth: 200,
-            maxWidth: 500,
+            filter: (danmu: any) => danmu.text.length < (isMobile ? 30 : 50),
+            lockTime: isMobile ? 3 : 5, // 移动端锁定时间更短
+            maxLength: isMobile ? 80 : 100, // 移动端最大长度限制
+            minWidth: danmuConfig.minWidth,
+            maxWidth: danmuConfig.maxWidth,
             theme: 'dark',
             // 核心配置：启用弹幕发送功能  
             panel: true, // 启用弹幕输入面板
             emit: true, // 启用弹幕发送
-            placeholder: '发个弹幕呗~',
-            maxlength: 50,
+            placeholder: danmuConfig.placeholder,
+            maxlength: danmuConfig.maxlength,
+            // 移动端专用配置
+            ...(isMobile && {
+              panelStyle: {
+                fontSize: '14px',
+                padding: '8px 12px',
+                borderRadius: '20px',
+                background: 'rgba(0, 0, 0, 0.8)',
+                backdropFilter: 'blur(10px)',
+                border: '1px solid rgba(255, 255, 255, 0.2)',
+                color: '#ffffff',
+                outline: 'none',
+                width: '100%',
+                maxWidth: '280px',
+                boxSizing: 'border-box',
+              },
+              buttonStyle: {
+                fontSize: '12px',
+                padding: '6px 12px',
+                borderRadius: '16px',
+                background: 'linear-gradient(45deg, #3b82f6, #1d4ed8)',
+                border: 'none',
+                color: '#ffffff',
+                cursor: 'pointer',
+                marginLeft: '8px',
+                minWidth: '50px',
+                outline: 'none',
+              },
+            }),
             beforeVisible: (danmu: any) => {
               return !danmu.text.includes('广告');
             },
@@ -2021,7 +2080,7 @@ function PlayPageClient() {
                   mode: danmu.mode || 0,
                   time: (artPlayerRef.current?.currentTime || 0) + 0.5,
                   border: false,
-                  size: 25
+                  size: isMobile ? 18 : 25 // 移动端弹幕字体更小
                 };
 
                 // 手动触发弹幕显示（如果beforeEmit的返回值不能正常显示）
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 8adc13d..b222dc7 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -45,6 +45,229 @@ function SearchPageClient() {
   const groupRefs = useRef<Map<string, React.RefObject<VideoCardHandle>>>(new Map());
   const groupStatsRef = useRef<Map<string, { douban_id?: number; episodes?: number; source_names: string[] }>>(new Map());
 
+  // 执行搜索的通用函数
+  const performSearch = (query: string) => {
+    const trimmed = query.trim();
+    if (!trimmed) return;
+
+    // 更新搜索查询和状态
+    setSearchQuery(trimmed);
+    currentQueryRef.current = trimmed;
+
+    // 清理缓存标记，确保执行新搜索
+    sessionStorage.removeItem('fromPlayPage');
+
+    // 清空旧的搜索结果和状态
+    if (eventSourceRef.current) {
+      try { eventSourceRef.current.close(); } catch { }
+      eventSourceRef.current = null;
+    }
+    setSearchResults([]);
+    setTotalSources(0);
+    setCompletedSources(0);
+    pendingResultsRef.current = [];
+    if (flushTimerRef.current) {
+      clearTimeout(flushTimerRef.current);
+      flushTimerRef.current = null;
+    }
+
+    // 清理聚合统计缓存和refs
+    groupStatsRef.current.clear();
+    groupRefs.current.clear();
+    setIsLoading(true);
+    setShowResults(true);
+
+    // 读取流式搜索设置
+    let currentFluidSearch = useFluidSearch;
+    if (typeof window !== 'undefined') {
+      const savedFluidSearch = localStorage.getItem('fluidSearch');
+      if (savedFluidSearch !== null) {
+        currentFluidSearch = JSON.parse(savedFluidSearch);
+      } else {
+        const defaultFluidSearch = (window as any).RUNTIME_CONFIG?.FLUID_SEARCH !== false;
+        currentFluidSearch = defaultFluidSearch;
+      }
+    }
+
+    if (currentFluidSearch !== useFluidSearch) {
+      setUseFluidSearch(currentFluidSearch);
+    }
+
+    if (currentFluidSearch) {
+      // 流式搜索
+      const es = new EventSource(`/api/search/ws?q=${encodeURIComponent(trimmed)}`);
+      eventSourceRef.current = es;
+
+      es.onmessage = (event) => {
+        if (!event.data) return;
+        try {
+          const payload = JSON.parse(event.data);
+          if (currentQueryRef.current !== trimmed || eventSourceRef.current !== es) {
+            console.warn('忽略过期的搜索响应:', payload.type, '当前查询:', currentQueryRef.current, '响应查询:', trimmed);
+            return;
+          }
+          switch (payload.type) {
+            case 'start':
+              setTotalSources(payload.totalSources || 0);
+              setCompletedSources(0);
+              break;
+            case 'source_result': {
+              setCompletedSources((prev) => prev + 1);
+              if (Array.isArray(payload.results) && payload.results.length > 0) {
+                const activeYearOrder = (viewMode === 'agg' ? (filterAgg.yearOrder) : (filterAll.yearOrder));
+                const incoming: SearchResult[] =
+                  activeYearOrder === 'none'
+                    ? sortBatchForNoOrder(payload.results as SearchResult[])
+                    : (payload.results as SearchResult[]);
+                pendingResultsRef.current.push(...incoming);
+                if (!flushTimerRef.current) {
+                  flushTimerRef.current = window.setTimeout(() => {
+                    const toAppend = pendingResultsRef.current;
+                    pendingResultsRef.current = [];
+                    startTransition(() => {
+                      setSearchResults((prev) => prev.concat(toAppend));
+                    });
+                    flushTimerRef.current = null;
+                  }, 80);
+                }
+              }
+              break;
+            }
+            case 'source_error':
+              setCompletedSources((prev) => prev + 1);
+              break;
+            case 'complete':
+              setCompletedSources(payload.completedSources || totalSources);
+              if (pendingResultsRef.current.length > 0) {
+                const toAppend = pendingResultsRef.current;
+                pendingResultsRef.current = [];
+                if (flushTimerRef.current) {
+                  clearTimeout(flushTimerRef.current);
+                  flushTimerRef.current = null;
+                }
+                startTransition(() => {
+                  setSearchResults((prev) => {
+                    const newResults = prev.concat(toAppend);
+                    try {
+                      sessionStorage.setItem('cachedSearchQuery', trimmed);
+                      sessionStorage.setItem('cachedSearchResults', JSON.stringify(newResults));
+                      sessionStorage.setItem('cachedSearchState', JSON.stringify({
+                        totalSources: payload.completedSources || totalSources,
+                        completedSources: payload.completedSources || totalSources,
+                      }));
+                      sessionStorage.setItem('cachedSearchFilters', JSON.stringify({
+                        filterAll,
+                        filterAgg,
+                      }));
+                      sessionStorage.setItem('cachedViewMode', viewMode);
+                    } catch (error) {
+                      console.error('缓存搜索结果失败:', error);
+                    }
+                    return newResults;
+                  });
+                });
+              } else {
+                setTimeout(() => {
+                  setSearchResults((prev) => {
+                    try {
+                      sessionStorage.setItem('cachedSearchQuery', trimmed);
+                      sessionStorage.setItem('cachedSearchResults', JSON.stringify(prev));
+                      sessionStorage.setItem('cachedSearchState', JSON.stringify({
+                        totalSources: payload.completedSources || totalSources,
+                        completedSources: payload.completedSources || totalSources,
+                      }));
+                      sessionStorage.setItem('cachedSearchFilters', JSON.stringify({
+                        filterAll,
+                        filterAgg,
+                      }));
+                      sessionStorage.setItem('cachedViewMode', viewMode);
+                    } catch (error) {
+                      console.error('缓存搜索结果失败:', error);
+                    }
+                    return prev;
+                  });
+                }, 100);
+              }
+              setIsLoading(false);
+              try { es.close(); } catch { }
+              if (eventSourceRef.current === es) {
+                eventSourceRef.current = null;
+              }
+              break;
+          }
+        } catch { }
+      };
+
+      es.onerror = () => {
+        setIsLoading(false);
+        if (pendingResultsRef.current.length > 0) {
+          const toAppend = pendingResultsRef.current;
+          pendingResultsRef.current = [];
+          if (flushTimerRef.current) {
+            clearTimeout(flushTimerRef.current);
+            flushTimerRef.current = null;
+          }
+          startTransition(() => {
+            setSearchResults((prev) => prev.concat(toAppend));
+          });
+        }
+        try { es.close(); } catch { }
+        if (eventSourceRef.current === es) {
+          eventSourceRef.current = null;
+        }
+      };
+    } else {
+      // 传统搜索
+      fetch(`/api/search?q=${encodeURIComponent(trimmed)}`)
+        .then(response => response.json())
+        .then(data => {
+          if (currentQueryRef.current !== trimmed) {
+            console.warn('忽略过期的搜索响应 (传统):', '当前查询:', currentQueryRef.current, '响应查询:', trimmed);
+            return;
+          }
+
+          if (data.results && Array.isArray(data.results)) {
+            const activeYearOrder = (viewMode === 'agg' ? (filterAgg.yearOrder) : (filterAll.yearOrder));
+            const results: SearchResult[] =
+              activeYearOrder === 'none'
+                ? sortBatchForNoOrder(data.results as SearchResult[])
+                : (data.results as SearchResult[]);
+
+            setSearchResults(results);
+            setTotalSources(1);
+            setCompletedSources(1);
+
+            try {
+              sessionStorage.setItem('cachedSearchQuery', trimmed);
+              sessionStorage.setItem('cachedSearchResults', JSON.stringify(results));
+              sessionStorage.setItem('cachedSearchState', JSON.stringify({
+                totalSources: 1,
+                completedSources: 1,
+              }));
+              sessionStorage.setItem('cachedSearchFilters', JSON.stringify({
+                filterAll,
+                filterAgg,
+              }));
+              sessionStorage.setItem('cachedViewMode', viewMode);
+            } catch (error) {
+              console.error('缓存搜索结果失败:', error);
+            }
+          }
+          setIsLoading(false);
+        })
+        .catch(() => {
+          setIsLoading(false);
+        });
+    }
+
+    // 保存到搜索历史
+    addSearchHistory(trimmed);
+
+    // 更新URL但不触发重新渲染
+    const newUrl = `/search?q=${encodeURIComponent(trimmed)}`;
+    window.history.replaceState(null, '', newUrl);
+  };
+
   const getGroupRef = (key: string) => {
     let ref = groupRefs.current.get(key);
     if (!ref) {
@@ -136,6 +359,31 @@ function SearchPageClient() {
     });
   };
 
+  // 检查搜索结果与关键字的相关性
+  const isRelevantResult = (item: SearchResult, query: string) => {
+    if (!query.trim()) return true;
+
+    const searchTerms = query.trim().toLowerCase().split(/\s+/);
+    const title = (item.title || '').toLowerCase();
+    const typeName = (item.type_name || '').toLowerCase();
+
+    // 至少匹配一个搜索关键字
+    return searchTerms.some(term => {
+      // 标题包含关键字
+      if (title.includes(term)) return true;
+      // 类型名包含关键字
+      if (typeName.includes(term)) return true;
+      // 支持年份搜索
+      if (term.match(/^\d{4}$/) && item.year === term) return true;
+      // 支持模糊匹配（去除空格和标点符号后的匹配）
+      const cleanTitle = title.replace(/[\s\-_\.]/g, '');
+      const cleanTerm = term.replace(/[\s\-_\.]/g, '');
+      if (cleanTitle.includes(cleanTerm)) return true;
+
+      return false;
+    });
+  };
+
   // 简化的年份排序：unknown/空值始终在最后
   const compareYear = (aYear: string, bYear: string, order: 'none' | 'asc' | 'desc') => {
     // 如果是无排序状态，返回0（保持原顺序）
@@ -209,13 +457,16 @@ function SearchPageClient() {
     });
   }, [aggregatedResults]);
 
-  // 构建筛选选项
+  // 构建筛选选项 - 只基于相关的搜索结果
   const filterOptions = useMemo(() => {
     const sourcesSet = new Map<string, string>();
     const titlesSet = new Set<string>();
     const yearsSet = new Set<string>();
 
-    searchResults.forEach((item) => {
+    // 只考虑与搜索关键字相关的结果来构建过滤选项
+    const relevantResults = searchResults.filter(item => isRelevantResult(item, searchQuery));
+
+    relevantResults.forEach((item) => {
       if (item.source && item.source_name) {
         sourcesSet.set(item.source, item.source_name);
       }
@@ -266,6 +517,9 @@ function SearchPageClient() {
   const filteredAllResults = useMemo(() => {
     const { source, title, year, yearOrder } = filterAll;
     const filtered = searchResults.filter((item) => {
+      // 首先检查相关性
+      if (!isRelevantResult(item, searchQuery)) return false;
+      // 然后应用其他过滤器
       if (source !== 'all' && item.source !== source) return false;
       if (title !== 'all' && item.title !== title) return false;
       if (year !== 'all' && item.year !== year) return false;
@@ -300,6 +554,10 @@ function SearchPageClient() {
   const filteredAggResults = useMemo(() => {
     const { source, title, year, yearOrder } = filterAgg as any;
     const filtered = aggregatedResults.filter(([_, group]) => {
+      // 检查聚合组中是否至少有一个结果与搜索关键字相关
+      const hasRelevantResult = group.some(item => isRelevantResult(item, searchQuery));
+      if (!hasRelevantResult) return false;
+
       const gTitle = group[0]?.title ?? '';
       const gYear = group[0]?.year ?? 'unknown';
       const hasSource = source === 'all' ? true : group.some((item) => item.source === source);
@@ -419,7 +677,61 @@ function SearchPageClient() {
 
     if (query) {
       setSearchQuery(query);
-      // 新搜索：关闭旧连接并清空结果
+
+      // 检查是否从播放页返回，如果是则尝试使用缓存
+      const fromPlayPage = sessionStorage.getItem('fromPlayPage');
+      const cachedQuery = sessionStorage.getItem('cachedSearchQuery');
+      const cachedResults = sessionStorage.getItem('cachedSearchResults');
+      const cachedState = sessionStorage.getItem('cachedSearchState');
+      const cachedFilters = sessionStorage.getItem('cachedSearchFilters');
+      const cachedViewMode = sessionStorage.getItem('cachedViewMode');
+
+      if (fromPlayPage === 'true' && cachedQuery === query.trim() && cachedResults && cachedState) {
+        // 从播放页返回且有缓存，使用缓存的搜索结果
+        console.log('使用缓存的搜索结果');
+
+        try {
+          const results = JSON.parse(cachedResults);
+          const state = JSON.parse(cachedState);
+
+          // 恢复缓存的过滤器和视图状态
+          if (cachedFilters) {
+            const filters = JSON.parse(cachedFilters);
+            if (filters.filterAll) setFilterAll(filters.filterAll);
+            if (filters.filterAgg) setFilterAgg(filters.filterAgg);
+          }
+
+          if (cachedViewMode && ['agg', 'all'].includes(cachedViewMode)) {
+            setViewMode(cachedViewMode as 'agg' | 'all');
+          }
+
+          // 恢复搜索结果和状态
+          setSearchResults(results);
+          setTotalSources(state.totalSources || 0);
+          setCompletedSources(state.completedSources || 0);
+          setIsLoading(false);
+          setShowResults(true);
+
+          // 清理导航标记，避免影响后续搜索
+          sessionStorage.removeItem('fromPlayPage');
+
+          return; // 直接返回，不执行新搜索
+        } catch (error) {
+          console.error('恢复缓存的搜索结果失败:', error);
+          // 缓存损坏，清理缓存并继续正常搜索
+          sessionStorage.removeItem('cachedSearchQuery');
+          sessionStorage.removeItem('cachedSearchResults');
+          sessionStorage.removeItem('cachedSearchState');
+          sessionStorage.removeItem('cachedSearchFilters');
+          sessionStorage.removeItem('cachedViewMode');
+          sessionStorage.removeItem('fromPlayPage');
+        }
+      }
+
+      // 执行新搜索 - 使用performSearch函数（不更新URL，因为URL已经由路由处理了）
+      const trimmed = query.trim();
+
+      // 清空旧的搜索结果和状态
       if (eventSourceRef.current) {
         try { eventSourceRef.current.close(); } catch { }
         eventSourceRef.current = null;
@@ -427,22 +739,19 @@ function SearchPageClient() {
       setSearchResults([]);
       setTotalSources(0);
       setCompletedSources(0);
-      // 清理缓冲
       pendingResultsRef.current = [];
       if (flushTimerRef.current) {
         clearTimeout(flushTimerRef.current);
         flushTimerRef.current = null;
       }
 
-      // 清理聚合统计缓存和refs，防止数据污染
+      // 清理聚合统计缓存和refs
       groupStatsRef.current.clear();
       groupRefs.current.clear();
       setIsLoading(true);
       setShowResults(true);
 
-      const trimmed = query.trim();
-
-      // 每次搜索时重新读取设置，确保使用最新的配置
+      // 读取流式搜索设置
       let currentFluidSearch = useFluidSearch;
       if (typeof window !== 'undefined') {
         const savedFluidSearch = localStorage.getItem('fluidSearch');
@@ -454,13 +763,12 @@ function SearchPageClient() {
         }
       }
 
-      // 如果读取的配置与当前状态不同，更新状态
       if (currentFluidSearch !== useFluidSearch) {
         setUseFluidSearch(currentFluidSearch);
       }
 
       if (currentFluidSearch) {
-        // 流式搜索：打开新的流式连接
+        // 流式搜索
         const es = new EventSource(`/api/search/ws?q=${encodeURIComponent(trimmed)}`);
         eventSourceRef.current = es;
 
@@ -468,7 +776,6 @@ function SearchPageClient() {
           if (!event.data) return;
           try {
             const payload = JSON.parse(event.data);
-            // 强化竞态条件检查：确保是当前查询的响应
             if (currentQueryRef.current !== trimmed || eventSourceRef.current !== es) {
               console.warn('忽略过期的搜索响应:', payload.type, '当前查询:', currentQueryRef.current, '响应查询:', trimmed);
               return;
@@ -481,7 +788,6 @@ function SearchPageClient() {
               case 'source_result': {
                 setCompletedSources((prev) => prev + 1);
                 if (Array.isArray(payload.results) && payload.results.length > 0) {
-                  // 缓冲新增结果，节流刷入，避免频繁重渲染导致闪烁
                   const activeYearOrder = (viewMode === 'agg' ? (filterAgg.yearOrder) : (filterAll.yearOrder));
                   const incoming: SearchResult[] =
                     activeYearOrder === 'none'
@@ -506,7 +812,6 @@ function SearchPageClient() {
                 break;
               case 'complete':
                 setCompletedSources(payload.completedSources || totalSources);
-                // 完成前确保将缓冲写入
                 if (pendingResultsRef.current.length > 0) {
                   const toAppend = pendingResultsRef.current;
                   pendingResultsRef.current = [];
@@ -515,8 +820,47 @@ function SearchPageClient() {
                     flushTimerRef.current = null;
                   }
                   startTransition(() => {
-                    setSearchResults((prev) => prev.concat(toAppend));
+                    setSearchResults((prev) => {
+                      const newResults = prev.concat(toAppend);
+                      try {
+                        sessionStorage.setItem('cachedSearchQuery', trimmed);
+                        sessionStorage.setItem('cachedSearchResults', JSON.stringify(newResults));
+                        sessionStorage.setItem('cachedSearchState', JSON.stringify({
+                          totalSources: payload.completedSources || totalSources,
+                          completedSources: payload.completedSources || totalSources,
+                        }));
+                        sessionStorage.setItem('cachedSearchFilters', JSON.stringify({
+                          filterAll,
+                          filterAgg,
+                        }));
+                        sessionStorage.setItem('cachedViewMode', viewMode);
+                      } catch (error) {
+                        console.error('缓存搜索结果失败:', error);
+                      }
+                      return newResults;
+                    });
                   });
+                } else {
+                  setTimeout(() => {
+                    setSearchResults((prev) => {
+                      try {
+                        sessionStorage.setItem('cachedSearchQuery', trimmed);
+                        sessionStorage.setItem('cachedSearchResults', JSON.stringify(prev));
+                        sessionStorage.setItem('cachedSearchState', JSON.stringify({
+                          totalSources: payload.completedSources || totalSources,
+                          completedSources: payload.completedSources || totalSources,
+                        }));
+                        sessionStorage.setItem('cachedSearchFilters', JSON.stringify({
+                          filterAll,
+                          filterAgg,
+                        }));
+                        sessionStorage.setItem('cachedViewMode', viewMode);
+                      } catch (error) {
+                        console.error('缓存搜索结果失败:', error);
+                      }
+                      return prev;
+                    });
+                  }, 100);
                 }
                 setIsLoading(false);
                 try { es.close(); } catch { }
@@ -530,7 +874,6 @@ function SearchPageClient() {
 
         es.onerror = () => {
           setIsLoading(false);
-          // 错误时也清空缓冲
           if (pendingResultsRef.current.length > 0) {
             const toAppend = pendingResultsRef.current;
             pendingResultsRef.current = [];
@@ -548,11 +891,10 @@ function SearchPageClient() {
           }
         };
       } else {
-        // 传统搜索：使用普通接口
+        // 传统搜索
         fetch(`/api/search?q=${encodeURIComponent(trimmed)}`)
           .then(response => response.json())
           .then(data => {
-            // 强化竞态条件检查：确保是当前查询的响应
             if (currentQueryRef.current !== trimmed) {
               console.warn('忽略过期的搜索响应 (传统):', '当前查询:', currentQueryRef.current, '响应查询:', trimmed);
               return;
@@ -568,6 +910,22 @@ function SearchPageClient() {
               setSearchResults(results);
               setTotalSources(1);
               setCompletedSources(1);
+
+              try {
+                sessionStorage.setItem('cachedSearchQuery', trimmed);
+                sessionStorage.setItem('cachedSearchResults', JSON.stringify(results));
+                sessionStorage.setItem('cachedSearchState', JSON.stringify({
+                  totalSources: 1,
+                  completedSources: 1,
+                }));
+                sessionStorage.setItem('cachedSearchFilters', JSON.stringify({
+                  filterAll,
+                  filterAgg,
+                }));
+                sessionStorage.setItem('cachedViewMode', viewMode);
+              } catch (error) {
+                console.error('缓存搜索结果失败:', error);
+              }
             }
             setIsLoading(false);
           })
@@ -575,10 +933,10 @@ function SearchPageClient() {
             setIsLoading(false);
           });
       }
-      setShowSuggestions(false);
 
-      // 保存到搜索历史 (事件监听会自动更新界面)
-      addSearchHistory(query);
+      setShowSuggestions(false);
+      // 保存到搜索历史
+      addSearchHistory(trimmed);
     } else {
       setShowResults(false);
       setShowSuggestions(false);
@@ -630,38 +988,15 @@ function SearchPageClient() {
     const trimmed = searchQuery.trim().replace(/\s+/g, ' ');
     if (!trimmed) return;
 
-    // 清理所有状态和缓存，确保搜索结果干净
-    setSearchResults([]);
-    pendingResultsRef.current = [];
-    groupStatsRef.current.clear();
-    groupRefs.current.clear();
-
-    // 回显搜索框
-    setSearchQuery(trimmed);
-    setIsLoading(true);
-    setShowResults(true);
     setShowSuggestions(false);
-
-    router.push(`/search?q=${encodeURIComponent(trimmed)}`);
-    // 其余由 searchParams 变化的 effect 处理
+    // 直接调用搜索函数
+    performSearch(trimmed);
   };
 
   const handleSuggestionSelect = (suggestion: string) => {
-    // 清理所有状态和缓存，确保搜索结果干净
-    setSearchResults([]);
-    pendingResultsRef.current = [];
-    groupStatsRef.current.clear();
-    groupRefs.current.clear();
-
-    setSearchQuery(suggestion);
     setShowSuggestions(false);
-
-    // 自动执行搜索
-    setIsLoading(true);
-    setShowResults(true);
-
-    router.push(`/search?q=${encodeURIComponent(suggestion)}`);
-    // 其余由 searchParams 变化的 effect 处理
+    // 直接调用搜索函数
+    performSearch(suggestion);
   };
 
   // 返回顶部功能
@@ -724,19 +1059,9 @@ function SearchPageClient() {
                   const trimmed = searchQuery.trim().replace(/\s+/g, ' ');
                   if (!trimmed) return;
 
-                  // 清理所有状态和缓存，确保搜索结果干净
-                  setSearchResults([]);
-                  pendingResultsRef.current = [];
-                  groupStatsRef.current.clear();
-                  groupRefs.current.clear();
-
-                  // 回显搜索框
-                  setSearchQuery(trimmed);
-                  setIsLoading(true);
-                  setShowResults(true);
                   setShowSuggestions(false);
-
-                  router.push(`/search?q=${encodeURIComponent(trimmed)}`);
+                  // 直接调用搜索函数
+                  performSearch(trimmed);
                 }}
               />
             </div>
@@ -893,16 +1218,8 @@ function SearchPageClient() {
                   <div key={item} className='relative group'>
                     <button
                       onClick={() => {
-                        // 清理所有状态和缓存，确保搜索结果干净
-                        setSearchResults([]);
-                        pendingResultsRef.current = [];
-                        groupStatsRef.current.clear();
-                        groupRefs.current.clear();
-
-                        setSearchQuery(item);
-                        router.push(
-                          `/search?q=${encodeURIComponent(item.trim())}`
-                        );
+                        // 直接调用搜索函数
+                        performSearch(item.trim());
                       }}
                       className='px-4 py-2 bg-gray-500/10 hover:bg-gray-300 rounded-full text-sm text-gray-700 transition-colors duration-200 dark:bg-gray-700/50 dark:hover:bg-gray-600 dark:text-gray-300'
                     >
diff --git a/src/components/ChatModal.tsx b/src/components/ChatModal.tsx
index 6a4cce0..50b34e4 100644
--- a/src/components/ChatModal.tsx
+++ b/src/components/ChatModal.tsx
@@ -1240,8 +1240,8 @@ export function ChatModal({
           {selectedConversation ? (
             <>
               {/* 聊天头部 */}
-              <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
-                <div className="flex items-center space-x-3">
+              <div className="p-2 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+                <div className="flex items-center space-x-2">
                   {/* 移动端返回按钮 */}
                   {isMobile && (
                     <button
@@ -1289,10 +1289,10 @@ export function ChatModal({
                   </div>
 
                   <div className="flex-1 min-w-0">
-                    <h3 className="font-semibold text-gray-900 dark:text-white truncate">
+                    <h3 className="font-medium text-gray-900 dark:text-white truncate text-sm">
                       {selectedConversation.name}
                     </h3>
-                    <div className="text-sm text-gray-500 dark:text-gray-400">
+                    <div className="text-xs text-gray-500 dark:text-gray-400">
                       {selectedConversation.participants.length === 2 ? (
                         // 私人对话：显示在线状态
                         (() => {
@@ -1437,10 +1437,10 @@ export function ChatModal({
               </div>
 
               {/* 消息输入区域 */}
-              <div className="border-t border-gray-200 dark:border-gray-700 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900">
-                {/* 表情选择器 */}
+              <div className="border-t border-gray-200 dark:border-gray-700 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 relative">
+                {/* 表情选择器 - 绝对定位，不占据文档流空间 */}
                 {showEmojiPicker && (
-                  <div className="emoji-picker-container mx-4 mt-3 mb-2 p-3 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-2xl shadow-xl">
+                  <div className="emoji-picker-container absolute left-4 right-4 bottom-full mb-2 p-3 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-2xl shadow-xl z-50">
                     <div className="flex items-center justify-between mb-3">
                       <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">选择表情</h3>
                       <button
@@ -1466,16 +1466,16 @@ export function ChatModal({
                 )}
 
                 {/* 主输入区域 */}
-                <div className={`${isMobile ? 'p-3' : 'p-4'} pb-safe`}>
+                <div className={`${isMobile ? 'p-2' : 'p-3'} pb-safe`}>
                   <div className="bg-white dark:bg-gray-700 rounded-2xl shadow-sm border border-gray-200/80 dark:border-gray-600/80 backdrop-blur-sm">
                     {/* 顶部工具栏 */}
-                    <div className="flex items-center justify-between px-4 py-2 border-b border-gray-100 dark:border-gray-600">
+                    <div className="flex items-center justify-between px-3 py-1.5 border-b border-gray-100 dark:border-gray-600">
                       {/* 左侧功能按钮组 */}
                       <div className="flex items-center space-x-1">
                         {/* 表情按钮 */}
                         <button
                           onClick={() => setShowEmojiPicker(!showEmojiPicker)}
-                          className={`emoji-picker-container p-2.5 rounded-xl transition-all duration-200 transform hover:scale-105 ${showEmojiPicker
+                          className={`emoji-picker-container p-2 rounded-xl transition-all duration-200 transform hover:scale-105 ${showEmojiPicker
                             ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400'
                             : 'text-gray-500 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20'
                             }`}
@@ -1488,7 +1488,7 @@ export function ChatModal({
                         <button
                           onClick={() => fileInputRef.current?.click()}
                           disabled={uploadingImage}
-                          className="p-2.5 text-gray-500 hover:text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-xl transition-all duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
+                          className="p-2 text-gray-500 hover:text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-xl transition-all duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
                           title="上传图片"
                         >
                           {uploadingImage ? (
@@ -1509,7 +1509,7 @@ export function ChatModal({
 
                         {/* 附件按钮（预留） */}
                         <button
-                          className="p-2.5 text-gray-400 hover:text-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-xl transition-all duration-200 transform hover:scale-105"
+                          className="p-2 text-gray-400 hover:text-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-xl transition-all duration-200 transform hover:scale-105"
                           disabled
                           title="附件（即将开放）"
                         >
@@ -1538,13 +1538,13 @@ export function ChatModal({
                     </div>
 
                     {/* 消息输入区域 */}
-                    <div className="p-4">
+                    <div className="p-3">
                       <div className="relative">
                         <textarea
                           value={newMessage}
                           onChange={(e) => setNewMessage(e.target.value)}
                           placeholder="输入消息内容... 按Enter发送，Shift+Enter换行"
-                          className="w-full px-4 py-3 pr-16 bg-gray-50 dark:bg-gray-600 border-0 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:bg-white dark:focus:bg-gray-500 placeholder-gray-400 dark:placeholder-gray-400 resize-none min-h-[48px] max-h-32 transition-all duration-200"
+                          className="w-full px-3 py-2 pr-14 bg-gray-50 dark:bg-gray-600 border-0 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:bg-white dark:focus:bg-gray-500 placeholder-gray-400 dark:placeholder-gray-400 resize-none min-h-[40px] max-h-28 transition-all duration-200"
                           rows={1}
                           maxLength={1000}
                           style={{ height: 'auto' }}
@@ -1575,7 +1575,7 @@ export function ChatModal({
                     </div>
 
                     {/* 底部信息栏 */}
-                    <div className="flex items-center justify-between px-4 py-2 bg-gray-50 dark:bg-gray-600/50 rounded-b-2xl border-t border-gray-100 dark:border-gray-600">
+                    <div className="flex items-center justify-between px-3 py-1.5 bg-gray-50 dark:bg-gray-600/50 rounded-b-2xl border-t border-gray-100 dark:border-gray-600">
                       <div className="flex items-center space-x-4 text-xs text-gray-500 dark:text-gray-400">
                         <span className="flex items-center space-x-1">
                           <span>📝</span>
diff --git a/src/components/GlobalThemeLoader.tsx b/src/components/GlobalThemeLoader.tsx
new file mode 100644
index 0000000..3e7b12a
--- /dev/null
+++ b/src/components/GlobalThemeLoader.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import { useEffect } from 'react';
+
+// 全局主题加载器组件
+const GlobalThemeLoader = () => {
+  useEffect(() => {
+    const loadGlobalTheme = async () => {
+      try {
+        // 获取全局主题配置
+        const response = await fetch('/api/theme');
+        const result = await response.json();
+
+        console.log('获取到全站主题配置:', result);
+
+        if (result.success && result.data) {
+          const { defaultTheme, customCSS, allowUserCustomization } = result.data;
+
+          // 检查用户是否有自定义设置
+          const userTheme = localStorage.getItem('app-theme');
+          const userCustomCSS = localStorage.getItem('app-custom-css') || '';
+
+          console.log('当前用户设置:', { userTheme, userCustomCSS });
+          console.log('全站配置:', { defaultTheme, customCSS, allowUserCustomization });
+
+          // 如果不允许用户自定义，强制应用全局配置
+          if (!allowUserCustomization) {
+            localStorage.setItem('app-theme', defaultTheme);
+            localStorage.setItem('app-custom-css', customCSS);
+            applyTheme(defaultTheme, customCSS);
+            console.log('强制应用全站配置:', defaultTheme);
+            return;
+          }
+
+          // 智能决定使用哪个主题
+          let finalTheme = defaultTheme;
+          let finalCSS = customCSS;
+
+          // 检查是否需要强制应用全站主题
+          // 如果localStorage中存储的主题与全站默认不同，说明可能是过期的设置，需要更新
+          const shouldForceGlobalTheme = !userTheme || userTheme !== defaultTheme;
+
+          if (shouldForceGlobalTheme) {
+            // 强制应用全站默认配置
+            finalTheme = defaultTheme;
+            finalCSS = customCSS;
+            localStorage.setItem('app-theme', defaultTheme);
+            if (customCSS) {
+              localStorage.setItem('app-custom-css', customCSS);
+            } else {
+              localStorage.removeItem('app-custom-css');
+            }
+            console.log('强制应用全站默认主题:', defaultTheme, '(替换过期设置:', userTheme, ')');
+          } else {
+            // 用户设置与全站默认一致，使用现有设置
+            finalTheme = userTheme;
+            finalCSS = userCustomCSS || customCSS;
+            console.log('保持一致的主题设置:', userTheme);
+          }
+
+          // 应用最终主题
+          applyTheme(finalTheme, finalCSS);
+        }
+      } catch (error) {
+        console.error('加载全局主题配置失败:', error);
+        // 失败时使用本地设置或默认设置
+        const savedTheme = localStorage.getItem('app-theme') || 'default';
+        const savedCustomCSS = localStorage.getItem('app-custom-css') || '';
+        applyTheme(savedTheme, savedCustomCSS);
+      }
+    };
+
+    // 应用主题函数
+    const applyTheme = (themeId: string, css: string = '') => {
+      const html = document.documentElement;
+
+      // 移除所有主题class
+      html.removeAttribute('data-theme');
+
+      // 应用新主题
+      if (themeId !== 'default') {
+        html.setAttribute('data-theme', themeId);
+      }
+
+      // 应用自定义CSS
+      let customStyleEl = document.getElementById('global-theme-css');
+      if (!customStyleEl) {
+        customStyleEl = document.createElement('style');
+        customStyleEl.id = 'global-theme-css';
+        document.head.appendChild(customStyleEl);
+      }
+      customStyleEl.textContent = css;
+    };
+
+    // 立即加载，不延迟
+    loadGlobalTheme();
+  }, []);
+
+  return null; // 这是一个逻辑组件，不渲染任何内容
+};
+
+export default GlobalThemeLoader;
diff --git a/src/components/ThemeManager.tsx b/src/components/ThemeManager.tsx
new file mode 100644
index 0000000..eeebe3c
--- /dev/null
+++ b/src/components/ThemeManager.tsx
@@ -0,0 +1,749 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { ChevronDown, ChevronUp, Palette, Eye, Check } from 'lucide-react';
+
+// CSS模板配置
+const cssTemplates = [
+  {
+    id: 'gradient-bg',
+    name: '渐变背景',
+    description: '为页面添加漂亮的渐变背景',
+    preview: 'body {\n  background: linear-gradient(135deg, \n    #667eea 0%, #764ba2 100%);\n}',
+    css: `/* 渐变背景主题 */
+body {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background-attachment: fixed;
+}
+
+/* 确保内容可读性 */
+.admin-panel, .bg-theme-surface {
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.9) !important;
+}
+
+.dark .admin-panel, .dark .bg-theme-surface {
+  background: rgba(0, 0, 0, 0.8) !important;
+}`
+  },
+  {
+    id: 'image-bg',
+    name: '图片背景',
+    description: '使用自定义图片作为背景',
+    preview: 'body {\n  background-image: url("图片链接");\n  background-size: cover;\n}',
+    css: `/* 图片背景主题 */
+body {
+  background-image: url("https://images.unsplash.com/photo-1519681393784-d120c3b3fd60?ixlib=rb-4.0.3");
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+}
+
+/* 添加遮罩层确保可读性 */
+body::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: -1;
+}
+
+/* 调整内容区域透明度 */
+.admin-panel, .bg-theme-surface {
+  backdrop-filter: blur(15px);
+  background: rgba(255, 255, 255, 0.95) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.dark .admin-panel, .dark .bg-theme-surface {
+  background: rgba(0, 0, 0, 0.85) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}`
+  },
+  {
+    id: 'sidebar-glow',
+    name: '发光侧边栏',
+    description: '为侧边栏添加发光效果',
+    preview: '.sidebar {\n  box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);\n  border-radius: 15px;\n}',
+    css: `/* 发光侧边栏效果 */
+.sidebar, [data-sidebar] {
+  box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
+  border-radius: 15px;
+  border: 1px solid rgba(14, 165, 233, 0.2);
+  backdrop-filter: blur(10px);
+}
+
+/* 侧边栏项目悬停效果 */
+.sidebar a:hover, [data-sidebar] a:hover {
+  background: rgba(14, 165, 233, 0.1);
+  transform: translateX(5px);
+  transition: all 0.3s ease;
+}
+
+/* 活动项目发光 */
+.sidebar [data-active="true"], [data-sidebar] [data-active="true"] {
+  background: rgba(14, 165, 233, 0.15);
+  box-shadow: inset 0 0 10px rgba(14, 165, 233, 0.2);
+  border-radius: 8px;
+}`
+  },
+  {
+    id: 'card-animations',
+    name: '卡片动画',
+    description: '为视频卡片添加动画效果',
+    preview: '.video-card:hover {\n  transform: scale(1.05);\n  box-shadow: 0 10px 25px rgba(0,0,0,0.2);\n}',
+    css: `/* 卡片动画效果 */
+.video-card, [data-video-card] {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 12px;
+}
+
+.video-card:hover, [data-video-card]:hover {
+  transform: translateY(-5px) scale(1.02);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+}
+
+/* 图片悬停效果 */
+.video-card img, [data-video-card] img {
+  transition: transform 0.3s ease;
+  border-radius: 8px;
+}
+
+.video-card:hover img, [data-video-card]:hover img {
+  transform: scale(1.05);
+}
+
+/* 按钮动画 */
+.video-card button, [data-video-card] button {
+  transition: all 0.2s ease;
+}
+
+.video-card button:hover, [data-video-card] button:hover {
+  transform: scale(1.1);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}`
+  },
+  {
+    id: 'glass-theme',
+    name: '毛玻璃主题',
+    description: '现代毛玻璃风格界面',
+    preview: '.glass-effect {\n  backdrop-filter: blur(20px);\n  background: rgba(255, 255, 255, 0.1);\n}',
+    css: `/* 毛玻璃主题 */
+body {
+  background: linear-gradient(45deg, 
+    rgba(59, 130, 246, 0.1) 0%, 
+    rgba(147, 51, 234, 0.1) 50%, 
+    rgba(236, 72, 153, 0.1) 100%);
+}
+
+/* 所有面板使用毛玻璃效果 */
+.admin-panel, .bg-theme-surface, [data-panel] {
+  backdrop-filter: blur(20px);
+  background: rgba(255, 255, 255, 0.15) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.dark .admin-panel, .dark .bg-theme-surface, .dark [data-panel] {
+  background: rgba(0, 0, 0, 0.3) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* 按钮毛玻璃效果 */
+button {
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+button:hover {
+  backdrop-filter: blur(15px);
+  transform: translateY(-1px);
+}`
+  },
+  {
+    id: 'neon-accents',
+    name: '霓虹强调',
+    description: '添加炫酷的霓虹发光效果',
+    preview: '.neon-glow {\n  box-shadow: 0 0 20px currentColor;\n  text-shadow: 0 0 10px currentColor;\n}',
+    css: `/* 霓虹发光主题 */
+:root {
+  --neon-color: #00ff88;
+  --neon-glow: 0 0 20px var(--neon-color);
+}
+
+/* 主要标题霓虹效果 */
+h1, h2, h3 {
+  text-shadow: 0 0 10px var(--neon-color);
+  color: var(--neon-color);
+}
+
+/* 按钮霓虹效果 */
+button:hover, .btn-primary {
+  box-shadow: var(--neon-glow);
+  border: 1px solid var(--neon-color);
+  transition: all 0.3s ease;
+}
+
+/* 输入框聚焦霓虹效果 */
+input:focus, textarea:focus {
+  box-shadow: var(--neon-glow);
+  border-color: var(--neon-color);
+}
+
+/* 卡片边框霓虹效果 */
+.card-hover:hover {
+  box-shadow: var(--neon-glow);
+  border: 1px solid var(--neon-color);
+}
+
+/* 侧边栏活动项霓虹效果 */
+[data-active="true"] {
+  box-shadow: inset var(--neon-glow);
+  background: rgba(0, 255, 136, 0.1);
+}`
+  }
+];
+
+// 主题配置
+const themes = [
+  {
+    id: 'default',
+    name: '默认主题',
+    description: '现代蓝色主题，清新优雅',
+    preview: {
+      bg: '#ffffff',
+      surface: '#f9fafb',
+      accent: '#0ea5e9',
+      text: '#111827',
+      border: '#e5e7eb'
+    }
+  },
+  {
+    id: 'minimal',
+    name: '极简主题',
+    description: '简约黑白，专注内容',
+    preview: {
+      bg: '#ffffff',
+      surface: '#fcfcfc',
+      accent: '#525252',
+      text: '#171717',
+      border: '#e5e5e5'
+    }
+  },
+  {
+    id: 'warm',
+    name: '暖色主题',
+    description: '温暖橙调，舒适护眼',
+    preview: {
+      bg: '#fffdf7',
+      surface: '#fefaf0',
+      accent: '#ea580c',
+      text: '#7c2d12',
+      border: '#fde68a'
+    }
+  },
+  {
+    id: 'fresh',
+    name: '清新主题',
+    description: '自然绿色，清新活力',
+    preview: {
+      bg: '#f7fdf9',
+      surface: '#f0fdf4',
+      accent: '#3fcc71',
+      text: '#14532d',
+      border: '#bbf7d0'
+    }
+  }
+];
+
+interface ThemeManagerProps {
+  showAlert: (config: any) => void;
+  role?: 'user' | 'admin' | 'owner' | null;
+}
+
+const ThemeManager = ({ showAlert, role }: ThemeManagerProps) => {
+  const [currentTheme, setCurrentTheme] = useState('default');
+  const [customCSS, setCustomCSS] = useState('');
+  const [previewMode, setPreviewMode] = useState(false);
+  const [showCustomEditor, setShowCustomEditor] = useState(false);
+  const [globalThemeConfig, setGlobalThemeConfig] = useState<{
+    defaultTheme: string;
+    customCSS: string;
+    allowUserCustomization: boolean;
+  } | null>(null);
+  const [isGlobalMode, setIsGlobalMode] = useState(false);
+
+  const isAdmin = role === 'admin' || role === 'owner';
+
+  // 加载全局主题配置
+  const loadGlobalThemeConfig = async () => {
+    try {
+      const response = await fetch('/api/theme');
+      const result = await response.json();
+      if (result.success) {
+        setGlobalThemeConfig(result.data);
+        return result.data;
+      }
+    } catch (error) {
+      console.error('加载全局主题配置失败:', error);
+    }
+    return null;
+  };
+
+  // 保存全局主题配置
+  const saveGlobalThemeConfig = async (config: {
+    defaultTheme: string;
+    customCSS: string;
+    allowUserCustomization: boolean;
+  }) => {
+    try {
+      const response = await fetch('/api/admin/theme', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(config),
+      });
+      const result = await response.json();
+      if (result.success) {
+        setGlobalThemeConfig(result.data);
+        showAlert({
+          type: 'success',
+          title: '全局主题配置已保存',
+          message: '所有用户将使用新的主题配置',
+          timer: 3000
+        });
+        return true;
+      } else {
+        throw new Error(result.error || '保存失败');
+      }
+    } catch (error) {
+      showAlert({
+        type: 'error',
+        title: '保存全局主题配置失败',
+        message: error instanceof Error ? error.message : '未知错误',
+        timer: 3000
+      });
+      return false;
+    }
+  };
+
+  // 从localStorage加载当前主题
+  useEffect(() => {
+    // 确保在客户端环境中执行
+    if (typeof window === 'undefined') return;
+
+    const initTheme = async () => {
+      // 加载全局配置
+      const globalConfig = await loadGlobalThemeConfig();
+
+      if (isGlobalMode && globalConfig) {
+        // 使用全局配置
+        setCurrentTheme(globalConfig.defaultTheme);
+        setCustomCSS(globalConfig.customCSS);
+        applyTheme(globalConfig.defaultTheme, globalConfig.customCSS);
+      } else {
+        // 使用本地配置
+        const savedTheme = localStorage.getItem('app-theme') || globalConfig?.defaultTheme || 'default';
+        const savedCustomCSS = localStorage.getItem('app-custom-css') || '';
+        setCurrentTheme(savedTheme);
+        setCustomCSS(savedCustomCSS);
+        applyTheme(savedTheme, savedCustomCSS);
+      }
+    };
+
+    initTheme();
+  }, [isGlobalMode]);
+
+  // 应用主题
+  const applyTheme = (themeId: string, css: string = '') => {
+    const html = document.documentElement;
+
+    // 移除所有主题class
+    html.removeAttribute('data-theme');
+
+    // 应用新主题
+    if (themeId !== 'default') {
+      html.setAttribute('data-theme', themeId);
+    }
+
+    // 应用自定义CSS
+    let customStyleEl = document.getElementById('custom-theme-css');
+    if (!customStyleEl) {
+      customStyleEl = document.createElement('style');
+      customStyleEl.id = 'custom-theme-css';
+      document.head.appendChild(customStyleEl);
+    }
+    customStyleEl.textContent = css;
+  };
+
+  // 切换主题
+  const handleThemeChange = async (themeId: string) => {
+    setCurrentTheme(themeId);
+    applyTheme(themeId, customCSS);
+
+    if (isGlobalMode && isAdmin) {
+      // 保存到全局配置
+      const success = await saveGlobalThemeConfig({
+        defaultTheme: themeId,
+        customCSS: customCSS,
+        allowUserCustomization: globalThemeConfig?.allowUserCustomization ?? true,
+      });
+
+      // 如果保存成功，立即更新本地全局配置状态
+      if (success) {
+        setGlobalThemeConfig({
+          defaultTheme: themeId,
+          customCSS: customCSS,
+          allowUserCustomization: globalThemeConfig?.allowUserCustomization ?? true,
+        });
+      }
+    } else {
+      // 保存到本地
+      localStorage.setItem('app-theme', themeId);
+    }
+
+    const theme = themes.find(t => t.id === themeId);
+    showAlert({
+      type: 'success',
+      title: isGlobalMode ? '全局主题已设置' : '主题已切换',
+      message: `已切换到${theme?.name}`,
+      timer: 2000
+    });
+  };
+
+  // 预览主题
+  const handleThemePreview = (themeId: string) => {
+    if (!previewMode) {
+      setPreviewMode(true);
+      applyTheme(themeId, customCSS);
+
+      // 3秒后恢复原主题
+      setTimeout(() => {
+        setPreviewMode(false);
+        applyTheme(currentTheme, customCSS);
+      }, 3000);
+    }
+  };
+
+  // 应用自定义CSS
+  const handleCustomCSSApply = async () => {
+    try {
+      applyTheme(currentTheme, customCSS);
+
+      if (isGlobalMode && isAdmin) {
+        // 保存到全局配置
+        const success = await saveGlobalThemeConfig({
+          defaultTheme: currentTheme,
+          customCSS: customCSS,
+          allowUserCustomization: globalThemeConfig?.allowUserCustomization ?? true,
+        });
+
+        // 如果保存成功，立即更新本地全局配置状态
+        if (success) {
+          setGlobalThemeConfig({
+            defaultTheme: currentTheme,
+            customCSS: customCSS,
+            allowUserCustomization: globalThemeConfig?.allowUserCustomization ?? true,
+          });
+        }
+      } else {
+        // 保存到本地
+        localStorage.setItem('app-custom-css', customCSS);
+        showAlert({
+          type: 'success',
+          title: '自定义样式已应用',
+          message: '您的自定义CSS已生效',
+          timer: 2000
+        });
+      }
+    } catch (error) {
+      showAlert({
+        type: 'error',
+        title: '样式应用失败',
+        message: 'CSS语法可能有误，请检查后重试',
+        timer: 3000
+      });
+    }
+  };
+
+  // 重置自定义CSS
+  const handleCustomCSSReset = () => {
+    setCustomCSS('');
+    applyTheme(currentTheme, '');
+    localStorage.removeItem('app-custom-css');
+
+    showAlert({
+      type: 'success',
+      title: '自定义样式已重置',
+      timer: 2000
+    });
+  };
+
+  // 应用模板CSS
+  const handleApplyTemplate = (templateCSS: string, templateName: string) => {
+    setCustomCSS(templateCSS);
+    showAlert({
+      type: 'success',
+      title: '模板已复制',
+      message: `${templateName}模板已复制到编辑器`,
+      timer: 2000
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 管理员控制面板 */}
+      {isAdmin && (
+        <div className="bg-theme-surface border border-theme-border rounded-lg p-4">
+          <h3 className="text-lg font-semibold text-theme-text mb-4 flex items-center gap-2">
+            <Palette className="h-5 w-5" />
+            管理员主题设置
+          </h3>
+
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <label className="text-sm font-medium text-theme-text">配置模式</label>
+                <p className="text-xs text-theme-text-secondary mt-1">
+                  选择设置个人主题还是全站默认主题
+                </p>
+              </div>
+              <div className="flex items-center gap-3">
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="configMode"
+                    checked={!isGlobalMode}
+                    onChange={() => setIsGlobalMode(false)}
+                    className="w-4 h-4 text-theme-accent"
+                  />
+                  <span className="text-sm text-theme-text">个人设置</span>
+                </label>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="configMode"
+                    checked={isGlobalMode}
+                    onChange={() => setIsGlobalMode(true)}
+                    className="w-4 h-4 text-theme-accent"
+                  />
+                  <span className="text-sm text-theme-text">全站默认</span>
+                </label>
+              </div>
+            </div>
+
+            {globalThemeConfig && (
+              <div className="p-3 bg-theme-accent/5 border border-theme-accent/20 rounded-lg">
+                <div className="text-sm text-theme-text">
+                  <strong>当前全站配置：</strong>
+                </div>
+                <div className="text-xs text-theme-text-secondary mt-1">
+                  默认主题: {themes.find(t => t.id === globalThemeConfig.defaultTheme)?.name || globalThemeConfig.defaultTheme}
+                  {globalThemeConfig.customCSS && ' | 包含自定义CSS'}
+                  {!globalThemeConfig.allowUserCustomization && ' | 禁止用户自定义'}
+                </div>
+              </div>
+            )}
+
+            {isGlobalMode && (
+              <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-700">
+                <div className="flex items-center gap-2 text-yellow-800 dark:text-yellow-200">
+                  <span className="text-sm font-medium">⚠️ 全站模式</span>
+                </div>
+                <p className="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
+                  在此模式下的更改将影响所有用户的默认主题配置
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 主题选择器 */}
+      <div>
+        <h3 className="text-lg font-semibold text-theme-text mb-4 flex items-center gap-2">
+          <Palette className="h-5 w-5" />
+          {isGlobalMode && isAdmin ? '全站默认主题' : '主题选择'}
+        </h3>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {themes.map((theme) => (
+            <div
+              key={theme.id}
+              className={`relative p-4 border-2 rounded-xl cursor-pointer transition-all ${currentTheme === theme.id
+                ? 'border-theme-accent bg-theme-accent/5'
+                : 'border-theme-border bg-theme-surface hover:border-theme-accent/50'
+                }`}
+              onClick={() => handleThemeChange(theme.id)}
+            >
+              {/* 主题预览 */}
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex space-x-1">
+                  <div className="w-4 h-4 rounded-full" style={{ backgroundColor: theme.preview.bg }} />
+                  <div className="w-4 h-4 rounded-full" style={{ backgroundColor: theme.preview.surface }} />
+                  <div className="w-4 h-4 rounded-full" style={{ backgroundColor: theme.preview.accent }} />
+                </div>
+                <div className="flex gap-1">
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleThemePreview(theme.id);
+                    }}
+                    className="p-1 text-theme-text-secondary hover:text-theme-accent transition-colors"
+                    title="预览主题"
+                    disabled={previewMode}
+                  >
+                    <Eye className="h-4 w-4" />
+                  </button>
+                  {currentTheme === theme.id && (
+                    <Check className="h-4 w-4 text-theme-accent" />
+                  )}
+                </div>
+              </div>
+
+              <h4 className="font-medium text-theme-text">{theme.name}</h4>
+              <p className="text-sm text-theme-text-secondary mt-1">{theme.description}</p>
+            </div>
+          ))}
+        </div>
+
+        {previewMode && (
+          <div className="mt-4 p-3 bg-theme-info/10 border border-theme-info/20 rounded-lg">
+            <p className="text-sm text-theme-info">正在预览主题，3秒后将自动恢复...</p>
+          </div>
+        )}
+      </div>
+
+      {/* 自定义CSS编辑器 */}
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-theme-text flex items-center gap-2">
+            <Palette className="h-5 w-5" />
+            自定义样式
+          </h3>
+          <button
+            onClick={() => setShowCustomEditor(!showCustomEditor)}
+            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-theme-surface border border-theme-border rounded-lg hover:bg-theme-accent/5 transition-colors"
+          >
+            {showCustomEditor ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+            {showCustomEditor ? '收起编辑器' : '展开编辑器'}
+          </button>
+        </div>
+
+        {showCustomEditor && (
+          <div className="space-y-4">
+            <div className="text-sm text-theme-text-secondary bg-theme-surface p-3 rounded-lg border border-theme-border">
+              <p className="mb-2">💡 <strong>使用提示：</strong></p>
+              <ul className="space-y-1 text-xs">
+                <li>• 使用CSS变量覆盖主题颜色：<code className="bg-theme-bg px-1 rounded">--color-theme-accent: 255, 0, 0;</code></li>
+                <li>• 使用Tailwind类名：<code className="bg-theme-bg px-1 rounded">{`.my-class { @apply bg-red-500; }`}</code></li>
+                <li>• 自定义组件样式：<code className="bg-theme-bg px-1 rounded">{`.admin-panel { border-radius: 20px; }`}</code></li>
+                <li>• 修改会实时生效，请谨慎使用</li>
+              </ul>
+            </div>
+
+            <div className="relative">
+              <textarea
+                value={customCSS}
+                onChange={(e) => setCustomCSS(e.target.value)}
+                placeholder="/* 在此输入您的自定义CSS */
+:root {
+  --color-theme-accent: 255, 0, 0; /* 红色主题色 */
+}
+
+.admin-panel {
+  border-radius: 20px;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+}
+
+/* 使用Tailwind类名 */
+.custom-button {
+  @apply bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-xl;
+}"
+                className="w-full h-64 p-4 bg-theme-surface border border-theme-border rounded-lg text-sm font-mono text-theme-text placeholder-theme-text-secondary resize-none focus:outline-none focus:ring-2 focus:ring-theme-accent/50"
+              />
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                onClick={handleCustomCSSApply}
+                className="px-4 py-2 bg-theme-accent text-white rounded-lg hover:opacity-90 transition-opacity"
+              >
+                应用样式
+              </button>
+              <button
+                onClick={handleCustomCSSReset}
+                className="px-4 py-2 bg-theme-surface border border-theme-border text-theme-text rounded-lg hover:bg-theme-accent/5 transition-colors"
+              >
+                重置样式
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* CSS 模板库 */}
+      <div className="bg-theme-surface border border-theme-border rounded-lg p-4">
+        <h4 className="font-medium text-theme-text mb-3 flex items-center gap-2">
+          <Palette className="h-4 w-4" />
+          🎨 样式模板库
+        </h4>
+        <p className="text-sm text-theme-text-secondary mb-4">选择预设模板快速应用炫酷效果，也可以在此基础上进行自定义修改</p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          {cssTemplates.map((template) => (
+            <div key={template.id} className="p-3 border border-theme-border rounded-lg hover:bg-theme-accent/5 transition-colors group">
+              <div className="flex items-center justify-between mb-2">
+                <h5 className="text-sm font-medium text-theme-text">{template.name}</h5>
+                <button
+                  onClick={() => handleApplyTemplate(template.css, template.name)}
+                  className="text-xs px-2 py-1 bg-theme-accent text-white rounded hover:opacity-90 transition-opacity opacity-0 group-hover:opacity-100"
+                >
+                  应用
+                </button>
+              </div>
+              <p className="text-xs text-theme-text-secondary mb-2">{template.description}</p>
+              <div className="text-xs bg-theme-bg rounded p-2 max-h-16 overflow-y-auto">
+                <code className="whitespace-pre-wrap text-theme-text-secondary">{template.preview}</code>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-4 p-3 bg-theme-accent/5 border border-theme-accent/20 rounded-lg">
+          <p className="text-xs text-theme-text-secondary">
+            <strong>💡 使用提示：</strong> 点击模板的"应用"按钮将代码复制到自定义CSS编辑器，然后可以在此基础上进行修改。记得点击"应用样式"按钮生效。
+          </p>
+        </div>
+      </div>
+
+      {/* 使用说明 */}
+      <div className="bg-theme-surface border border-theme-border rounded-lg p-4">
+        <h4 className="font-medium text-theme-text mb-2">📖 主题定制指南</h4>
+        <div className="text-sm text-theme-text-secondary space-y-2">
+          <p><strong>内置主题：</strong>选择预设主题即可一键切换整体风格</p>
+          <p><strong>自定义CSS：</strong>通过CSS变量或直接样式实现个性化定制</p>
+          <p><strong>样式模板：</strong>使用预设模板快速实现炫酷效果</p>
+          <p><strong>主题变量：</strong></p>
+          <ul className="text-xs space-y-1 ml-4 mt-1">
+            <li>• <code className="bg-theme-bg px-1 rounded">--color-theme-bg</code> - 背景色</li>
+            <li>• <code className="bg-theme-bg px-1 rounded">--color-theme-surface</code> - 卡片背景</li>
+            <li>• <code className="bg-theme-bg px-1 rounded">--color-theme-accent</code> - 主题色</li>
+            <li>• <code className="bg-theme-bg px-1 rounded">--color-theme-text</code> - 主文本色</li>
+            <li>• <code className="bg-theme-bg px-1 rounded">--color-theme-border</code> - 边框色</li>
+          </ul>
+          <p><strong>常用技巧：</strong></p>
+          <ul className="text-xs space-y-1 ml-4 mt-1">
+            <li>• 修改背景：<code className="bg-theme-bg px-1 rounded">{`body { background: linear-gradient(...); }`}</code></li>
+            <li>• 使用Tailwind：<code className="bg-theme-bg px-1 rounded">{`.my-class { @apply bg-red-500; }`}</code></li>
+            <li>• 组合多个模板效果获得独特样式</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ThemeManager;
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index fe6ce0e..4b08987 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -94,22 +94,27 @@ export function ThemeToggle() {
     });
   };
 
+  // 检查是否在登录页面
+  const isLoginPage = pathname === '/login';
+
   return (
     <>
       <div className={`flex items-center ${isMobile ? 'space-x-1' : 'space-x-2'}`}>
-        {/* 聊天按钮 */}
-        <button
-          onClick={() => setIsChatModalOpen(true)}
-          className={`${isMobile ? 'w-8 h-8 p-1.5' : 'w-10 h-10 p-2'} rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200/50 dark:text-gray-300 dark:hover:bg-gray-700/50 transition-colors relative`}
-          aria-label='Open chat'
-        >
-          <MessageCircle className='w-full h-full' />
-          {messageCount > 0 && (
-            <span className={`absolute ${isMobile ? '-top-0.5 -right-0.5 w-4 h-4 text-xs' : '-top-1 -right-1 w-5 h-5 text-xs'} bg-red-500 text-white rounded-full flex items-center justify-center`}>
-              {messageCount > 99 ? '99+' : messageCount}
-            </span>
-          )}
-        </button>
+        {/* 聊天按钮 - 在登录页面不显示 */}
+        {!isLoginPage && (
+          <button
+            onClick={() => setIsChatModalOpen(true)}
+            className={`${isMobile ? 'w-8 h-8 p-1.5' : 'w-10 h-10 p-2'} rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200/50 dark:text-gray-300 dark:hover:bg-gray-700/50 transition-colors relative`}
+            aria-label='Open chat'
+          >
+            <MessageCircle className='w-full h-full' />
+            {messageCount > 0 && (
+              <span className={`absolute ${isMobile ? '-top-0.5 -right-0.5 w-4 h-4 text-xs' : '-top-1 -right-1 w-5 h-5 text-xs'} bg-red-500 text-white rounded-full flex items-center justify-center`}>
+                {messageCount > 99 ? '99+' : messageCount}
+              </span>
+            )}
+          </button>
+        )}
 
         {/* 主题切换按钮 */}
         <button
@@ -125,14 +130,16 @@ export function ThemeToggle() {
         </button>
       </div>
 
-      {/* 聊天模态框 */}
-      <ChatModal
-        isOpen={isChatModalOpen}
-        onClose={() => setIsChatModalOpen(false)}
-        onMessageCountChange={handleMessageCountFromModal}
-        onChatCountReset={handleChatCountReset}
-        onFriendRequestCountReset={handleFriendRequestCountReset}
-      />
+      {/* 聊天模态框 - 在登录页面不渲染 */}
+      {!isLoginPage && (
+        <ChatModal
+          isOpen={isChatModalOpen}
+          onClose={() => setIsChatModalOpen(false)}
+          onMessageCountChange={handleMessageCountFromModal}
+          onChatCountReset={handleChatCountReset}
+          onFriendRequestCountReset={handleFriendRequestCountReset}
+        />
+      )}
     </>
   );
 }
diff --git a/src/components/VideoCard.tsx b/src/components/VideoCard.tsx
index 64bc7ce..61d5cd9 100644
--- a/src/components/VideoCard.tsx
+++ b/src/components/VideoCard.tsx
@@ -228,6 +228,11 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
   );
 
   const handleClick = useCallback(() => {
+    // 如果从搜索页面点击，设置标记以便返回时使用缓存
+    if (from === 'search' && typeof window !== 'undefined') {
+      sessionStorage.setItem('fromPlayPage', 'true');
+    }
+
     if (origin === 'live' && actualSource && actualId) {
       // 直播内容跳转到直播页面
       const url = `/live?source=${actualSource.replace('live_', '')}&id=${actualId.replace('live_', '')}`;
@@ -270,6 +275,11 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
 
   // 新标签页播放处理函数
   const handlePlayInNewTab = useCallback(() => {
+    // 如果从搜索页面点击，设置标记以便返回时使用缓存
+    if (from === 'search' && typeof window !== 'undefined') {
+      sessionStorage.setItem('fromPlayPage', 'true');
+    }
+
     if (origin === 'live' && actualSource && actualId) {
       // 直播内容跳转到直播页面
       const url = `/live?source=${actualSource.replace('live_', '')}&id=${actualId.replace('live_', '')}`;
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
new file mode 100644
index 0000000..e775ecd
--- /dev/null
+++ b/src/hooks/useTheme.ts
@@ -0,0 +1,88 @@
+// 全局主题Hook - 用于在任何组件中初始化和使用主题
+import { useEffect } from 'react';
+
+export const useThemeInit = () => {
+  useEffect(() => {
+    // 确保在客户端环境中执行
+    if (typeof window === 'undefined') return;
+
+    try {
+      // 从localStorage获取保存的主题
+      const savedTheme = localStorage.getItem('app-theme') || 'default';
+      const savedCustomCSS = localStorage.getItem('app-custom-css') || '';
+
+      // 立即应用主题到HTML元素
+      const html = document.documentElement;
+
+      // 移除所有主题属性
+      html.removeAttribute('data-theme');
+
+      // 应用保存的主题
+      if (savedTheme !== 'default') {
+        html.setAttribute('data-theme', savedTheme);
+      }
+
+      // 应用自定义CSS
+      if (savedCustomCSS) {
+        let customStyleEl = document.getElementById('custom-theme-css');
+        if (!customStyleEl) {
+          customStyleEl = document.createElement('style');
+          customStyleEl.id = 'custom-theme-css';
+          document.head.appendChild(customStyleEl);
+        }
+        customStyleEl.textContent = savedCustomCSS;
+      }
+
+      console.log(`主题已初始化: ${savedTheme}`);
+    } catch (error) {
+      console.error('主题初始化失败:', error);
+    }
+  }, []);
+};
+
+export const useTheme = () => {
+  const applyTheme = (themeId: string, css: string = '') => {
+    if (typeof window === 'undefined') return;
+
+    const html = document.documentElement;
+
+    // 移除所有主题class
+    html.removeAttribute('data-theme');
+
+    // 应用新主题
+    if (themeId !== 'default') {
+      html.setAttribute('data-theme', themeId);
+    }
+
+    // 应用自定义CSS
+    let customStyleEl = document.getElementById('custom-theme-css');
+    if (!customStyleEl) {
+      customStyleEl = document.createElement('style');
+      customStyleEl.id = 'custom-theme-css';
+      document.head.appendChild(customStyleEl);
+    }
+    customStyleEl.textContent = css;
+
+    // 保存到localStorage
+    localStorage.setItem('app-theme', themeId);
+    localStorage.setItem('app-custom-css', css);
+  };
+
+  const getCurrentTheme = () => {
+    if (typeof window === 'undefined') return 'default';
+    return localStorage.getItem('app-theme') || 'default';
+  };
+
+  const getCurrentCustomCSS = () => {
+    if (typeof window === 'undefined') return '';
+    return localStorage.getItem('app-custom-css') || '';
+  };
+
+  return {
+    applyTheme,
+    getCurrentTheme,
+    getCurrentCustomCSS
+  };
+};
+
+
diff --git a/src/lib/admin.types.ts b/src/lib/admin.types.ts
index bd24c8f..931eb3a 100644
--- a/src/lib/admin.types.ts
+++ b/src/lib/admin.types.ts
@@ -17,6 +17,15 @@ export interface AdminConfig {
     DisableYellowFilter: boolean;
     FluidSearch: boolean;
     RequireDeviceCode: boolean;
+    CustomTheme?: {
+      selectedTheme: string;
+      customCSS: string;
+    };
+  };
+  ThemeConfig?: {
+    defaultTheme: 'default' | 'minimal' | 'warm' | 'fresh';
+    customCSS: string;
+    allowUserCustomization: boolean;
   };
   UserConfig: {
     Users: {
diff --git a/src/lib/changelog.ts b/src/lib/changelog.ts
index e949fd5..2707d69 100644
--- a/src/lib/changelog.ts
+++ b/src/lib/changelog.ts
@@ -10,6 +10,20 @@ export interface ChangelogEntry {
 }
 
 export const changelog: ChangelogEntry[] = [
+  {
+    version: "8.9.5",
+    date: "2025-09-21",
+    added: [
+      "添加内置主题，支持用户自定义CSS"
+    ],
+    changed: [
+      "优化搜索页面缓存机制"
+    ],
+    fixed: [
+      "镜像健康检查问题",
+      "弹幕功能适配移动端"
+    ]
+  },
   {
     version: "8.9.0",
     date: "2025-09-15",
diff --git a/src/middleware.ts b/src/middleware.ts
index b672d79..3070d7b 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -133,6 +133,6 @@ function shouldSkipAuth(pathname: string): boolean {
 // 配置middleware匹配规则
 export const config = {
   matcher: [
-    '/((?!_next/static|_next/image|favicon.ico|login|warning|api/login|api/register|api/logout|api/cron|api/server-config).*)',
+    '/((?!_next/static|_next/image|favicon.ico|login|warning|api/login|api/register|api/logout|api/cron|api/server-config|api/theme).*)',
   ],
 };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6a68fdd..3038c1c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -20,18 +20,30 @@ const config: Config = {
       },
       colors: {
         primary: {
-          50: '#f0f9ff',
-          100: '#e0f2fe',
-          200: '#bae6fd',
-          300: '#7dd3fc',
-          400: '#38bdf8',
-          500: '#0ea5e9',
-          600: '#0284c7',
-          700: '#0369a1',
-          800: '#075985',
-          900: '#0c4a6e',
+          50: 'rgb(var(--color-primary-50) / <alpha-value>)',
+          100: 'rgb(var(--color-primary-100) / <alpha-value>)',
+          200: 'rgb(var(--color-primary-200) / <alpha-value>)',
+          300: 'rgb(var(--color-primary-300) / <alpha-value>)',
+          400: 'rgb(var(--color-primary-400) / <alpha-value>)',
+          500: 'rgb(var(--color-primary-500) / <alpha-value>)',
+          600: 'rgb(var(--color-primary-600) / <alpha-value>)',
+          700: 'rgb(var(--color-primary-700) / <alpha-value>)',
+          800: 'rgb(var(--color-primary-800) / <alpha-value>)',
+          900: 'rgb(var(--color-primary-900) / <alpha-value>)',
         },
-        dark: '#222222',
+        dark: 'rgb(var(--color-dark) / <alpha-value>)',
+        // 主题颜色系统
+        'theme-bg': 'rgb(var(--color-theme-bg) / <alpha-value>)',
+        'theme-surface': 'rgb(var(--color-theme-surface) / <alpha-value>)',
+        'theme-accent': 'rgb(var(--color-theme-accent) / <alpha-value>)',
+        'theme-text': 'rgb(var(--color-theme-text) / <alpha-value>)',
+        'theme-text-secondary': 'rgb(var(--color-theme-text-secondary) / <alpha-value>)',
+        'theme-border': 'rgb(var(--color-theme-border) / <alpha-value>)',
+        // 扩展主题颜色
+        'theme-success': 'rgb(var(--color-theme-success) / <alpha-value>)',
+        'theme-warning': 'rgb(var(--color-theme-warning) / <alpha-value>)',
+        'theme-error': 'rgb(var(--color-theme-error) / <alpha-value>)',
+        'theme-info': 'rgb(var(--color-theme-info) / <alpha-value>)',
       },
       keyframes: {
         flicker: {