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