Dynamically adjust theme color based on dark or light mode

abetlen · Apr 25, 2024 · 8017582 · 8017582
1 parent 302d173
commit 8017582
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -2602,6 +2602,17 @@ export default function Home() {
       console.log("Service Worker not supported");
     }
   }, []);
+  useEffect(() => {
+    if (theme === "dark") {
+      document
+        .querySelector('meta[name="theme-color"]')
+        ?.setAttribute("content", "#0f172a");
+    } else {
+      document
+        .querySelector('meta[name="theme-color"]')
+        ?.setAttribute("content", "#fafaf9");
+    }
+  }, [theme]);
   return (
     <div
       className="flex h-dvh flex-col items-center justify-between p-0 sm:p-2 lg:p-4 bg-stone-200 dark:bg-slate-800 relative overflow-hidden text-slate-800 dark:text-slate-200"