From 2f58724863cdfc3d901c936d6d6eaf08d4d45cd0 Mon Sep 17 00:00:00 2001 From: Nathan Esquenazi Date: Sat, 4 Apr 2026 22:11:42 -0700 Subject: [PATCH] fix: light theme final polish -- sidebar, roles, chips, all interactive elements * fix: light theme sidebar, roles, chips, active states -- full polish Comprehensive light theme overrides for every remaining hardcoded dark-theme element: Sidebar: - Session items: warm dark text instead of faint muted gray - Active session: blue accent (matching --blue) instead of washed-out gold - Pin stars/headers: deep gold #996b15 instead of bright yellow #f5c542 - Session actions gradient: light bg instead of dark overlay - Search input: dark borders, proper focus ring Role labels: - You: solid #2d6fa3 blue instead of faint rgba(124,185,255,0.65) - Hermes: solid #8a6520 gold instead of faint rgba(201,168,76,0.6) - Role icons: proper bg/border contrast for light backgrounds Chips and interactive elements: - Project chips: dark borders, dark hover states - Model chip: blue accent matching theme - New chat button: blue accent borders - All hover states: rgba(0,0,0,.XX) instead of rgba(255,255,255,.XX) Other surfaces: - Composer box borders and focus ring - Tool cards, cron items, suggestions - File tree hover, preview badges - Profile/workspace dropdown hovers - Settings, nav tooltips Co-Authored-By: Claude Opus 4.6 (1M context) * docs: update THEMES.md with all current CSS variables Added typography variables (--strong, --em, --code-text, --code-inline-bg, --pre-text) to the custom theme guide. Added note about light theme selector overrides needed for hover/border contrast. Co-Authored-By: Claude Opus 4.6 (1M context) --------- Co-authored-by: Claude Opus 4.6 (1M context) --- THEMES.md | 26 ++++++++++++++++---------- static/style.css | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+), 10 deletions(-) diff --git a/THEMES.md b/THEMES.md index a42bcbc..7c11eae 100644 --- a/THEMES.md +++ b/THEMES.md @@ -54,7 +54,7 @@ Every color in the UI comes from these CSS variables: --gold: #c9a84c; /* Secondary accent (pinned items, gold highlights) */ --code-bg: #0d1117; /* Code block background */ - /* Surface and chrome (required for full polish) */ + /* Surface and chrome (required for full theme polish) */ --surface: #1a2535; /* Dropdowns, popups, toast, approval card */ --topbar-bg: rgba(22,33,62,.98); /* Topbar background */ --main-bg: rgba(26,26,46,0.5); /* Main chat area background */ @@ -63,19 +63,25 @@ Every color in the UI comes from these CSS variables: --focus-ring: rgba(124,185,255,.35); /* Focus border color */ --focus-glow: rgba(124,185,255,.08); /* Focus box-shadow glow */ - /* Text / code styling (required since PR #102) */ - --strong: #fff; /* strong/bold text */ - --em: #c9c9e8; /* italic text */ - --code-text: #f0c27f; /* inline code + code blocks accent text */ - --code-inline-bg: rgba(0,0,0,.35); /* inline code chip background */ - --pre-text: #e2e8f0; /* code block / approval text */ + /* Typography (required for readable text across themes) */ + --strong: #fff; /* Bold text in messages */ + --em: #c9c9e8; /* Italic text in messages */ + --code-text: #f0c27f; /* Inline code text color */ + --code-inline-bg: rgba(0,0,0,.35); /* Inline code background */ + --pre-text: #e2e8f0; /* Code block text color */ } ``` The **core palette** controls the overall mood. The **surface/chrome** and -**text/code styling** variables are now part of the standard theme contract, -not optional extras. If you want a built-in theme to look complete, define all -of them. +**typography** variables are part of the standard theme contract — define all +of them for a complete theme. + +For **light themes**, you also need `:root[data-theme="name"]` overrides +for elements that use `rgba(255,255,255,.XX)` hover/border effects (these +are invisible on light backgrounds). See the built-in light theme for the +full pattern — it overrides ~45 selectors for proper dark-on-light contrast +on hover states, borders, chips, role labels, session items, and +interactive elements. ### Step 2: Add it to the theme picker (optional) diff --git a/static/style.css b/static/style.css index 4ff1b94..bae06d6 100644 --- a/static/style.css +++ b/static/style.css @@ -30,6 +30,52 @@ :root[data-theme="light"] ::selection{background:rgba(45,111,163,.2);} :root[data-theme="light"] *{scrollbar-color:rgba(0,0,0,.15) transparent;} :root[data-theme="light"] .settings-overlay{background:rgba(0,0,0,.3);} + /* ── Light theme: sidebar, roles, chips, active states ── */ + :root[data-theme="light"] .session-item{color:#5a544a;} + :root[data-theme="light"] .session-item:hover{background:rgba(0,0,0,.06);color:#2c2825;} + :root[data-theme="light"] .session-item.active{background:rgba(45,111,163,.1);color:#1a5a8a;border-left-color:#2d6fa3;} + :root[data-theme="light"] .session-item.active .session-actions{background:linear-gradient(to right,transparent,rgba(228,224,216,.95) 12px);} + :root[data-theme="light"] .session-pin-indicator{color:#996b15;} + :root[data-theme="light"] .session-date-header.pinned{color:#996b15;} + :root[data-theme="light"] .session-actions .act-pin.pinned{color:#996b15;} + :root[data-theme="light"] .msg-role.user{color:#2d6fa3;} + :root[data-theme="light"] .msg-role.assistant{color:#8a6520;} + :root[data-theme="light"] .role-icon.user{background:rgba(45,111,163,.12);color:#2d6fa3;border-color:rgba(45,111,163,.25);} + :root[data-theme="light"] .role-icon.assistant{background:rgba(138,101,32,.12);color:#8a6520;border-color:rgba(138,101,32,.25);} + :root[data-theme="light"] .project-chip{border-color:rgba(0,0,0,.12);background:rgba(0,0,0,.04);} + :root[data-theme="light"] .project-chip:hover{background:rgba(0,0,0,.08);color:#2c2825;} + :root[data-theme="light"] .project-chip.active{background:rgba(45,111,163,.1);color:#1a5a8a;border-color:rgba(45,111,163,.3);} + :root[data-theme="light"] .chip{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.04);} + :root[data-theme="light"] .chip.model{color:#2d6fa3;border-color:rgba(45,111,163,.3);background:rgba(45,111,163,.08);} + :root[data-theme="light"] .new-chat-btn{border-color:rgba(45,111,163,.25);color:#2d6fa3;} + :root[data-theme="light"] .new-chat-btn:hover{background:rgba(45,111,163,.08);} + :root[data-theme="light"] .session-search input{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.03);} + :root[data-theme="light"] .session-search input:focus{border-color:rgba(45,111,163,.4);background:rgba(0,0,0,.02);} + :root[data-theme="light"] .cron-item{border-color:rgba(0,0,0,.08);background:rgba(0,0,0,.02);} + :root[data-theme="light"] .sm-btn{border-color:rgba(0,0,0,.1);} + :root[data-theme="light"] .sm-btn:hover{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.15);} + :root[data-theme="light"] select{border-color:rgba(0,0,0,.12);} + :root[data-theme="light"] .composer-box{border-color:rgba(0,0,0,.12);} + :root[data-theme="light"] .composer-box:focus-within{border-color:rgba(45,111,163,.5);box-shadow:0 0 0 3px rgba(45,111,163,.08);} + :root[data-theme="light"] .suggestion{border-color:rgba(0,0,0,.08);} + :root[data-theme="light"] .suggestion:hover{background:rgba(45,111,163,.06);border-color:rgba(45,111,163,.2);} + :root[data-theme="light"] .tool-card{border-color:rgba(0,0,0,.08);} + :root[data-theme="light"] .tool-card:hover{border-color:rgba(0,0,0,.15);} + :root[data-theme="light"] .icon-btn:hover{background:rgba(0,0,0,.06);} + :root[data-theme="light"] .panel-icon-btn:hover{background:rgba(0,0,0,.06);} + :root[data-theme="light"] .file-item:hover{background:rgba(0,0,0,.04);} + :root[data-theme="light"] .preview-md th{background:rgba(0,0,0,.04);} + :root[data-theme="light"] .preview-md td{border-color:rgba(0,0,0,.08);} + :root[data-theme="light"] .preview-badge.code{background:rgba(0,0,0,.05);} + :root[data-theme="light"] .ctx-bar-wrap{background:rgba(0,0,0,.08);} + :root[data-theme="light"] .ws-opt:hover{background:rgba(0,0,0,.05);} + :root[data-theme="light"] .profile-opt:hover{background:rgba(0,0,0,.05);} + :root[data-theme="light"] .profile-opt.active{background:rgba(45,111,163,.06);} + :root[data-theme="light"] .profile-chip{color:#7a5a90!important;} + :root[data-theme="light"] .nav-tab:hover::after{background:var(--surface);border-color:rgba(45,111,163,.25);color:#2d6fa3;} + :root[data-theme="light"] .cron-status.disabled{background:rgba(0,0,0,.05);} + :root[data-theme="light"] .cron-btn{background:rgba(0,0,0,.04);} + :root[data-theme="light"] .cron-btn:hover{background:rgba(0,0,0,.08);} /* ── Solarized Dark theme ── */ :root[data-theme="solarized"]{ --bg:#002b36;--sidebar:#073642;--border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.13);