From bdb2e8478dc2dd585f04e54534c5fead851f79cd Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.fr>
Date: Sun, 6 Sep 2026 22:54:43 +0200
Subject: [PATCH] fix: respect color scheme in PWA manifest theme color

---
 apps/nextjs/next.config.ts      |  7 +++++++
 apps/nextjs/src/app/manifest.ts | 24 +++++++++++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/apps/nextjs/next.config.ts b/apps/nextjs/next.config.ts
index 2105259be..b5b4b4a43 100644
--- a/apps/nextjs/next.config.ts
+++ b/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: [
diff --git a/apps/nextjs/src/app/manifest.ts b/apps/nextjs/src/app/manifest.ts
index 21c17f3df..74208b14b 100644
--- a/apps/nextjs/src/app/manifest.ts
+++ b/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",