feat(pwa): loading screen in the colours of the last used theme
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
57a97a3750
commit
4a923eaf01
5 files changed
+52
-7
No files matched your search
@@ -236,6 +236,7 @@ export function getAccentColor(): string | null {
|
||||
export function setAccentColor(hex: string | null): void {
|
||||
store(ACCENT_KEY, hex);
|
||||
applyAccent(hex);
|
||||
syncThemeColorMeta(); // keeps the loading screen's colours current
|
||||
}
|
||||
|
||||
function hexToRgb(hex: string): [number, number, number] {
|
||||
@@ -352,15 +353,22 @@ function applyToDocument(themeId: ThemeId, customCss: string | null): void {
|
||||
|
||||
// The status bar (theme-color) starts black (like the Android navigation bar of the installed app,
|
||||
// which only takes the manifest colour); once the app runs it follows the theme's background.
|
||||
// The colours are also kept for the next start: public/boot-theme.js paints the loading screen in them.
|
||||
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();
|
||||
const css = getComputedStyle(document.documentElement);
|
||||
const bg = css.getPropertyValue('--bg-app').trim();
|
||||
if (bg) meta.setAttribute('content', bg);
|
||||
const accent = css.getPropertyValue('--accent-primary').trim();
|
||||
const onAccent = css.getPropertyValue('--text-on-accent').trim();
|
||||
if (bg && accent) store(BOOT_COLORS_KEY, JSON.stringify({ bg, accent, onAccent }));
|
||||
});
|
||||
}
|
||||
|
||||
const BOOT_COLORS_KEY = 'mindsift_boot_colors';
|
||||
|
||||
function store(key: string, value: string | null): void {
|
||||
try {
|
||||
if (value === null) localStorage.removeItem(key);
|
||||
|
||||
Reference in new issue
Block a user