From cf42e7c0569f5be3c2c1e3244582dc7c17c2ab00 Mon Sep 17 00:00:00 2001
From: shinya <kobayashi_shinya@outlook.com>
Date: Thu, 26 Jun 2025 22:41:30 +0800
Subject: [PATCH] fix: dynamic theme color

---
 src/app/layout.tsx               |  4 ----
 src/components/ScrollableRow.tsx |  2 +-
 src/components/ThemeToggle.tsx   | 25 ++++++++++++++++++++-----
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 98e279d..7c179c0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -12,10 +12,6 @@ export const metadata: Metadata = {
   title: 'MoonTV',
   description: '影视聚合',
   manifest: '/manifest.json',
-  themeColor: [
-    { media: '(prefers-color-scheme: light)', color: '#f9fbfe' },
-    { media: '(prefers-color-scheme: dark)', color: '#0C111C' },
-  ],
 };
 
 export default function RootLayout({
diff --git a/src/components/ScrollableRow.tsx b/src/components/ScrollableRow.tsx
index 0cdba85..ad4760e 100644
--- a/src/components/ScrollableRow.tsx
+++ b/src/components/ScrollableRow.tsx
@@ -102,7 +102,7 @@ export default function ScrollableRow({
     >
       <div
         ref={containerRef}
-        className='flex space-x-6 overflow-x-auto scrollbar-hide pb-10 sm:pb-14'
+        className='flex space-x-6 overflow-x-auto scrollbar-hide pb-12 sm:pb-14'
         onScroll={checkScroll}
       >
         {children}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 41f0f75..6525407 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-explicit-any,react-hooks/exhaustive-deps */
 
 'use client';
 
@@ -8,10 +8,23 @@ import { useEffect, useState } from 'react';
 
 export function ThemeToggle() {
   const [mounted, setMounted] = useState(false);
-  const { theme, setTheme } = useTheme();
+  const { setTheme, resolvedTheme } = useTheme();
+
+  const setThemeColor = (theme?: string) => {
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (!meta) {
+      const meta = document.createElement('meta');
+      meta.name = 'theme-color';
+      meta.content = theme === 'dark' ? '#0c111c' : '#f9fbfe';
+      document.head.appendChild(meta);
+    } else {
+      meta.setAttribute('content', theme === 'dark' ? '#0c111c' : '#f9fbfe');
+    }
+  };
 
   useEffect(() => {
     setMounted(true);
+    setThemeColor(resolvedTheme);
   }, []);
 
   if (!mounted) {
@@ -21,13 +34,15 @@ export function ThemeToggle() {
 
   const toggleTheme = () => {
     // 检查浏览器是否支持 View Transitions API
+    const targetTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
+    setThemeColor(targetTheme);
     if (!(document as any).startViewTransition) {
-      setTheme(theme === 'dark' ? 'light' : 'dark');
+      setTheme(targetTheme);
       return;
     }
 
     (document as any).startViewTransition(() => {
-      setTheme(theme === 'dark' ? 'light' : 'dark');
+      setTheme(targetTheme);
     });
   };
 
@@ -37,7 +52,7 @@ export function ThemeToggle() {
       className='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'
       aria-label='Toggle theme'
     >
-      {theme === 'dark' ? (
+      {resolvedTheme === 'dark' ? (
         <Sun className='w-full h-full' />
       ) : (
         <Moon className='w-full h-full' />