dev #6
@@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<title>Cluedo Sheet</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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" }
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user