fix: respect color scheme in PWA manifest theme color

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -33,6 +33,7 @@ body:
       options:
         # The below comment is used to insert a new version with on-release.yml
         #NEXT_VERSION#
+        - 1.77.0
         - 1.76.2
         - 1.76.1
         - 1.76.0

.github/workflows/deployment-docker-image.yml

@@ -68,8 +68,6 @@ jobs:
         with:
           node-version: 24.18.0
           package-manager-cache: false
-      - run: npm i -g pnpm
-        if: env.SKIP_RELEASE == 'false'
       - name: Install dependencies
         if: env.SKIP_RELEASE == 'false'
         run: |

CHANGELOG.md

@@ -1,3 +1,5 @@
+## [1.77.0](https://github.com/homarr-labs/homarr/compare/v1.76.2...v1.77.0) (2026-09-06)
+
 ## [1.76.2](https://github.com/homarr-labs/homarr/compare/v1.76.1...v1.76.2) (2026-08-27)
 
 ## [1.76.1](https://github.com/homarr-labs/homarr/compare/v1.76.0...v1.76.1) (2026-08-26)

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",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homarr",
-  "version": "1.76.2",
+  "version": "1.77.0",
   "private": true,
   "scripts": {
     "build": "cross-env CI=true turbo build",