Settings: dark toggle above theme list; midnight card light row on top (#132)

internal/web/templates/settings.html

@@ -6,13 +6,13 @@
       <h1>Settings</h1>
     </div>
     <div class="settings-body">
-      <h3>Theme</h3>
-      <div class="theme-grid" id="theme-grid"></div>
       <button class="iconbtn dark-toggle" id="settings-dark-toggle" type="button" title="Toggle dark mode" aria-label="Toggle dark mode">
         <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
         <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
         <span>Dark mode</span>
       </button>
+      <h3>Theme</h3>
+      <div class="theme-grid" id="theme-grid"></div>
       <p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
     </div>
   </div>
@@ -53,9 +53,21 @@
 
   var grid = document.getElementById('theme-grid');
   var cards = {};
+  // #132: midnight is dark-first (root preset = midnight = dark; its light
+  // variant is midnight-light), the others are light-first. Resolve the
+  // LIGHT and DARK preset ids generically so the light swatches always
+  // render in the top row of every card.
+  function lightPreset(id) {
+    if (id === 'midnight') return 'midnight-light';
+    return id; // light-first bases use themselves as the light variant
+  }
+  function darkPreset(id) {
+    if (id === 'midnight') return 'midnight'; // root preset is midnight's dark
+    return id + '-dark';
+  }
   pairs.forEach(function (t) {
-    var light = presetColors(t.id);
+    var light = presetColors(lightPreset(t.id));
-    var dark = presetColors(t.id + '-dark');
+    var dark = presetColors(darkPreset(t.id));
     var btn = document.createElement('button');
     btn.type = 'button';
     btn.className = 'theme-card';