From c26dabe2961837bd12e3e3d600537de05a7665c6 Mon Sep 17 00:00:00 2001
From: mARTin-B78 <mail@martin-bierschenk.de>
Date: Mon, 22 Jun 2026 21:35:16 +0200
Subject: [PATCH] feat: Implement dark theme variables and add save button to
 general settings

---
 static/index.html               |  2 +-
 static/sections/s-settings.html |  4 ++++
 static/style.css                | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/static/index.html b/static/index.html
index c796516..8d8ecfb 100644
--- a/static/index.html
+++ b/static/index.html
@@ -26,7 +26,7 @@
 
   <!-- ── Core styles (local — no CDN dependency for first paint) ────────── -->
   <link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css">
-  <link rel="stylesheet" href="/static/style.css?v=1.8.0-6">
+  <link rel="stylesheet" href="/static/style.css?v=1.8.0-7">
 
 
   <!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── -->
diff --git a/static/sections/s-settings.html b/static/sections/s-settings.html
index e9ac4c6..6e78ce6 100644
--- a/static/sections/s-settings.html
+++ b/static/sections/s-settings.html
@@ -30,6 +30,10 @@
                 <span class="s-hint">Custom test sentence used when opening the Seed Finder.</span>
               </div>
             </div>
+            <div class="s-page-actions">
+              <button class="btn-primary s-save-btn">Save settings</button>
+              <button class="btn-secondary s-reload-btn">Reload settings</button>
+            </div>
           </div>
         </div>
 
diff --git a/static/style.css b/static/style.css
index 9cd0e0f..a62d9d8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -42,6 +42,23 @@ button .mdi, a .mdi { font-size: 15px; }
   --shadow:   0 2px 8px rgba(0,0,0,0.08);
   --sidebar-width: 220px;
 }
+[data-theme="dark"] {
+  --bg:       #111827;
+  --surface:  #1F2937;
+  --panel:    #374151;
+  --border:   #4B5563;
+  --text:     #F9FAFB;
+  --subtext:  #9CA3AF;
+  --placehld: #6B7280;
+  --accent:   #3B82F6;
+  --green:    #22C55E;
+  --red:      #EF4444;
+  --yellow:   #F59E0B;
+  --mauve:    #A855F7;
+  --teal:     #14B8A6;
+  --on-accent:#FFFFFF;
+  --shadow:   0 4px 12px rgba(0,0,0,0.5);
+}
 * { box-sizing: border-box; margin: 0; padding: 0; }
 html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }  /* stop iOS auto-inflating text */
 body {