ui: switch theme color to match dark mode

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,
     };
   }