feat: Sprint 26 — pluggable UI themes (dark, light, solarized, monokai, nord)
Five built-in themes with instant switching, persistent preference, and zero-flicker loading. Custom themes are pure CSS additions. Theme system: - CSS variable overrides via :root[data-theme="name"] blocks - Flicker prevention: inline <script> reads localStorage before stylesheet parses, preventing dark-flash on light-mode users - Server-side persistence via settings.json (theme field) - Boot.js syncs server preference to DOM + localStorage Built-in themes: - Dark (default): deep navy/indigo, muted blue accents - Light: clean white/gray, high contrast, scrollbar overrides - Solarized Dark: teal background, warm accents - Monokai: warm dark, green/pink accents - Nord: arctic blue-gray, calm and minimal UI integration: - Settings panel: theme dropdown with instant live preview - /theme slash command: /theme dark|light|solarized|monokai|nord - No enum constraint on theme setting — custom themes just work Documentation: - THEMES.md: how to switch themes, create custom themes, contribute 8 new tests. All 408 tests pass. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nathan Esquenazi
@@ -308,7 +308,7 @@ document.querySelectorAll('.suggestion').forEach(btn=>{
|
||||
|
||||
(async()=>{
|
||||
// Load send key preference
|
||||
try{const s=await api('/api/settings');window._sendKey=s.send_key||'enter';window._showTokenUsage=!!s.show_token_usage;window._showCliSessions=!!s.show_cli_sessions;}catch(e){window._sendKey='enter';window._showTokenUsage=false;window._showCliSessions=false;}
|
||||
try{const s=await api('/api/settings');window._sendKey=s.send_key||'enter';window._showTokenUsage=!!s.show_token_usage;window._showCliSessions=!!s.show_cli_sessions;const _theme=s.theme||'dark';document.documentElement.dataset.theme=_theme;localStorage.setItem('hermes-theme',_theme);}catch(e){window._sendKey='enter';window._showTokenUsage=false;window._showCliSessions=false;}
|
||||
// Fetch active profile
|
||||
try{const p=await api('/api/profile/active');S.activeProfile=p.name||'default';}catch(e){S.activeProfile='default';}
|
||||
// Update profile chip label immediately
|
||||
|
||||
@@ -10,6 +10,7 @@ const COMMANDS=[
|
||||
{name:'workspace', desc:'Switch workspace by name', fn:cmdWorkspace, arg:'name'},
|
||||
{name:'new', desc:'Start a new chat session', fn:cmdNew},
|
||||
{name:'usage', desc:'Toggle token usage display on/off', fn:cmdUsage},
|
||||
{name:'theme', desc:'Switch theme (dark/light/solarized/monokai/nord)', fn:cmdTheme, arg:'name'},
|
||||
];
|
||||
|
||||
function parseCommand(text){
|
||||
@@ -122,6 +123,22 @@ async function cmdUsage(){
|
||||
showToast('Token usage '+(next?'on':'off'));
|
||||
}
|
||||
|
||||
async function cmdTheme(args){
|
||||
const themes=['dark','light','solarized','monokai','nord'];
|
||||
if(!args||!themes.includes(args.toLowerCase())){
|
||||
showToast('Usage: /theme '+themes.join('|'));
|
||||
return;
|
||||
}
|
||||
const t=args.toLowerCase();
|
||||
document.documentElement.dataset.theme=t;
|
||||
localStorage.setItem('hermes-theme',t);
|
||||
try{await api('/api/settings',{method:'POST',body:JSON.stringify({theme:t})});}catch(e){}
|
||||
// Update settings dropdown if panel is open
|
||||
const sel=$('settingsTheme');
|
||||
if(sel)sel.value=t;
|
||||
showToast('Theme: '+t);
|
||||
}
|
||||
|
||||
// ── Autocomplete dropdown ───────────────────────────────────────────────────
|
||||
|
||||
let _cmdSelectedIdx=-1;
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Hermes</title>
|
||||
<script>(function(){var t=localStorage.getItem('hermes-theme');if(t&&t!=='dark')document.documentElement.dataset.theme=t;})()</script>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<!-- Prism.js syntax highlighting (loaded async, non-blocking) -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" integrity="sha384-wFjoQjtV1y5jVHbt0p35Ui8aV8GVpEZkyF99OXWqP/eNJDU93D3Ugxkoyh6Y2I4A" crossorigin="anonymous">
|
||||
@@ -329,6 +330,16 @@
|
||||
<option value="ctrl+enter">Ctrl+Enter (Enter for newline)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-field">
|
||||
<label for="settingsTheme">Theme</label>
|
||||
<select id="settingsTheme" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px" onchange="document.documentElement.dataset.theme=this.value;localStorage.setItem('hermes-theme',this.value)">
|
||||
<option value="dark">Dark (default)</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="solarized">Solarized Dark</option>
|
||||
<option value="monokai">Monokai</option>
|
||||
<option value="nord">Nord</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-field">
|
||||
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
|
||||
<input type="checkbox" id="settingsShowTokenUsage" style="width:15px;height:15px;accent-color:var(--accent)">
|
||||
|
||||
@@ -958,6 +958,9 @@ async function loadSettingsPanel(){
|
||||
// Send key preference
|
||||
const sendKeySel=$('settingsSendKey');
|
||||
if(sendKeySel) sendKeySel.value=settings.send_key||'enter';
|
||||
// Theme preference
|
||||
const themeSel=$('settingsTheme');
|
||||
if(themeSel) themeSel.value=settings.theme||'dark';
|
||||
const showUsageCb=$('settingsShowTokenUsage');
|
||||
if(showUsageCb) showUsageCb.checked=!!settings.show_token_usage;
|
||||
const showCliCb=$('settingsShowCliSessions');
|
||||
@@ -992,6 +995,7 @@ async function saveSettings(){
|
||||
if(model) body.default_model=model;
|
||||
if(workspace) body.default_workspace=workspace;
|
||||
if(sendKey) body.send_key=sendKey;
|
||||
body.theme=($('settingsTheme')||{}).value||'dark';
|
||||
body.show_token_usage=showTokenUsage;
|
||||
body.show_cli_sessions=showCliSessions;
|
||||
body.sync_to_insights=!!($('settingsSyncInsights')||{}).checked;
|
||||
|
||||
@@ -4,6 +4,29 @@
|
||||
--text:#e8e8f0;--muted:#8888aa;--accent:#e94560;--blue:#7cb9ff;--gold:#c9a84c;--code-bg:#0d1117;
|
||||
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.6;
|
||||
}
|
||||
/* ── Light theme ── */
|
||||
:root[data-theme="light"]{
|
||||
--bg:#f5f5f7;--sidebar:#e8e8ed;--border:rgba(0,0,0,0.10);--border2:rgba(0,0,0,0.16);
|
||||
--text:#1c1c1e;--muted:#6e6e80;--accent:#c0392b;--blue:#0a6dc2;--gold:#a07a20;--code-bg:#f0f0f5;
|
||||
}
|
||||
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
|
||||
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3);}
|
||||
:root[data-theme="light"] ::selection{background:rgba(10,109,194,.2);}
|
||||
/* ── 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);
|
||||
--text:#839496;--muted:#657b83;--accent:#dc322f;--blue:#268bd2;--gold:#b58900;--code-bg:#073642;
|
||||
}
|
||||
/* ── Monokai theme ── */
|
||||
:root[data-theme="monokai"]{
|
||||
--bg:#272822;--sidebar:#1e1f1c;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
|
||||
--text:#f8f8f2;--muted:#75715e;--accent:#f92672;--blue:#66d9e8;--gold:#e6db74;--code-bg:#1e1f1c;
|
||||
}
|
||||
/* ── Nord theme ── */
|
||||
:root[data-theme="nord"]{
|
||||
--bg:#2e3440;--sidebar:#272c36;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
|
||||
--text:#eceff4;--muted:#9099aa;--accent:#bf616a;--blue:#81a1c1;--gold:#ebcb8b;--code-bg:#272c36;
|
||||
}
|
||||
body{background:var(--bg);color:var(--text);height:100vh;height:100dvh;overflow:hidden;display:flex;}
|
||||
.layout{display:flex;width:100%;height:100vh;height:100dvh;}
|
||||
.sidebar{width:300px;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:visible;flex-shrink:0;}
|
||||
|
||||
Reference in New Issue
Block a user