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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user