fix: Light-Theme-Hintergrund auf PWA/Android reparieren

Der hardcodierte Inline-Style auf body überschrieb --app-body-bg und ließ
hellen Modus mit dunklem Seitenhintergrund erscheinen. Theme-Bootstrap und
dynamisches theme-color ergänzen alle Scheme/Theme-Kombinationen.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-05-31 12:38:01 +02:00
parent 93e26b7807
commit 87973eaa4a
5 changed files with 137 additions and 2 deletions
+13
View File
@@ -31,6 +31,18 @@ export function resolveAppTheme(): AppTheme {
return 'ocean'
}
function updateThemeColorMeta(root: HTMLElement): void {
const color = getComputedStyle(root).getPropertyValue('--app-theme-color').trim()
if (!color) return
let meta = document.querySelector('meta[name="theme-color"]')
if (!meta) {
meta = document.createElement('meta')
meta.setAttribute('name', 'theme-color')
document.head.appendChild(meta)
}
meta.setAttribute('content', color)
}
export function applyAppearanceToDocument(
theme: AppTheme = resolveAppTheme(),
scheme: ResolvedColorScheme = resolveColorScheme()
@@ -39,6 +51,7 @@ export function applyAppearanceToDocument(
root.classList.remove(...THEME_CLASSES, ...SCHEME_CLASSES)
root.classList.add(`theme-${theme}`, `scheme-${scheme}`)
root.style.colorScheme = scheme
updateThemeColorMeta(root)
}
export function subscribeToSystemColorScheme(onChange: () => void): () => void {