From fb6323657286b0ab3e46b6c8af43b9a63ec07ffb Mon Sep 17 00:00:00 2001
From: efiten <erwin.fiten@gmail.com>
Date: Sat, 23 May 2026 17:03:37 +0200
Subject: [PATCH] fix(mobile): expose dark/light toggle in More sheet on narrow
 viewports (#1327)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

- `#darkModeToggle` sits inside `.nav-right` which is `display: none
!important` at ≤768px — mobile users had no way to switch themes
- Adds a **Dark mode / Light mode** button at the bottom of the More
sheet, separated from the route list by a hairline rule
- Click delegates to `#darkModeToggle` so `app.js` remains the single
owner of all theme logic (no duplication)
- Icon (`🌙` / `☀️`) and label sync on every sheet open and after each
toggle

## Test plan

- [ ] Mobile (≤768px): open More sheet → "Dark mode" / "Light mode"
button visible at the bottom
- [ ] Tap button → theme toggles, sheet closes, icon/label update
correctly on next open
- [ ] Tap button repeatedly → theme keeps toggling correctly
- [ ] Desktop (>768px): no visual change, `#darkModeToggle` in top-nav
still works normally
- [ ] `prefers-reduced-motion`: no transitions (inherited from existing
sheet-item rule)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/bottom-nav.css | 14 ++++++++++++++
 public/bottom-nav.js  | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/public/bottom-nav.css b/public/bottom-nav.css
index 556f0f43..3b672ff0 100644
--- a/public/bottom-nav.css
+++ b/public/bottom-nav.css
@@ -241,6 +241,20 @@
   white-space: nowrap;
 }
 
+/* Dark mode toggle button — same layout as sheet-item but it's a <button> */
+.bottom-nav-sheet-darkbtn {
+  width: 100%;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+/* Separator above the dark mode toggle */
+.bottom-nav-sheet-sep {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 4px 8px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .bottom-nav-sheet-item {
     transition: none;
diff --git a/public/bottom-nav.js b/public/bottom-nav.js
index abe1369f..f46b84e6 100644
--- a/public/bottom-nav.js
+++ b/public/bottom-nav.js
@@ -218,6 +218,36 @@
       sheet.appendChild(a);
     });
 
+    // Dark mode toggle — mirrors #darkModeToggle in the hidden top-nav.
+    // Delegates the click to the real button so app.js owns all theme logic.
+    var sep = document.createElement('hr');
+    sep.className = 'bottom-nav-sheet-sep';
+    sheet.appendChild(sep);
+
+    var darkBtn = document.createElement('button');
+    darkBtn.type = 'button';
+    darkBtn.className = 'bottom-nav-sheet-item bottom-nav-sheet-darkbtn';
+    darkBtn.setAttribute('role', 'menuitem');
+    darkBtn.setAttribute('data-bottom-nav-dark-toggle', '');
+
+    var darkIc = document.createElement('span');
+    darkIc.className = 'bottom-nav-sheet-icon';
+    darkIc.setAttribute('aria-hidden', 'true');
+
+    var darkLb = document.createElement('span');
+    darkLb.className = 'bottom-nav-sheet-label';
+
+    darkBtn.appendChild(darkIc);
+    darkBtn.appendChild(darkLb);
+    sheet.appendChild(darkBtn);
+
+    darkBtn.addEventListener('click', function () {
+      var realToggle = document.getElementById('darkModeToggle');
+      if (realToggle) realToggle.click();
+      syncDarkModeBtn();
+      closeSheet();
+    });
+
     // Sit the sheet next to the nav so they share a stacking context.
     var nav = document.querySelector('[data-bottom-nav]');
     if (nav && nav.parentNode) {
@@ -228,6 +258,14 @@
     return sheet;
   }
 
+  function syncDarkModeBtn() {
+    var btn = document.querySelector('[data-bottom-nav-dark-toggle]');
+    if (!btn) return;
+    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+    btn.querySelector('.bottom-nav-sheet-icon').textContent = isDark ? '🌙' : '☀️';
+    btn.querySelector('.bottom-nav-sheet-label').textContent = isDark ? 'Light mode' : 'Dark mode';
+  }
+
   function isSheetOpen() {
     var sheet = document.getElementById(SHEET_ID);
     return !!(sheet && !sheet.hidden);
@@ -242,6 +280,7 @@
       moreTab.setAttribute('aria-expanded', 'true');
       moreTab.classList.add('active');
     }
+    syncDarkModeBtn();
   }
 
   function closeSheet() {