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);