Dark Mode fuer alle Seiten (Toggle + System-Default)

- CSS-Variablen fuer Hell/Dunkel, Umschalter (🌙/☀️) oben rechts - Default folgt prefers-color-scheme, Wahl wird in localStorage gemerkt - Theme wird vor dem Rendern gesetzt -> kein Flackern - index, webcam und play_video konsistent Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-01 19:44:49 +02:00
parent e30aae2781
commit b8298e584f
3 changed files with 134 additions and 8 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,18 +4,44 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Detection</title>
+    <script>
+      (function(){var t=localStorage.getItem('theme')||((window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light');document.documentElement.setAttribute('data-theme',t);})();
+    </script>
    <style>
+        :root {
+            --bg: #ffffff; --fg: #213547; --panel: #ffffff;
+            --border: #cccccc; --muted: #555555;
+        }
+        :root[data-theme="dark"] {
+            --bg: #16181c; --fg: #e3e3e3; --panel: #23262b;
+            --border: #3a3f46; --muted: #9aa0a6;
+        }
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
-            margin-top: 50px;
+            margin: 0;
+            padding-top: 50px;
+            min-height: 100vh;
+            background-color: var(--bg);
+            color: var(--fg);
+            transition: background-color 0.3s, color 0.3s;
+            font-family: system-ui, sans-serif;
        }
        #uploadForm {
            margin-bottom: 20px;
        }
        input[type="file"] {
            margin-right: 10px;
+            color: var(--fg);
+        }
+        input[type="submit"] {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid var(--border);
+            border-radius: 5px;
+            background-color: var(--panel);
+            color: var(--fg);
        }
        #startWebcam {
            padding: 10px 20px;
@@ -24,10 +50,30 @@
            color: white;
            border: none;
            border-radius: 5px;
+            text-decoration: none;
+        }
+        .theme-toggle {
+            position: fixed;
+            top: 12px;
+            right: 12px;
+            padding: 8px 12px;
+            font-size: 18px;
+            line-height: 1;
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            background-color: var(--panel);
+            color: var(--fg);
+            cursor: pointer;
+            z-index: 1000;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .theme-toggle:hover {
+            border-color: var(--muted);
        }
    </style>
 </head>
 <body>
+    <button id="themeToggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Theme umschalten" title="Hell/Dunkel umschalten">🌙</button>
    <h1>Object Detection</h1>

    <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
@@ -36,5 +82,11 @@
    </form>

    <a id="startWebcam" href="/start_webcam">Start Webcam Detection</a>
+
+    <script>
+      function applyThemeBtn(){var d=document.documentElement.getAttribute('data-theme')==='dark';var b=document.getElementById('themeToggle');if(b)b.textContent=d?'☀️':'🌙';}
+      function toggleTheme(){var n=document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark';document.documentElement.setAttribute('data-theme',n);localStorage.setItem('theme',n);applyThemeBtn();}
+      applyThemeBtn();
+    </script>
 </body>
 </html>
--- a/templates/play_video.html
+++ b/templates/play_video.html
@@ -4,7 +4,18 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Playback</title>
+    <script>
+      (function(){var t=localStorage.getItem('theme')||((window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light');document.documentElement.setAttribute('data-theme',t);})();
+    </script>
    <style>
+        :root {
+            --bg: #f0f0f0; --fg: #213547; --panel: #ffffff;
+            --border: #cccccc; --muted: #555555;
+        }
+        :root[data-theme="dark"] {
+            --bg: #16181c; --fg: #e3e3e3; --panel: #23262b;
+            --border: #3a3f46; --muted: #9aa0a6;
+        }
        body {
            display: flex;
            flex-direction: column;
@@ -12,9 +23,29 @@
            align-items: center;
            min-height: 100vh;
            margin: 0;
-            background-color: #f0f0f0;
+            background-color: var(--bg);
+            color: var(--fg);
+            transition: background-color 0.3s, color 0.3s;
            padding: 20px;
        }
+        .theme-toggle {
+            position: fixed;
+            top: 12px;
+            right: 12px;
+            padding: 8px 12px;
+            font-size: 18px;
+            line-height: 1;
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            background-color: var(--panel);
+            color: var(--fg);
+            cursor: pointer;
+            z-index: 1000;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .theme-toggle:hover {
+            border-color: var(--muted);
+        }
        .video-container {
            position: relative;
            width: 1020px;
@@ -23,7 +54,7 @@
        #videoFeed {
            width: 1020px;
            height: 600px;
-            border: 2px solid #ccc;
+            border: 2px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            display: block;
@@ -80,12 +111,13 @@
        }
        .info {
            margin-top: 10px;
-            color: #555;
+            color: var(--muted);
            font-size: 14px;
        }
    </style>
 </head>
 <body>
+    <button id="themeToggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Theme umschalten" title="Hell/Dunkel umschalten">🌙</button>
    <h1>Video Playback with Object Detection</h1>
    <div class="video-container">
        <img id="videoFeed" src="{{ url_for('video_feed', filename=filename) }}" />
@@ -227,5 +259,10 @@
            }
        }, 100);
    </script>
+    <script>
+      function applyThemeBtn(){var d=document.documentElement.getAttribute('data-theme')==='dark';var b=document.getElementById('themeToggle');if(b)b.textContent=d?'☀️':'🌙';}
+      function toggleTheme(){var n=document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark';document.documentElement.setAttribute('data-theme',n);localStorage.setItem('theme',n);applyThemeBtn();}
+      applyThemeBtn();
+    </script>
 </body>
 </html>
--- a/templates/webcam.html
+++ b/templates/webcam.html
@@ -4,7 +4,18 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webcam Feed</title>
+    <script>
+      (function(){var t=localStorage.getItem('theme')||((window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light');document.documentElement.setAttribute('data-theme',t);})();
+    </script>
    <style>
+        :root {
+            --bg: #f0f0f0; --fg: #213547; --panel: #ffffff;
+            --border: #cccccc; --muted: #555555;
+        }
+        :root[data-theme="dark"] {
+            --bg: #16181c; --fg: #e3e3e3; --panel: #23262b;
+            --border: #3a3f46; --muted: #9aa0a6;
+        }
        body {
            display: flex;
            flex-direction: column;
@@ -12,9 +23,29 @@
            align-items: center;
            min-height: 100vh;
            margin: 0;
-            background-color: #f0f0f0;
+            background-color: var(--bg);
+            color: var(--fg);
+            transition: background-color 0.3s, color 0.3s;
            padding: 20px;
        }
+        .theme-toggle {
+            position: fixed;
+            top: 12px;
+            right: 12px;
+            padding: 8px 12px;
+            font-size: 18px;
+            line-height: 1;
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            background-color: var(--panel);
+            color: var(--fg);
+            cursor: pointer;
+            z-index: 1000;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .theme-toggle:hover {
+            border-color: var(--muted);
+        }
        .video-container {
            position: relative;
            width: 1020px;
@@ -23,7 +54,7 @@
        #videoFeed {
            width: 1020px;
            height: 600px;
-            border: 2px solid #ccc;
+            border: 2px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            display: block;
@@ -80,12 +111,13 @@
        }
        .info {
            margin-top: 10px;
-            color: #555;
+            color: var(--muted);
            font-size: 14px;
        }
    </style>
 </head>
 <body>
+    <button id="themeToggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Theme umschalten" title="Hell/Dunkel umschalten">🌙</button>
    <h1>Webcam Object Detection</h1>
    <div class="video-container">
        <img id="videoFeed" src="{{ url_for('webcam_feed') }}" />
@@ -227,5 +259,10 @@
            }
        }, 100);
    </script>
+    <script>
+      function applyThemeBtn(){var d=document.documentElement.getAttribute('data-theme')==='dark';var b=document.getElementById('themeToggle');if(b)b.textContent=d?'☀️':'🌙';}
+      function toggleTheme(){var n=document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark';document.documentElement.setAttribute('data-theme',n);localStorage.setItem('theme',n);applyThemeBtn();}
+      applyThemeBtn();
+    </script>
 </body>
 </html>