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() {