From a3877736978e99e534f703de68ca340084d2fca3 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Tue, 3 Dec 2024 09:45:55 +0800
Subject: [PATCH]  fix: theme color

---
 app/layout.tsx                   |  6 ++++-
 components/ThemeColorManager.tsx | 38 ++++++++++++++++++++++++++++++++
 public/manifest.json             |  4 ++--
 3 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 components/ThemeColorManager.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 8d6e950..2021515 100644
--- a/app/layout.tsx
+++ b/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>
diff --git a/components/ThemeColorManager.tsx b/components/ThemeColorManager.tsx
new file mode 100644
index 0000000..46b9148
--- /dev/null
+++ b/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;
+}
diff --git a/public/manifest.json b/public/manifest.json
index 7d0dadc..6f01c1f 100644
--- a/public/manifest.json
+++ b/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"