fix: correct manifest splash colors and add required icon sizes

src/app/manifest.test.ts

@@ -8,11 +8,36 @@ describe("web app manifest", () => {
       start_url: "/",
       display: "standalone",
       background_color: "#0a0a0f",
-      theme_color: "#fbfbfd",
+      theme_color: "#0a0a0f",
       icons: expect.arrayContaining([
-        expect.objectContaining({ src: "/icon.png", sizes: "512x512" }),
+        expect.objectContaining({ src: "/icon-192.png", sizes: "192x192", purpose: "any" }),
+        expect.objectContaining({ src: "/icon.png", sizes: "512x512", purpose: "any" }),
+        expect.objectContaining({
+          src: "/icon-maskable-512.png",
+          sizes: "512x512",
+          purpose: "maskable",
+        }),
         expect.objectContaining({ src: "/apple-icon.png", sizes: "180x180" }),
       ]),
     });
   });
+
+  it("does not flash a mismatched status bar color on install (#695)", () => {
+    // background_color and theme_color render on the same splash screen, so
+    // they must agree with each other -- unlike layout.tsx's dark/light
+    // themeColor pair, which only ever applies one at a time via a media
+    // query.
+    expect(manifest().background_color).toBe(manifest().theme_color);
+  });
+
+  it("includes a maskable icon within Chrome's install safe-zone requirements", () => {
+    const maskable = manifest().icons?.find((icon) => icon.purpose === "maskable");
+    expect(maskable).toBeDefined();
+    expect(maskable?.sizes).toBe("512x512");
+  });
+
+  it("includes the 192px icon size Chrome's install criteria require", () => {
+    const has192 = manifest().icons?.some((icon) => icon.sizes === "192x192");
+    expect(has192).toBe(true);
+  });
 });

src/app/manifest.ts

@@ -8,15 +8,33 @@ export default function manifest(): MetadataRoute.Manifest {
       "Fund open source work and track contributor rewards through MergeFi.",
     start_url: "/",
     display: "standalone",
+    // A manifest can only hold one static pair, unlike layout.tsx's
+    // `viewport.themeColor`, which picks light vs. dark via a media query
+    // (#224). "#fbfbfd" is that light-mode value; using it here paired with
+    // a dark background_color made the install splash flash a dark screen
+    // into a near-white status bar. Both values now match the dark-mode-
+    // first design background_color already used (#695).
     background_color: "#0a0a0f",
-    theme_color: "#fbfbfd",
+    theme_color: "#0a0a0f",
     icons: [
+      {
+        src: "/icon-192.png",
+        sizes: "192x192",
+        type: "image/png",
+        purpose: "any",
+      },
       {
         src: "/icon.png",
         sizes: "512x512",
         type: "image/png",
         purpose: "any",
       },
+      {
+        src: "/icon-maskable-512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "maskable",
+      },
       {
         src: "/apple-icon.png",
         sizes: "180x180",