feat: add Zenburnesque theme (#35)

* feat: add Zenburnesque theme — warm sage and muted earth tones

Zenburn-inspired theme with sage green accent (#9ece9e), warm
off-white foreground (#dcdccc), and earthy gray-brown backgrounds.
Includes CSS variables, Monaco editor colors, terminal background,
and AgentSelector contrast fix for dark accent-text on dark selection.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

* feat(zenburnesque): switch accent from sage green to dusty rose

Use Zenburn's iconic dusty rose (#cc9393) as the accent for a warmer
glow. Shift error to coral red (#e37170) to avoid accent/error clash.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]>

Author: ASRagab

src/components/AgentSelector.tsx

@@ -68,7 +68,9 @@ export function AgentSelector(props: AgentSelectorProps) {
                   border: isSelected() ? `1px solid ${theme.accent}` : `1px solid ${theme.border}`,
                   'border-radius': '8px',
                   color: isSelected()
-                    ? store.themePreset === 'graphite' || store.themePreset === 'minimal'
+                    ? store.themePreset === 'graphite' ||
+                      store.themePreset === 'minimal' ||
+                      store.themePreset === 'zenburnesque'
                       ? '#ffffff'
                       : theme.accentText
                     : theme.fg,

src/lib/look.ts

@@ -1,4 +1,11 @@
-export type LookPreset = 'classic' | 'graphite' | 'indigo' | 'ember' | 'glacier' | 'minimal';
+export type LookPreset =
+  | 'classic'
+  | 'graphite'
+  | 'indigo'
+  | 'ember'
+  | 'glacier'
+  | 'minimal'
+  | 'zenburnesque';
 
 export interface LookPresetOption {
   id: LookPreset;
@@ -37,6 +44,11 @@ export const LOOK_PRESETS: LookPresetOption[] = [
     label: 'Glacier',
     description: 'Clean teal accents with softer depth',
   },
+  {
+    id: 'zenburnesque',
+    label: 'Zenburnesque',
+    description: 'Warm sage and muted earth tones',
+  },
 ];
 
 const LOOK_PRESET_IDS = new Set<string>(LOOK_PRESETS.map((p) => p.id));

src/lib/monaco-theme.ts

@@ -61,6 +61,14 @@ const presetColors: Record<LookPreset, PresetColors> = {
     border: '#2a2a2a',
     accent: '#c8bfa0',
   },
+  zenburnesque: {
+    bgElevated: '#2e2d2a',
+    fg: '#dcdccc',
+    fgMuted: '#a0a090',
+    fgSubtle: '#7f8f7f',
+    border: '#484640',
+    accent: '#cc9393',
+  },
 };
 
 function buildThemeData(c: PresetColors): monaco.editor.IStandaloneThemeData {

src/lib/theme.ts

@@ -47,6 +47,7 @@ const terminalBackground: Record<LookPreset, string> = {
   ember: '#211918',
   glacier: '#232e3a',
   minimal: '#262626',
+  zenburnesque: '#2e2d2a',
 };
 
 /** Returns an xterm-compatible theme object for the given preset */

src/styles.css

@@ -280,6 +280,32 @@ html[data-look='minimal'] {
   --shadow-pop: 0 2px 8px rgba(0, 0, 0, 0.6);
 }
 
+html[data-look='zenburnesque'] {
+  --bg: radial-gradient(120% 120% at 40% 10%, #353430 0%, #232220 55%, #181716 100%);
+  --bg-elevated: #2e2d2a;
+  --bg-input: #2a2927;
+  --bg-hover: #3a3936;
+  --bg-selected: #3f2e30;
+  --bg-selected-subtle: #3f2e3040;
+  --border: #484640;
+  --border-subtle: #383634;
+  --border-focus: #cc9393;
+  --fg: #dcdccc;
+  --fg-muted: #a0a090;
+  --fg-subtle: #7f8f7f;
+  --accent: #cc9393;
+  --accent-hover: #d8a8a8;
+  --accent-text: #1a0e0e;
+  --link: #d8a8a8;
+  --success: #7f9f7f;
+  --error: #e37170;
+  --warning: #f0dfaf;
+  --island-bg: #262523;
+  --island-border: #484640;
+  --task-container-bg: #212120;
+  --task-panel-bg: #2e2d2a;
+}
+
 .app-shell[data-look='minimal']::before {
   opacity: 0 !important;
   background: none !important;