Skip to content

fix: correct manifest splash colors and add required icon sizes - #740

Closed
smartcalsystems-sketch wants to merge 1 commit into
MergeFi:mainfrom
smartcalsystems-sketch:fix-manifest-colors-and-icons-695
Closed

smartcalsystems-sketch wants to merge 1 commit into
MergeFi:mainfrom
smartcalsystems-sketch:fix-manifest-colors-and-icons-695

Conversation

@smartcalsystems-sketch

Copy link
Copy Markdown

Problem

manifest.ts had background_color: "#0a0a0f" (near-black splash) paired with theme_color: "#fbfbfd" (near-white toolbar) — the installed app flashes a dark splash into a white status bar. Icons were only 512x512 and 180x180, with no 192x192 and no purpose: "maskable", so Chrome's install criteria aren't met and Android shows a letterboxed icon.

Fix

On the maskable icon specifically: I didn't just copy the existing 512px icon and relabel its purpose. Its circle spans roughly 98% of the canvas width, and the W3C maskable spec only guarantees the inner 80% (a centered "safe zone") survives whatever shape an OS crops it into — as-is, the circle's edge would likely get clipped. The new maskable variant scales the existing icon content down to 80% and centers it on a canvas filled with the same background color sampled from the source icon's own corners (#0a0a0f, which already matched background_color exactly), so any OS mask crops only background, never the mark itself. I inspected both generated icons visually before committing them.

Testing

  • Updated the existing test that was asserting the old (buggy) theme_color value.
  • Added 3 new tests: background/theme color agreement, a maskable 512px icon is present, a 192px icon is present.
  • Full manifest.test.ts: 4/4 passing.
  • tsc --noEmit and eslint clean on both changed source files.

Closes #695

MergeFi#695)

manifest.ts had background_color: "#0a0a0f" (dark) paired with
theme_color: "#fbfbfd" (light) -- the light-mode value from layout.tsx's
media-queried viewport.themeColor (MergeFi#224), which doesn't apply here since
a manifest only holds one static pair. The mismatch made the PWA install
splash flash a dark screen into a near-white status bar.

Set theme_color to match background_color (both dark, consistent with
the app's dark-mode-first design). Also added the 192x192 icon and a
properly safe-zoned maskable 512x512 icon Chrome's install criteria
require -- the existing icon's circle spans ~98% of the canvas, which
would get clipped under the W3C maskable safe-zone (inner 80%), so the
maskable variant scales the icon content down to 80% and centers it on
a canvas filled with the same background color sampled from the
source icon's corners.
@vercel

vercel Bot commented Oct 13, 2026

Copy link
Copy Markdown

@smartcalsystems-sketch is attempting to deploy a commit to the chonilius' projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Web app manifest has inverted colours (dark background, near-white theme) and lacks the 192px and maskable icons Chrome requires

1 participant