From 4b0a443928a25e172219c2eb761fb4b2a40c0c85 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Fri, 29 May 2026 12:51:07 -0400
Subject: [PATCH] ui: add dark/light theme toggle above Auto-Play TTS

Restore the theme toggle into the chat utility belt (desktop + mobile),
placed directly above the Auto-Play TTS button. Re-wires updateThemeButtonText
to label both buttons (shows the mode a click switches to). toggleTheme()
already persisted to localStorage and swapped the highlight.js theme.
---
 templates/base.html | 12 +++++++++++-
 templates/chat.html |  5 +++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/templates/base.html b/templates/base.html
index a43bf57..7ba2643 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -98,6 +98,11 @@
                     <option value="shimmer">Shimmer</option>
                 </select>
             </div>
+            <div id="theme-toggle-mobile">
+                <button id="theme-toggle-btn-mobile" onclick="toggleTheme()" style="width: 100%; margin-top: 10px; background-color: #555; color: white; border: none; padding: 8px; border-radius: 4px; cursor: pointer;">
+                    Dark Mode
+                </button>
+            </div>
             <div id="auto-play-tts-mobile">
                 <button id="auto-play-tts-btn-mobile" onclick="toggleAutoPlayTTS()" style="width: 100%; margin-top: 10px; background-color: #f44336; color: white; border: none; padding: 8px; border-radius: 4px; cursor: pointer;">
                     Auto-Play TTS: OFF
@@ -363,7 +368,12 @@
     }
 
     function updateThemeButtonText(theme) {
-        // Theme toggle moved to profile page
+        // Label shows the mode a click switches to.
+        const label = theme === 'dark' ? 'Light Mode' : 'Dark Mode';
+        const btn = document.getElementById('theme-toggle-btn');
+        const btnMobile = document.getElementById('theme-toggle-btn-mobile');
+        if (btn) btn.textContent = label;
+        if (btnMobile) btnMobile.textContent = label;
     }
 
     // Apply saved theme on page load
diff --git a/templates/chat.html b/templates/chat.html
index c4943e8..d0c4fcc 100644
--- a/templates/chat.html
+++ b/templates/chat.html
@@ -54,6 +54,11 @@
                 <!-- Voices will be populated from API -->
             </select>
         </div>
+        <div>
+            <button id="theme-toggle-btn" onclick="toggleTheme()" style="width: 100%; margin-top: 10px; background-color: #555; color: white; border: none; padding: 8px; border-radius: 4px; cursor: pointer;">
+                Dark Mode
+            </button>
+        </div>
         <div>
             <button id="auto-play-tts-btn" onclick="toggleAutoPlayTTS()" style="width: 100%; margin-top: 10px; background-color: #f44336; color: white; border: none; padding: 8px; border-radius: 4px; cursor: pointer;">
                 Auto-Play TTS: OFF