fix: respect color scheme in PWA manifest theme color

2026-09-06 22:54:43 +02:00
2 changed files with 28 additions and 3 deletions
@@ -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: [
@@ -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",