fix: theme color

app/layout.tsx

@@ -1,5 +1,6 @@
 // @auto-i18n-check. Please do not delete the line.
 import { MotionProvider } from "@/components/motion/motion-provider";
+import { ThemeColorManager } from "@/components/ThemeColorManager";
 import getEnv from "@/lib/env-entry";
 import { FilterProvider } from "@/lib/network-filter-context";
 import { StatusProvider } from "@/lib/status-context";
@@ -81,7 +82,10 @@ export default async function LocaleLayout({
           >
             <NextIntlClientProvider messages={messages}>
               <FilterProvider>
-                <StatusProvider>{children}</StatusProvider>
+                <StatusProvider>
+                  <ThemeColorManager />
+                  {children}
+                </StatusProvider>
               </FilterProvider>
             </NextIntlClientProvider>
           </ThemeProvider>

components/ThemeColorManager.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useTheme } from 'next-themes';
+
+export function ThemeColorManager() {
+  const { theme, systemTheme } = useTheme();
+
+  useEffect(() => {
+    const updateThemeColor = () => {
+      const currentTheme = theme === 'system' ? systemTheme : theme;
+      const meta = document.querySelector('meta[name="theme-color"]');
+      
+      if (!meta) {
+        const newMeta = document.createElement('meta');
+        newMeta.name = 'theme-color';
+        document.head.appendChild(newMeta);
+      }
+      
+      const themeColor = currentTheme === 'dark' 
+        ? 'hsl(30 15% 8%)' // 深色模式背景色
+        : 'hsl(0 0% 98%)'; // 浅色模式背景色
+      
+      document.querySelector('meta[name="theme-color"]')?.setAttribute('content', themeColor);
+    };
+
+    // Update on mount and theme change
+    updateThemeColor();
+
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', updateThemeColor);
+
+    return () => mediaQuery.removeEventListener('change', updateThemeColor);
+  }, [theme, systemTheme]);
+
+  return null;
+}

public/manifest.json

@@ -14,8 +14,8 @@
       "type": "image/png"
     }
   ],
-  "theme_color": "#000000",
-  "background_color": "#000000",
+  "theme_color": "hsl(0 0% 98%)",
+  "background_color": "hsl(0 0% 98%)",
   "start_url": "/",
   "display": "standalone",
   "orientation": "portrait"