rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

24
backend/static/index.html
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 -->