Fix: theme-color ein Tag mit id, inline-Script setzt Farbe sofort beim Laden — kein amber Streifen auf Samsung (SW by-v812)

This commit is contained in:
rene 2026-05-09 22:14:06 +02:00
parent 1fdd7d4ed0
commit 047e5be986
4 changed files with 17 additions and 17 deletions

View file

@ -3,8 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#C4843A" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f1623" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#0f1623" id="meta-theme-color">
<meta name="description" content="Ban Yaro — Die kostenlose Hunde-App für Deutschland. Tagebuch, Impfpass, Giftköder-Alarm, Gassi-Community, Hundesitting. DSGVO-konform, ohne App Store.">
<meta name="keywords" content="Hunde App, Hunde Tagebuch, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundesitting, Hunde Wiki, Hunderassen, PWA Hunde, DSGVO Hunde App">
<link rel="canonical" href="https://banyaro.app/">
@ -86,20 +85,23 @@
<title>Ban Yaro</title>
<!-- Theme vor CSS setzen — verhindert Flash of unstyled content -->
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
<script>
(function() {
var t = localStorage.getItem('by_theme');
var isDark = t === 'dark' || (t !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (t === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
// 'system' (oder kein Wert) → kein data-theme → @media prefers-color-scheme greift
// Statusleisten-Farbe sofort setzen — kein Amber auf Samsung im Dark Mode
var m = document.getElementById('meta-theme-color');
if (m) m.setAttribute('content', isDark ? '#0f1623' : '#C4843A');
})();
</script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=811">
<link rel="stylesheet" href="/css/layout.css?v=811">
<link rel="stylesheet" href="/css/components.css?v=811">
<link rel="stylesheet" href="/css/design-system.css?v=812">
<link rel="stylesheet" href="/css/layout.css?v=812">
<link rel="stylesheet" href="/css/components.css?v=812">
</head>
<body>
@ -579,10 +581,10 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=811"></script>
<script src="/js/ui.js?v=811"></script>
<script src="/js/app.js?v=811"></script>
<script src="/js/worlds.js?v=811"></script>
<script src="/js/api.js?v=812"></script>
<script src="/js/ui.js?v=812"></script>
<script src="/js/app.js?v=812"></script>
<script src="/js/worlds.js?v=812"></script>
<!-- Feature-Seiten werden lazy geladen -->

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '811'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '812'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.5.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';
// Cache-Bust-Parameter nach Update-Reload sofort entfernen
@ -621,12 +621,10 @@ const App = (() => {
}
function _syncThemeColor() {
// Fallback für Browser die media-Queries auf theme-color meta nicht unterstützen (Samsung)
const isDark = document.documentElement.getAttribute('data-theme') === 'dark'
|| (window.matchMedia('(prefers-color-scheme: dark)').matches
&& document.documentElement.getAttribute('data-theme') !== 'light');
const color = isDark ? '#0f1623' : '#C4843A';
document.querySelector('meta[name="theme-color"]')?.setAttribute('content', color);
document.getElementById('meta-theme-color')?.setAttribute('content', isDark ? '#0f1623' : '#C4843A');
}
function _showVerifyBanner() {

View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache
============================================================ */
const CACHE_VERSION = 'by-v811';
const CACHE_VERSION = 'by-v812';
const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache