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

dev #6

Merged
nessi merged 6 commits from dev into main 2026-02-07 10:12:30 +00:00
Conversation 0 Commits 6 Files Changed 5 +32 -1
3 changed files with 32 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6434256dfb - Show all commits

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