nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set dynamic theme color for PWA and Android status bar.

Browse Source 
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.
This commit is contained in:
Sascha Nesterovic
2026-02-06 18:39:04 +01:00
parent bdf18c2aea
commit 6434256dfb
3 changed files with 32 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#000000" />
<title>Cluedo Sheet</title> <title>Cluedo Sheet</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

30
frontend/src/styles/themes.js
View File

@@ -195,6 +195,32 @@ export const THEMES = {
export const DEFAULT_THEME_KEY = "default"; 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) { export function applyTheme(themeKey) {
const t = THEMES[themeKey] || THEMES[DEFAULT_THEME_KEY]; const t = THEMES[themeKey] || THEMES[DEFAULT_THEME_KEY];
const root = document.documentElement; const root = document.documentElement;
@@ -202,6 +228,10 @@ export function applyTheme(themeKey) {
for (const [k, v] of Object.entries(t.tokens)) { for (const [k, v] of Object.entries(t.tokens)) {
root.style.setProperty(`--hp-${k}`, v); 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) { export function themeStorageKey(email) {

2
frontend/vite.config.js
View File

@@ -20,7 +20,7 @@ export default defineConfig({
scope: "/", scope: "/",
display: "standalone", display: "standalone",
background_color: "#1c140d", background_color: "#1c140d",
theme_color: "#caa45a", theme_color: "#000000",
icons: [ icons: [
{ src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" } { src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" }
] ]