internal/web/static/app.css

@@ -255,7 +255,13 @@ body {
 .theme-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
 
 /* #161: more breathing room between settings sections */
-#settings-dark-toggle { margin-bottom: 20px; }
+#settings-dark-toggle {
+  margin-bottom: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  justify-content: center;
+}
 .settings-body h3 { margin-top: 28px; }
 .settings-body .theme-grid { margin-bottom: 8px; }
 .theme-card {

internal/web/static/settings.js

@@ -91,11 +91,15 @@
     if (dt) dt.setAttribute('aria-pressed', s.dark ? 'true' : 'false');
   }
   sync();
-  // the topbar script runs before this button exists, so wire it here
+  // topbar.js already binds every .dark-toggle (deferred, so the settings
+  // button exists by then). Only wire here if it somehow did not run,
+  // otherwise the button would toggle twice per click and never change (#197).
   var dt = document.getElementById('settings-dark-toggle');
+  if (dt && !dt.dataset.darkWired) {
     dt.addEventListener('click', function () {
       var btns = document.querySelectorAll('.topbar .dark-toggle');
       if (btns.length) btns[0].click(); else document.dispatchEvent(new CustomEvent('palette-darkchange'));
     });
+  }
   document.addEventListener('palette-darkchange', sync);
 })();

internal/web/static/topbar.js

@@ -31,6 +31,9 @@
     apply();
     sync(Array.prototype.slice.call(btns));
     btns.forEach(function (b) {
+      // mark as wired so settings.js does not add a second handler
+      // (#197: double-binding made the settings toggle flip twice = no-op)
+      b.dataset.darkWired = '1';
       b.addEventListener('click', function () {
         var s = state();
         var dark = !s.dark;