Merge pull request #17 from adammathes/claude/add-css-themes-QGTmP

Redesign sidebar theme controls layout and fix dark mode visibility

2 files changed, 51 insertions, 36 deletions

diff --git a/frontend-vanilla/src/main.ts b/frontend-vanilla/src/main.ts
index d769990..2be9354 100644
--- a/frontend-vanilla/src/main.ts
+++ b/frontend-vanilla/src/main.ts
@@ -77,13 +77,18 @@ export function renderLayout() {
         </div>
         <div class="sidebar-footer">
           <div class="sidebar-quick-controls">
-            <button id="sidebar-theme-toggle" class="sidebar-icon-btn" title="${store.theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}">${store.theme === 'light' ? '☽' : '☀'}</button>
-            <span class="sidebar-controls-divider"></span>
-            <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'default' ? 'active' : ''}" data-style-theme="default" title="Default">○</button>
-            <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'refined' ? 'active' : ''}" data-style-theme="refined" title="Refined">◆</button>
-            <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'terminal' ? 'active' : ''}" data-style-theme="terminal" title="Terminal">▮</button>
-            <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'codex' ? 'active' : ''}" data-style-theme="codex" title="Codex">❧</button>
-            <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'sakura' ? 'active' : ''}" data-style-theme="sakura" title="Sakura">❀</button>
+            <div class="sidebar-controls-row">
+              <button class="sidebar-icon-btn sidebar-theme-btn ${store.theme === 'light' ? 'active' : ''}" data-theme="light" title="Light mode">☀</button>
+              <button class="sidebar-icon-btn sidebar-theme-btn ${store.theme === 'dark' ? 'active' : ''}" data-theme="dark" title="Dark mode">☽</button>
+            </div>
+            <hr class="sidebar-controls-rule">
+            <div class="sidebar-controls-row">
+              <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'default' ? 'active' : ''}" data-style-theme="default" title="Default">○</button>
+              <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'refined' ? 'active' : ''}" data-style-theme="refined" title="Refined">◆</button>
+              <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'terminal' ? 'active' : ''}" data-style-theme="terminal" title="Terminal">▮</button>
+              <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'codex' ? 'active' : ''}" data-style-theme="codex" title="Codex">❧</button>
+              <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'sakura' ? 'active' : ''}" data-style-theme="sakura" title="Sakura">❀</button>
+            </div>
           </div>
           <a href="/v3/settings" data-nav="settings">Settings</a>
           <a href="#" id="logout-button">Logout</a>
@@ -113,9 +118,12 @@ export function attachLayoutListeners() {
     logout();
   });
 
-  // Sidebar quick controls: light/dark toggle
-  document.getElementById('sidebar-theme-toggle')?.addEventListener('click', () => {
-    store.setTheme(store.theme === 'light' ? 'dark' : 'light');
+  // Sidebar quick controls: light/dark buttons
+  document.querySelectorAll('.sidebar-theme-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const theme = btn.getAttribute('data-theme');
+      if (theme) store.setTheme(theme);
+    });
   });
 
   // Sidebar quick controls: style theme emoji buttons
@@ -876,12 +884,10 @@ store.on('theme-updated', () => {
     // Re-apply classes with proper specificity logic
     appEl.className = `theme-${store.theme} font-${store.fontTheme} heading-font-${store.headingFontTheme}`;
   }
-  // Update sidebar toggle icon
-  const toggleBtn = document.getElementById('sidebar-theme-toggle');
-  if (toggleBtn) {
-    toggleBtn.textContent = store.theme === 'light' ? '☽' : '☀';
-    toggleBtn.title = store.theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode';
-  }
+  // Update sidebar light/dark button active states
+  document.querySelectorAll('.sidebar-theme-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.getAttribute('data-theme') === store.theme);
+  });
   // Also re-render settings if we are on settings page to update active state of buttons
   if (router.getCurrentRoute().path === '/settings') {
     renderSettings();
diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css
index c765666..0f7b909 100644
--- a/frontend-vanilla/src/style.css
+++ b/frontend-vanilla/src/style.css
@@ -215,63 +215,72 @@ html {
   opacity: 1;
 }
 
-/* Quick controls row in sidebar footer */
+/* Quick controls block in sidebar footer */
 .sidebar-quick-controls {
   display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-bottom: 0.5rem;
+}
+
+.sidebar-controls-row {
+  display: flex;
   align-items: center;
-  gap: 0.15rem;
-  margin-bottom: 0.25rem;
+  gap: 0.1rem;
 }
 
-.sidebar-controls-divider {
-  width: 1px;
-  height: 1rem;
-  background: rgba(128, 128, 128, 0.25);
-  margin: 0 0.25rem;
+.sidebar-controls-rule {
+  border: none;
+  border-top: 1px solid rgba(128, 128, 128, 0.2);
+  margin: 0.35rem 0;
 }
 
 .sidebar-icon-btn {
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 0.8rem;
-  padding: 0.25rem 0.35rem;
-  border-radius: 4px;
+  font-size: 1rem;
+  padding: 0.3rem 0.4rem;
+  border-radius: 5px;
   color: var(--text-color);
-  opacity: 0.35;
+  opacity: 0.4;
   transition: opacity 0.15s, background 0.15s;
   font-family: inherit;
   text-transform: none;
   font-weight: 400;
   height: auto;
   line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .sidebar-icon-btn:hover {
-  opacity: 0.8;
-  background: rgba(255, 255, 255, 0.08);
+  opacity: 0.85;
+  background: rgba(128, 128, 128, 0.12);
   border: none;
 }
 
 .sidebar-icon-btn.active {
   opacity: 1;
-  background: rgba(255, 255, 255, 0.15);
-  color: var(--text-color);
+  background: rgba(128, 128, 128, 0.18);
 }
 
+/* Dark mode sidebar has a grey background with dark text.
+   Explicitly set dark ink so icons are legible. */
 .theme-dark .sidebar-icon-btn {
-  color: rgba(0, 0, 0, 0.87);
-  border: none;
+  color: rgba(0, 0, 0, 0.75);
   background: none;
+  border: none;
 }
 
 .theme-dark .sidebar-icon-btn:hover {
-  background: rgba(0, 0, 0, 0.06);
+  background: rgba(0, 0, 0, 0.1);
   border: none;
 }
 
 .theme-dark .sidebar-icon-btn.active {
-  background: rgba(0, 0, 0, 0.12);
+  background: rgba(0, 0, 0, 0.15);
 }
 
 /* Main Content area - always fills full width (sidebar overlays) */