fix: respect color scheme in PWA manifest theme color

apps/nextjs/next.config.ts

@@ -68,6 +68,13 @@ const nextConfig: NextConfig = {
   // eslint-disable-next-line @typescript-eslint/require-await,no-restricted-syntax
   async headers() {
     return [
+      {
+        source: "/manifest.webmanifest",
+        headers: [
+          { key: "Accept-CH", value: "Sec-CH-Prefers-Color-Scheme" },
+          { key: "Vary", value: "Sec-CH-Prefers-Color-Scheme" },
+        ],
+      },
       {
         source: "/sw.js",
         headers: [

apps/nextjs/src/app/manifest.ts

@@ -1,14 +1,32 @@
 import type { MetadataRoute } from "next";
+import { headers } from "next/headers";
+
+import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
+
+const themeColors = {
+  light: "#fff",
+  dark: "#242424",
+} as const;
+
+export default async function manifest(): Promise<MetadataRoute.Manifest> {
+  const colorScheme = await getCurrentColorSchemeAsync();
+  const resolvedColorScheme =
+    colorScheme === "auto"
+      ? (await headers()).get("sec-ch-prefers-color-scheme") === "dark"
+        ? "dark"
+        : "light"
+      : colorScheme;
+
+  const themeColor = themeColors[resolvedColorScheme];
 
-export default function manifest(): MetadataRoute.Manifest {
   return {
     name: "Homarr",
     short_name: "Homarr",
     description: "Your dashboard for managing your server.",
     start_url: "/",
     display: "standalone",
-    background_color: "#fff",
-    theme_color: "#fff",
+    background_color: themeColor,
+    theme_color: themeColor,
     icons: [
       {
         src: "/images/pwa/192.maskable.png",