diff --git a/index.html b/index.html index 8c9686c..0541810 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Astrolabe diff --git a/public/favicon.svg b/public/favicon.svg index afbdc16..e95202a 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,7 +1,44 @@ - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icon-maskable.svg b/public/icon-maskable.svg new file mode 100644 index 0000000..c146b39 --- /dev/null +++ b/public/icon-maskable.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icon-mono.svg b/public/icon-mono.svg new file mode 100644 index 0000000..8f2a005 --- /dev/null +++ b/public/icon-mono.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/vite.config.ts b/vite.config.ts index d272438..3d685a2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -35,18 +35,25 @@ export default defineConfig({ react(), VitePWA({ registerType: 'prompt', - includeAssets: ['favicon.svg'], + includeAssets: ['favicon.svg', 'icon-maskable.svg', 'icon-mono.svg'], manifest: { name: 'Astrolabe', short_name: 'Astrolabe', description: 'A browser-based snippet manager for Vega-Lite visualizations.', - theme_color: '#1a1a2e', + // theme_color tints the OS/browser chrome; background_color is the splash + // behind the icon. theme_color is the app accent (`--accent`, light theme); + // background_color matches the light `--bg` the app boots into. + theme_color: '#0e7490', background_color: '#ffffff', display: 'standalone', - // TODO: theme_color/background_color are stale placeholders — '#1a1a2e' was - // the old --color-text hex, retired by the M1.5 token rename. Re-pick from - // the settled palette (and reconcile with light/dark) when icons land. - icons: [], + // SVG marks scale to any size — Chrome/Edge/desktop install accept SVG + // icons. (iOS home-screen still prefers a PNG apple-touch-icon; tracked as + // a known residual.) maskable = Android adaptive; monochrome = tinted mark. + icons: [ + { src: 'favicon.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any' }, + { src: 'icon-maskable.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'maskable' }, + { src: 'icon-mono.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'monochrome' }, + ], }, workbox: { // Workbox's default globPatterns omit woff2; add it so the self-hosted