From 6781aa9aafca3eba71042d4a64238dd6b18eeee1 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 14 May 2026 10:43:49 -0400
Subject: [PATCH] Relocate dark mode toggle and apply dark theme across full UI

---
 src/index.html | 33 +++++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/index.html b/src/index.html
index 4dc3063..142ee05 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,8 +6,16 @@
   <title>DVD / Blu-ray Cover Template Maker</title>
   <style id="dynamicPageStyle">
     @page { size: 11in 8.5in; margin: 0; }
-      body.dark { --bg:#090909; --panel:#111; --ink:#e5e7eb; --muted:#9ca3af; --line:#333; background-image: repeating-linear-gradient(90deg, rgba(255,0,255,.04) 0 2px, transparent 2px 6px), repeating-linear-gradient(0deg, rgba(0,255,255,.04) 0 3px, transparent 3px 8px); }
-    body.dark .sheet{filter:contrast(1.08) saturate(1.15);}
+      body.dark {
+      --bg:#07070a; --panel:#10131a; --ink:#e5e7eb; --muted:#9aa4b2; --line:#2c3443; --accent:#60a5fa;
+      background-image: repeating-linear-gradient(90deg, rgba(255,0,255,.06) 0 2px, transparent 2px 6px), repeating-linear-gradient(0deg, rgba(0,255,255,.05) 0 3px, transparent 3px 8px);
+    }
+    body.dark aside, body.dark fieldset, body.dark details, body.dark .pill, body.dark .previewShell { background: var(--panel); color: var(--ink); border-color: var(--line); }
+    body.dark .previewShell { background:#0f1622; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
+    body.dark input[type="number"], body.dark input[type="text"], body.dark select, body.dark button, body.dark input[type="file"] { background:#0b1220; color:var(--ink); border-color:var(--line); }
+    body.dark .hint, body.dark label, body.dark .subhead, body.dark .status { color: var(--muted); }
+    body.dark .sheet{filter:contrast(1.08) saturate(1.15) brightness(.95);}
+    body.dark .layoutTab.active, body.dark button.primary { color:#fff; }
     .sheetWrap{margin:0 auto;}
   </style>
   <style>
@@ -786,8 +794,16 @@
         display: none !important;
       }
     }
-      body.dark { --bg:#090909; --panel:#111; --ink:#e5e7eb; --muted:#9ca3af; --line:#333; background-image: repeating-linear-gradient(90deg, rgba(255,0,255,.04) 0 2px, transparent 2px 6px), repeating-linear-gradient(0deg, rgba(0,255,255,.04) 0 3px, transparent 3px 8px); }
-    body.dark .sheet{filter:contrast(1.08) saturate(1.15);}
+      body.dark {
+      --bg:#07070a; --panel:#10131a; --ink:#e5e7eb; --muted:#9aa4b2; --line:#2c3443; --accent:#60a5fa;
+      background-image: repeating-linear-gradient(90deg, rgba(255,0,255,.06) 0 2px, transparent 2px 6px), repeating-linear-gradient(0deg, rgba(0,255,255,.05) 0 3px, transparent 3px 8px);
+    }
+    body.dark aside, body.dark fieldset, body.dark details, body.dark .pill, body.dark .previewShell { background: var(--panel); color: var(--ink); border-color: var(--line); }
+    body.dark .previewShell { background:#0f1622; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
+    body.dark input[type="number"], body.dark input[type="text"], body.dark select, body.dark button, body.dark input[type="file"] { background:#0b1220; color:var(--ink); border-color:var(--line); }
+    body.dark .hint, body.dark label, body.dark .subhead, body.dark .status { color: var(--muted); }
+    body.dark .sheet{filter:contrast(1.08) saturate(1.15) brightness(.95);}
+    body.dark .layoutTab.active, body.dark button.primary { color:#fff; }
     .sheetWrap{margin:0 auto;}
   </style>
 </head>
@@ -853,6 +869,12 @@
         <p class="hint">IMDb import uses OMDb-compatible endpoint + API key.</p>
       </fieldset>
 
+      <fieldset>
+        <legend>Appearance</legend>
+        <label class="toggle"><input id="darkMode" type="checkbox" /> Enable dark / glitch theme</label>
+        <p class="hint">Affects editor panels, controls, and preview shell.</p>
+      </fieldset>
+
       <fieldset>
         <legend>View / export</legend>
         <label for="zoom">Preview zoom</label>
@@ -867,8 +889,7 @@
           <label class="toggle"><input id="showCrops" type="checkbox" checked /> Show crop marks on screen</label>
           <label class="toggle"><input id="printGuides" type="checkbox" /> Include guides in PDF</label>
           <label class="toggle"><input id="printCrops" type="checkbox" checked /> Include crop marks in PDF</label>
-          <label class="toggle"><input id="darkMode" type="checkbox" /> Dark mode / glitch mode</label>
-        </div>
+                  </div>
 
         <div class="buttonRow">
           <button class="primary" id="printBtn">Print / Save PDF</button>