From 9f4e80dfa2d829ae33b3e5dc830034ef659befeb Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 18 Feb 2026 06:04:55 +0000 Subject: Redesign sidebar theme controls layout and fix dark mode visibility MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Split light/dark into ☀ ☽ buttons above a horizontal rule, with the 5 style emoji below. Increases icon size from 0.8rem to 1rem. Replaces opacity-only approach with explicit rgba(0,0,0) color in dark mode (sidebar remains grey in dark theme, so icons need dark ink). Switches hover/active backgrounds to neutral rgba(128,128,128) so they work correctly across all themes and modes. https://claude.ai/code/session_01Jv3c8GdaDQMm5WYwHUJMVe --- frontend-vanilla/src/main.ts | 38 ++++++++++++++++++-------------- frontend-vanilla/src/style.css | 49 +++++++++++++++++++++++++----------------- 2 files changed, 51 insertions(+), 36 deletions(-) (limited to 'frontend-vanilla') 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() {
- - - - - - - +
+ + +
+
+
+ + + + + +
Settings Logout @@ -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) */ -- cgit v1.2.3