feat: add PWA support with manifest, icons, and theme color management

src/components/ThemeColorManager.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { useTheme } from "@/hooks/use-theme"
+import { useEffect } from "react"
+
+export function ThemeColorManager() {
+  const { theme } = useTheme()
+
+  useEffect(() => {
+    const updateThemeColor = () => {
+      const currentTheme = 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])
+
+  return null
+}

src/main.tsx

@@ -4,6 +4,7 @@ import ReactDOM from "react-dom/client"
 import { Toaster } from "sonner"
 
 import App from "./App"
+import { ThemeColorManager } from "./components/ThemeColorManager"
 import { ThemeProvider } from "./components/ThemeProvider"
 import { MotionProvider } from "./components/motion/motion-provider"
 import { SortProvider } from "./context/sort-provider"
@@ -18,6 +19,7 @@ const queryClient = new QueryClient()
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <MotionProvider>
     <ThemeProvider storageKey="vite-ui-theme">
+      <ThemeColorManager />
       <QueryClientProvider client={queryClient}>
         <WebSocketProvider url="/api/v1/ws/server">
           <StatusProvider>