From 6434256dfb0569ae848410fd5f2b4dd6a7147d8d Mon Sep 17 00:00:00 2001 From: nessi Date: Fri, 6 Feb 2026 18:39:04 +0100 Subject: [PATCH] Set dynamic theme color for PWA and Android status bar. Added logic to update the theme-color meta tag dynamically based on the active theme. This improves the visual consistency of the application, particularly for PWA and Android users. Default theme color has also been updated in the configuration. --- frontend/index.html | 1 + frontend/src/styles/themes.js | 30 ++++++++++++++++++++++++++++++ frontend/vite.config.js | 2 +- 3 files changed, 32 insertions(+), 1 deletion(-) diff --git a/frontend/index.html b/frontend/index.html index 91f2579..380c08c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,6 +3,7 @@ + Cluedo Sheet diff --git a/frontend/src/styles/themes.js b/frontend/src/styles/themes.js index ff01d9c..cb182c6 100644 --- a/frontend/src/styles/themes.js +++ b/frontend/src/styles/themes.js @@ -195,6 +195,32 @@ export const THEMES = { export const DEFAULT_THEME_KEY = "default"; +export function setThemeColorMeta(color) { + try { + const safe = typeof color === "string" ? color.trim() : ""; + if (!safe) return; + + // only allow solid colors (hex, rgb, hsl); ignore urls/gradients/rgba overlays + const looksSolid = + safe.startsWith("#") || + safe.startsWith("rgb(") || + safe.startsWith("hsl(") || + safe.startsWith("oklch("); + + if (!looksSolid) 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", safe); + } catch { + // ignore + } +} + export function applyTheme(themeKey) { const t = THEMES[themeKey] || THEMES[DEFAULT_THEME_KEY]; const root = document.documentElement; @@ -202,6 +228,10 @@ export function applyTheme(themeKey) { for (const [k, v] of Object.entries(t.tokens)) { root.style.setProperty(`--hp-${k}`, v); } + + // ✅ PWA/Android Statusbar dynamisch an Theme anpassen + // Nimmt (falls vorhanden) statusBarColor, sonst pageBg + setThemeColorMeta(t.tokens.statusBarColor || t.tokens.pageBg || "#000000"); } export function themeStorageKey(email) { diff --git a/frontend/vite.config.js b/frontend/vite.config.js index d23be78..2219097 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -20,7 +20,7 @@ export default defineConfig({ scope: "/", display: "standalone", background_color: "#1c140d", - theme_color: "#caa45a", + theme_color: "#000000", icons: [ { src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" } ]