From b8298e584f766d5ea669e804d0b4cb1738dab165 Mon Sep 17 00:00:00 2001
From: Joachim Hummel <jh@unixweb.de>
Date: Mon, 1 Jun 2026 19:44:49 +0200
Subject: [PATCH] Dark Mode fuer alle Seiten (Toggle + System-Default)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 templates/index.html      | 56 +++++++++++++++++++++++++++++++++++++--
 templates/play_video.html | 43 +++++++++++++++++++++++++++---
 templates/webcam.html     | 43 +++++++++++++++++++++++++++---
 3 files changed, 134 insertions(+), 8 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 95672f7..d1fc531 100644
--- 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,17 +50,43 @@
             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">
         <input type="file" name="file" accept="video/*" required>
         <input type="submit" value="Upload Video">
     </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>
diff --git a/templates/play_video.html b/templates/play_video.html
index e01b1b5..4bd4dc1 100644
--- 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>
diff --git a/templates/webcam.html b/templates/webcam.html
index 919343d..8747680 100644
--- 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>
