fix theme color dynamically

src/app/layout.tsx

@@ -36,13 +36,6 @@ export const metadata: Metadata = {
   ],
 };
 
-export const viewport: Viewport = {
-  themeColor: [
-    { color: "#EEF2F8", media: "(prefers-color-scheme: light)" },
-    { color: "#171717", media: "(prefers-color-scheme: dark)" },
-  ]
-}
-
 export default async function RootLayout({
   children,
 }: Readonly<{

src/components/layout/app-layout.tsx

@@ -1,11 +1,13 @@
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { AppSidebar } from "./app-sidebar";
+import { AppThemeColor } from "./app-theme-color";
 
 export function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <SidebarProvider>
+      <AppThemeColor />
       <AppSidebar />
-      <main className="relative grow">
+      <main className="grow relative">
         <div className="absolute inset-0">
           {children}
         </div>

src/components/layout/app-theme-color.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { useTheme } from "next-themes"
+import { useEffect } from "react"
+
+const THEME_COLOR_DARK = '#171717'
+const THEME_COLOR_LIGHT = '#EEF2F8'
+
+// Set the theme color meta tag based on the current theme
+export function AppThemeColor() {
+  const { resolvedTheme } = useTheme()
+
+  useEffect(() => {
+    let themeColorMeta = document.querySelector(
+      'meta[name="theme-color"]',
+    ) as HTMLMetaElement
+
+    if (!themeColorMeta) {
+      themeColorMeta = document.createElement('meta')
+      themeColorMeta.name = 'theme-color'
+      document.head.appendChild(themeColorMeta)
+    }
+
+    themeColorMeta.content = resolvedTheme === 'dark' ? THEME_COLOR_DARK : THEME_COLOR_LIGHT
+  }, [resolvedTheme])
+
+  return null
+}