Update web/templates/settings/home.html

web/templates/settings/home.html

@@ -67,7 +67,28 @@
 
     <!-- Your future settings content goes here -->
     <div class="card" style="padding:20px; margin-bottom:20px;">
-    <button id="darkToggle" class="btn btn-secondary">Toggle Dark Mode</button>
+    <form method="post" action="{% url 'set_theme' %}">
+  {% csrf_token %}
+  <label for="theme">Theme</label>
+  <select id="theme" name="theme" class="form-control" style="max-width: 320px;">
+    {% for t in available_themes %}
+      <option value="{{ t }}" {% if request.session.theme|default:'midnight' == t %}selected{% endif %}>
+        {{ t|capfirst }}
+      </option>
+    {% endfor %}
+  </select>
+  <button class="btn btn-primary" style="margin-top:10px;">Save</button>
+  <small class="text-muted" style="display:block;margin-top:6px;">Changes apply immediately across the site.</small>
+</form>
+
+<script>
+/* Optional live preview without saving */
+document.getElementById('theme').addEventListener('change', function(e){
+  const name = e.target.value;
+  document.getElementById('theme-css').href = '{% static "themes/" %}' + name + '.css';
+  try { localStorage.setItem('theme', name); } catch(e){}
+});
+</script>
     <div class="card" style="padding:20px; margin-bottom:20px;">
   <label style="display:flex;gap:10px;align-items:center;">
     <input id="highlightHitsToggle" type="checkbox">