From 69da340224fdeeb1799a5f3db917badbf9ccb4c1 Mon Sep 17 00:00:00 2001
From: poslop <poslop@archfox.org>
Date: Wed, 9 Sep 2026 18:21:33 -0500
Subject: [PATCH] Settings page: theme switcher with live preview (#100)

---
 internal/web/templates/settings.html | 34 +++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/internal/web/templates/settings.html b/internal/web/templates/settings.html
index d05fb84..368d08b 100644
--- a/internal/web/templates/settings.html
+++ b/internal/web/templates/settings.html
@@ -6,9 +6,41 @@
       <h1>Settings</h1>
     </div>
     <div class="settings-body">
-      <p>Settings are under construction.</p>
+      <h3>Theme</h3>
+      <div class="theme-grid" id="theme-grid"></div>
+      <p class="hint" style="margin-top:10px">Applies instantly and is saved in this browser.</p>
       <p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
     </div>
   </div>
 </div>
+<script>
+(function () {
+  var themes = [
+    { id: 'midnight',        name: 'Midnight',        colors: ['#241B30', '#2D2340', '#3A2D52', '#7A6A9E', '#C4A8F0'] },
+    { id: 'smooth',          name: 'Smooth',          colors: ['#F6F5FA', '#DAD7E6', '#B5B1C9', '#7A7796', '#2A2A36'] },
+    { id: 'pastel-lavender', name: 'Pastel Lavender', colors: ['#e6e0f5', '#cbb8e7', '#b29edb', '#9b85cf', '#806bb8'] },
+    { id: 'pastel-peach',    name: 'Pastel Peach',    colors: ['#ffe0d6', '#ffc4a8', '#ffa78f', '#ff8b76', '#f9826c'] },
+    { id: 'pastel-cloud',    name: 'Pastel Cloud',    colors: ['#cdb4db', '#ffc8dd', '#ffafcc', '#bde0fe', '#a2d2ff'] }
+  ];
+  var grid = document.getElementById('theme-grid');
+  var current = document.documentElement.dataset.preset || 'midnight';
+  themes.forEach(function (t) {
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'theme-card';
+    btn.setAttribute('aria-pressed', current === t.id ? 'true' : 'false');
+    btn.innerHTML = '<strong>' + t.name + '</strong>' +
+      '<span class="swatches">' + t.colors.map(function (c) {
+        return '<span class="swatch" style="background:' + c + '"></span>';
+      }).join('') + '</span>';
+    btn.addEventListener('click', function () {
+      document.documentElement.dataset.preset = t.id;
+      try { localStorage.setItem('palette-theme', t.id); } catch (e) {}
+      grid.querySelectorAll('.theme-card').forEach(function (c) { c.setAttribute('aria-pressed', 'false'); });
+      btn.setAttribute('aria-pressed', 'true');
+    });
+    grid.appendChild(btn);
+  });
+})();
+</script>
 {{template "foot" .}}