From 299b1efe8bb831e8f55c362f9e9cf732ee4c2e9e Mon Sep 17 00:00:00 2001
From: Nathan Lamy <nathan.lamycharrier@gmail.com>
Date: Thu, 31 Jul 2025 01:13:01 +0200
Subject: [PATCH] ui: switch theme color to match dark mode

---
 app/components/theme-provider.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/components/theme-provider.tsx b/app/components/theme-provider.tsx
index 38e5209..801580e 100644
--- a/app/components/theme-provider.tsx
+++ b/app/components/theme-provider.tsx
@@ -28,6 +28,11 @@ const isLocalStorageAvailable = () => {
   );
 };
 
+const HEADER_COLORS = {
+  light: "#ffffff",
+  dark: "#0d0d0d",
+};
+
 export function ThemeProvider({
   children,
   defaultTheme = "system",
@@ -53,10 +58,19 @@ export function ThemeProvider({
         ? "dark"
         : "light";
 
+      document
+        .querySelector("meta[name=theme-color]")
+        ?.setAttribute(
+          "content",
+          HEADER_COLORS[systemTheme] || HEADER_COLORS.light
+        );
       root.classList.add(systemTheme);
       return;
     }
 
+    document
+      .querySelector("meta[name=theme-color]")
+      ?.setAttribute("content", HEADER_COLORS[theme] || HEADER_COLORS.light);
     root.classList.add(theme);
   }, [theme]);
 
@@ -86,14 +100,18 @@ export const useTheme = () => {
 
 const isWindowAvailable = () => {
   return typeof window !== "undefined" && window !== null;
-}
+};
 
 export const useDisplayedTheme = () => {
   const { theme, setTheme } = useTheme();
 
   if (theme === "system") {
     return {
-      theme: isWindowAvailable() && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
+      theme:
+        isWindowAvailable() &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light",
       setTheme,
     };
   }