From 801081c1d6059200bd07f00c450df1df266b22bf Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Tue, 19 Aug 2025 11:59:55 +0200
Subject: [PATCH] Dark-Theme mit Umschalter (Light/Dark), CSS-Variablen und
 Persistenz via localStorage

---
 templates/index.html | 76 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 70 insertions(+), 6 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 911d78b..fd3ec9d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -15,32 +15,75 @@
     <meta name="twitter:title" content="Wordle‑Cheater (DE)" />
     <meta name="twitter:description" content="Finde deutsche 5‑Buchstaben‑Wörter mit Positions- und Buchstabenfiltern. Quellen: OpenThesaurus & wordfreq." />
     <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}" />
+    <meta name="color-scheme" content="light dark" />
+    <script>
+        (function() {
+            try {
+                var saved = localStorage.getItem('theme');
+                var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+                var theme = saved || (prefersDark ? 'dark' : 'light');
+                document.documentElement.setAttribute('data-theme', theme);
+            } catch (e) {}
+        })();
+    </script>
     <style>
+        :root {
+            --bg: #ffffff;
+            --text: #111827;
+            --muted: #6b7280;
+            --badge-bg: #e5e7eb;
+            --badge-text: #111827;
+            --border: #e5e7eb;
+            --skip-bg: #111827;
+            --skip-text: #ffffff;
+            --button-bg: #111827;
+            --button-text: #ffffff;
+            --input-bg: #ffffff;
+            --input-text: #111827;
+        }
+        [data-theme="dark"] {
+            --bg: #0b1220;
+            --text: #e5e7eb;
+            --muted: #9ca3af;
+            --badge-bg: #374151;
+            --badge-text: #f9fafb;
+            --border: #334155;
+            --skip-bg: #e5e7eb;
+            --skip-text: #111827;
+            --button-bg: #e5e7eb;
+            --button-text: #111827;
+            --input-bg: #111827;
+            --input-text: #e5e7eb;
+        }
+        html, body { background: var(--bg); color: var(--text); }
         body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 2rem; }
         .container { max-width: 800px; margin: 0 auto; }
         .grid { display: grid; grid-template-columns: repeat(5, 3rem); gap: .5rem; }
-        .grid input { text-align: center; font-size: 1.25rem; padding: .4rem; }
+        .grid input { text-align: center; font-size: 1.25rem; padding: .4rem; background: var(--input-bg); color: var(--input-text); border: 1px solid var(--border); border-radius: .375rem; }
         label { font-weight: 600; display: block; margin-top: 1rem; margin-bottom: .25rem; }
         .results { margin-top: 1.5rem; }
-        .badge { display: inline-block; padding: .25rem .5rem; background: #e5e7eb; color: #111827; border-radius: .375rem; margin-right: .25rem; margin-bottom: .25rem; }
+        .badge { display: inline-block; padding: .25rem .5rem; background: var(--badge-bg); color: var(--badge-text); border-radius: .375rem; margin-right: .25rem; margin-bottom: .25rem; }
         .source { font-size: .75rem; padding: .1rem .35rem; border-radius: .25rem; margin-left: .25rem; }
         .source.ot { background: #dbeafe; color: #1e40af; }
         .source.wf { background: #dcfce7; color: #065f46; }
         button { margin-top: 1rem; padding: .5rem 1rem; font-size: 1rem; }
         summary { cursor: pointer; }
-        .footer { margin-top: 2rem; font-size: .9rem; color: #6b7280; }
+        .footer { margin-top: 2rem; font-size: .9rem; color: var(--muted); }
         .footer a { color: inherit; text-decoration: underline; }
         .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; }
         .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
-        .skip-link:focus { position: static; width: auto; height: auto; padding: .5rem .75rem; background: #111827; color: #ffffff; border-radius: .25rem; }
-        .hint { margin-top: .25rem; color: #374151; font-size: .9rem; }
+        .skip-link:focus { position: static; width: auto; height: auto; padding: .5rem .75rem; background: var(--skip-bg); color: var(--skip-text); border-radius: .25rem; }
+        .hint { margin-top: .25rem; color: var(--muted); font-size: .9rem; }
         .word-list { list-style: none; padding: 0; margin: 0; }
         .word-list li { display: inline-block; margin: 0 .25rem .25rem 0; }
-        fieldset { border: 1px solid #e5e7eb; border-radius: .5rem; padding: .75rem; }
+        fieldset { border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; }
         legend { font-weight: 700; padding: 0 .25rem; }
+        .theme-toggle { position: fixed; top: .75rem; left: .75rem; z-index: 100; background: var(--button-bg); color: var(--button-text); border: 1px solid var(--border); border-radius: .5rem; padding: .4rem .6rem; font-size: .95rem; }
+        .theme-toggle:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }
     </style>
 </head>
 <body>
+    <button id="theme-toggle" class="theme-toggle" aria-pressed="false" aria-label="Theme umschalten" title="Theme umschalten">🌞/🌙</button>
     <a href="#results" class="skip-link">Zum Ergebnisbereich springen</a>
     <div class="container">
         <h1>Wordle‑Cheater (Deutsch)</h1>
@@ -112,5 +155,26 @@
             Made in 2025 with ❤️ and ☕ by <a href="mailto:elpatron@mailbox.org">Markus F.J. Busche</a>
         </footer>
     </div>
+
+    <script>
+        (function() {
+            var btn = document.getElementById('theme-toggle');
+            if (!btn) return;
+            function currentTheme() { return document.documentElement.getAttribute('data-theme') || 'light'; }
+            function setTheme(theme) {
+                document.documentElement.setAttribute('data-theme', theme);
+                try { localStorage.setItem('theme', theme); } catch (e) {}
+                btn.setAttribute('aria-pressed', theme === 'dark');
+                btn.textContent = theme === 'dark' ? '🌙' : '🌞';
+                btn.title = 'Theme umschalten (' + (theme === 'dark' ? 'Dunkel' : 'Hell') + ')';
+            }
+            // init label/state
+            setTheme(currentTheme());
+            btn.addEventListener('click', function() {
+                var next = currentTheme() === 'dark' ? 'light' : 'dark';
+                setTheme(next);
+            });
+        })();
+    </script>
 </body>
 </html>