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) <noreply@anthropic.com> * 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) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nathan Esquenazi
GitHub
26
THEMES.md
26
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)
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user