engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: add dark/light theme toggle above Auto-Play TTS

Browse source 
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.
This commit is contained in:
russell@unturf.com 2026-05-29 12:51:07 -04:00
parent 511c429927
commit 4b0a443928
No known key found for this signature in database
2 changed files with 16 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
templates/base.html
View file

@ -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

5
templates/chat.html
View file

@ -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