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