Update web/templates/settings/home.html

web/templates/settings/home.html

@@ -9,7 +9,9 @@
   <div class="card" style="padding:20px; margin-bottom:20px;">
     <p class="muted small">Add your settings here when you’re ready.</p>
     <!-- Your future settings content goes here -->
-    <button id="darkToggle">🌙</button>
+    <div class="card" style="padding:20px; margin-bottom:20px;">
+    <button id="darkToggle" class="btn btn-secondary">Toggle Dark Mode</button>
+  </div>
   </div>
 
   {% if user.is_authenticated and user.is_superuser %}
@@ -121,4 +123,21 @@
     margin:18px 0;
   }
 </style>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const toggle = document.getElementById("darkToggle");
+    if (!toggle) return;
+
+    toggle.addEventListener("click", () => {
+      document.body.classList.toggle("dark-mode");
+      localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));
+    });
+
+    // Restore preference on load
+    if (localStorage.getItem("darkMode") === "true") {
+      document.body.classList.add("dark-mode");
+    }
+  });
+</script>
 {% endblock %}