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" }
]