feat(pwa): blue splash screen with the logo, status bar follows the theme
Manifest: short name, blue background/theme colour for the Android splash. index.html shows a plain blue screen with the logo until React mounts. theme-color starts blue and then follows the active theme background. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
a3a709440f
commit
9bc8716f41
4 files changed
+32
-6
No files matched your search
@@ -132,6 +132,18 @@ function applyToDocument(themeId: ThemeId, customCss: string | null): void {
|
||||
root.setAttribute('data-theme', attr);
|
||||
const light = customCss !== null ? isLightColor(readCssVar(customCss, 'bg-app')) : themeId === 'light';
|
||||
root.classList.toggle('dark', !light);
|
||||
syncThemeColorMeta();
|
||||
}
|
||||
|
||||
// The status bar (theme-color) starts blue for the splash screen; once the app runs it follows the
|
||||
// active theme's background so it blends with the header.
|
||||
function syncThemeColorMeta(): void {
|
||||
const meta = document.querySelector('meta[name="theme-color"]');
|
||||
if (!meta || typeof requestAnimationFrame === 'undefined') return;
|
||||
requestAnimationFrame(() => {
|
||||
const bg = getComputedStyle(document.documentElement).getPropertyValue('--bg-app').trim();
|
||||
if (bg) meta.setAttribute('content', bg);
|
||||
});
|
||||
}
|
||||
|
||||
function store(key: string, value: string | null): void {
|
||||
|
||||
Reference in new issue
Block a user