Repository navigation
fix: correct manifest splash colors and add required icon sizes - #740
Closed
smartcalsystems-sketch wants to merge 1 commit into
Closed
smartcalsystems-sketch wants to merge 1 commit into
smartcalsystems-sketch wants to merge 1 commit into
Conversation
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.
|
@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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
manifest.tshadbackground_color: "#0a0a0f"(near-black splash) paired withtheme_color: "#fbfbfd"(near-white toolbar) — the installed app flashes a dark splash into a white status bar. Icons were only512x512and180x180, with no192x192and nopurpose: "maskable", so Chrome's install criteria aren't met and Android shows a letterboxed icon.Fix
theme_colornow matchesbackground_color(both#0a0a0f). A manifest can only hold one static color pair — unlikelayout.tsx'sviewport.themeColor, which picks light vs. dark perprefers-color-scheme(layout.tsx's viewport metadata has no themeColor, so mobile browser chrome never matches the app's dark/light theme #224) — and#fbfbfdwas that light-mode value, not meant for the manifest. Both dark, consistent with the app's dark-mode-first design./icon-192.png(plain downscale of the existing icon) and/icon-maskable-512.pngfor themaskablepurpose.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 matchedbackground_colorexactly), so any OS mask crops only background, never the mark itself. I inspected both generated icons visually before committing them.Testing
theme_colorvalue.manifest.test.ts: 4/4 passing.tsc --noEmitandeslintclean on both changed source files.Closes #695