From ddedc026878f1bc3462754700cddca1c436a63a5 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Sun, 1 Feb 2026 18:29:34 +0200
Subject: [PATCH] feat: introduced a token-based theming system across the UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: added themes system

* feat: smart sidebar auto-hide for files/diff tabs + lower files sidebar threshold

* feat: added Checkbox component and update theming

- Add reusable Checkbox component for toggles across UI
- Replace several inputs with Checkbox in settings and commands panels
- Add DiffIcon and apply surface/border theming to key UI areas

* feat: Add convert-vscode-theme.cjs to convert VS Code themes to OpenChamber format

* refactor: remove unused permission logic from ChatInput

- Remove unused permission rules parsing logic from ChatInput
- Memoize renderTheme in DiffWorkerProvider to avoid unnecessary recalculations
- Remove forceOpaque helper in vscode theme adapter

* fix: guard VSCode theme loading in MarkdownRenderer

* feat: add custom user themes loading and reload

- Load user themes from ~/.config/openchamber/themes at runtime
- Expose /api/config/themes to fetch custom themes
- Allow theme reloading from Settings → Theme → Reload themes in the UI
---
 .opencode/{command => commands}/changelog.md  |   0
 .opencode/skills/theme-system/SKILL.md        | 205 +++++++
 .../theme-system/references/adding-themes.md  |  51 ++
 AGENTS.md                                     |  11 +
 README.md                                     |   6 +
 docs/CUSTOM_THEMES.md                         | 218 +++++++
 packages/desktop/index.html                   |  49 +-
 .../src-tauri/src/commands/settings.rs        |  66 +++
 packages/desktop/src-tauri/src/main.rs        | 240 ++++++++
 .../chat/AgentMentionAutocomplete.tsx         |  10 +-
 .../ui/src/components/chat/ChatContainer.tsx  |  14 +-
 .../ui/src/components/chat/ChatEmptyState.tsx |  15 +-
 .../src/components/chat/ChatErrorBoundary.tsx |   4 +-
 packages/ui/src/components/chat/ChatInput.tsx | 145 +----
 .../ui/src/components/chat/ChatMessage.tsx    |   4 +-
 .../components/chat/CommandAutocomplete.tsx   |   4 +-
 .../ui/src/components/chat/DiffPreview.tsx    |   4 +-
 .../chat/FileMentionAutocomplete.tsx          |  18 +-
 .../src/components/chat/MarkdownRenderer.tsx  | 100 ++--
 .../ui/src/components/chat/ModelControls.tsx  |  57 +-
 .../ui/src/components/chat/PermissionCard.tsx |   2 +-
 .../ui/src/components/chat/QuestionCard.tsx   |  27 +-
 .../src/components/chat/ServerFilePicker.tsx  |  12 +-
 .../src/components/chat/SkillAutocomplete.tsx |  10 +-
 .../ui/src/components/chat/StatusChip.tsx     |   2 +-
 .../ui/src/components/chat/TimelineDialog.tsx |   2 +-
 .../components/chat/UnifiedControlsDrawer.tsx |   4 +-
 .../chat/message/ToolOutputDialog.tsx         |  18 +-
 .../chat/message/parts/ProgressiveGroup.tsx   |  13 +-
 .../chat/message/parts/ToolPart.tsx           |  47 +-
 packages/ui/src/components/icons/DiffIcon.tsx |  27 +
 packages/ui/src/components/layout/Header.tsx  |  96 ++-
 packages/ui/src/components/layout/Sidebar.tsx |   6 +-
 .../ui/src/components/mcp/McpDropdown.tsx     |   6 +-
 .../components/multirun/ModelMultiSelect.tsx  |  20 +-
 .../components/multirun/MultiRunLauncher.tsx  |   4 +-
 .../components/providers/ThemeProvider.tsx    |  24 +-
 .../components/sections/agents/AgentsPage.tsx |   8 +-
 .../sections/agents/AgentsSidebar.tsx         |   4 +-
 .../sections/agents/ModelSelector.tsx         |  34 +-
 .../sections/commands/AgentSelector.tsx       |   2 +-
 .../sections/commands/CommandsPage.tsx        |  24 +-
 .../sections/commands/CommandsSidebar.tsx     |   4 +-
 .../git-identities/GitIdentitiesSidebar.tsx   |   4 +-
 .../sections/openchamber/DefaultsSettings.tsx |   9 +-
 .../sections/openchamber/GitSettings.tsx      |  13 +-
 .../openchamber/OpenChamberSidebar.tsx        |   2 +-
 .../openchamber/OpenChamberVisualSettings.tsx | 134 ++++-
 .../openchamber/SessionRetentionSettings.tsx  |   7 +-
 .../sections/providers/ProvidersPage.tsx      |   2 +-
 .../sections/providers/ProvidersSidebar.tsx   |   2 +-
 .../sections/shared/SettingsSidebarItem.tsx   |   4 +-
 .../components/sections/skills/SkillsPage.tsx |   4 +-
 .../sections/skills/SkillsSidebar.tsx         |   4 +-
 .../skills/catalog/InstallFromRepoDialog.tsx  |  17 +-
 .../components/session/BranchPickerDialog.tsx |  10 +-
 .../session/DirectoryAutocomplete.tsx         |   2 +-
 .../session/DirectoryExplorerDialog.tsx       |   2 +-
 .../src/components/session/DirectoryTree.tsx  |  34 +-
 .../session/GitHubIssuePickerDialog.tsx       |   8 +-
 .../session/GitHubPullRequestPickerDialog.tsx |   8 +-
 .../src/components/session/SessionDialogs.tsx |   2 +-
 .../src/components/session/SessionSidebar.tsx |  16 +-
 .../ui/src/components/ui/CodeMirrorEditor.tsx |   1 +
 .../src/components/ui/ContextUsageDisplay.tsx |   4 +-
 .../ui/src/components/ui/ErrorBoundary.tsx    |   4 +-
 .../ui/src/components/ui/MemoryDebugPanel.tsx |   4 +-
 .../src/components/ui/MobileOverlayPanel.tsx  |   2 +-
 .../ui/src/components/ui/OpenChamberLogo.tsx  |  35 +-
 .../ui/src/components/ui/UpdateDialog.tsx     |   4 +-
 .../ui/src/components/ui/animated-tabs.tsx    |   4 +-
 packages/ui/src/components/ui/button.tsx      |   6 +-
 packages/ui/src/components/ui/checkbox.tsx    |  68 +++
 packages/ui/src/components/ui/collapsible.tsx |   2 +-
 packages/ui/src/components/ui/command.tsx     |   8 +-
 packages/ui/src/components/ui/dialog.tsx      |   2 +-
 .../ui/src/components/ui/dropdown-menu.tsx    |  20 +-
 packages/ui/src/components/ui/input.tsx       |   7 +-
 .../ui/src/components/ui/number-input.tsx     |   4 +-
 packages/ui/src/components/ui/select.tsx      |  10 +-
 packages/ui/src/components/ui/switch.tsx      |   2 +-
 packages/ui/src/components/ui/textarea.tsx    |  10 +-
 packages/ui/src/components/ui/toggle.tsx      |   4 +-
 packages/ui/src/components/views/DiffView.tsx |  12 +-
 .../ui/src/components/views/FilesView.tsx     |  26 +-
 .../src/components/views/PierreDiffViewer.tsx | 308 ++++++----
 .../ui/src/components/views/SettingsView.tsx  |  10 +-
 .../agent-manager/AgentManagerEmptyState.tsx  |  13 +-
 .../agent-manager/AgentManagerSidebar.tsx     |   4 +-
 .../components/views/git/HistoryCommitRow.tsx |   8 +-
 .../ui/src/contexts/DiffWorkerProvider.tsx    |  69 ++-
 .../ui/src/contexts/ThemeSystemContext.tsx    | 224 +++++--
 .../ui/src/contexts/theme-system-context.ts   |   2 +
 packages/ui/src/index.css                     |  66 ++-
 packages/ui/src/lib/shiki/appThemeRegistry.ts |  95 +++
 packages/ui/src/lib/shiki/flexokiThemes.ts    |  96 ---
 .../ui/src/lib/shiki/registerFlexokiThemes.ts |  15 -
 .../lib/shiki/textMateThemeFromAppTheme.ts    | 482 +++++++++++++++
 .../ui/src/lib/shiki/themes/flexoki-dark.json | 547 ------------------
 .../src/lib/shiki/themes/flexoki-light.json   | 547 ------------------
 .../ui/src/lib/shiki/vscodeTextMateTheme.ts   |  14 +
 .../ui/src/lib/theme/themes/aura-dark.json    | 176 ++++++
 .../ui/src/lib/theme/themes/aura-light.json   | 176 ++++++
 .../ui/src/lib/theme/themes/ayu-dark.json     | 176 ++++++
 .../ui/src/lib/theme/themes/ayu-light.json    | 176 ++++++
 .../src/lib/theme/themes/carbonfox-dark.json  | 176 ++++++
 .../src/lib/theme/themes/carbonfox-light.json | 176 ++++++
 .../src/lib/theme/themes/catppuccin-dark.json | 176 ++++++
 .../lib/theme/themes/catppuccin-light.json    | 176 ++++++
 .../ui/src/lib/theme/themes/dracula-dark.json | 176 ++++++
 .../src/lib/theme/themes/dracula-light.json   | 176 ++++++
 .../ui/src/lib/theme/themes/flexoki-dark.json | 176 ++++++
 .../ui/src/lib/theme/themes/flexoki-dark.ts   | 197 -------
 .../src/lib/theme/themes/flexoki-light.json   | 176 ++++++
 .../ui/src/lib/theme/themes/flexoki-light.ts  | 197 -------
 .../ui/src/lib/theme/themes/gruvbox-dark.json | 176 ++++++
 .../src/lib/theme/themes/gruvbox-light.json   | 176 ++++++
 packages/ui/src/lib/theme/themes/index.ts     |  37 +-
 .../src/lib/theme/themes/kanagawa-dark.json   | 176 ++++++
 .../src/lib/theme/themes/kanagawa-light.json  | 176 ++++++
 .../ui/src/lib/theme/themes/mono-dark.json    | 176 ++++++
 .../ui/src/lib/theme/themes/mono-light.json   | 176 ++++++
 .../src/lib/theme/themes/mono-plus-dark.json  | 155 +++++
 .../src/lib/theme/themes/mono-plus-light.json | 155 +++++
 .../ui/src/lib/theme/themes/monokai-dark.json | 176 ++++++
 .../src/lib/theme/themes/monokai-light.json   | 176 ++++++
 .../src/lib/theme/themes/nightowl-dark.json   | 176 ++++++
 .../src/lib/theme/themes/nightowl-light.json  | 176 ++++++
 .../ui/src/lib/theme/themes/nord-dark.json    | 176 ++++++
 .../ui/src/lib/theme/themes/nord-light.json   | 176 ++++++
 .../src/lib/theme/themes/onedarkpro-dark.json | 176 ++++++
 .../lib/theme/themes/onedarkpro-light.json    | 176 ++++++
 packages/ui/src/lib/theme/themes/presets.ts   |  69 +++
 .../src/lib/theme/themes/solarized-dark.json  | 176 ++++++
 .../src/lib/theme/themes/solarized-light.json | 176 ++++++
 .../src/lib/theme/themes/tokyonight-dark.json | 176 ++++++
 .../lib/theme/themes/tokyonight-light.json    | 176 ++++++
 .../ui/src/lib/theme/themes/vesper-dark.json  | 176 ++++++
 .../ui/src/lib/theme/themes/vesper-light.json | 176 ++++++
 packages/ui/src/lib/theme/vscode/adapter.ts   | 371 +++++++++---
 packages/ui/src/stores/useUIStore.ts          |  49 +-
 packages/ui/src/styles/design-system.css      |  19 +-
 packages/ui/src/styles/typography.css         |   4 +-
 packages/ui/src/types/theme.ts                |   2 +-
 packages/web/index.html                       |  44 +-
 packages/web/server/index.js                  | 220 ++++++-
 scripts/convert-vscode-theme.cjs              | 497 ++++++++++++++++
 147 files changed, 9853 insertions(+), 2435 deletions(-)
 rename .opencode/{command => commands}/changelog.md (100%)
 create mode 100644 .opencode/skills/theme-system/SKILL.md
 create mode 100644 .opencode/skills/theme-system/references/adding-themes.md
 create mode 100644 docs/CUSTOM_THEMES.md
 create mode 100644 packages/ui/src/components/icons/DiffIcon.tsx
 create mode 100644 packages/ui/src/components/ui/checkbox.tsx
 create mode 100644 packages/ui/src/lib/shiki/appThemeRegistry.ts
 delete mode 100644 packages/ui/src/lib/shiki/flexokiThemes.ts
 delete mode 100644 packages/ui/src/lib/shiki/registerFlexokiThemes.ts
 create mode 100644 packages/ui/src/lib/shiki/textMateThemeFromAppTheme.ts
 delete mode 100644 packages/ui/src/lib/shiki/themes/flexoki-dark.json
 delete mode 100644 packages/ui/src/lib/shiki/themes/flexoki-light.json
 create mode 100644 packages/ui/src/lib/shiki/vscodeTextMateTheme.ts
 create mode 100644 packages/ui/src/lib/theme/themes/aura-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/aura-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/ayu-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/ayu-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/carbonfox-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/carbonfox-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/catppuccin-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/catppuccin-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/dracula-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/dracula-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/flexoki-dark.json
 delete mode 100644 packages/ui/src/lib/theme/themes/flexoki-dark.ts
 create mode 100644 packages/ui/src/lib/theme/themes/flexoki-light.json
 delete mode 100644 packages/ui/src/lib/theme/themes/flexoki-light.ts
 create mode 100644 packages/ui/src/lib/theme/themes/gruvbox-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/gruvbox-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/kanagawa-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/kanagawa-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/mono-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/mono-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/mono-plus-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/mono-plus-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/monokai-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/monokai-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/nightowl-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/nightowl-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/nord-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/nord-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/onedarkpro-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/onedarkpro-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/presets.ts
 create mode 100644 packages/ui/src/lib/theme/themes/solarized-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/solarized-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/tokyonight-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/tokyonight-light.json
 create mode 100644 packages/ui/src/lib/theme/themes/vesper-dark.json
 create mode 100644 packages/ui/src/lib/theme/themes/vesper-light.json
 create mode 100644 scripts/convert-vscode-theme.cjs

diff --git a/.opencode/command/changelog.md b/.opencode/commands/changelog.md
similarity index 100%
rename from .opencode/command/changelog.md
rename to .opencode/commands/changelog.md
diff --git a/.opencode/skills/theme-system/SKILL.md b/.opencode/skills/theme-system/SKILL.md
new file mode 100644
index 00000000..9304a6ec
--- /dev/null
+++ b/.opencode/skills/theme-system/SKILL.md
@@ -0,0 +1,205 @@
+---
+name: theme-system
+description: Use when creating or modifying UI components, styling, or visual elements in OpenChamber. All UI colors must use theme tokens - never hardcoded values or Tailwind color classes.
+license: MIT
+compatibility: opencode
+---
+
+## Overview
+
+OpenChamber uses a JSON-based theme system. Themes are defined in `packages/ui/src/lib/theme/themes/`. Users can also add custom themes via `~/.config/openchamber/themes/`.
+
+**Core principle:** UI colors must use theme tokens - never hardcoded hex colors or Tailwind color classes.
+
+## When to Use
+
+- Creating or modifying UI components
+- Working with colors, backgrounds, borders, or text
+
+## Quick Decision Tree
+
+1. **Code display?** → `syntax.*`
+2. **Feedback/status?** → `status.*`
+3. **Primary CTA?** → `primary.*`
+4. **Interactive/clickable?** → `interactive.*`
+5. **Background layer?** → `surface.*`
+6. **Text?** → `surface.foreground` or `surface.mutedForeground`
+
+## Critical Rules
+
+- `surface.elevated` = inputs, cards, panels
+- `interactive.hover` = **ONLY on clickable elements**
+- `interactive.selection` = active/selected states (not primary!)
+- Status colors = **ONLY for actual feedback** (errors, warnings, success)
+- Input footers = `bg-transparent` on elevated background
+
+### Never Use
+
+- Hardcoded hex colors (`#FF0000`)
+- Tailwind colors (`bg-white`, `text-blue-500`, `bg-gray-*`)
+- Deprecated: `bg-secondary`, `bg-muted`
+
+## Usage
+
+### Via Hook
+```tsx
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+const { currentTheme } = useThemeSystem();
+
+<div style={{ backgroundColor: currentTheme.colors.surface.elevated }}>
+```
+
+### Via CSS Variables
+```tsx
+<div className="bg-[var(--surface-elevated)] hover:bg-[var(--interactive-hover)]">
+```
+
+## Color Tokens
+
+### Surface Colors
+
+| Token | Usage |
+|-------|-------|
+| `surface.background` | Main app background |
+| `surface.elevated` | Inputs, cards, panels, popovers |
+| `surface.muted` | Secondary backgrounds, sidebars |
+| `surface.foreground` | Primary text |
+| `surface.mutedForeground` | Secondary text, hints |
+| `surface.subtle` | Subtle dividers |
+
+### Interactive Colors
+
+| Token | Usage |
+|-------|-------|
+| `interactive.border` | Default borders |
+| `interactive.hover` | Hover on **clickable elements only** |
+| `interactive.selection` | Active/selected items |
+| `interactive.selectionForeground` | Text on selection |
+| `interactive.focusRing` | Focus indicators |
+
+### Status Colors
+
+| Token | Usage |
+|-------|-------|
+| `status.error` | Errors, validation failures |
+| `status.warning` | Warnings, cautions |
+| `status.success` | Success messages |
+| `status.info` | Informational messages |
+
+Each has variants: `*`, `*Foreground`, `*Background`, `*Border`.
+
+### Primary Colors
+
+| Token | Usage |
+|-------|-------|
+| `primary.base` | Primary CTA buttons |
+| `primary.hover` | Hover on primary elements |
+| `primary.foreground` | Text on primary background |
+
+**Primary vs Selection:** Primary = "click me" (CTA), Selection = "currently active" (state).
+
+### Syntax Colors
+
+For code display only. Never use for UI elements.
+
+| Token | Usage |
+|-------|-------|
+| `syntax.base.background` | Code block background |
+| `syntax.base.foreground` | Default code text |
+| `syntax.base.keyword` | Keywords |
+| `syntax.base.string` | Strings |
+| `syntax.highlights.diffAdded` | Added lines |
+| `syntax.highlights.diffRemoved` | Removed lines |
+
+## Examples
+
+### Input Area
+
+```tsx
+const { currentTheme } = useThemeSystem();
+
+<div style={{ backgroundColor: currentTheme.colors.surface.elevated }}>
+  <textarea className="bg-transparent" />
+  <div className="bg-transparent">{/* Footer - transparent! */}</div>
+</div>
+```
+
+### Active Tab
+
+```tsx
+<button className={isActive 
+  ? 'bg-interactive-selection text-interactive-selection-foreground'
+  : 'hover:bg-interactive-hover/50'
+}>
+```
+
+### Error Message
+
+```tsx
+<div style={{ 
+  color: currentTheme.colors.status.error,
+  backgroundColor: currentTheme.colors.status.errorBackground 
+}}>
+```
+
+### Card
+
+```tsx
+<div style={{ backgroundColor: currentTheme.colors.surface.elevated }}>
+  <h3 style={{ color: currentTheme.colors.surface.foreground }}>Title</h3>
+  <p style={{ color: currentTheme.colors.surface.mutedForeground }}>Description</p>
+</div>
+```
+
+## Wrong vs Right
+
+### Wrong
+
+```tsx
+// Hardcoded colors
+<div style={{ backgroundColor: '#F2F0E5' }}>
+<button className="bg-blue-500">
+
+// Primary for active tab
+<Tab className="bg-primary">Active</Tab>
+
+// Hover on static element
+<div className="hover:bg-interactive-hover">Static card</div>
+
+// Colored footer on input
+<div style={{ backgroundColor: currentTheme.colors.surface.elevated }}>
+  <textarea />
+  <div style={{ backgroundColor: currentTheme.colors.surface.muted }}>Footer</div>
+</div>
+```
+
+### Right
+
+```tsx
+// Theme tokens
+<div style={{ backgroundColor: currentTheme.colors.surface.elevated }}>
+<button style={{ backgroundColor: currentTheme.colors.primary.base }}>
+
+// Selection for active tab
+<Tab style={{ backgroundColor: currentTheme.colors.interactive.selection }}>Active</Tab>
+
+// Hover only on clickable
+<button className="hover:bg-[var(--interactive-hover)]">Click</button>
+
+// Transparent footer
+<div style={{ backgroundColor: currentTheme.colors.surface.elevated }}>
+  <textarea className="bg-transparent" />
+  <div className="bg-transparent">Footer</div>
+</div>
+```
+
+## References
+
+- **[Adding Themes](references/adding-themes.md)** - Built-in and custom themes
+
+## Key Files
+
+- Theme types: `packages/ui/src/types/theme.ts`
+- Theme hook: `packages/ui/src/contexts/useThemeSystem.ts`
+- CSS generator: `packages/ui/src/lib/theme/cssGenerator.ts`
+- Built-in themes: `packages/ui/src/lib/theme/themes/`
diff --git a/.opencode/skills/theme-system/references/adding-themes.md b/.opencode/skills/theme-system/references/adding-themes.md
new file mode 100644
index 00000000..0209a660
--- /dev/null
+++ b/.opencode/skills/theme-system/references/adding-themes.md
@@ -0,0 +1,51 @@
+---
+title: Adding Themes
+---
+
+# Adding Themes
+
+## Custom Themes (User)
+
+Drop a JSON file into `~/.config/openchamber/themes/`. No rebuild needed.
+
+1. Create theme file (e.g., `my-theme.json`)
+2. In app: **Settings → Theme → Reload themes**
+3. Select from dropdown
+
+See `docs/CUSTOM_THEMES.md` for full format reference.
+
+## Built-in Themes (Development)
+
+### 1. Create JSON Files
+
+Add to `packages/ui/src/lib/theme/themes/`:
+- `<id>-light.json`
+- `<id>-dark.json`
+
+Use existing themes (e.g., `flexoki-dark.json`) as reference for the full structure.
+
+### 2. Register in presets.ts
+
+```typescript
+import mytheme_light_Raw from './mytheme-light.json';
+import mytheme_dark_Raw from './mytheme-dark.json';
+
+export const presetThemes: Theme[] = [
+  // ... existing themes
+  mytheme_light_Raw as Theme,
+  mytheme_dark_Raw as Theme,
+];
+```
+
+### 3. Validate
+
+```bash
+bun run type-check && bun run lint && bun run build
+```
+
+## Key Files
+
+- Theme types: `packages/ui/src/types/theme.ts`
+- Presets: `packages/ui/src/lib/theme/themes/presets.ts`
+- Example: `packages/ui/src/lib/theme/themes/flexoki-dark.json`
+- Custom themes doc: `docs/CUSTOM_THEMES.md`
diff --git a/AGENTS.md b/AGENTS.md
index 6200f8b2..ebe3c174 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -72,6 +72,17 @@ All scripts are in `package.json`.
 - No new deps unless asked.
 - Never add secrets (`.env`, keys) or log sensitive data.
 
+## Theme System (MANDATORY for UI work)
+
+When working on any UI components, styling, or visual changes, agents **MUST** study the theme system skill first.
+
+**Before starting any UI work:**
+```
+skill({ name: "theme-system" })
+```
+
+This skill contains all color tokens, semantic logic, decision tree, and usage patterns. All UI colors must use theme tokens - never hardcoded values or Tailwind color classes.
+
 ## Recent changes
 - Releases + high-level changes: `CHANGELOG.md`
 - Recent commits: `git log --oneline` (latest tags: `v1.4.6`, `v1.4.5`)
diff --git a/README.md b/README.md
index 59b1a80a..1194d07c 100644
--- a/README.md
+++ b/README.md
@@ -86,6 +86,12 @@ Run OpenChamber remotely using GitHub Actions. No local computer required.
 
 [**Read the Guide: OpenChamber for Actions**](docs/OPENCHAMBER_FOR_ACTIONS.md)
 
+### Custom Themes
+
+Create your own color schemes by dropping JSON files into `~/.config/openchamber/themes/`. Hot reload supported — no restart needed.
+
+[**Read the Guide: Custom Themes**](docs/CUSTOM_THEMES.md)
+
 ## Installation
 
 ### VS Code Extension
diff --git a/docs/CUSTOM_THEMES.md b/docs/CUSTOM_THEMES.md
new file mode 100644
index 00000000..905a6af5
--- /dev/null
+++ b/docs/CUSTOM_THEMES.md
@@ -0,0 +1,218 @@
+# Custom Themes
+
+OpenChamber supports user-defined themes. Drop a JSON file into the themes directory and reload — no app restart required.
+
+## Quick Start
+
+1. Create the themes directory:
+   ```bash
+   mkdir -p ~/.config/openchamber/themes
+   ```
+
+2. Create a theme JSON file (e.g., `my-theme.json`) with the format below.
+
+3. In OpenChamber: **Settings → Theme → Reload themes**.
+
+4. Select your theme from the dropdown.
+
+## Theme Location
+
+| Platform | Path |
+|----------|------|
+| macOS/Linux | `~/.config/openchamber/themes/` |
+
+## Theme Format
+
+```json
+{
+  "metadata": {
+    "id": "my-custom-theme",
+    "name": "My Custom Theme",
+    "description": "A custom theme for OpenChamber",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": ["dark", "custom"]
+  },
+  "colors": {
+    "primary": {
+      "base": "#EC8B49",
+      "hover": "#DA702C",
+      "active": "#F9AE77",
+      "foreground": "#100F0F",
+      "muted": "#EC8B4980",
+      "emphasis": "#F9AE77"
+    },
+    "surface": {
+      "background": "#100F0F",
+      "foreground": "#CECDC3",
+      "muted": "#1C1B1A",
+      "mutedForeground": "#878580",
+      "elevated": "#1C1A19",
+      "elevatedForeground": "#CECDC3",
+      "overlay": "#00000080",
+      "subtle": "#1e1d1c"
+    },
+    "interactive": {
+      "border": "#343331",
+      "borderHover": "#403E3C",
+      "borderFocus": "#EC8B49",
+      "selection": "#f4f4f41f",
+      "selectionForeground": "#CECDC3",
+      "focus": "#EC8B49",
+      "focusRing": "#EC8B4950",
+      "cursor": "#CECDC3",
+      "hover": "#ffffff18",
+      "active": "#ffffff1f"
+    },
+    "status": {
+      "error": "#D14D41",
+      "errorForeground": "#100F0F",
+      "errorBackground": "#AF302920",
+      "errorBorder": "#AF302950",
+      "warning": "#DA702C",
+      "warningForeground": "#100F0F",
+      "warningBackground": "#BC521520",
+      "warningBorder": "#BC521550",
+      "success": "#A0AF54",
+      "successForeground": "#100F0F",
+      "successBackground": "#66800B20",
+      "successBorder": "#66800B50",
+      "info": "#4385BE",
+      "infoForeground": "#100F0F",
+      "infoBackground": "#205EA620",
+      "infoBorder": "#205EA650"
+    },
+    "syntax": {
+      "base": {
+        "background": "#1C1B1A",
+        "foreground": "#CECDC3",
+        "comment": "#878580",
+        "keyword": "#4385BE",
+        "string": "#3AA99F",
+        "number": "#8B7EC8",
+        "function": "#DA702C",
+        "variable": "#CECDC3",
+        "type": "#D0A215",
+        "operator": "#D14D41"
+      },
+      "tokens": {
+        "commentDoc": "#575653",
+        "stringEscape": "#CECDC3",
+        "keywordImport": "#D14D41",
+        "storageModifier": "#4385BE",
+        "functionCall": "#DA702C",
+        "method": "#879A39",
+        "variableProperty": "#4385BE",
+        "variableOther": "#879A39",
+        "variableGlobal": "#CE5D97",
+        "variableLocal": "#282726",
+        "parameter": "#CECDC3",
+        "constant": "#CECDC3",
+        "class": "#DA702C",
+        "className": "#DA702C",
+        "interface": "#D0A215",
+        "struct": "#DA702C",
+        "enum": "#DA702C",
+        "typeParameter": "#DA702C",
+        "namespace": "#D0A215",
+        "module": "#D14D41",
+        "tag": "#4385BE",
+        "jsxTag": "#CE5D97",
+        "tagAttribute": "#D0A215",
+        "tagAttributeValue": "#3AA99F",
+        "boolean": "#D0A215",
+        "decorator": "#D0A215",
+        "label": "#CE5D97",
+        "punctuation": "#878580",
+        "macro": "#4385BE",
+        "preprocessor": "#CE5D97",
+        "regex": "#3AA99F",
+        "url": "#4385BE",
+        "key": "#DA702C",
+        "exception": "#CE5D97"
+      },
+      "highlights": {
+        "diffAdded": "#879A39",
+        "diffAddedBackground": "#66800B20",
+        "diffRemoved": "#D14D41",
+        "diffRemovedBackground": "#AF302920",
+        "diffModified": "#4385BE",
+        "diffModifiedBackground": "#205EA620",
+        "lineNumber": "#403E3C",
+        "lineNumberActive": "#CECDC3"
+      }
+    },
+    "markdown": {
+      "heading1": "#fbf9e6",
+      "heading2": "#e6e4d2",
+      "heading3": "#CECDC3",
+      "heading4": "#CECDC3",
+      "link": "#4385BE",
+      "linkHover": "#205EA6",
+      "inlineCode": "#A0AF53",
+      "inlineCodeBackground": "#1C1B1A",
+      "blockquote": "#878580",
+      "blockquoteBorder": "#343331",
+      "listMarker": "#D0A21599"
+    },
+    "chat": {
+      "userMessage": "#CECDC3",
+      "userMessageBackground": "#2d1d15",
+      "assistantMessage": "#CECDC3",
+      "assistantMessageBackground": "#100F0F",
+      "timestamp": "#878580",
+      "divider": "#343331"
+    },
+    "tools": {
+      "background": "#1C1B1A50",
+      "border": "#42403e9d",
+      "headerHover": "#34333150",
+      "icon": "#aca7a1",
+      "title": "#CECDC3",
+      "description": "#878580",
+      "edit": {
+        "added": "#879A39",
+        "addedBackground": "#66800B25",
+        "removed": "#D14D41",
+        "removedBackground": "#AF302925",
+        "lineNumber": "#403E3C"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
+```
+
+## Validation
+
+Themes are validated on load. Invalid themes are skipped with a console warning.
+
+Common issues:
+- Missing required fields
+- Invalid `variant` (must be `"light"` or `"dark"`)
+- File size > 512KB
+
+## Tips
+
+- Use hex with alpha for transparency (e.g., `#FFFFFF20`)
+- Reference built-in themes in `packages/ui/src/lib/theme/themes/` for more examples
+- Theme `id` must be unique; duplicates are skipped
diff --git a/packages/desktop/index.html b/packages/desktop/index.html
index 58daab29..3fe4c2c5 100644
--- a/packages/desktop/index.html
+++ b/packages/desktop/index.html
@@ -26,6 +26,17 @@
         document.documentElement.style.setProperty('color-scheme', isDark ? 'dark' : 'light');
         // Store for use in inline styles
         window.__INITIAL_THEME_DARK__ = isDark;
+
+        // Splash colors persisted by the app theme system
+        var splashBgLight = localStorage.getItem('splashBgLight');
+        var splashFgLight = localStorage.getItem('splashFgLight');
+        var splashBgDark = localStorage.getItem('splashBgDark');
+        var splashFgDark = localStorage.getItem('splashFgDark');
+
+        if (splashBgLight) document.documentElement.style.setProperty('--splash-background-light', splashBgLight);
+        if (splashFgLight) document.documentElement.style.setProperty('--splash-stroke-light', splashFgLight);
+        if (splashBgDark) document.documentElement.style.setProperty('--splash-background-dark', splashBgDark);
+        if (splashFgDark) document.documentElement.style.setProperty('--splash-stroke-dark', splashFgDark);
       })();
     </script>
     <style>
@@ -54,18 +65,44 @@
         font-family: 'IBM Plex Mono', monospace;
         background-color: transparent;
       }
-      /* Theme-aware colors for loading screen */
-      html.dark {
-        --splash-stroke: white;
+      :root {
+        --splash-background-dark: #151313;
+        --splash-stroke-dark: white;
+        --splash-background-light: #F6F4EF;
+        --splash-stroke-light: black;
+
+        --splash-background: var(--splash-background-dark);
+        --splash-stroke: var(--splash-stroke-dark);
+
+        /* Fallback fills (overridden below when supported) */
         --splash-face-fill: rgba(255, 255, 255, 0.15);
         --splash-cell-fill: rgba(255, 255, 255, 0.35);
-        --splash-logo-fill: white;
+        --splash-logo-fill: var(--splash-stroke);
       }
+
       html.light {
-        --splash-stroke: black;
+        --splash-background: var(--splash-background-light);
+        --splash-stroke: var(--splash-stroke-light);
         --splash-face-fill: rgba(0, 0, 0, 0.15);
         --splash-cell-fill: rgba(0, 0, 0, 0.4);
-        --splash-logo-fill: black;
+        --splash-logo-fill: var(--splash-stroke);
+      }
+
+      html.dark {
+        --splash-background: var(--splash-background-dark);
+        --splash-stroke: var(--splash-stroke-dark);
+        --splash-logo-fill: var(--splash-stroke);
+      }
+
+      body {
+        background-color: var(--splash-background);
+      }
+
+      @supports (color: color-mix(in srgb, white 50%, transparent)) {
+        :root {
+          --splash-face-fill: color-mix(in srgb, var(--splash-stroke) 15%, transparent);
+          --splash-cell-fill: color-mix(in srgb, var(--splash-stroke) 35%, transparent);
+        }
       }
       .loading {
         display: flex;
diff --git a/packages/desktop/src-tauri/src/commands/settings.rs b/packages/desktop/src-tauri/src/commands/settings.rs
index 11a37939..62b7c031 100644
--- a/packages/desktop/src-tauri/src/commands/settings.rs
+++ b/packages/desktop/src-tauri/src/commands/settings.rs
@@ -28,6 +28,7 @@ pub async fn load_settings(state: State<'_, DesktopRuntime>) -> Result<SettingsL
         .settings()
         .update_with(|mut settings| {
             migrate_legacy_project_settings(&mut settings);
+            migrate_legacy_theme_settings(&mut settings);
             normalize_project_selection(&mut settings);
             (settings, ())
         })
@@ -52,6 +53,7 @@ pub async fn save_settings(
         .settings()
         .update_with(|current| {
             let mut merged = merge_persisted_settings(&current, &sanitized_changes);
+            migrate_legacy_theme_settings(&mut merged);
             normalize_project_selection(&mut merged);
             (merged, ())
         })
@@ -610,6 +612,70 @@ fn migrate_legacy_project_settings(settings: &mut Value) {
     }
 }
 
+fn migrate_legacy_theme_settings(settings: &mut Value) {
+    if !settings.is_object() {
+        *settings = json!({});
+    }
+
+    let obj = settings.as_object_mut().unwrap();
+
+    let theme_id = obj
+        .get("themeId")
+        .and_then(|value| value.as_str())
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .map(|value| value.to_string());
+
+    let theme_variant = obj
+        .get("themeVariant")
+        .and_then(|value| value.as_str())
+        .map(str::trim)
+        .filter(|value| *value == "light" || *value == "dark")
+        .map(|value| value.to_string());
+
+    let has_light = obj
+        .get("lightThemeId")
+        .and_then(|value| value.as_str())
+        .is_some_and(|value| !value.trim().is_empty());
+    let has_dark = obj
+        .get("darkThemeId")
+        .and_then(|value| value.as_str())
+        .is_some_and(|value| !value.trim().is_empty());
+
+    if has_light && has_dark {
+        return;
+    }
+
+    let default_light = "flexoki-light".to_string();
+    let default_dark = "flexoki-dark".to_string();
+
+    if !has_light {
+        let next = if let (Some(id), Some(variant)) = (theme_id.as_ref(), theme_variant.as_ref()) {
+            if variant == "light" {
+                id.clone()
+            } else {
+                default_light.clone()
+            }
+        } else {
+            default_light.clone()
+        };
+        obj.insert("lightThemeId".to_string(), json!(next));
+    }
+
+    if !has_dark {
+        let next = if let (Some(id), Some(variant)) = (theme_id.as_ref(), theme_variant.as_ref()) {
+            if variant == "dark" {
+                id.clone()
+            } else {
+                default_dark.clone()
+            }
+        } else {
+            default_dark.clone()
+        };
+        obj.insert("darkThemeId".to_string(), json!(next));
+    }
+}
+
 fn normalize_project_selection(settings: &mut Value) {
     let Some(obj) = settings.as_object_mut() else {
         return;
diff --git a/packages/desktop/src-tauri/src/main.rs b/packages/desktop/src-tauri/src/main.rs
index 8b670920..7d24d5f7 100644
--- a/packages/desktop/src-tauri/src/main.rs
+++ b/packages/desktop/src-tauri/src/main.rs
@@ -92,6 +92,8 @@ const MODELS_DEV_API_URL: &str = "https://models.dev/api.json";
 const MODELS_METADATA_CACHE_TTL: Duration = Duration::from_secs(5 * 60);
 const MODELS_METADATA_REQUEST_TIMEOUT: Duration = Duration::from_secs(8);
 
+const MAX_THEME_JSON_BYTES: u64 = 512 * 1024;
+
 const CHECK_FOR_UPDATES_EVENT: &str = "openchamber:check-for-updates";
 
 #[cfg(target_os = "macos")]
@@ -2059,6 +2061,14 @@ async fn handle_config_routes(
     method: Method,
     mut req: Request,
 ) -> Result<Response, StatusCode> {
+    if path == "/api/config/themes" && method == Method::GET {
+        let themes = read_custom_themes_from_disk().await;
+        return Ok(json_response(
+            StatusCode::OK,
+            serde_json::json!({ "themes": themes }),
+        ));
+    }
+
     if let Some(name) = path.strip_prefix("/api/config/agents/") {
         let trimmed = name.trim();
         if trimmed.is_empty() {
@@ -2564,6 +2574,7 @@ async fn proxy_to_opencode(
     let is_desktop_config_route = origin_path.starts_with("/api/config/agents/")
         || origin_path.starts_with("/api/config/commands/")
         || origin_path.starts_with("/api/config/skills")
+        || origin_path == "/api/config/themes"
         || origin_path == "/api/config/reload"
         || is_provider_auth_delete
         || is_provider_source_get;
@@ -2724,3 +2735,232 @@ impl SettingsStore {
         Ok(candidate)
     }
 }
+
+fn openchamber_user_config_root() -> Option<PathBuf> {
+    let home = dirs::home_dir()?;
+    Some(home.join(".config").join("openchamber"))
+}
+
+fn openchamber_themes_dir() -> Option<PathBuf> {
+    openchamber_user_config_root().map(|root| root.join("themes"))
+}
+
+fn value_non_empty_string(value: &Value) -> Option<String> {
+    value
+        .as_str()
+        .map(str::trim)
+        .filter(|s| !s.is_empty())
+        .map(|s| s.to_string())
+}
+
+fn get_nested<'a>(value: &'a Value, path: &[&str]) -> Option<&'a Value> {
+    let mut current = value;
+    for key in path {
+        current = current.get(*key)?;
+    }
+    Some(current)
+}
+
+fn has_required_theme_fields(theme: &Value) -> bool {
+    let required_paths: [&[&str]; 46] = [
+        &["metadata", "id"],
+        &["metadata", "name"],
+        &["metadata", "variant"],
+        &["colors", "primary", "base"],
+        &["colors", "primary", "foreground"],
+        &["colors", "surface", "background"],
+        &["colors", "surface", "foreground"],
+        &["colors", "surface", "muted"],
+        &["colors", "surface", "mutedForeground"],
+        &["colors", "surface", "elevated"],
+        &["colors", "surface", "elevatedForeground"],
+        &["colors", "surface", "subtle"],
+        &["colors", "interactive", "border"],
+        &["colors", "interactive", "selection"],
+        &["colors", "interactive", "selectionForeground"],
+        &["colors", "interactive", "focusRing"],
+        &["colors", "interactive", "hover"],
+        &["colors", "status", "error"],
+        &["colors", "status", "errorForeground"],
+        &["colors", "status", "errorBackground"],
+        &["colors", "status", "errorBorder"],
+        &["colors", "status", "warning"],
+        &["colors", "status", "warningForeground"],
+        &["colors", "status", "warningBackground"],
+        &["colors", "status", "warningBorder"],
+        &["colors", "status", "success"],
+        &["colors", "status", "successForeground"],
+        &["colors", "status", "successBackground"],
+        &["colors", "status", "successBorder"],
+        &["colors", "status", "info"],
+        &["colors", "status", "infoForeground"],
+        &["colors", "status", "infoBackground"],
+        &["colors", "status", "infoBorder"],
+        &["colors", "syntax", "base", "background"],
+        &["colors", "syntax", "base", "foreground"],
+        &["colors", "syntax", "base", "keyword"],
+        &["colors", "syntax", "base", "string"],
+        &["colors", "syntax", "base", "number"],
+        &["colors", "syntax", "base", "function"],
+        &["colors", "syntax", "base", "variable"],
+        &["colors", "syntax", "base", "type"],
+        &["colors", "syntax", "base", "comment"],
+        &["colors", "syntax", "base", "operator"],
+        &["colors", "syntax", "highlights", "diffAdded"],
+        &["colors", "syntax", "highlights", "diffRemoved"],
+        &["colors", "syntax", "highlights", "lineNumber"],
+    ];
+
+    for path in required_paths {
+        let Some(value) = get_nested(theme, path) else {
+            return false;
+        };
+        if value_non_empty_string(value).is_none() {
+            return false;
+        }
+    }
+
+    let variant = get_nested(theme, &["metadata", "variant"])
+        .and_then(value_non_empty_string)
+        .unwrap_or_default();
+    if variant != "light" && variant != "dark" {
+        return false;
+    }
+
+    true
+}
+
+fn normalize_theme_json(mut theme: Value) -> Option<Value> {
+    if !theme.is_object() {
+        return None;
+    }
+
+    if !has_required_theme_fields(&theme) {
+        return None;
+    }
+
+    let id = get_nested(&theme, &["metadata", "id"]).and_then(value_non_empty_string)?;
+    let name = get_nested(&theme, &["metadata", "name"]).and_then(value_non_empty_string)?;
+    let variant = get_nested(&theme, &["metadata", "variant"]).and_then(value_non_empty_string)?;
+
+    // Ensure metadata exists and is an object.
+    let metadata = theme
+        .get_mut("metadata")
+        .and_then(|v| v.as_object_mut())?;
+
+    metadata.insert("id".to_string(), Value::String(id.trim().to_string()));
+    metadata.insert("name".to_string(), Value::String(name.trim().to_string()));
+    metadata.insert("variant".to_string(), Value::String(variant));
+
+    if !metadata
+        .get("description")
+        .and_then(|v| v.as_str())
+        .is_some()
+    {
+        metadata.insert("description".to_string(), Value::String("".to_string()));
+    }
+
+    let version_ok = metadata
+        .get("version")
+        .and_then(|v| v.as_str())
+        .map(str::trim)
+        .filter(|s| !s.is_empty())
+        .is_some();
+    if !version_ok {
+        metadata.insert("version".to_string(), Value::String("1.0.0".to_string()));
+    }
+
+    if let Some(tags_value) = metadata.get_mut("tags") {
+        if let Some(tags) = tags_value.as_array_mut() {
+            tags.retain(|tag| tag.as_str().map(str::trim).filter(|s| !s.is_empty()).is_some());
+        } else {
+            *tags_value = Value::Array(vec![]);
+        }
+    } else {
+        metadata.insert("tags".to_string(), Value::Array(vec![]));
+    }
+
+    Some(theme)
+}
+
+async fn read_custom_themes_from_disk() -> Vec<Value> {
+    let Some(dir) = openchamber_themes_dir() else {
+        return vec![];
+    };
+
+    let mut results: Vec<Value> = vec![];
+    let mut seen_ids: std::collections::HashSet<String> = std::collections::HashSet::new();
+
+    let mut entries = match fs::read_dir(&dir).await {
+        Ok(entries) => entries,
+        Err(err) if err.kind() == std::io::ErrorKind::NotFound => return vec![],
+        Err(err) => {
+            warn!("[desktop:themes] Failed to list themes dir {:?}: {}", dir, err);
+            return vec![];
+        }
+    };
+
+    while let Ok(Some(entry)) = entries.next_entry().await {
+        let path = entry.path();
+        let is_json = path
+            .extension()
+            .and_then(|ext| ext.to_str())
+            .map(|ext| ext.eq_ignore_ascii_case("json"))
+            .unwrap_or(false);
+        if !is_json {
+            continue;
+        }
+
+        let metadata = match entry.metadata().await {
+            Ok(v) => v,
+            Err(_) => continue,
+        };
+        if !metadata.is_file() {
+            continue;
+        }
+        if metadata.len() > MAX_THEME_JSON_BYTES {
+            warn!(
+                "[desktop:themes] Skip {:?}: too large ({} bytes)",
+                path,
+                metadata.len()
+            );
+            continue;
+        }
+
+        let bytes = match fs::read(&path).await {
+            Ok(bytes) => bytes,
+            Err(err) => {
+                warn!("[desktop:themes] Failed to read {:?}: {}", path, err);
+                continue;
+            }
+        };
+
+        let parsed: Value = match serde_json::from_slice(&bytes) {
+            Ok(v) => v,
+            Err(err) => {
+                warn!("[desktop:themes] Invalid JSON {:?}: {}", path, err);
+                continue;
+            }
+        };
+
+        let normalized = match normalize_theme_json(parsed) {
+            Some(v) => v,
+            None => {
+                warn!("[desktop:themes] Invalid theme JSON {:?}", path);
+                continue;
+            }
+        };
+
+        let id = get_nested(&normalized, &["metadata", "id"])
+            .and_then(value_non_empty_string)
+            .unwrap_or_default();
+        if id.is_empty() || seen_ids.contains(&id) {
+            continue;
+        }
+        seen_ids.insert(id);
+
+        results.push(normalized);
+    }
+
+    results
+}
diff --git a/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx b/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx
index e4deed36..029916aa 100644
--- a/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx
+++ b/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx
@@ -137,10 +137,10 @@ export const AgentMentionAutocomplete = React.forwardRef<AgentMentionAutocomplet
         ref={(el) => {
           itemRefs.current[index] = el;
         }}
-        className={cn(
-          'flex items-start gap-2 px-3 py-1.5 cursor-pointer rounded-lg typography-ui-label',
-          index === selectedIndex && 'bg-muted'
-        )}
+          className={cn(
+            'flex items-start gap-2 px-3 py-1.5 cursor-pointer rounded-lg typography-ui-label',
+          index === selectedIndex && 'bg-interactive-selection'
+          )}
         onClick={() => onAgentSelect(agent.name)}
         onMouseEnter={() => setSelectedIndex(index)}
       >
@@ -175,7 +175,7 @@ export const AgentMentionAutocomplete = React.forwardRef<AgentMentionAutocomplet
   return (
     <div
       ref={containerRef}
-      className="absolute z-[100] min-w-0 w-full max-w-[360px] max-h-60 bg-background border border-border rounded-xl shadow-none bottom-full mb-2 left-0 flex flex-col"
+      className="absolute z-[100] min-w-0 w-full max-w-[360px] max-h-60 bg-background border-2 border-border/60 rounded-xl shadow-md bottom-full mb-2 left-0 flex flex-col"
     >
       <ScrollableOverlay outerClassName="flex-1 min-h-0" className="px-0 pb-2" fillContainer={false}>
         {agents.length ? (
diff --git a/packages/ui/src/components/chat/ChatContainer.tsx b/packages/ui/src/components/chat/ChatContainer.tsx
index 9c179432..68e9d332 100644
--- a/packages/ui/src/components/chat/ChatContainer.tsx
+++ b/packages/ui/src/components/chat/ChatContainer.tsx
@@ -298,13 +298,13 @@ export const ChatContainer: React.FC = () => {
             <div className="relative bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 z-10">
                 {showScrollButton && sessionMessages.length > 0 && (
                     <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2">
-                            <Button
-                                variant="outline"
-                                size="sm"
-                                onClick={() => scrollToBottom({ force: true })}
-                                className="rounded-full h-8 w-8 p-0 shadow-none bg-background/95 hover:bg-accent"
-                                aria-label="Scroll to bottom"
-                            >
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  onClick={() => scrollToBottom({ force: true })}
+                                  className="rounded-full h-8 w-8 p-0 shadow-none bg-background/95 hover:bg-interactive-hover"
+                                  aria-label="Scroll to bottom"
+                                >
 
                             <RiArrowDownLine className="h-4 w-4" />
                         </Button>
diff --git a/packages/ui/src/components/chat/ChatEmptyState.tsx b/packages/ui/src/components/chat/ChatEmptyState.tsx
index 68716f7e..4fca9297 100644
--- a/packages/ui/src/components/chat/ChatEmptyState.tsx
+++ b/packages/ui/src/components/chat/ChatEmptyState.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo';
 import { TextLoop } from '@/components/ui/TextLoop';
-import { useOptionalThemeSystem } from '@/contexts/useThemeSystem';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
 
 const phrases = [
     "Fix the failing tests",
@@ -24,17 +24,10 @@ const phrases = [
 ];
 
 const ChatEmptyState: React.FC = () => {
-    const themeContext = useOptionalThemeSystem();
+    const { currentTheme } = useThemeSystem();
 
-    let isDark = true;
-    if (themeContext) {
-        isDark = themeContext.currentTheme.metadata.variant !== 'light';
-    } else if (typeof window !== 'undefined') {
-        isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-
-    // Same colors as face fill in OpenChamberLogo, but higher opacity for text readability
-    const textColor = isDark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.4)';
+    // Use theme's muted foreground for secondary text
+    const textColor = currentTheme?.colors?.surface?.mutedForeground || 'var(--muted-foreground)';
 
     return (
         <div className="flex flex-col items-center justify-center min-h-full w-full gap-6">
diff --git a/packages/ui/src/components/chat/ChatErrorBoundary.tsx b/packages/ui/src/components/chat/ChatErrorBoundary.tsx
index 1d86a179..c2fc26a3 100644
--- a/packages/ui/src/components/chat/ChatErrorBoundary.tsx
+++ b/packages/ui/src/components/chat/ChatErrorBoundary.tsx
@@ -60,7 +60,7 @@ export class ChatErrorBoundary extends React.Component<ChatErrorBoundaryProps, C
 
               {this.state.error && (
                 <details className="text-xs font-mono bg-muted p-3 rounded">
-                  <summary className="cursor-pointer hover:bg-muted/80">Error details</summary>
+                  <summary className="cursor-pointer hover:bg-interactive-hover/80">Error details</summary>
                   <pre className="mt-2 overflow-x-auto">
                     {this.state.error.toString()}
                   </pre>
@@ -85,4 +85,4 @@ export class ChatErrorBoundary extends React.Component<ChatErrorBoundaryProps, C
 
     return this.props.children;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx
index a249ee72..156e3190 100644
--- a/packages/ui/src/components/chat/ChatInput.tsx
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -11,8 +11,7 @@ import { useSessionStore } from '@/stores/useSessionStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useUIStore } from '@/stores/useUIStore';
 import { useMessageQueueStore, type QueuedMessage } from '@/stores/messageQueueStore';
-import type { AttachedFile, EditPermissionMode } from '@/stores/types/sessionTypes';
-import { getEditModeColors } from '@/lib/permissions/editModeColors';
+import type { AttachedFile } from '@/stores/types/sessionTypes';
 import { AttachedFilesList } from './FileAttachment';
 import { QueuedMessageChips } from './QueuedMessageChips';
 import { FileMentionAutocomplete, type FileMentionHandle } from './FileMentionAutocomplete';
@@ -40,7 +39,7 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { useContextStore } from '@/stores/contextStore';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
 
 const MAX_VISIBLE_TEXTAREA_LINES = 8;
 const EMPTY_QUEUE: QueuedMessage[] = [];
@@ -52,53 +51,6 @@ interface ChatInputProps {
 
 const isPrimaryMode = (mode?: string) => mode === 'primary' || mode === 'all' || mode === undefined || mode === null;
 
-type PermissionAction = 'allow' | 'ask' | 'deny';
-type PermissionRule = { permission: string; pattern: string; action: PermissionAction };
-
-const asPermissionRuleset = (value: unknown): PermissionRule[] | null => {
-    if (!Array.isArray(value)) {
-        return null;
-    }
-    const rules: PermissionRule[] = [];
-    for (const entry of value) {
-        if (!entry || typeof entry !== 'object') {
-            continue;
-        }
-        const candidate = entry as Partial<PermissionRule>;
-        if (typeof candidate.permission !== 'string' || typeof candidate.pattern !== 'string' || typeof candidate.action !== 'string') {
-            continue;
-        }
-        if (candidate.action !== 'allow' && candidate.action !== 'ask' && candidate.action !== 'deny') {
-            continue;
-        }
-        rules.push({ permission: candidate.permission, pattern: candidate.pattern, action: candidate.action });
-    }
-    return rules;
-};
-
-const resolveWildcardPermissionAction = (ruleset: unknown, permission: string): PermissionAction | undefined => {
-    const rules = asPermissionRuleset(ruleset);
-    if (!rules || rules.length === 0) {
-        return undefined;
-    }
-
-    for (let i = rules.length - 1; i >= 0; i -= 1) {
-        const rule = rules[i];
-        if (rule.permission === permission && rule.pattern === '*') {
-            return rule.action;
-        }
-    }
-
-    for (let i = rules.length - 1; i >= 0; i -= 1) {
-        const rule = rules[i];
-        if (rule.permission === '*' && rule.pattern === '*') {
-            return rule.action;
-        }
-    }
-
-    return undefined;
-};
-
 export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBottom }) => {
     const [message, setMessage] = React.useState('');
     const [isDragging, setIsDragging] = React.useState(false);
@@ -140,6 +92,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
     const agents = getVisibleAgents();
     const { isMobile, inputBarOffset, isKeyboardOpen, setTimelineDialogOpen, cornerRadius } = useUIStore();
     const { working } = useAssistantStatus();
+    const { currentTheme } = useThemeSystem();
     const [showAbortStatus, setShowAbortStatus] = React.useState(false);
     const abortTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
     const prevWasAbortedRef = React.useRef(false);
@@ -270,79 +223,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         }
     }, [pendingInputText, consumePendingInputText]);
 
-    const currentAgent = React.useMemo(() => {
-        const selectedName = currentSessionId
-            ? (useContextStore.getState().getSessionAgentSelection(currentSessionId) || currentAgentName)
-            : currentAgentName;
-        if (!selectedName) {
-            return undefined;
-        }
-        return agents.find((agent) => agent.name === selectedName);
-    }, [agents, currentAgentName, currentSessionId]);
-
-    const agentEditAction = React.useMemo<EditPermissionMode>(() => {
-        if (!currentAgent) {
-            return 'deny';
-        }
-
-        return resolveWildcardPermissionAction(currentAgent.permission, 'edit') ?? 'allow';
-    }, [currentAgent]);
-
-    const sessionEditMode = useContextStore(
-        React.useCallback((state) => {
-            if (!currentAgentName) {
-                return undefined;
-            }
-            const sessionId = currentSessionId ?? '__global__';
-            return state.getSessionAgentEditMode(sessionId, currentAgentName, 'ask');
-        }, [currentAgentName, currentSessionId])
-    );
-
-    const selectionContextReady = Boolean(currentSessionId && currentAgentName);
-
-    const effectiveEditPermission = React.useMemo<EditPermissionMode>(() => {
-        // Only show accent when edits are effectively allowed.
-        if (agentEditAction === 'allow') {
-            return 'allow';
-        }
-        if (agentEditAction !== 'ask') {
-            return 'ask';
-        }
-
-        const sessionMode = selectionContextReady ? (sessionEditMode ?? 'ask') : 'ask';
-        return (sessionMode === 'allow' || sessionMode === 'full') ? 'allow' : 'ask';
-    }, [agentEditAction, selectionContextReady, sessionEditMode]);
-
-    const chatInputAccent = React.useMemo(() => getEditModeColors(effectiveEditPermission), [effectiveEditPermission]);
-
-    // VS Code webviews tend to have stronger status border colors; in web/desktop themes the same
-    // border tokens can already be subtle, so avoid double-softening there.
-    const softenBorderColor = React.useCallback((color: string) => (
-        isVSCodeRuntime()
-            ? `color-mix(in srgb, ${color} 55%, transparent)`
-            : color
-    ), []);
-
-    const chatInputWrapperStyle = React.useMemo<React.CSSProperties | undefined>(() => {
-        // Keep border width stable so toggling modes doesn't shift layout.
-        const baseBorderWidth = isVSCodeRuntime() ? 1 : 2;
-
-        const baseStyle: React.CSSProperties = {
-            borderRadius: cornerRadius,
-        };
-
-        if (!chatInputAccent) {
-            return { ...baseStyle, borderWidth: baseBorderWidth };
-        }
-
-        const borderColor = chatInputAccent.border ?? chatInputAccent.text;
-        return {
-            ...baseStyle,
-            borderColor: softenBorderColor(borderColor),
-            borderWidth: baseBorderWidth,
-        };
-    }, [chatInputAccent, softenBorderColor, cornerRadius]);
-
     const hasContent = message.trim() || attachedFiles.length > 0;
     const hasQueuedMessages = queuedMessages.length > 0;
     const canSend = hasContent || hasQueuedMessages;
@@ -1378,7 +1258,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         <form
             onSubmit={handleSubmit}
             className={cn(
-                "relative pt-0 pb-2 md:pb-4",
+                "relative pt-0 pb-4",
                 isMobile && isKeyboardOpen ? "ios-keyboard-safe-area" : "bottom-safe-area"
             )}
             data-keyboard-avoid="true"
@@ -1438,10 +1318,14 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                 />
                 <div
                     className={cn(
-                        "border border-border/80 bg-input/10 dark:bg-input/30",
-                        "flex flex-col relative overflow-visible"
+                        "flex flex-col relative overflow-visible",
+                        "border border-border/80",
+                        "focus-within:ring-1 focus-within:ring-primary/50"
                     )}
-                    style={chatInputWrapperStyle}
+                    style={{
+                        borderRadius: cornerRadius,
+                        backgroundColor: currentTheme?.colors?.surface?.subtle,
+                    }}
                 >
                     {stopButton}
                         {}
@@ -1493,12 +1377,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                                 ? "# for agents; @ for files; / for commands"
                                 : "Select or create a session to start chatting"}
                             disabled={!currentSessionId && !newSessionDraftOpen}
-
+                            outerClassName="focus-within:ring-0"
                         className={cn(
-                            'min-h-[52px] resize-none border-0 px-3 shadow-none rounded-b-none appearance-none focus:shadow-none focus-visible:shadow-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent hover:border-transparent bg-transparent',
+                            'min-h-[52px] resize-none border-0 px-3 rounded-b-none appearance-none hover:border-transparent bg-transparent',
                             isMobile ? "py-2.5" : "pt-4 pb-2",
-                            canAbort && 'pr-10',
-                            "focus-visible:outline-none focus-visible:ring-0"
+                            canAbort && 'pr-10'
                         )}
                         style={{
                             flex: 'none',
diff --git a/packages/ui/src/components/chat/ChatMessage.tsx b/packages/ui/src/components/chat/ChatMessage.tsx
index fbec6ad4..bc006303 100644
--- a/packages/ui/src/components/chat/ChatMessage.tsx
+++ b/packages/ui/src/components/chat/ChatMessage.tsx
@@ -898,7 +898,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
                         displayParts.length === 0 ? null : (
                         <FadeInOnReveal>
                             <div className="flex justify-end">
-                                <div className="max-w-[85%] rounded-2xl rounded-br-sm bg-primary/10 dark:bg-primary/10 px-5 py-3 shadow-sm border border-primary/5">
+                                <div style={{ backgroundColor: 'var(--chat-user-message-bg)' }} className="max-w-[85%] rounded-2xl rounded-br-sm px-5 py-3 shadow-sm border border-primary/5">
                                     <MessageBody
                                         messageId={message.info.id}
                                         parts={displayParts}
@@ -932,7 +932,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
                         </FadeInOnReveal>
                         )
                     ) : (
-                        <div className="relative pl-4 ml-1">
+                        <div className="relative">
                             {shouldShowHeader && (
                                 <MessageHeader
                                     isUser={isUser}
diff --git a/packages/ui/src/components/chat/CommandAutocomplete.tsx b/packages/ui/src/components/chat/CommandAutocomplete.tsx
index 3fce50f9..25931c25 100644
--- a/packages/ui/src/components/chat/CommandAutocomplete.tsx
+++ b/packages/ui/src/components/chat/CommandAutocomplete.tsx
@@ -232,7 +232,7 @@ export const CommandAutocomplete = React.forwardRef<CommandAutocompleteHandle, C
   return (
     <div
       ref={containerRef}
-      className="absolute z-[100] min-w-0 w-full max-w-[450px] max-h-64 bg-background border border-border rounded-xl shadow-none bottom-full mb-2 left-0 flex flex-col"
+      className="absolute z-[100] min-w-0 w-full max-w-[450px] max-h-64 bg-background border-2 border-border/60 rounded-xl shadow-md bottom-full mb-2 left-0 flex flex-col"
     >
       <ScrollableOverlay outerClassName="flex-1 min-h-0" className="px-0 pb-2" fillContainer={false}>
         {loading ? (
@@ -251,7 +251,7 @@ export const CommandAutocomplete = React.forwardRef<CommandAutocompleteHandle, C
                   ref={(el) => { itemRefs.current[index] = el; }}
                   className={cn(
                     "flex items-start gap-2 px-3 py-2 cursor-pointer rounded-lg",
-                    index === selectedIndex && "bg-muted"
+                    index === selectedIndex && "bg-interactive-selection"
                   )}
                   onClick={() => onCommandSelect(command)}
                   onMouseEnter={() => setSelectedIndex(index)}
diff --git a/packages/ui/src/components/chat/DiffPreview.tsx b/packages/ui/src/components/chat/DiffPreview.tsx
index 0d04d152..7c144f63 100644
--- a/packages/ui/src/components/chat/DiffPreview.tsx
+++ b/packages/ui/src/components/chat/DiffPreview.tsx
@@ -36,7 +36,7 @@ export const DiffPreview: React.FC<DiffPreviewProps> = ({ diff, syntaxTheme, fil
                                         : {}
                             }
                         >
-                            <span className="text-muted-foreground/60 w-8 flex-shrink-0 text-right pr-2 self-start select-none">
+                            <span className="w-10 flex-shrink-0 text-right pr-3 select-none border-r mr-3 -my-0.5 py-0.5" style={{ color: 'var(--tools-edit-line-number)', borderColor: 'var(--tools-border)' }}>
                                 {line.lineNumber || ''}
                             </span>
                             <div className="flex-1 min-w-0">
@@ -94,7 +94,7 @@ export const WritePreview: React.FC<WritePreviewProps> = ({ content, syntaxTheme
             <div className="space-y-0">
                 {lines.map((line, lineIdx) => (
                     <div key={lineIdx} className="typography-code font-mono px-2 py-0.5 flex -mx-1">
-                        <span className="text-muted-foreground/60 w-8 flex-shrink-0 text-right pr-2 self-start select-none">
+                        <span className="w-10 flex-shrink-0 text-right pr-3 select-none border-r mr-3 -my-0.5 py-0.5" style={{ color: 'var(--tools-edit-line-number)', borderColor: 'var(--tools-border)' }}>
                             {lineIdx + 1}
                         </span>
                         <div className="flex-1 min-w-0">
diff --git a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
index 7b663f23..40a67cb6 100644
--- a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
+++ b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
@@ -295,18 +295,18 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
       case 'tsx':
       case 'js':
       case 'jsx':
-        return <RiCodeLine className="h-3.5 w-3.5 text-blue-500" />;
+        return <RiCodeLine className="h-3.5 w-3.5 text-[var(--status-info)]" />;
       case 'json':
-        return <RiCodeLine className="h-3.5 w-3.5 text-yellow-500" />;
+        return <RiCodeLine className="h-3.5 w-3.5 text-[var(--status-warning)]" />;
       case 'md':
       case 'mdx':
-        return <RiFileLine className="h-3.5 w-3.5 text-gray-500" />;
+        return <RiFileLine className="h-3.5 w-3.5 text-muted-foreground" />;
       case 'png':
       case 'jpg':
       case 'jpeg':
       case 'gif':
       case 'svg':
-        return <RiFileImageLine className="h-3.5 w-3.5 text-green-500" />;
+        return <RiFileImageLine className="h-3.5 w-3.5 text-[var(--status-success)]" />;
       default:
         return <RiFilePdfLine className="h-3.5 w-3.5 text-muted-foreground" />;
     }
@@ -315,7 +315,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
   return (
       <div
         ref={containerRef}
-        className="absolute z-[100] min-w-0 w-full max-w-[520px] max-h-64 bg-background border border-border rounded-xl shadow-none bottom-full mb-2 left-0 flex flex-col"
+        className="absolute z-[100] min-w-0 w-full max-w-[520px] max-h-64 bg-background border-2 border-border/60 rounded-xl shadow-md bottom-full mb-2 left-0 flex flex-col"
       >
         <ScrollableOverlay outerClassName="flex-1 min-h-0" className="px-0">
         {loading ? (
@@ -334,10 +334,10 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
               const item = (
                 <div
                   ref={(el) => { itemRefs.current[index] = el; }}
-                  className={cn(
-                    "flex items-center gap-2 px-3 py-1.5 cursor-pointer typography-ui-label rounded-lg",
-                    isSelected && "bg-muted"
-                  )}
+                    className={cn(
+                      "flex items-center gap-2 px-3 py-1.5 cursor-pointer typography-ui-label rounded-lg",
+                      isSelected && "bg-interactive-selection"
+                    )}
                   onClick={() => handleFileSelect(file)}
                   onMouseEnter={() => setSelectedIndex(index)}
                 >
diff --git a/packages/ui/src/components/chat/MarkdownRenderer.tsx b/packages/ui/src/components/chat/MarkdownRenderer.tsx
index fd1ab9c3..a35f8368 100644
--- a/packages/ui/src/components/chat/MarkdownRenderer.tsx
+++ b/packages/ui/src/components/chat/MarkdownRenderer.tsx
@@ -5,8 +5,10 @@ import type { Part } from '@opencode-ai/sdk/v2';
 import { cn } from '@/lib/utils';
 import { RiFileCopyLine, RiCheckLine, RiDownloadLine } from '@remixicon/react';
 
-import { flexokiStreamdownThemes } from '@/lib/shiki/flexokiThemes';
 import { isVSCodeRuntime } from '@/lib/desktop';
+import { useOptionalThemeSystem } from '@/contexts/useThemeSystem';
+import { getStreamdownThemePair } from '@/lib/shiki/appThemeRegistry';
+import { getDefaultTheme } from '@/lib/theme/themes';
 
 const withStableStringId = <T extends object>(value: T, id: string): T => {
   const existingPrimitive = (value as Record<symbol, unknown>)[Symbol.toPrimitive];
@@ -43,45 +45,75 @@ const withStableStringId = <T extends object>(value: T, id: string): T => {
   return value;
 };
 
-const getMarkdownShikiThemes = (): readonly [string | object, string | object] => {
-  if (!isVSCodeRuntime() || typeof window === 'undefined') {
-    return flexokiStreamdownThemes;
-  }
-
-  const provided = window.__OPENCHAMBER_VSCODE_SHIKI_THEMES__;
-  if (provided?.light && provided?.dark) {
-    const light = withStableStringId(
-      { ...(provided.light as Record<string, unknown>) },
-      `vscode-shiki-light:${String((provided.light as { name?: unknown })?.name ?? 'theme')}`,
-    );
-    const dark = withStableStringId(
-      { ...(provided.dark as Record<string, unknown>) },
-      `vscode-shiki-dark:${String((provided.dark as { name?: unknown })?.name ?? 'theme')}`,
-    );
-    return [light, dark] as const;
-  }
-
-  return flexokiStreamdownThemes;
-};
-
 const useMarkdownShikiThemes = (): readonly [string | object, string | object] => {
-  const [themes, setThemes] = React.useState(getMarkdownShikiThemes);
+  const themeSystem = useOptionalThemeSystem();
+
+  const isVSCode = isVSCodeRuntime() && typeof window !== 'undefined';
+
+  const fallbackLight = getDefaultTheme(false);
+  const fallbackDark = getDefaultTheme(true);
+
+  const lightThemeId = themeSystem?.lightThemeId ?? fallbackLight.metadata.id;
+  const darkThemeId = themeSystem?.darkThemeId ?? fallbackDark.metadata.id;
+
+  const lightTheme =
+    themeSystem?.availableThemes.find((theme) => theme.metadata.id === lightThemeId) ??
+    fallbackLight;
+  const darkTheme =
+    themeSystem?.availableThemes.find((theme) => theme.metadata.id === darkThemeId) ??
+    fallbackDark;
+
+  const fallbackThemes = React.useMemo(
+    () => getStreamdownThemePair(lightTheme, darkTheme),
+    [darkTheme, lightTheme],
+  );
+
+  const getThemes = React.useCallback((): readonly [string | object, string | object] => {
+    if (!isVSCode) {
+      return fallbackThemes;
+    }
+
+    const provided = window.__OPENCHAMBER_VSCODE_SHIKI_THEMES__;
+    if (provided?.light && provided?.dark) {
+      const light = withStableStringId(
+        { ...(provided.light as Record<string, unknown>) },
+        `vscode-shiki-light:${String((provided.light as { name?: unknown })?.name ?? 'theme')}`,
+      );
+      const dark = withStableStringId(
+        { ...(provided.dark as Record<string, unknown>) },
+        `vscode-shiki-dark:${String((provided.dark as { name?: unknown })?.name ?? 'theme')}`,
+      );
+      return [light, dark] as const;
+    }
+
+    return fallbackThemes;
+  }, [fallbackThemes, isVSCode]);
+
+  const [themes, setThemes] = React.useState(getThemes);
 
   React.useEffect(() => {
-    if (!isVSCodeRuntime() || typeof window === 'undefined') return;
+    if (!isVSCode) {
+      return;
+    }
+
+    setThemes(getThemes());
+  }, [getThemes, isVSCode]);
+
+  React.useEffect(() => {
+    if (!isVSCode) return;
 
     const handler = (event: Event) => {
       // Rely on the canonical `window.__OPENCHAMBER_VSCODE_SHIKI_THEMES__` that the webview updates
       // before dispatching this event, so we always apply stable cache keys and avoid stale token reuse.
       void event;
-      setThemes(getMarkdownShikiThemes());
+      setThemes(getThemes());
     };
 
     window.addEventListener('openchamber:vscode-shiki-themes', handler as EventListener);
     return () => window.removeEventListener('openchamber:vscode-shiki-themes', handler as EventListener);
-  }, []);
+  }, [getThemes, isVSCode]);
 
-  return themes;
+  return isVSCode ? themes : fallbackThemes;
 };
 
 // Table utility functions
@@ -208,7 +240,7 @@ const TableCopyButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement | nul
     <div className="relative" ref={menuRef}>
       <button
         onClick={() => setShowMenu(!showMenu)}
-        className="p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground transition-colors"
+        className="p-1 rounded hover:bg-interactive-hover/60 text-muted-foreground hover:text-foreground transition-colors"
         title="Copy table"
       >
         {copied ? <RiCheckLine className="size-3.5" /> : <RiFileCopyLine className="size-3.5" />}
@@ -216,13 +248,13 @@ const TableCopyButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement | nul
       {showMenu && (
         <div className="absolute top-full right-0 z-10 mt-1 min-w-[100px] overflow-hidden rounded-md border border-border bg-background shadow-lg">
           <button
-            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-interactive-hover/40"
             onClick={() => handleCopy('csv')}
           >
             CSV
           </button>
           <button
-            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-interactive-hover/40"
             onClick={() => handleCopy('tsv')}
           >
             TSV
@@ -268,7 +300,7 @@ const TableDownloadButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement |
     <div className="relative" ref={menuRef}>
       <button
         onClick={() => setShowMenu(!showMenu)}
-        className="p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground transition-colors"
+        className="p-1 rounded hover:bg-interactive-hover/60 text-muted-foreground hover:text-foreground transition-colors"
         title="Download table"
       >
         <RiDownloadLine className="size-3.5" />
@@ -276,13 +308,13 @@ const TableDownloadButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement |
       {showMenu && (
         <div className="absolute top-full right-0 z-10 mt-1 min-w-[100px] overflow-hidden rounded-md border border-border bg-background shadow-lg">
           <button
-            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-interactive-hover/40"
             onClick={() => handleDownload('csv')}
           >
             CSV
           </button>
           <button
-            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/40"
+            className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-interactive-hover/40"
             onClick={() => handleDownload('markdown')}
           >
             Markdown
@@ -395,7 +427,7 @@ const CodeBlockWrapper: React.FC<CodeBlockWrapperProps> = ({ children, className
       <div className="absolute top-1 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
         <button
           onClick={handleCopy}
-          className="p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground transition-colors"
+          className="p-1 rounded hover:bg-interactive-hover/60 text-muted-foreground hover:text-foreground transition-colors"
           title="Copy"
         >
           {copied ? <RiCheckLine className="size-3.5" /> : <RiFileCopyLine className="size-3.5" />}
diff --git a/packages/ui/src/components/chat/ModelControls.tsx b/packages/ui/src/components/chat/ModelControls.tsx
index d1f2440d..1279862b 100644
--- a/packages/ui/src/components/chat/ModelControls.tsx
+++ b/packages/ui/src/components/chat/ModelControls.tsx
@@ -1371,7 +1371,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                 value={mobileModelQuery}
                                 onChange={(event) => setMobileModelQuery(event.target.value)}
                                 placeholder="Search providers or models"
-                                className="pl-7 h-9 rounded-xl border-border/40 bg-background/95 typography-meta"
+                                className="pl-7 h-9 rounded-xl border-border/40 bg-[var(--surface-elevated)] typography-meta"
                             />
                             {mobileModelQuery && (
                                 <button
@@ -1394,7 +1394,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
 
                     {/* Favorites Section for Mobile */}
                     {!mobileModelQuery && favoriteModelsList.length > 0 && (
-                        <div className="rounded-xl border border-border/40 bg-background/95 overflow-hidden">
+                        <div className="rounded-xl border border-border/40 bg-[var(--surface-elevated)] overflow-hidden">
                             <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                                 <RiStarFill className="h-3 w-3 inline-block mr-1.5 text-primary" />
                                 Favorites
@@ -1413,7 +1413,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                                 'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 text-left last:border-b-0',
                                                 'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary',
                                                 'first:rounded-t-xl last:rounded-b-xl transition-colors',
-                                                isSelected ? 'bg-primary/15 text-primary' : 'hover:bg-muted'
+                                                 isSelected ? 'bg-interactive-selection/15 text-interactive-selection-foreground' : 'hover:bg-interactive-hover'
                                             )}
                                         >
                                             <div className="flex items-center gap-2 min-w-0">
@@ -1440,7 +1440,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
 
                     {/* Recent Section for Mobile */}
                     {!mobileModelQuery && recentModelsList.length > 0 && (
-                        <div className="rounded-xl border border-border/40 bg-background/95 overflow-hidden">
+                        <div className="rounded-xl border border-border/40 bg-[var(--surface-elevated)] overflow-hidden">
                             <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                                 <RiTimeLine className="h-3 w-3 inline-block mr-1.5" />
                                 Recent
@@ -1459,7 +1459,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                                 'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 text-left last:border-b-0',
                                                 'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary',
                                                 'first:rounded-t-xl last:rounded-b-xl transition-colors',
-                                                isSelected ? 'bg-primary/15 text-primary' : 'hover:bg-muted'
+                                                 isSelected ? 'bg-interactive-selection/15 text-interactive-selection-foreground' : 'hover:bg-interactive-hover'
                                             )}
                                         >
                                             <div className="flex items-center gap-2 min-w-0">
@@ -1492,8 +1492,8 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                         const isActiveProvider = provider.id === currentProviderId;
                         const isExpanded = expandedMobileProviders.has(provider.id) || normalizedQuery.length > 0;
 
-                        return (
-                            <div key={provider.id} className="rounded-xl border border-border/40 bg-background/95 overflow-hidden">
+                         return (
+                             <div key={provider.id} className="rounded-xl border border-border/40 bg-[var(--surface-elevated)] overflow-hidden">
                                 <button
                                     type="button"
                                     onClick={() => toggleMobileProviderExpansion(provider.id)}
@@ -1533,9 +1533,9 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                                     className={cn(
                                                         'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 last:border-b-0',
                                                         'rounded-lg transition-colors',
-                                                        !isSelected && 'hover:bg-muted',
+                                                        !isSelected && 'hover:bg-interactive-hover',
                                                         isSelected
-                                                            ? 'bg-primary/15 text-primary'
+                                                            ? 'bg-interactive-selection/15 text-interactive-selection-foreground'
                                                             : ''
                                                     )}
                                                 >
@@ -1584,9 +1584,9 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                                             toggleFavoriteModel(provider.id as string, model.id as string);
                                                         }}
                                                         className={cn(
-                                                            "model-favorite-button flex h-5 w-5 items-center justify-center hover:text-yellow-600 flex-shrink-0",
+                                                            "model-favorite-button flex h-5 w-5 items-center justify-center hover:text-primary/80 flex-shrink-0",
                                                             isFavoriteModel(provider.id as string, model.id as string)
-                                                                ? "text-yellow-500"
+                                                                ? "text-primary"
                                                                 : "text-muted-foreground"
                                                         )}
                                                         aria-label={isFavoriteModel(provider.id as string, model.id as string) ? "Unfavorite" : "Favorite"}
@@ -1857,7 +1857,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                 ref={(el) => { modelItemRefs.current[flatIndex] = el; }}
                 className={cn(
                     "typography-meta group flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer",
-                    isHighlighted ? "bg-accent" : "hover:bg-accent/50"
+                     isHighlighted ? "bg-interactive-selection" : "hover:bg-interactive-hover/50"
                 )}
                 onClick={() => handleProviderAndModelChange(providerID, modelID)}
                 onMouseEnter={() => setModelSelectedIndex(flatIndex)}
@@ -1901,8 +1901,8 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                             toggleFavoriteModel(providerID, modelID);
                         }}
                         className={cn(
-                            "model-favorite-button flex h-4 w-4 items-center justify-center hover:text-yellow-600",
-                            isFavorite ? "text-yellow-500" : "text-muted-foreground"
+                            "model-favorite-button flex h-4 w-4 items-center justify-center hover:text-primary/80",
+                            isFavorite ? "text-primary" : "text-muted-foreground"
                         )}
                         aria-label={isFavorite ? "Unfavorite" : "Favorite"}
                         title={isFavorite ? "Remove from favorites" : "Add to favorites"}
@@ -2021,7 +2021,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                             <DropdownMenuTrigger asChild>
                                 <div
                                     className={cn(
-                                        'model-controls__model-trigger flex items-center gap-1.5 cursor-pointer hover:opacity-70 min-w-0',
+                                        'model-controls__model-trigger flex items-center gap-1.5 cursor-pointer hover:bg-transparent hover:opacity-70 min-w-0',
                                         buttonHeight
                                     )}
                                 >
@@ -2082,7 +2082,10 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                     {/* Favorites Section */}
                                     {filteredFavorites.length > 0 && (
                                         <>
-                                            <DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
+                                            <DropdownMenuLabel
+                                                style={{ backgroundColor: 'var(--surface-elevated)' }}
+                                                className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 border-b border-border/30"
+                                            >
                                                 <RiStarFill className="h-4 w-4 text-primary" />
                                                 Favorites
                                             </DropdownMenuLabel>
@@ -2097,7 +2100,10 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                     {filteredRecents.length > 0 && (
                                         <>
                                             {filteredFavorites.length > 0 && <DropdownMenuSeparator />}
-                                            <DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
+                                            <DropdownMenuLabel
+                                                style={{ backgroundColor: 'var(--surface-elevated)' }}
+                                                className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 border-b border-border/30"
+                                            >
                                                 <RiTimeLine className="h-4 w-4" />
                                                 Recent
                                             </DropdownMenuLabel>
@@ -2117,7 +2123,10 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                     {filteredProviders.map((provider, index) => (
                                         <React.Fragment key={provider.id}>
                                             {index > 0 && <DropdownMenuSeparator />}
-                                            <DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
+                                            <DropdownMenuLabel
+                                                style={{ backgroundColor: 'var(--surface-elevated)' }}
+                                                className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 border-b border-border/30"
+                                            >
                                                 <ProviderLogo
                                                     providerId={provider.id}
                                                     className="h-4 w-4 flex-shrink-0"
@@ -2148,7 +2157,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                         onTouchCancel={handleLongPressEnd}
                         className={cn(
                             'model-controls__model-trigger flex items-center gap-1.5 min-w-0 focus:outline-none',
-                            'cursor-pointer hover:opacity-70',
+                            'cursor-pointer hover:bg-transparent hover:opacity-70',
                             buttonHeight
                         )}
                     >
@@ -2317,7 +2326,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                     className={cn(
                         'model-controls__variant-trigger flex items-center gap-1.5 transition-opacity min-w-0 focus:outline-none',
                         buttonHeight,
-                        'cursor-pointer hover:opacity-70',
+                        'cursor-pointer hover:bg-transparent hover:opacity-70',
                     )}
                 >
                     <RiBrainAi3Line className={cn(controlIconSize, 'flex-shrink-0', colorClass)} />
@@ -2341,7 +2350,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                         <DropdownMenuTrigger asChild>
                             <div
                                 className={cn(
-                                    'model-controls__variant-trigger flex items-center gap-1.5 transition-opacity cursor-pointer hover:opacity-70 min-w-0',
+                                    'model-controls__variant-trigger flex items-center gap-1.5 transition-colors cursor-pointer hover:bg-transparent hover:opacity-70 min-w-0',
                                     buttonHeight,
                                 )}
                             >
@@ -2403,7 +2412,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                             <TooltipTrigger asChild>
                                 <DropdownMenuTrigger asChild>
                                     <div className={cn(
-                                        'flex items-center gap-1.5 transition-opacity cursor-pointer hover:opacity-70 min-w-0',
+                                        'flex items-center gap-1.5 transition-colors cursor-pointer hover:bg-transparent hover:opacity-70 min-w-0',
                                         buttonHeight
                                     )}>
                                         <RiAiAgentLine
@@ -2485,9 +2494,9 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                 onTouchEnd={handleLongPressEnd}
                 onTouchCancel={handleLongPressEnd}
                 className={cn(
-                    'model-controls__agent-trigger flex items-center gap-1.5 transition-opacity min-w-0 focus:outline-none',
+                    'model-controls__agent-trigger flex items-center gap-1.5 transition-colors min-w-0 focus:outline-none',
                     buttonHeight,
-                    'cursor-pointer hover:opacity-70',
+                    'cursor-pointer hover:bg-transparent hover:opacity-70',
                 )}
             >
                                         <RiAiAgentLine
diff --git a/packages/ui/src/components/chat/PermissionCard.tsx b/packages/ui/src/components/chat/PermissionCard.tsx
index ffd5479a..27a03835 100644
--- a/packages/ui/src/components/chat/PermissionCard.tsx
+++ b/packages/ui/src/components/chat/PermissionCard.tsx
@@ -313,7 +313,7 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
           <div className="px-2 py-1.5 border-b border-border/20 bg-muted/5">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <RiQuestionLine className="h-3.5 w-3.5 text-yellow-500" />
+                <RiQuestionLine className="h-3.5 w-3.5 text-[var(--status-warning)]" />
                 <span className="typography-meta font-medium text-muted-foreground">
                   Permission Required
                 </span>
diff --git a/packages/ui/src/components/chat/QuestionCard.tsx b/packages/ui/src/components/chat/QuestionCard.tsx
index 1714dc40..8f6c7102 100644
--- a/packages/ui/src/components/chat/QuestionCard.tsx
+++ b/packages/ui/src/components/chat/QuestionCard.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { RiCheckLine, RiCheckboxCircleFill, RiCircleLine, RiCloseLine, RiEditLine, RiListCheck3, RiQuestionLine } from '@remixicon/react';
+import { RiCheckLine, RiCloseLine, RiEditLine, RiListCheck3, RiQuestionLine } from '@remixicon/react';
+import { Checkbox } from '@/components/ui/checkbox';
 
 import { cn } from '@/lib/utils';
 import type { QuestionRequest } from '@/types/question';
@@ -191,8 +192,8 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
                       className={cn(
                         'px-2 py-0.5 typography-meta font-medium rounded transition-colors flex items-center gap-1',
                         isActive
-                          ? 'bg-muted/40 text-foreground'
-                          : 'text-muted-foreground hover:text-foreground hover:bg-muted/20'
+                            ? 'bg-interactive-selection/40 text-foreground'
+                            : 'text-muted-foreground hover:text-foreground hover:bg-interactive-hover/20'
                       )}
                     >
                       {isSummary ? <RiListCheck3 className="h-3 w-3" /> : null}
@@ -214,7 +215,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
                       key={index}
                       type="button"
                       onClick={() => setActiveTab(String(index))}
-                      className="w-full text-left rounded px-1.5 py-1 hover:bg-muted/20 transition-colors"
+                      className="w-full text-left rounded px-1.5 py-1 hover:bg-interactive-hover/20 transition-colors"
                     >
                       <div className="typography-micro text-muted-foreground">{q.header || `Question ${index + 1}`}</div>
                       <div className={cn(
@@ -248,18 +249,18 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
                         disabled={isResponding}
                         className={cn(
                           'w-full px-1.5 py-1 text-left rounded transition-colors',
-                          'hover:bg-muted/30',
-                          selected ? 'bg-muted/20' : null,
+                          'hover:bg-interactive-hover/30',
+                          selected ? 'bg-interactive-selection/20' : null,
                           isResponding ? 'opacity-60 cursor-not-allowed' : null
                         )}
                       >
                         <div className="flex items-start gap-2">
                           <div className="mt-0.5 shrink-0">
-                            {selected ? (
-                              <RiCheckboxCircleFill className="h-3.5 w-3.5 text-primary" />
-                            ) : (
-                              <RiCircleLine className="h-3.5 w-3.5 text-muted-foreground/50" />
-                            )}
+                            <Checkbox
+                              checked={selected}
+                              onChange={() => handleToggleOption(option.label)}
+                              disabled={isResponding}
+                            />
                           </div>
 
                           <div className="min-w-0 flex-1">
@@ -290,8 +291,8 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
                     disabled={isResponding}
                     className={cn(
                       'w-full px-1.5 py-1 text-left rounded transition-colors',
-                      'hover:bg-muted/30',
-                      isCustomActive ? 'bg-muted/20' : null,
+                      'hover:bg-interactive-hover/30',
+                      isCustomActive ? 'bg-interactive-selection/20' : null,
                       isResponding ? 'opacity-60 cursor-not-allowed' : null
                     )}
                   >
diff --git a/packages/ui/src/components/chat/ServerFilePicker.tsx b/packages/ui/src/components/chat/ServerFilePicker.tsx
index 53e30417..bdf669ba 100644
--- a/packages/ui/src/components/chat/ServerFilePicker.tsx
+++ b/packages/ui/src/components/chat/ServerFilePicker.tsx
@@ -269,18 +269,18 @@ export const ServerFilePicker: React.FC<ServerFilePickerProps> = ({
       case 'css':
       case 'scss':
       case 'less':
-        return <RiCodeLine className="h-3.5 w-3.5 text-blue-500" />;
+        return <RiCodeLine className="h-3.5 w-3.5 text-[var(--status-info)]" />;
       case 'json':
-        return <RiCodeLine className="h-3.5 w-3.5 text-yellow-500" />;
+        return <RiCodeLine className="h-3.5 w-3.5 text-[var(--status-warning)]" />;
       case 'md':
       case 'mdx':
-        return <RiFileTextLine className="h-3.5 w-3.5 text-gray-500" />;
+        return <RiFileTextLine className="h-3.5 w-3.5 text-muted-foreground" />;
       case 'png':
       case 'jpg':
       case 'jpeg':
       case 'gif':
       case 'svg':
-        return <RiFileImageLine className="h-3.5 w-3.5 text-green-500" />;
+        return <RiFileImageLine className="h-3.5 w-3.5 text-[var(--status-success)]" />;
       default:
         return <RiFileTextLine className="h-3.5 w-3.5 text-muted-foreground" />;
     }
@@ -381,7 +381,7 @@ export const ServerFilePicker: React.FC<ServerFilePickerProps> = ({
     const row = (
       <div
         className={cn(
-          "flex w-full items-center justify-start gap-1 px-2 py-1.5 rounded hover:bg-muted cursor-pointer typography-ui-label text-foreground text-left",
+          "flex w-full items-center justify-start gap-1 px-2 py-1.5 rounded hover:bg-interactive-hover cursor-pointer typography-ui-label text-foreground text-left",
           file.type === 'file' && selectedFiles.has(file.path) && "bg-primary/10"
         )}
         style={{ paddingLeft: `${level * 12}px` }}
@@ -514,7 +514,7 @@ export const ServerFilePicker: React.FC<ServerFilePickerProps> = ({
                 e.stopPropagation();
                 setSearchQuery('');
               }}
-              className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 hover:bg-muted rounded"
+              className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 hover:bg-interactive-hover rounded"
             >
               <RiCloseLine className="h-3 w-3"/>
             </button>
diff --git a/packages/ui/src/components/chat/SkillAutocomplete.tsx b/packages/ui/src/components/chat/SkillAutocomplete.tsx
index 810ea040..a9fba70b 100644
--- a/packages/ui/src/components/chat/SkillAutocomplete.tsx
+++ b/packages/ui/src/components/chat/SkillAutocomplete.tsx
@@ -114,10 +114,10 @@ export const SkillAutocomplete = React.forwardRef<SkillAutocompleteHandle, Skill
         ref={(el) => {
           itemRefs.current[index] = el;
         }}
-        className={cn(
-          'flex items-start gap-2 px-3 py-1.5 cursor-pointer rounded-lg typography-ui-label',
-          index === selectedIndex && 'bg-muted'
-        )}
+          className={cn(
+            'flex items-start gap-2 px-3 py-1.5 cursor-pointer rounded-lg typography-ui-label',
+          index === selectedIndex && 'bg-interactive-selection'
+          )}
         onClick={() => onSkillSelect(skill.name)}
         onMouseEnter={() => setSelectedIndex(index)}
       >
@@ -146,7 +146,7 @@ export const SkillAutocomplete = React.forwardRef<SkillAutocompleteHandle, Skill
   return (
     <div
       ref={containerRef}
-      className="absolute z-[100] min-w-0 w-full max-w-[360px] max-h-60 bg-background border border-border rounded-xl shadow-none bottom-full mb-2 left-0 flex flex-col"
+      className="absolute z-[100] min-w-0 w-full max-w-[360px] max-h-60 bg-background border-2 border-border/60 rounded-xl shadow-md bottom-full mb-2 left-0 flex flex-col"
     >
       <ScrollableOverlay outerClassName="flex-1 min-h-0" className="px-0 pb-2" fillContainer={false}>
         {filteredSkills.length ? (
diff --git a/packages/ui/src/components/chat/StatusChip.tsx b/packages/ui/src/components/chat/StatusChip.tsx
index 97d0a9eb..013f75ff 100644
--- a/packages/ui/src/components/chat/StatusChip.tsx
+++ b/packages/ui/src/components/chat/StatusChip.tsx
@@ -41,7 +41,7 @@ export const StatusChip: React.FC<StatusChipProps> = ({ onClick, className }) =>
                 'inline-flex min-w-0 items-center justify-center',
                 'rounded-lg border border-border/50 px-1.5',
                 'typography-meta font-medium text-foreground/80',
-                'focus:outline-none',
+                'focus:outline-none hover:bg-[var(--interactive-hover)]',
                 className
             )}
             style={{ 
diff --git a/packages/ui/src/components/chat/TimelineDialog.tsx b/packages/ui/src/components/chat/TimelineDialog.tsx
index 7388d8d5..08daddc4 100644
--- a/packages/ui/src/components/chat/TimelineDialog.tsx
+++ b/packages/ui/src/components/chat/TimelineDialog.tsx
@@ -117,7 +117,7 @@ export const TimelineDialog: React.FC<TimelineDialogProps> = ({ open, onOpenChan
                             return (
                                 <div
                                     key={message.info.id}
-                                    className="group flex items-center gap-2 py-1.5 hover:bg-muted/30 rounded transition-colors cursor-pointer"
+                                    className="group flex items-center gap-2 py-1.5 hover:bg-interactive-hover/30 rounded transition-colors cursor-pointer"
                                     onClick={() => {
                                         onScrollToMessage?.(message.info.id);
                                         onOpenChange(false);
diff --git a/packages/ui/src/components/chat/UnifiedControlsDrawer.tsx b/packages/ui/src/components/chat/UnifiedControlsDrawer.tsx
index 57457db3..a97b61d6 100644
--- a/packages/ui/src/components/chat/UnifiedControlsDrawer.tsx
+++ b/packages/ui/src/components/chat/UnifiedControlsDrawer.tsx
@@ -323,7 +323,7 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
                                             'inline-flex items-center rounded-full border px-2.5 py-1 typography-meta font-medium',
                                             isSelected
                                                 ? 'border-primary/30 bg-primary/10 text-foreground'
-                                                : 'border-border/40 text-muted-foreground hover:bg-muted/50'
+                                                : 'border-border/40 text-muted-foreground hover:bg-interactive-hover/50'
                                         )}
                                         aria-pressed={isSelected}
                                     >
@@ -335,7 +335,7 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
                                 <button
                                     type="button"
                                     onClick={onOpenEffort}
-                                    className="inline-flex items-center rounded-full border border-border/40 px-2.5 py-1 typography-meta font-medium text-muted-foreground hover:bg-muted/50"
+                                    className="inline-flex items-center rounded-full border border-border/40 px-2.5 py-1 typography-meta font-medium text-muted-foreground hover:bg-interactive-hover/50"
                                     aria-label="More effort options"
                                 >
                                     ...
diff --git a/packages/ui/src/components/chat/message/ToolOutputDialog.tsx b/packages/ui/src/components/chat/message/ToolOutputDialog.tsx
index cbc699a3..e7f7d144 100644
--- a/packages/ui/src/components/chat/message/ToolOutputDialog.tsx
+++ b/packages/ui/src/components/chat/message/ToolOutputDialog.tsx
@@ -209,7 +209,7 @@ const ToolOutputDialog: React.FC<ToolOutputDialogProps> = ({ popup, onOpenChange
                                                                 : {}),
                                                     }}
                                                 >
-                                                    <span className="text-muted-foreground/60 w-10 flex-shrink-0 text-right pr-3 self-start select-none">
+                                                    <span className="w-12 flex-shrink-0 text-right pr-3 select-none border-r mr-3 -my-0.5 py-0.5" style={{ color: 'var(--tools-edit-line-number)', borderColor: 'var(--tools-border)' }}>
                                                         {line.lineNumber || ''}
                                                     </span>
                                                     <div className="flex-1 min-w-0">
@@ -282,7 +282,7 @@ const ToolOutputDialog: React.FC<ToolOutputDialogProps> = ({ popup, onOpenChange
                                                         }}
                                                     >
                                                         <div className="flex">
-                                                            <span className="text-muted-foreground/60 w-10 flex-shrink-0 text-right pr-3 self-start select-none">
+                                                            <span className="w-12 flex-shrink-0 text-right pr-3 select-none border-r mr-3 -my-0.5 py-0.5" style={{ color: 'var(--tools-edit-line-number)', borderColor: 'var(--tools-border)' }}>
                                                                 {line.leftLine.lineNumber || ''}
                                                             </span>
                                                             <div className="flex-1 min-w-0">
@@ -336,7 +336,7 @@ const ToolOutputDialog: React.FC<ToolOutputDialogProps> = ({ popup, onOpenChange
                                                         }}
                                                     >
                                                         <div className="flex">
-                                                            <span className="text-muted-foreground/60 w-10 flex-shrink-0 text-right pr-3 self-start select-none">
+                                                            <span className="w-12 flex-shrink-0 text-right pr-3 select-none border-r mr-3 -my-0.5 py-0.5" style={{ color: 'var(--tools-edit-line-number)', borderColor: 'var(--tools-border)' }}>
                                                                 {line.rightLine.lineNumber || ''}
                                                             </span>
                                                             <div className="flex-1 min-w-0">
@@ -500,12 +500,12 @@ const ToolOutputDialog: React.FC<ToolOutputDialogProps> = ({ popup, onOpenChange
 
                                                 const shouldShowLineNumber = !isInfo && (limit === undefined || idx < limit);
 
-                                                return (
-                                                    <div key={idx} className={`typography-code font-mono flex ${isInfo ? 'text-muted-foreground/70 italic' : ''}`}>
-                                                        <span className="text-muted-foreground/60 w-10 flex-shrink-0 text-right pr-4 self-start select-none">
-                                                            {shouldShowLineNumber ? lineNumber : ''}
-                                                        </span>
-                                                        <div className="flex-1 min-w-0">
+                                                    return (
+                                                        <div key={idx} className={`typography-code font-mono flex ${isInfo ? 'text-muted-foreground/70 italic' : ''}`}>
+                                                            <span className="w-12 flex-shrink-0 text-right pr-3 select-none border-r mr-3 -my-0.5 py-0.5" style={{ color: 'var(--tools-edit-line-number)', borderColor: 'var(--tools-border)' }}>
+                                                                {shouldShowLineNumber ? lineNumber : ''}
+                                                            </span>
+                                                            <div className="flex-1 min-w-0">
                                                             {isInfo ? (
                                                                 <div className="whitespace-pre-wrap break-words">{line}</div>
                                                             ) : (
diff --git a/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx b/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
index 5111a490..2aad33e0 100644
--- a/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
+++ b/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
@@ -159,6 +159,7 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
                                             isExpanded && 'opacity-0',
                                             !isExpanded && !isMobile && 'group-hover/tool:opacity-0'
                                         )}
+                                        style={{ color: 'var(--tools-icon)' }}
                                     >
                                         <RiStackLine className="h-3.5 w-3.5" />
                                     </div>
@@ -178,10 +179,10 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
                                     </div>
                                 </>
                             ) : (
-                                <RiStackLine className="h-3.5 w-3.5" />
+                                <RiStackLine className="h-3.5 w-3.5" style={{ color: 'var(--tools-icon)' }} />
                             )}
                         </div>
-                        <span className="typography-meta font-medium">Activity</span>
+                        <span className="typography-meta font-medium" style={{ color: 'var(--tools-title)' }}>Activity</span>
                     </div>
 
                     {diffStats && (diffStats.additions > 0 || diffStats.deletions > 0) && (
@@ -201,11 +202,13 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
 
                 <div
                     className={cn(
-                        'relative pr-2 pb-1 pt-1 pl-[1.4375rem]',
-                        'before:absolute before:left-[0.4375rem] before:w-px before:bg-border/80 before:content-[""]',
-                        'before:top-[-0.25rem] before:bottom-0'
+                        'relative pr-2 pb-1 pt-1 pl-[1.4375rem]'
                     )}
                 >
+                    <div 
+                        className="absolute left-[0.4375rem] w-px top-[-0.25rem] bottom-0"
+                        style={{ backgroundColor: 'var(--tools-border)', borderWidth: '0', width: '1px' }}
+                    ></div>
                     {!isExpanded && hiddenCount > 0 && (
                         <div
                             className="typography-micro text-muted-foreground/70 mb-1 cursor-pointer hover:text-muted-foreground"
diff --git a/packages/ui/src/components/chat/message/parts/ToolPart.tsx b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
index ab9e8ff2..5cf163ef 100644
--- a/packages/ui/src/components/chat/message/parts/ToolPart.tsx
+++ b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
@@ -256,7 +256,8 @@ const ToolScrollableSection: React.FC<ToolScrollableSectionProps> = ({
 }) => (
     <ScrollableOverlay
         outerClassName={cn('w-full min-w-0 flex-none overflow-hidden', maxHeightClass, outerClassName)}
-        className={cn('tool-output-surface p-2 rounded-xl w-full min-w-0 border border-border/20 bg-transparent', className)}
+        className={cn('tool-output-surface p-2 rounded-xl w-full min-w-0 bg-transparent', className)}
+        style={{ borderWidth: '1px', borderColor: 'var(--tools-border)' }}
         disableHorizontal={disableHorizontal}
     >
         <div className="w-full min-w-0">
@@ -410,8 +411,8 @@ interface DiffPreviewProps {
 const DiffPreview: React.FC<DiffPreviewProps> = React.memo(({ diff, syntaxTheme, input }) => (
     <div className="typography-code px-1 pb-1 pt-0 space-y-0">
         {parseDiffToUnified(diff).map((hunk, hunkIdx) => (
-            <div key={hunkIdx} className="-mx-1 px-1 border-b border-border/20 last:border-b-0">
-                <div className="bg-muted/20 px-2 py-1 typography-meta font-medium text-muted-foreground border-b border-border/10 break-words -mx-1">
+            <div key={hunkIdx} className="-mx-1 px-1 last:border-b-0" style={{ borderBottomWidth: '1px', borderBottomColor: 'var(--tools-border)' }}>
+                <div className="bg-muted/20 px-2 py-1 typography-meta font-medium text-muted-foreground break-words -mx-1" style={{ borderBottomWidth: '1px', borderBottomColor: 'var(--tools-border)' }}>
                     {`${hunk.file} (line ${hunk.oldStart})`}
                 </div>
 
@@ -433,7 +434,7 @@ const DiffPreview: React.FC<DiffPreviewProps> = React.memo(({ diff, syntaxTheme,
                                         : {}
                             }
                         >
-                            <span className="text-muted-foreground/60 w-8 flex-shrink-0 text-right pr-2 self-start select-none">
+                            <span className="w-10 flex-shrink-0 text-right pr-3 select-none border-r mr-3 -my-0.5 py-0.5" style={{ color: 'var(--tools-edit-line-number)', borderColor: 'var(--tools-border)' }}>
                                 {line.lineNumber || ''}
                             </span>
                             <div className="flex-1 min-w-0">
@@ -454,9 +455,15 @@ const DiffPreview: React.FC<DiffPreviewProps> = React.memo(({ diff, syntaxTheme,
                                     whiteSpace: 'pre-wrap',
                                     wordBreak: 'break-all',
                                     overflowWrap: 'anywhere',
+                                    color: line.type === 'removed' ? 'var(--tools-edit-removed)' : line.type === 'added' ? 'var(--tools-edit-added)' : 'inherit',
                                 }}
                                 codeTagProps={{
-                                    style: { background: 'transparent', backgroundColor: 'transparent', fontSize: 'inherit' },
+                                    style: { 
+                                        background: 'transparent', 
+                                        backgroundColor: 'transparent', 
+                                        fontSize: 'inherit',
+                                        color: line.type === 'removed' ? 'var(--tools-edit-removed)' : line.type === 'added' ? 'var(--tools-edit-added)' : 'inherit',
+                                    },
                                 }}
                             >
                                 {line.content}
@@ -491,13 +498,13 @@ const WriteInputPreview: React.FC<WriteInputPreviewProps> = React.memo(({ conten
 
     return (
         <div className="w-full min-w-0">
-            <div className="bg-muted/20 px-2 py-1 typography-meta font-medium text-muted-foreground border border-border/10 rounded-lg mb-1">
+            <div className="bg-muted/20 px-2 py-1 typography-meta font-medium text-muted-foreground rounded-lg mb-1" style={{ borderWidth: '1px', borderColor: 'var(--tools-border)' }}>
                 {`${displayPath} (${headerLineLabel})`}
             </div>
             <div className="space-y-0">
                 {lines.map((line, lineIdx) => (
                     <div key={lineIdx} className="typography-code font-mono px-2 py-0.5 flex -mx-1">
-                        <span className="text-muted-foreground/60 w-8 flex-shrink-0 text-right pr-2 self-start select-none">
+                        <span className="w-10 flex-shrink-0 text-right pr-3 select-none border-r mr-3 -my-0.5 py-0.5" style={{ color: 'var(--tools-edit-line-number)', borderColor: 'var(--tools-border)' }}>
                             {lineIdx + 1}
                         </span>
                         <div className="flex-1 min-w-0">
@@ -560,10 +567,10 @@ const ImagePreview: React.FC<ImagePreviewProps> = React.memo(({ content, filePat
 
     return (
         <div className="w-full min-w-0">
-            <div className="bg-muted/20 px-2 py-1 typography-meta font-medium text-muted-foreground border border-border/10 rounded-lg mb-2">
+            <div className="bg-muted/20 px-2 py-1 typography-meta font-medium text-muted-foreground rounded-lg mb-2" style={{ borderWidth: '1px', borderColor: 'var(--tools-border)' }}>
                 {displayPath}
             </div>
-            <div className="flex justify-center p-4 bg-muted/10 rounded-lg border border-border/10">
+            <div className="flex justify-center p-4 bg-muted/10 rounded-lg" style={{ borderWidth: '1px', borderColor: 'var(--tools-border)' }}>
                 <img
                     src={imageSrc}
                     alt={displayPath}
@@ -815,7 +822,7 @@ const ToolExpandedContent: React.FC<ToolExpandedContentProps> = React.memo(({
 
                             return (
                                 <div key={idx} className={cn('typography-code font-mono flex w-full min-w-0', isInfo && 'text-muted-foreground/70 italic')}>
-                                    <span className="text-muted-foreground/60 w-8 flex-shrink-0 text-right pr-3 self-start select-none">
+                                    <span className="w-10 flex-shrink-0 text-right pr-3 select-none border-r mr-3 -my-0.5 py-0.5" style={{ color: 'var(--tools-edit-line-number)', borderColor: 'var(--tools-border)' }}>
                                         {shouldShowLineNumber ? lineNumber : ''}
                                     </span>
                                     <div className="flex-1 min-w-0">
@@ -892,12 +899,18 @@ const ToolExpandedContent: React.FC<ToolExpandedContentProps> = React.memo(({
     return (
         <div
             className={cn(
-                'relative pr-2 pb-2 pt-2 space-y-2 pl-[1.4375rem]',
-                'before:absolute before:left-[0.4375rem] before:w-px before:bg-border/80 before:content-[""]',
-                hasPrevTool ? 'before:top-[-0.45rem]' : 'before:top-[-0.25rem]',
-                hasNextTool ? 'before:bottom-[-0.6rem]' : 'before:bottom-0'
+                'relative pr-2 pb-2 pt-2 space-y-2 pl-[1.4375rem]'
             )}
         >
+            <div 
+                className="absolute left-[0.4375rem] w-px"
+                style={{
+                    backgroundColor: 'var(--tools-border)',
+                    top: hasPrevTool ? '-0.45rem' : '-0.25rem',
+                    bottom: hasNextTool ? '-0.6rem' : '0',
+                    width: '1px'
+                }}
+            ></div>
             {(part.tool === 'todowrite' || part.tool === 'todoread' || part.tool === 'question') ? (
                 renderResultContent()
             ) : (
@@ -1109,7 +1122,7 @@ const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxT
                                 isExpanded && 'opacity-0',
                                 !isExpanded && !isMobile && 'group-hover/tool:opacity-0'
                             )}
-                            style={!isTaskTool && isError ? { color: 'var(--status-error)' } : {}}
+                            style={!isTaskTool && isError ? { color: 'var(--status-error)' } : { color: 'var(--tools-icon)' }}
                         >
                             {getToolIcon(part.tool)}
                         </div>
@@ -1127,13 +1140,13 @@ const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxT
                     </div>
                     <span
                         className="typography-meta font-medium"
-                        style={!isTaskTool && isError ? { color: 'var(--status-error)' } : {}}
+                        style={!isTaskTool && isError ? { color: 'var(--status-error)' } : { color: 'var(--tools-title)' }}
                     >
                         {displayName}
                     </span>
                 </div>
 
-                <div className="flex items-center gap-1 flex-1 min-w-0 typography-meta text-muted-foreground/70">
+                <div className="flex items-center gap-1 flex-1 min-w-0 typography-meta" style={{ color: 'var(--tools-description)' }}>
                     {description && (
                         <span className={cn("truncate", isMobile && "max-w-[120px]")}>
                             {description}
diff --git a/packages/ui/src/components/icons/DiffIcon.tsx b/packages/ui/src/components/icons/DiffIcon.tsx
new file mode 100644
index 00000000..dd46a0b8
--- /dev/null
+++ b/packages/ui/src/components/icons/DiffIcon.tsx
@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react';
+
+interface DiffIconProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+  size?: number | string;
+}
+
+/**
+ * Git merge/branch icon for the Diff tab.
+ */
+export function DiffIcon({ size, className, style, ...props }: DiffIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      className={className}
+      style={{
+        width: typeof size === 'number' ? `${size}px` : size,
+        height: typeof size === 'number' ? `${size}px` : size,
+        ...style,
+      }}
+      {...props}
+    >
+      <path d="M112,148a12,12,0,0,0-12,12v19L69.17,148.2A4,4,0,0,1,68,145.37V97.94a36,36,0,1,0-24,0v47.43a27.81,27.81,0,0,0,8.2,19.8L83,196H64a12,12,0,0,0,0,24h48a12,12,0,0,0,12-12V160A12,12,0,0,0,112,148ZM56,52A12,12,0,1,1,44,64,12,12,0,0,1,56,52ZM212,158.06V110.63a27.81,27.81,0,0,0-8.2-19.8L173,60h19a12,12,0,0,0,0-24H144a12,12,0,0,0-12,12V96a12,12,0,0,0,24,0V77l30.83,30.83a4,4,0,0,1,1.17,2.83v47.43a36,36,0,1,0,24,0ZM200,204a12,12,0,1,1,12-12A12,12,0,0,1,200,204Z" />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index 093812d2..f9bafea2 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -13,7 +13,8 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 
-import { RiArrowLeftSLine, RiChat4Line, RiCheckLine, RiCodeLine, RiCommandLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGithubFill, RiLayoutLeftLine, RiPlayListAddLine, RiQuestionLine, RiSettings3Line, RiTerminalBoxLine, type RemixiconComponentType } from '@remixicon/react';
+import { RiArrowLeftSLine, RiChat4Line, RiCheckLine, RiCommandLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGithubFill, RiLayoutLeftLine, RiPlayListAddLine, RiQuestionLine, RiSettings3Line, RiTerminalBoxLine, type RemixiconComponentType } from '@remixicon/react';
+import { DiffIcon } from '@/components/icons/DiffIcon';
 import { useUIStore, type MainTab } from '@/stores/useUIStore';
 import { useUpdateStore } from '@/stores/useUpdateStore';
 import { useConfigStore } from '@/stores/useConfigStore';
@@ -64,7 +65,7 @@ const resolveTilde = (path: string, homeDir: string | null): string => {
 interface TabConfig {
   id: MainTab;
   label: string;
-  icon: RemixiconComponentType;
+  icon: RemixiconComponentType | 'diff';
   badge?: number;
   showDot?: boolean;
 }
@@ -304,7 +305,7 @@ export const Header: React.FC = () => {
     setSettingsDialogOpen(true);
   }, [blurActiveElement, isMobile, setSessionSwitcherOpen, setSettingsDialogOpen]);
 
-  const headerIconButtonClass = 'app-region-no-drag inline-flex h-9 w-9 items-center justify-center gap-2 p-2 rounded-md typography-ui-label font-medium text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:text-foreground hover:bg-secondary/50 transition-colors';
+  const headerIconButtonClass = 'app-region-no-drag inline-flex h-9 w-9 items-center justify-center gap-2 p-2 rounded-md typography-ui-label font-medium text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:text-foreground hover:bg-interactive-hover transition-colors';
 
   const desktopPaddingClass = React.useMemo(() => {
     if (isDesktopApp && isMacPlatform) {
@@ -415,7 +416,7 @@ export const Header: React.FC = () => {
       {
         id: 'diff',
         label: 'Diff',
-        icon: RiCodeLine,
+        icon: 'diff',
         badge: !isMobile && diffFileCount > 0 ? diffFileCount : undefined,
       },
       { id: 'files', label: 'Files', icon: RiFolder6Line },
@@ -447,18 +448,34 @@ export const Header: React.FC = () => {
 
   const renderTab = (tab: TabConfig) => {
     const isActive = activeMainTab === tab.id;
-    const Icon = tab.icon;
+    const isDiffTab = tab.icon === 'diff';
+    const Icon = isDiffTab ? null : (tab.icon as RemixiconComponentType);
     const isChatTab = tab.id === 'chat';
+    const showContextTooltip = isChatTab && !isMobile && contextUsage && contextUsage.totalTokens > 0;
 
-    return (
+    const renderIcon = (iconSize: number) => {
+      if (isDiffTab) {
+        return <DiffIcon size={iconSize} />;
+      }
+      return Icon ? <Icon size={iconSize} /> : null;
+    };
+
+    const formatTokens = (tokens: number) => {
+      if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`;
+      if (tokens >= 1_000) return `${(tokens / 1_000).toFixed(1)}K`;
+      return tokens.toFixed(1).replace(/\.0$/, '');
+    };
+
+    const tabButton = (
       <button
-        key={tab.id}
         type="button"
         onClick={() => setActiveMainTab(tab.id)}
         onMouseDown={isActive ? handleActiveTabDragStart : undefined}
         className={cn(
           'relative flex h-8 items-center gap-2 px-3 rounded-md typography-ui-label font-medium transition-colors',
-          isActive ? 'app-region-drag bg-secondary text-foreground shadow-sm' : 'app-region-no-drag text-muted-foreground hover:bg-secondary/50 hover:text-foreground',
+          isActive
+            ? 'app-region-drag bg-interactive-selection text-interactive-selection-foreground shadow-sm'
+            : 'app-region-no-drag text-muted-foreground hover:bg-interactive-hover/50 hover:text-foreground',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
           isChatTab && !isMobile && 'min-w-[100px] justify-center'
         )}
@@ -467,33 +484,57 @@ export const Header: React.FC = () => {
         role="tab"
       >
         {isMobile ? (
-          <Icon size={20} />
+          renderIcon(20)
         ) : (
           <>
-            <Icon size={16} />
+            {renderIcon(16)}
             <span className="header-tab-label">{tab.label}</span>
           </>
         )}
 
-        {isChatTab && !isMobile && contextUsage && contextUsage.totalTokens > 0 && (
-          <span className="ml-1">
-            <ContextUsageDisplay
-              totalTokens={contextUsage.totalTokens}
-              percentage={contextUsage.percentage}
-              contextLimit={contextUsage.contextLimit}
-              outputLimit={contextUsage.outputLimit ?? 0}
-              size="compact"
-            />
+        {showContextTooltip && (
+          <span className="header-tab-badge">
+            <div className={cn(
+              'app-region-no-drag flex items-center gap-1.5 text-muted-foreground/60 select-none typography-micro',
+            )}>
+              <span className={cn(
+                'font-medium',
+                contextUsage.percentage >= 90 ? 'text-status-error' :
+                contextUsage.percentage >= 75 ? 'text-status-warning' : 'text-status-success'
+              )}>
+                {Math.min(contextUsage.percentage, 999).toFixed(1)}%
+              </span>
+            </div>
           </span>
         )}
 
         {tab.badge !== undefined && tab.badge > 0 && (
-          <span className="ml-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary/10 px-1 text-[10px] font-bold text-primary">
+          <span className="header-tab-badge typography-micro text-status-info font-medium">
             {tab.badge}
           </span>
         )}
       </button>
     );
+
+    if (showContextTooltip) {
+      const safeOutputLimit = typeof contextUsage.outputLimit === 'number' ? Math.max(contextUsage.outputLimit, 0) : 0;
+      return (
+        <Tooltip key={tab.id} delayDuration={1000}>
+          <TooltipTrigger asChild>
+            {tabButton}
+          </TooltipTrigger>
+          <TooltipContent>
+            <div className="space-y-0.5">
+              <p className="typography-micro leading-tight">Used tokens: {formatTokens(contextUsage.totalTokens)}</p>
+              <p className="typography-micro leading-tight">Context limit: {formatTokens(contextUsage.contextLimit)}</p>
+              <p className="typography-micro leading-tight">Output limit: {formatTokens(safeOutputLimit)}</p>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      );
+    }
+
+    return <React.Fragment key={tab.id}>{tabButton}</React.Fragment>;
   };
 
   const renderDesktop = () => (
@@ -662,7 +703,7 @@ export const Header: React.FC = () => {
         {isSessionSwitcherOpen ? (
           <button
             onClick={() => setSessionSwitcherOpen(false)}
-            className="app-region-no-drag h-9 w-9 p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md active:bg-secondary"
+            className="app-region-no-drag h-9 w-9 p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md active:bg-interactive-active"
             aria-label="Back"
           >
             <RiArrowLeftSLine className="h-5 w-5" />
@@ -670,7 +711,7 @@ export const Header: React.FC = () => {
         ) : (
           <button
             onClick={handleOpenSessionSwitcher}
-            className="app-region-no-drag h-9 w-9 p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md active:bg-secondary"
+            className="app-region-no-drag h-9 w-9 p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md active:bg-interactive-active"
             aria-label="Open sessions"
           >
             <RiPlayListAddLine className="h-5 w-5" />
@@ -697,7 +738,8 @@ export const Header: React.FC = () => {
           <div className="flex items-center gap-0.5" role="tablist" aria-label="Main navigation">
             {tabs.map((tab) => {
               const isActive = activeMainTab === tab.id;
-              const Icon = tab.icon;
+              const isDiffTab = tab.icon === 'diff';
+              const Icon = isDiffTab ? null : (tab.icon as RemixiconComponentType);
               return (
                 <Tooltip key={tab.id} delayDuration={500}>
                   <TooltipTrigger asChild>
@@ -715,10 +757,14 @@ export const Header: React.FC = () => {
                       className={cn(
                         headerIconButtonClass,
                         'relative',
-                        isActive && 'text-foreground bg-secondary'
+                        isActive && 'bg-interactive-selection text-interactive-selection-foreground'
                       )}
                     >
-                      <Icon className="h-5 w-5" />
+                      {isDiffTab ? (
+                        <DiffIcon className="h-5 w-5" />
+                      ) : Icon ? (
+                        <Icon className="h-5 w-5" />
+                      ) : null}
                       {tab.badge !== undefined && tab.badge > 0 && (
                         <span className="absolute -top-1 -right-1 text-[10px] font-semibold text-primary">
                           {tab.badge}
diff --git a/packages/ui/src/components/layout/Sidebar.tsx b/packages/ui/src/components/layout/Sidebar.tsx
index dca7c2bf..e7bf1272 100644
--- a/packages/ui/src/components/layout/Sidebar.tsx
+++ b/packages/ui/src/components/layout/Sidebar.tsx
@@ -182,14 +182,14 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children })
                 <div className="flex-1 overflow-hidden">
                     <ErrorBoundary>{children}</ErrorBoundary>
                 </div>
-                <div className="flex-shrink-0 border-t border-border h-12 px-2 bg-sidebar-accent/10">
+                <div className="flex-shrink-0 border-t border-border h-12 px-2 bg-sidebar">
                     <div className="flex h-full items-center justify-between gap-2">
                         <button
                             onClick={() => setSettingsDialogOpen(true)}
                             className={cn(
                                 'flex h-8 items-center gap-2 rounded-md px-2',
                                 'text-sm font-semibold text-sidebar-foreground/90',
-                                'hover:text-sidebar-foreground hover:bg-sidebar-accent',
+                                'hover:text-sidebar-foreground hover:bg-interactive-hover',
                                 'transition-all duration-200'
                             )}
                         >
@@ -219,7 +219,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children })
                                         className={cn(
                                             'flex h-8 w-8 items-center justify-center rounded-md',
                                             'text-sidebar-foreground/70',
-                                            'hover:text-sidebar-foreground hover:bg-sidebar-accent',
+                                            'hover:text-sidebar-foreground hover:bg-interactive-hover',
                                             'transition-all duration-200'
                                         )}
                                     >
diff --git a/packages/ui/src/components/mcp/McpDropdown.tsx b/packages/ui/src/components/mcp/McpDropdown.tsx
index 1932c846..6a03efc2 100644
--- a/packages/ui/src/components/mcp/McpDropdown.tsx
+++ b/packages/ui/src/components/mcp/McpDropdown.tsx
@@ -127,7 +127,7 @@ export const McpDropdown: React.FC<McpDropdownProps> = ({ headerIconButtonClass
         return (
           <div
             key={serverName}
-            className="flex items-center justify-between gap-2 px-2 py-1.5 rounded-lg hover:bg-muted/50"
+            className="flex items-center justify-between gap-2 px-2 py-1.5 rounded-lg hover:bg-interactive-hover/50"
           >
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2 min-w-0">
@@ -235,7 +235,7 @@ export const McpDropdown: React.FC<McpDropdownProps> = ({ headerIconButtonClass
               <div className="flex items-center gap-1">
                 <button
                   type="button"
-                  className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-interactive-hover transition-colors"
                   disabled={isSpinning}
                   onClick={handleRefresh}
                   aria-label="Refresh"
@@ -281,7 +281,7 @@ export const McpDropdown: React.FC<McpDropdownProps> = ({ headerIconButtonClass
           <span className="typography-ui-label font-semibold">MCP Servers</span>
           <button
             type="button"
-            className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-interactive-hover transition-colors"
             disabled={isSpinning}
             onClick={handleRefresh}
             aria-label="Refresh"
diff --git a/packages/ui/src/components/multirun/ModelMultiSelect.tsx b/packages/ui/src/components/multirun/ModelMultiSelect.tsx
index 03a62f24..2c1c99be 100644
--- a/packages/ui/src/components/multirun/ModelMultiSelect.tsx
+++ b/packages/ui/src/components/multirun/ModelMultiSelect.tsx
@@ -68,7 +68,7 @@ export const ModelChip: React.FC<{
   const label = totalSameModel > 1 ? `${displayName} (${instanceIndex})` : displayName;
 
   return (
-    <div className={cn('flex items-center gap-1.5 px-2 rounded-md bg-accent/50 border border-border/30', CHIP_HEIGHT_CLASS)}>
+    <div className={cn('flex items-center gap-1.5 px-2 rounded-md bg-interactive-selection/20 border border-border/30', CHIP_HEIGHT_CLASS)}>
       <ProviderLogo providerId={model.providerID} className="h-3.5 w-3.5" />
       <span className="typography-meta font-medium truncate max-w-[140px]">
         {label}
@@ -273,7 +273,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
         onMouseEnter={() => setSelectedIndex(flatIndex)}
         className={cn(
           'w-full text-left px-2 py-1.5 rounded-md typography-meta transition-colors flex items-center gap-2',
-          isHighlighted ? 'bg-accent' : 'hover:bg-accent/50'
+          isHighlighted ? 'bg-interactive-selection' : 'hover:bg-interactive-hover/50'
         )}
       >
         <div className="flex items-center gap-1.5 flex-1 min-w-0">
@@ -379,7 +379,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
             let currentFlatIndex = 0;
 
             return (
-              <div className="absolute bottom-full left-0 mb-1 z-50 border border-border/30 rounded-xl overflow-hidden bg-background shadow-lg w-[min(380px,calc(100vw-2rem))] flex flex-col">
+              <div style={{ backgroundColor: 'var(--surface-elevated)' }} className="absolute bottom-full left-0 mb-1 z-50 border border-border/30 rounded-xl overflow-hidden shadow-lg w-[min(380px,calc(100vw-2rem))] flex flex-col">
                 {/* Search input */}
                 <div className="p-2 border-b border-border/40">
                   <div className="relative">
@@ -411,7 +411,10 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
                     {/* Favorites Section */}
                     {filteredFavorites.length > 0 && (
                       <>
-                        <div className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
+                        <div
+                          style={{ backgroundColor: 'var(--surface-elevated)' }}
+                          className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 border-b border-border/30"
+                        >
                           <RiStarFill className="h-4 w-4 text-primary" />
                           Favorites
                         </div>
@@ -426,7 +429,10 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
                     {filteredRecents.length > 0 && (
                       <>
                         {filteredFavorites.length > 0 && <div className="h-px bg-border/40 my-1" />}
-                        <div className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
+                        <div
+                          style={{ backgroundColor: 'var(--surface-elevated)' }}
+                          className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 border-b border-border/30"
+                        >
                           <RiTimeLine className="h-4 w-4" />
                           Recent
                         </div>
@@ -446,7 +452,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
                     {filteredProviders.map((provider, index) => (
                       <React.Fragment key={provider.id}>
                         {index > 0 && <div className="h-px bg-border/40 my-1" />}
-                        <div className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
+                        <div style={{ backgroundColor: 'var(--surface-elevated)' }} className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 border-b border-border/30">
                           <ProviderLogo
                             providerId={provider.id}
                             className="h-4 w-4 flex-shrink-0"
@@ -507,7 +513,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
                         onUpdate(index, { ...model, variant: nextVariant });
                       }}
                     >
-                      <SelectTrigger size="chip" className="px-2 gap-1.5 rounded-md bg-accent/50 border-border/30 hover:bg-accent/60 typography-meta font-medium text-foreground">
+                      <SelectTrigger size="chip" className="px-2 gap-1.5 rounded-md bg-interactive-selection/20 border-border/30 hover:bg-interactive-hover/30 typography-meta font-medium text-foreground">
                         <RiBrainAi3Line
                           className={cn(
                             'h-3.5 w-3.5 flex-shrink-0',
diff --git a/packages/ui/src/components/multirun/MultiRunLauncher.tsx b/packages/ui/src/components/multirun/MultiRunLauncher.tsx
index e571cf8b..a1756911 100644
--- a/packages/ui/src/components/multirun/MultiRunLauncher.tsx
+++ b/packages/ui/src/components/multirun/MultiRunLauncher.tsx
@@ -334,7 +334,7 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
                   type="button"
                   onClick={onCancel}
                   aria-label="Close (Esc)"
-                  className="inline-flex h-9 w-9 items-center justify-center p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary app-region-no-drag"
+                  className="inline-flex h-9 w-9 items-center justify-center p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary app-region-no-drag"
                 >
                   <RiCloseLine className="h-5 w-5" />
                 </button>
@@ -399,7 +399,7 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
 
               {/* Setup commands collapsible */}
               <Collapsible open={isSetupCommandsOpen} onOpenChange={setIsSetupCommandsOpen}>
-                <CollapsibleTrigger className="w-full flex items-center justify-between py-1 hover:opacity-80 transition-opacity">
+                <CollapsibleTrigger className="w-full flex items-center justify-between py-1 hover:bg-[var(--interactive-hover)] rounded-md px-1 -mx-1 transition-colors">
                   <p className="typography-ui-label font-medium text-foreground">
                     Setup commands
                     {setupCommands.filter(cmd => cmd.trim()).length > 0 && (
diff --git a/packages/ui/src/components/providers/ThemeProvider.tsx b/packages/ui/src/components/providers/ThemeProvider.tsx
index b8827fff..4ad1d6c0 100644
--- a/packages/ui/src/components/providers/ThemeProvider.tsx
+++ b/packages/ui/src/components/providers/ThemeProvider.tsx
@@ -6,30 +6,12 @@ interface ThemeProviderProps {
 }
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-  const { theme, applyTheme, fontSize, applyTypography, padding, applyPadding } = useUIStore();
+  const { fontSize, applyTypography, padding, applyPadding } = useUIStore();
 
   React.useLayoutEffect(() => {
-    applyTheme();
     applyTypography();
     applyPadding();
-  }, [theme, applyTheme, fontSize, applyTypography, padding, applyPadding]);
-
-  React.useEffect(() => {
-
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-    const handleChange = () => {
-      if (theme === 'system') {
-        applyTheme();
-      }
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-
-    return () => {
-      mediaQuery.removeEventListener('change', handleChange);
-    };
-  }, [theme, applyTheme]);
+  }, [fontSize, applyTypography, padding, applyPadding]);
 
   return <>{children}</>;
-};
\ No newline at end of file
+};
diff --git a/packages/ui/src/components/sections/agents/AgentsPage.tsx b/packages/ui/src/components/sections/agents/AgentsPage.tsx
index 5a7fa1f9..cca64647 100644
--- a/packages/ui/src/components/sections/agents/AgentsPage.tsx
+++ b/packages/ui/src/components/sections/agents/AgentsPage.tsx
@@ -756,7 +756,7 @@ export const AgentsPage: React.FC = () => {
                   const newValue = Math.max(0, current - 0.1);
                   setTemperature(parseFloat(newValue.toFixed(1)));
                 }}
-                className="absolute left-2 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 rounded hover:bg-accent text-muted-foreground hover:text-foreground"
+                className="absolute left-2 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 rounded hover:bg-interactive-hover text-muted-foreground hover:text-foreground"
               >
                 <RiSubtractLine className="h-3.5 w-3.5" />
               </button>
@@ -795,7 +795,7 @@ export const AgentsPage: React.FC = () => {
                   const newValue = Math.min(2, current + 0.1);
                   setTemperature(parseFloat(newValue.toFixed(1)));
                 }}
-                className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 rounded hover:bg-accent text-muted-foreground hover:text-foreground"
+                className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 rounded hover:bg-interactive-hover text-muted-foreground hover:text-foreground"
               >
                 <RiAddLine className="h-3.5 w-3.5" />
               </button>
@@ -824,7 +824,7 @@ export const AgentsPage: React.FC = () => {
                   const newValue = Math.max(0, current - 0.1);
                   setTopP(parseFloat(newValue.toFixed(1)));
                 }}
-                className="absolute left-2 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 rounded hover:bg-accent text-muted-foreground hover:text-foreground"
+                className="absolute left-2 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 rounded hover:bg-interactive-hover text-muted-foreground hover:text-foreground"
               >
                 <RiSubtractLine className="h-3.5 w-3.5" />
               </button>
@@ -863,7 +863,7 @@ export const AgentsPage: React.FC = () => {
                   const newValue = Math.min(1, current + 0.1);
                   setTopP(parseFloat(newValue.toFixed(1)));
                 }}
-                className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 rounded hover:bg-accent text-muted-foreground hover:text-foreground"
+                className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 rounded hover:bg-interactive-hover text-muted-foreground hover:text-foreground"
               >
                 <RiAddLine className="h-3.5 w-3.5" />
               </button>
diff --git a/packages/ui/src/components/sections/agents/AgentsSidebar.tsx b/packages/ui/src/components/sections/agents/AgentsSidebar.tsx
index f9b8ef0d..f7e50b64 100644
--- a/packages/ui/src/components/sections/agents/AgentsSidebar.tsx
+++ b/packages/ui/src/components/sections/agents/AgentsSidebar.tsx
@@ -405,7 +405,7 @@ export const AgentsSidebar: React.FC<AgentsSidebarProps> = ({ onItemSelect }) =>
             <Button
               variant="ghost"
               onClick={() => setRenameDialogAgent(null)}
-              className="text-foreground hover:bg-muted hover:text-foreground"
+              className="text-foreground hover:bg-interactive-hover hover:text-foreground"
             >
               Cancel
             </Button>
@@ -446,7 +446,7 @@ const AgentListItem: React.FC<AgentListItemProps> = ({
     <div
       className={cn(
         'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200',
-        isSelected ? 'dark:bg-accent/80 bg-primary/12' : 'hover:dark:bg-accent/40 hover:bg-primary/6'
+        isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
       )}
     >
       <div className="flex min-w-0 flex-1 items-center">
diff --git a/packages/ui/src/components/sections/agents/ModelSelector.tsx b/packages/ui/src/components/sections/agents/ModelSelector.tsx
index 0d3db5d6..cd50e37a 100644
--- a/packages/ui/src/components/sections/agents/ModelSelector.tsx
+++ b/packages/ui/src/components/sections/agents/ModelSelector.tsx
@@ -161,7 +161,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                 ref={(el) => { itemRefs.current[flatIndex] = el; }}
                 className={cn(
                     "typography-meta group flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer",
-                    isHighlighted ? "bg-accent" : "hover:bg-accent/50"
+                    isHighlighted ? "bg-interactive-selection" : "hover:bg-interactive-hover/50"
                 )}
                 onClick={() => handleProviderAndModelChange(provID, modID)}
                 onMouseEnter={() => setSelectedIndex(flatIndex)}
@@ -190,8 +190,8 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                             toggleFavoriteModel(provID, modID);
                         }}
                         className={cn(
-                            "model-favorite-button flex h-4 w-4 items-center justify-center hover:text-yellow-600",
-                            isFavorite ? "text-yellow-500" : "text-muted-foreground"
+                            "model-favorite-button flex h-4 w-4 items-center justify-center hover:text-primary/80",
+                            isFavorite ? "text-primary" : "text-muted-foreground"
                         )}
                         aria-label={isFavorite ? "Unfavorite" : "Favorite"}
                         title={isFavorite ? "Remove from favorites" : "Add to favorites"}
@@ -253,7 +253,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                 <div className="space-y-1">
                     {/* Favorites Section for Mobile */}
                     {favoriteModelsList.length > 0 && (
-                        <div className="rounded-xl border border-border/40 bg-background/95 mb-2">
+                        <div className="rounded-xl border border-border/40 bg-[var(--surface-elevated)] mb-2">
                             <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                                 Favorites
                             </div>
@@ -293,7 +293,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                                                     e.stopPropagation();
                                                     toggleFavoriteModel(providerID, modelID);
                                                 }}
-                                                className="model-favorite-button flex h-8 w-8 items-center justify-center text-yellow-500 hover:text-yellow-600 active:scale-95 touch-manipulation"
+                                                className="model-favorite-button flex h-8 w-8 items-center justify-center text-primary hover:text-primary/80 active:scale-95 touch-manipulation"
                                                 aria-label="Unfavorite"
                                             >
                                                 <RiStarFill className="h-4 w-4" />
@@ -307,7 +307,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
 
                     {/* Recents Section for Mobile */}
                     {recentModelsList.length > 0 && (
-                        <div className="rounded-xl border border-border/40 bg-background/95 mb-2">
+                        <div className="rounded-xl border border-border/40 bg-[var(--surface-elevated)] mb-2">
                             <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                                 Recents
                             </div>
@@ -347,7 +347,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                                                     e.stopPropagation();
                                                     toggleFavoriteModel(providerID, modelID);
                                                 }}
-                                                className="model-favorite-button flex h-8 w-8 items-center justify-center text-muted-foreground/50 hover:text-yellow-600 active:scale-95 touch-manipulation"
+                                                className="model-favorite-button flex h-8 w-8 items-center justify-center text-muted-foreground/50 hover:text-primary/80 active:scale-95 touch-manipulation"
                                                 aria-label="Favorite"
                                             >
                                                 <RiStarLine className="h-4 w-4" />
@@ -367,7 +367,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                         const isExpanded = expandedMobileProviders.has(provider.id);
 
                         return (
-                            <div key={provider.id} className="rounded-xl border border-border/40 bg-background/95">
+                            <div key={provider.id} className="rounded-xl border border-border/40 bg-[var(--surface-elevated)]">
                                 <button
                                     type="button"
                                     className="flex w-full items-center justify-between gap-1.5 px-2 py-1.5 text-left"
@@ -425,9 +425,9 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                                                                 toggleFavoriteModel(provider.id as string, modelItem.id as string);
                                                             }}
                                                             className={cn(
-                                                                "flex h-8 w-8 items-center justify-center active:scale-95 touch-manipulation",
+                                                                "flex h-8 w-8 items-center justify-center active:scale-95 touch-manipulation hover:text-primary/80",
                                                                 isFavoriteModel(provider.id as string, modelItem.id as string)
-                                                                    ? "text-yellow-500"
+                                                                    ? "text-primary"
                                                                     : "text-muted-foreground/50"
                                                             )}
                                                             aria-label={isFavoriteModel(provider.id as string, modelItem.id as string) ? "Unfavorite" : "Favorite"}
@@ -454,7 +454,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
 
                     <button
                         type="button"
-                        className="flex w-full items-center justify-between rounded-lg border border-border/40 bg-background/95 px-2 py-1.5 text-left"
+                        className="flex w-full items-center justify-between rounded-lg border border-border/40 bg-[var(--surface-elevated)] px-2 py-1.5 text-left"
                         onClick={() => {
                             handleProviderAndModelChange('', '');
                             closeMobilePanel();
@@ -474,7 +474,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                     type="button"
                     onClick={() => setIsMobilePanelOpen(true)}
                     className={cn(
-                        'flex w-full items-center justify-between gap-2 rounded-lg border border-border/40 bg-background/95 px-2 py-1.5 text-left',
+                        'flex w-full items-center justify-between gap-2 rounded-lg border border-border/40 bg-[var(--surface-elevated)] px-2 py-1.5 text-left',
                         className
                     )}
                 >
@@ -497,7 +497,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                 <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
                     <DropdownMenuTrigger asChild>
                         <div className={cn(
-                            'flex items-center gap-2 px-2 rounded-lg bg-accent/20 border border-border/20 cursor-pointer hover:bg-accent/30 h-6 w-fit',
+                            'flex items-center gap-2 px-2 rounded-lg bg-interactive-selection/20 border border-border/20 cursor-pointer hover:bg-interactive-hover/30 h-6 w-fit',
                             className
                         )}>
                             {providerId ? (
@@ -596,7 +596,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                                             <div
                                                 className={cn(
                                                     "typography-meta flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer",
-                                                    "hover:bg-accent/50"
+                                                    "hover:bg-interactive-hover/50"
                                                 )}
                                                 onClick={() => handleProviderAndModelChange('', '')}
                                             >
@@ -618,7 +618,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                                             {/* Favorites Section */}
                                             {filteredFavorites.length > 0 && (
                                                 <>
-                                                    <DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
+                                                    <DropdownMenuLabel style={{ backgroundColor: 'var(--surface-elevated)' }} className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 border-b border-border/30">
                                                         <RiStarFill className="h-4 w-4 text-primary" />
                                                         Favorites
                                                     </DropdownMenuLabel>
@@ -633,7 +633,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                                             {filteredRecents.length > 0 && (
                                                 <>
                                                     {filteredFavorites.length > 0 && <DropdownMenuSeparator />}
-                                                    <DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
+                                                    <DropdownMenuLabel style={{ backgroundColor: 'var(--surface-elevated)' }} className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 border-b border-border/30">
                                                         <RiTimeLine className="h-4 w-4" />
                                                         Recent
                                                     </DropdownMenuLabel>
@@ -653,7 +653,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                                             {filteredProviders.map((provider, index) => (
                                                 <React.Fragment key={provider.id}>
                                                     {index > 0 && <DropdownMenuSeparator />}
-                                                    <DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 bg-background border-b border-border/30">
+                                                    <DropdownMenuLabel style={{ backgroundColor: 'var(--surface-elevated)' }} className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 sticky top-0 z-10 border-b border-border/30">
                                                         <ProviderLogo
                                                             providerId={provider.id}
                                                             className="h-4 w-4 flex-shrink-0"
diff --git a/packages/ui/src/components/sections/commands/AgentSelector.tsx b/packages/ui/src/components/sections/commands/AgentSelector.tsx
index 93f2d51c..71e40ed4 100644
--- a/packages/ui/src/components/sections/commands/AgentSelector.tsx
+++ b/packages/ui/src/components/sections/commands/AgentSelector.tsx
@@ -120,7 +120,7 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <div className={cn(
-                            'flex items-center gap-2 px-2 rounded-lg bg-accent/20 border border-border/20 cursor-pointer hover:bg-accent/30 h-6 w-fit',
+                            'flex items-center gap-2 px-2 rounded-lg bg-interactive-selection/20 border border-border/20 cursor-pointer hover:bg-interactive-hover/30 h-6 w-fit',
                             className
                         )}>
                             <RiRobot2Line className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
diff --git a/packages/ui/src/components/sections/commands/CommandsPage.tsx b/packages/ui/src/components/sections/commands/CommandsPage.tsx
index 15ce46c4..d69e0cd5 100644
--- a/packages/ui/src/components/sections/commands/CommandsPage.tsx
+++ b/packages/ui/src/components/sections/commands/CommandsPage.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
+import { Checkbox } from '@/components/ui/checkbox';
 import { toast } from '@/components/ui';
 import { useCommandsStore, type CommandConfig, type CommandScope } from '@/stores/useCommandsStore';
-import { RiCheckLine, RiInformationLine, RiSaveLine, RiTerminalBoxLine, RiUser3Line, RiFolderLine } from '@remixicon/react';
-import { cn } from '@/lib/utils';
+import { RiInformationLine, RiSaveLine, RiTerminalBoxLine, RiUser3Line, RiFolderLine } from '@remixicon/react';
 import { ModelSelector } from '../agents/ModelSelector';
 import { AgentSelector } from './AgentSelector';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -309,22 +309,10 @@ export const CommandsPage: React.FC = () => {
 
           <div className="space-y-2">
             <label className="typography-ui-label font-medium text-foreground flex items-center gap-2 cursor-pointer">
-              <div className="relative">
-                <input
-                  type="checkbox"
-                  checked={subtask}
-                  onChange={(e) => setSubtask(e.target.checked)}
-                  className="sr-only"
-                />
-                <div className={cn(
-                  "w-5 h-5 rounded border-2 flex items-center justify-center",
-                  subtask
-                    ? "bg-primary border-primary"
-                    : "bg-background border-border hover:border-primary/50"
-                )}>
-                  {subtask && <RiCheckLine className="w-3 h-3 text-primary-foreground" />}
-                </div>
-              </div>
+              <Checkbox
+                checked={subtask}
+                onChange={(checked) => setSubtask(checked)}
+              />
               Force Subagent Invocation
             </label>
             <div className="flex items-center gap-2">
diff --git a/packages/ui/src/components/sections/commands/CommandsSidebar.tsx b/packages/ui/src/components/sections/commands/CommandsSidebar.tsx
index 3b8997cc..a3c1ff5c 100644
--- a/packages/ui/src/components/sections/commands/CommandsSidebar.tsx
+++ b/packages/ui/src/components/sections/commands/CommandsSidebar.tsx
@@ -302,7 +302,7 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
             <Button
               variant="ghost"
               onClick={() => setRenameDialogCommand(null)}
-              className="text-foreground hover:bg-muted hover:text-foreground"
+                className="text-foreground hover:bg-interactive-hover hover:text-foreground"
             >
               Cancel
             </Button>
@@ -339,7 +339,7 @@ const CommandListItem: React.FC<CommandListItemProps> = ({
     <div
       className={cn(
         'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200',
-        isSelected ? 'dark:bg-accent/80 bg-primary/12' : 'hover:dark:bg-accent/40 hover:bg-primary/6'
+        isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
       )}
     >
       <div className="flex min-w-0 flex-1 items-center">
diff --git a/packages/ui/src/components/sections/git-identities/GitIdentitiesSidebar.tsx b/packages/ui/src/components/sections/git-identities/GitIdentitiesSidebar.tsx
index af740f78..13a0434e 100644
--- a/packages/ui/src/components/sections/git-identities/GitIdentitiesSidebar.tsx
+++ b/packages/ui/src/components/sections/git-identities/GitIdentitiesSidebar.tsx
@@ -261,7 +261,7 @@ const ProfileListItem: React.FC<ProfileListItemProps> = ({
     <div
       className={cn(
         'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200',
-        isSelected ? 'dark:bg-accent/80 bg-primary/12' : 'hover:dark:bg-accent/40 hover:bg-primary/6'
+        isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
       )}
     >
       <div className="flex min-w-0 flex-1 items-center">
@@ -357,7 +357,7 @@ const DiscoveredCredentialItem: React.FC<DiscoveredCredentialItemProps> = ({
   const isRepoSpecific = credential.host.includes('/');
 
   return (
-    <div className="group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200 hover:dark:bg-accent/40 hover:bg-primary/6">
+    <div className="group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200 hover:bg-interactive-hover">
       <div className="flex min-w-0 flex-1 items-center">
         <div className="flex min-w-0 flex-1 flex-col gap-0">
           <div className="flex items-center gap-1.5">
diff --git a/packages/ui/src/components/sections/openchamber/DefaultsSettings.tsx b/packages/ui/src/components/sections/openchamber/DefaultsSettings.tsx
index 9e74cbc8..1e524d47 100644
--- a/packages/ui/src/components/sections/openchamber/DefaultsSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/DefaultsSettings.tsx
@@ -4,6 +4,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 import { ModelSelector } from '@/components/sections/agents/ModelSelector';
 import { AgentSelector } from '@/components/sections/commands/AgentSelector';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
 import { updateDesktopSettings } from '@/lib/persistence';
 import { getDesktopSettings, isDesktopRuntime, isVSCodeRuntime } from '@/lib/desktop';
 import { useConfigStore } from '@/stores/useConfigStore';
@@ -317,17 +318,15 @@ export const DefaultsSettings: React.FC = () => {
       {!isVSCode && (
         <div className="pt-2">
           <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
-              className="h-3.5 w-3.5 accent-primary"
+            <Checkbox
               checked={settingsAutoCreateWorktree}
-              onChange={handleAutoWorktreeChange}
+              onChange={(checked) => handleAutoWorktreeChange({ target: { checked } } as React.ChangeEvent<HTMLInputElement>)}
             />
             <span className="typography-ui-label text-foreground">
               Always create worktree for new sessions
             </span>
           </label>
-          <p className="typography-meta text-muted-foreground pl-5.5 mt-1">
+          <p className="typography-meta text-muted-foreground pl-5 mt-1">
             {settingsAutoCreateWorktree
               ? `New session (Worktree): ${getModifierLabel()} + N  •  New session (Standard): Shift + ${getModifierLabel()} + N`
               : `New session (Standard): ${getModifierLabel()} + N  •  New session (Worktree): Shift + ${getModifierLabel()} + N`}
diff --git a/packages/ui/src/components/sections/openchamber/GitSettings.tsx b/packages/ui/src/components/sections/openchamber/GitSettings.tsx
index f355e248..6f8bb6a1 100644
--- a/packages/ui/src/components/sections/openchamber/GitSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/GitSettings.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { RiInformationLine } from '@remixicon/react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Checkbox } from '@/components/ui/checkbox';
 import { updateDesktopSettings } from '@/lib/persistence';
 import { isDesktopRuntime, getDesktopSettings } from '@/lib/desktop';
 import { useConfigStore } from '@/stores/useConfigStore';
@@ -105,11 +106,9 @@ export const GitSettings: React.FC = () => {
       <div className="space-y-3">
         <div className="flex flex-col gap-2">
           <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
-              className="h-3.5 w-3.5 accent-primary"
+            <Checkbox
               checked={settingsGitmojiEnabled}
-              onChange={handleGitmojiChange}
+              onChange={(checked) => handleGitmojiChange({ target: { checked } } as React.ChangeEvent<HTMLInputElement>)}
             />
             <span className="typography-ui-label text-foreground">Enable gitmoji picker</span>
           </label>
@@ -128,11 +127,9 @@ export const GitSettings: React.FC = () => {
       <div className="space-y-3">
         <div className="flex flex-col gap-2">
           <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
-              className="h-3.5 w-3.5 accent-primary"
+            <Checkbox
               checked={showGitignored}
-              onChange={(event) => setFilesViewShowGitignored(event.target.checked)}
+              onChange={setFilesViewShowGitignored}
             />
             <span className="typography-ui-label text-foreground">Display gitignored files</span>
           </label>
diff --git a/packages/ui/src/components/sections/openchamber/OpenChamberSidebar.tsx b/packages/ui/src/components/sections/openchamber/OpenChamberSidebar.tsx
index a2e10378..42ded42d 100644
--- a/packages/ui/src/components/sections/openchamber/OpenChamberSidebar.tsx
+++ b/packages/ui/src/components/sections/openchamber/OpenChamberSidebar.tsx
@@ -102,7 +102,7 @@ export const OpenChamberSidebar: React.FC<OpenChamberSidebarProps> = ({
               key={group.id}
               className={cn(
                 'group relative rounded-md px-1.5 py-1 transition-all duration-200',
-                isSelected ? 'dark:bg-accent/80 bg-primary/12' : 'hover:dark:bg-accent/40 hover:bg-primary/6'
+                isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
               )}
             >
               <button
diff --git a/packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx b/packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
index c07a9275..56bf553b 100644
--- a/packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
@@ -9,6 +9,14 @@ import { cn, getModifierLabel } from '@/lib/utils';
 import { ButtonSmall } from '@/components/ui/button-small';
 import { NumberInput } from '@/components/ui/number-input';
 import { Switch } from '@/components/ui/switch';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
 import { isVSCodeRuntime } from '@/lib/desktop';
 import { useDeviceInfo } from '@/lib/device';
 import {
@@ -109,8 +117,46 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
     const {
         themeMode,
         setThemeMode,
+        availableThemes,
+        customThemesLoading,
+        reloadCustomThemes,
+        lightThemeId,
+        darkThemeId,
+        setLightThemePreference,
+        setDarkThemePreference,
     } = useThemeSystem();
 
+    const [themesReloading, setThemesReloading] = React.useState(false);
+
+    const lightThemes = React.useMemo(
+        () => availableThemes
+            .filter((theme) => theme.metadata.variant === 'light')
+            .sort((a, b) => a.metadata.name.localeCompare(b.metadata.name)),
+        [availableThemes],
+    );
+
+    const darkThemes = React.useMemo(
+        () => availableThemes
+            .filter((theme) => theme.metadata.variant === 'dark')
+            .sort((a, b) => a.metadata.name.localeCompare(b.metadata.name)),
+        [availableThemes],
+    );
+
+    const selectedLightTheme = React.useMemo(
+        () => lightThemes.find((theme) => theme.metadata.id === lightThemeId) ?? lightThemes[0],
+        [lightThemes, lightThemeId],
+    );
+
+    const selectedDarkTheme = React.useMemo(
+        () => darkThemes.find((theme) => theme.metadata.id === darkThemeId) ?? darkThemes[0],
+        [darkThemes, darkThemeId],
+    );
+
+    const formatThemeLabel = React.useCallback((themeName: string, variant: 'light' | 'dark') => {
+        const suffix = variant === 'dark' ? ' Dark' : ' Light';
+        return themeName.endsWith(suffix) ? themeName.slice(0, -suffix.length) : themeName;
+    }, []);
+
     const shouldShow = (setting: VisibleSetting): boolean => {
         if (!visibleSettings) return true;
         return visibleSettings.includes(setting);
@@ -138,6 +184,62 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                             </ButtonSmall>
                         ))}
                     </div>
+
+                    <div className="flex gap-10">
+                        <div className="flex flex-col gap-1.5">
+                            <h4 className="typography-ui-label font-medium text-foreground">Light Theme</h4>
+                            <Select value={selectedLightTheme?.metadata.id ?? ''} onValueChange={setLightThemePreference}>
+                                <SelectTrigger aria-label="Select light theme" className="min-w-32">
+                                    <SelectValue placeholder="Select theme" />
+                                </SelectTrigger>
+                                <SelectContent className="max-h-64 min-w-40">
+                                    {lightThemes.map((theme) => (
+                                        <SelectItem key={theme.metadata.id} value={theme.metadata.id}>
+                                            {formatThemeLabel(theme.metadata.name, 'light')}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        <div className="flex flex-col gap-1.5">
+                            <h4 className="typography-ui-label font-medium text-foreground">Dark Theme</h4>
+                            <Select value={selectedDarkTheme?.metadata.id ?? ''} onValueChange={setDarkThemePreference}>
+                                <SelectTrigger aria-label="Select dark theme" className="min-w-32">
+                                    <SelectValue placeholder="Select theme" />
+                                </SelectTrigger>
+                                <SelectContent className="max-h-64 min-w-40">
+                                    {darkThemes.map((theme) => (
+                                        <SelectItem key={theme.metadata.id} value={theme.metadata.id}>
+                                            {formatThemeLabel(theme.metadata.name, 'dark')}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    </div>
+
+                    <div className="space-y-1.5">
+                        <button
+                            type="button"
+                            disabled={customThemesLoading || themesReloading}
+                            onClick={async () => {
+                                setThemesReloading(true);
+                                try {
+                                    await reloadCustomThemes();
+                                } finally {
+                                    setThemesReloading(false);
+                                }
+                            }}
+                            className="typography-ui-label text-muted-foreground hover:text-foreground hover:underline underline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+                        >
+                            <RiRestartLine className={cn('h-3.5 w-3.5', themesReloading && 'animate-spin')} />
+                            Reload custom themes
+                        </button>
+                        <p className="typography-meta text-muted-foreground/70">
+                            Import themes from ~/.config/openchamber/themes/
+                        </p>
+                    </div>
                 </div>
             )}
 
@@ -172,7 +274,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                             variant="ghost"
                             onClick={() => setFontSize(100)}
                             disabled={fontSize === 100}
-                            className="h-8 w-8 px-0 border border-border bg-background hover:bg-accent disabled:opacity-100 disabled:bg-background"
+                            className="h-8 w-8 px-0 border border-border bg-background hover:bg-interactive-hover disabled:opacity-100 disabled:bg-background"
                             aria-label="Reset font size"
                             title="Reset"
                         >
@@ -213,7 +315,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                 variant="ghost"
                                 onClick={() => setPadding(100)}
                                 disabled={padding === 100}
-                                className="h-8 w-8 px-0 border border-border bg-background hover:bg-accent disabled:opacity-100 disabled:bg-background"
+                                className="h-8 w-8 px-0 border border-border bg-background hover:bg-interactive-hover disabled:opacity-100 disabled:bg-background"
                                 aria-label="Reset spacing"
                                 title="Reset"
                             >
@@ -244,7 +346,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                 variant="ghost"
                                 onClick={() => setPadding(100)}
                                 disabled={padding === 100}
-                                className="h-8 w-8 px-0 border border-border bg-background hover:bg-accent disabled:opacity-100 disabled:bg-background"
+                                className="h-8 w-8 px-0 border border-border bg-background hover:bg-interactive-hover disabled:opacity-100 disabled:bg-background"
                                 aria-label="Reset spacing"
                                 title="Reset"
                             >
@@ -304,7 +406,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                 variant="ghost"
                                 onClick={() => setCornerRadius(12)}
                                 disabled={cornerRadius === 12}
-                                className="h-8 w-8 px-0 border border-border bg-background hover:bg-accent disabled:opacity-100 disabled:bg-background"
+                                className="h-8 w-8 px-0 border border-border bg-background hover:bg-interactive-hover disabled:opacity-100 disabled:bg-background"
                                 aria-label="Reset corner radius"
                                 title="Reset"
                             >
@@ -336,7 +438,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                 variant="ghost"
                                 onClick={() => setCornerRadius(12)}
                                 disabled={cornerRadius === 12}
-                                className="h-8 w-8 px-0 border border-border bg-background hover:bg-accent disabled:opacity-100 disabled:bg-background"
+                                className="h-8 w-8 px-0 border border-border bg-background hover:bg-interactive-hover disabled:opacity-100 disabled:bg-background"
                                 aria-label="Reset corner radius"
                                 title="Reset"
                             >
@@ -380,7 +482,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                 variant="ghost"
                                 onClick={() => setInputBarOffset(0)}
                                 disabled={inputBarOffset === 0}
-                                className="h-8 w-8 px-0 border border-border bg-background hover:bg-accent disabled:opacity-100 disabled:bg-background"
+                                className="h-8 w-8 px-0 border border-border bg-background hover:bg-interactive-hover disabled:opacity-100 disabled:bg-background"
                                 aria-label="Reset input bar offset"
                                 title="Reset"
                             >
@@ -412,7 +514,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                 variant="ghost"
                                 onClick={() => setInputBarOffset(0)}
                                 disabled={inputBarOffset === 0}
-                                className="h-8 w-8 px-0 border border-border bg-background hover:bg-accent disabled:opacity-100 disabled:bg-background"
+                                className="h-8 w-8 px-0 border border-border bg-background hover:bg-interactive-hover disabled:opacity-100 disabled:bg-background"
                                 aria-label="Reset input bar offset"
                                 title="Reset"
                             >
@@ -540,11 +642,9 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
 
             {shouldShow('reasoning') && (
                 <label className="flex items-center gap-2 cursor-pointer">
-                    <input
-                        type="checkbox"
-                        className="h-3.5 w-3.5 accent-primary"
+                    <Checkbox
                         checked={showReasoningTraces}
-                        onChange={(event) => setShowReasoningTraces(event.target.checked)}
+                        onChange={setShowReasoningTraces}
                     />
                     <span className="typography-ui-header font-semibold text-foreground">
                         Show thinking / reasoning traces
@@ -554,11 +654,9 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
 
             {shouldShow('textJustificationActivity') && (
                 <label className="flex items-center gap-2 cursor-pointer">
-                    <input
-                        type="checkbox"
-                        className="h-3.5 w-3.5 accent-primary"
+                    <Checkbox
                         checked={showTextJustificationActivity}
-                        onChange={(event) => setShowTextJustificationActivity(event.target.checked)}
+                        onChange={setShowTextJustificationActivity}
                     />
                     <span className="typography-ui-header font-semibold text-foreground">
                         Show text justification in activity
@@ -569,11 +667,9 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
             {shouldShow('queueMode') && (
                 <div className="space-y-2">
                     <label className="flex items-center gap-2 cursor-pointer">
-                        <input
-                            type="checkbox"
-                            className="h-3.5 w-3.5 accent-primary"
+                        <Checkbox
                             checked={queueModeEnabled}
-                            onChange={(event) => setQueueMode(event.target.checked)}
+                            onChange={setQueueMode}
                         />
                         <span className="typography-ui-header font-semibold text-foreground">
                             Queue messages by default
diff --git a/packages/ui/src/components/sections/openchamber/SessionRetentionSettings.tsx b/packages/ui/src/components/sections/openchamber/SessionRetentionSettings.tsx
index c08a25c4..14fc69e1 100644
--- a/packages/ui/src/components/sections/openchamber/SessionRetentionSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/SessionRetentionSettings.tsx
@@ -4,6 +4,7 @@ import { RiInformationLine } from '@remixicon/react';
 import { NumberInput } from '@/components/ui/number-input';
 import { ButtonSmall } from '@/components/ui/button-small';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Checkbox } from '@/components/ui/checkbox';
 import { useDeviceInfo } from '@/lib/device';
 import { useUIStore } from '@/stores/useUIStore';
 import { useSessionAutoCleanup } from '@/hooks/useSessionAutoCleanup';
@@ -60,11 +61,9 @@ export const SessionRetentionSettings: React.FC = () => {
       </div>
 
       <label className="flex items-center gap-2 cursor-pointer">
-        <input
-          type="checkbox"
-          className="h-3.5 w-3.5 accent-primary"
+        <Checkbox
           checked={autoDeleteEnabled}
-          onChange={(event) => setAutoDeleteEnabled(event.target.checked)}
+          onChange={setAutoDeleteEnabled}
         />
         <span className="typography-ui-header font-semibold text-foreground">Enable auto-cleanup</span>
       </label>
diff --git a/packages/ui/src/components/sections/providers/ProvidersPage.tsx b/packages/ui/src/components/sections/providers/ProvidersPage.tsx
index 85c2197e..c5354a6a 100644
--- a/packages/ui/src/components/sections/providers/ProvidersPage.tsx
+++ b/packages/ui/src/components/sections/providers/ProvidersPage.tsx
@@ -542,7 +542,7 @@ export const ProvidersPage: React.FC = () => {
                   type="button"
                   className={cn(
                     "flex w-fit items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-3 py-2 typography-ui-label",
-                    "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    "hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                   )}
                 >
                   <span className={candidateProviderId ? "text-foreground" : "text-muted-foreground"}>
diff --git a/packages/ui/src/components/sections/providers/ProvidersSidebar.tsx b/packages/ui/src/components/sections/providers/ProvidersSidebar.tsx
index 8391ef36..73fdbbca 100644
--- a/packages/ui/src/components/sections/providers/ProvidersSidebar.tsx
+++ b/packages/ui/src/components/sections/providers/ProvidersSidebar.tsx
@@ -77,7 +77,7 @@ export const ProvidersSidebar: React.FC<ProvidersSidebarProps> = ({ onItemSelect
                 key={provider.id}
                 className={cn(
                   'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200',
-                  isSelected ? 'dark:bg-accent/80 bg-primary/12' : 'hover:dark:bg-accent/40 hover:bg-primary/6'
+                  isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
                 )}
               >
                 <button
diff --git a/packages/ui/src/components/sections/shared/SettingsSidebarItem.tsx b/packages/ui/src/components/sections/shared/SettingsSidebarItem.tsx
index 70bfefb2..d2f0b0ec 100644
--- a/packages/ui/src/components/sections/shared/SettingsSidebarItem.tsx
+++ b/packages/ui/src/components/sections/shared/SettingsSidebarItem.tsx
@@ -70,8 +70,8 @@ export const SettingsSidebarItem: React.FC<SettingsSidebarItemProps> = ({
       className={cn(
         'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200',
         selected
-          ? 'dark:bg-accent/80 bg-primary/12'
-          : 'hover:dark:bg-accent/40 hover:bg-primary/6',
+          ? 'bg-interactive-selection'
+          : 'hover:bg-interactive-hover',
         className
       )}
     >
diff --git a/packages/ui/src/components/sections/skills/SkillsPage.tsx b/packages/ui/src/components/sections/skills/SkillsPage.tsx
index 9a3761ca..58cd617f 100644
--- a/packages/ui/src/components/sections/skills/SkillsPage.tsx
+++ b/packages/ui/src/components/sections/skills/SkillsPage.tsx
@@ -509,7 +509,7 @@ export const SkillsPage: React.FC = () => {
               {filesToShow.map((file) => (
                 <div
                   key={file.path}
-                  className="flex items-center justify-between px-3 py-2 rounded-lg border bg-muted/30 hover:bg-muted/50 cursor-pointer transition-colors"
+                  className="flex items-center justify-between px-3 py-2 rounded-lg border bg-muted/30 hover:bg-interactive-hover cursor-pointer transition-colors"
                   onClick={() => handleEditFile(file.path)}
                 >
                   <div className="flex items-center gap-2 min-w-0">
@@ -608,7 +608,7 @@ export const SkillsPage: React.FC = () => {
                 setIsFileDialogOpen(false);
                 setEditingFilePath(null);
               }}
-              className="text-foreground hover:bg-muted hover:text-foreground"
+              className="text-foreground hover:bg-interactive-hover hover:text-foreground"
             >
               Cancel
             </Button>
diff --git a/packages/ui/src/components/sections/skills/SkillsSidebar.tsx b/packages/ui/src/components/sections/skills/SkillsSidebar.tsx
index 1dcaf1d1..6ad8e4fa 100644
--- a/packages/ui/src/components/sections/skills/SkillsSidebar.tsx
+++ b/packages/ui/src/components/sections/skills/SkillsSidebar.tsx
@@ -294,7 +294,7 @@ export const SkillsSidebar: React.FC<SkillsSidebarProps> = ({ onItemSelect }) =>
             <Button
               variant="ghost"
               onClick={() => setRenameDialogSkill(null)}
-              className="text-foreground hover:bg-muted hover:text-foreground"
+              className="text-foreground hover:bg-interactive-hover hover:text-foreground"
             >
               Cancel
             </Button>
@@ -329,7 +329,7 @@ const SkillListItem: React.FC<SkillListItemProps> = ({
     <div
       className={cn(
         'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200',
-        isSelected ? 'dark:bg-accent/80 bg-primary/12' : 'hover:dark:bg-accent/40 hover:bg-primary/6'
+        isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
       )}
     >
       <div className="flex min-w-0 flex-1 items-center">
diff --git a/packages/ui/src/components/sections/skills/catalog/InstallFromRepoDialog.tsx b/packages/ui/src/components/sections/skills/catalog/InstallFromRepoDialog.tsx
index 1790ca38..83ba5748 100644
--- a/packages/ui/src/components/sections/skills/catalog/InstallFromRepoDialog.tsx
+++ b/packages/ui/src/components/sections/skills/catalog/InstallFromRepoDialog.tsx
@@ -13,6 +13,7 @@ import { Button } from '@/components/ui/button';
 import { ButtonLarge } from '@/components/ui/button-large';
 import { Input } from '@/components/ui/input';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   Select,
   SelectContent,
@@ -362,16 +363,16 @@ export const InstallFromRepoDialog: React.FC<InstallFromRepoDialogProps> = ({ op
                         key={item.skillDir}
                         className={
                           'flex items-start gap-3 rounded-lg border bg-muted/10 px-3 py-2 cursor-pointer transition-colors ' +
-                          (disabled ? 'opacity-60 cursor-not-allowed' : 'hover:bg-muted/20')
+                          (disabled ? 'opacity-60 cursor-not-allowed' : 'hover:bg-interactive-hover/20')
                         }
                       >
-                        <input
-                          type="checkbox"
-                          className="mt-1 h-4 w-4"
-                          checked={checked}
-                          disabled={disabled}
-                          onChange={(e) => setSelected((prev) => ({ ...prev, [item.skillDir]: e.target.checked }))}
-                        />
+                        <div className="mt-1">
+                          <Checkbox
+                            checked={checked}
+                            disabled={disabled}
+                            onChange={(newChecked) => setSelected((prev) => ({ ...prev, [item.skillDir]: newChecked }))}
+                          />
+                        </div>
                         <div className="min-w-0 flex-1">
                           <div className="flex items-center gap-2">
                             <div className="typography-ui-label truncate">{item.skillName}</div>
diff --git a/packages/ui/src/components/session/BranchPickerDialog.tsx b/packages/ui/src/components/session/BranchPickerDialog.tsx
index 3c5be8d7..40a9ce9e 100644
--- a/packages/ui/src/components/session/BranchPickerDialog.tsx
+++ b/packages/ui/src/components/session/BranchPickerDialog.tsx
@@ -236,7 +236,7 @@ export function BranchPickerDialog({ open, onOpenChange, project }: BranchPicker
                 return (
                   <div
                     key={branchName}
-                    className="flex items-center gap-2 px-2.5 py-1.5 hover:bg-muted/30 rounded-md overflow-hidden"
+                    className="flex items-center gap-2 px-2.5 py-1.5 hover:bg-interactive-hover/30 rounded-md overflow-hidden"
                   >
                     <RiGitBranchLine className="h-4 w-4 text-muted-foreground flex-shrink-0" />
 
@@ -327,7 +327,7 @@ export function BranchPickerDialog({ open, onOpenChange, project }: BranchPicker
                               type="button"
                               onClick={() => beginRename(branchName)}
                               disabled={disableRename}
-                              className="inline-flex h-7 w-7 items-center justify-center rounded-md hover:bg-muted/40 text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
+                              className="inline-flex h-7 w-7 items-center justify-center rounded-md hover:bg-interactive-hover/40 text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
                               aria-label="Rename"
                             >
                               <RiPencilLine className="h-4 w-4" />
@@ -371,7 +371,7 @@ export function BranchPickerDialog({ open, onOpenChange, project }: BranchPicker
                           type="button"
                           onClick={() => void commitRename(branchName)}
                           disabled={isRenaming}
-                          className="inline-flex h-7 w-7 items-center justify-center rounded-md hover:bg-muted/40 text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
+                          className="inline-flex h-7 w-7 items-center justify-center rounded-md hover:bg-interactive-hover/40 text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
                           aria-label="Confirm rename"
                         >
                           {isRenaming ? (
@@ -383,7 +383,7 @@ export function BranchPickerDialog({ open, onOpenChange, project }: BranchPicker
                         <button
                           type="button"
                           onClick={cancelRename}
-                          className="inline-flex h-7 w-7 items-center justify-center rounded-md hover:bg-muted/40 text-muted-foreground hover:text-foreground transition-colors"
+                          className="inline-flex h-7 w-7 items-center justify-center rounded-md hover:bg-interactive-hover/40 text-muted-foreground hover:text-foreground transition-colors"
                           aria-label="Cancel rename"
                         >
                           <RiCloseLine className="h-4 w-4" />
@@ -420,7 +420,7 @@ export function BranchPickerDialog({ open, onOpenChange, project }: BranchPicker
                         <button
                           type="button"
                           onClick={cancelDelete}
-                          className="inline-flex h-7 w-7 items-center justify-center rounded-md hover:bg-muted/40 text-muted-foreground hover:text-foreground transition-colors"
+                          className="inline-flex h-7 w-7 items-center justify-center rounded-md hover:bg-interactive-hover/40 text-muted-foreground hover:text-foreground transition-colors"
                           aria-label="Cancel delete"
                         >
                           <RiCloseLine className="h-4 w-4" />
diff --git a/packages/ui/src/components/session/DirectoryAutocomplete.tsx b/packages/ui/src/components/session/DirectoryAutocomplete.tsx
index 30903679..3d876f9c 100644
--- a/packages/ui/src/components/session/DirectoryAutocomplete.tsx
+++ b/packages/ui/src/components/session/DirectoryAutocomplete.tsx
@@ -292,7 +292,7 @@ export const DirectoryAutocomplete = React.forwardRef<DirectoryAutocompleteHandl
                 ref={(el) => { itemRefs.current[index] = el; }}
                 className={cn(
                   "flex items-center gap-2 px-3 py-1.5 cursor-pointer typography-ui-label",
-                  isSelected && "bg-muted"
+                  isSelected && "bg-interactive-selection"
                 )}
                 onClick={() => { handleSelectSuggestion(entry); onClose(); }}
                 onMouseEnter={() => setSelectedIndex(index)}
diff --git a/packages/ui/src/components/session/DirectoryExplorerDialog.tsx b/packages/ui/src/components/session/DirectoryExplorerDialog.tsx
index 11025507..1a78803a 100644
--- a/packages/ui/src/components/session/DirectoryExplorerDialog.tsx
+++ b/packages/ui/src/components/session/DirectoryExplorerDialog.tsx
@@ -208,7 +208,7 @@ export const DirectoryExplorerDialog: React.FC<DirectoryExplorerDialogProps> = (
     <button
       type="button"
       onClick={toggleShowHidden}
-      className="flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-accent/40 transition-colors typography-meta text-muted-foreground flex-shrink-0"
+      className="flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-interactive-hover/40 transition-colors typography-meta text-muted-foreground flex-shrink-0"
     >
       {showHidden ? (
         <RiCheckboxLine className="h-4 w-4 text-primary" />
diff --git a/packages/ui/src/components/session/DirectoryTree.tsx b/packages/ui/src/components/session/DirectoryTree.tsx
index 0e6d05eb..e95eb212 100644
--- a/packages/ui/src/components/session/DirectoryTree.tsx
+++ b/packages/ui/src/components/session/DirectoryTree.tsx
@@ -626,7 +626,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
               e.stopPropagation();
               toggleExpanded(item);
             }}
-            className={cn("hover:bg-accent rounded", isMobile ? "p-0.5" : "p-0.5")}
+            className={cn("hover:bg-interactive-hover rounded", isMobile ? "p-0.5" : "p-0.5")}
           >
             {isExpanded ? (
               <RiArrowDownSLine className={isMobile ? "h-3.5 w-3.5" : "h-3 w-3"} />
@@ -681,7 +681,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
             startCreatingDirectory(item);
           }}
           className={cn(
-            "hover:bg-accent rounded transition-opacity",
+            "hover:bg-interactive-hover rounded transition-opacity",
             isMobile ? "p-1.5" : "p-1",
             alwaysShowActions ? "opacity-60" : "opacity-0 group-hover:opacity-100"
           )}
@@ -696,7 +696,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
             togglePin(item.path);
           }}
           className={cn(
-            "hover:bg-accent rounded transition-opacity",
+            "hover:bg-interactive-hover rounded transition-opacity",
             isMobile ? "p-1.5" : "p-1",
             alwaysShowActions ? "opacity-60" : "opacity-0 group-hover:opacity-100"
           )}
@@ -720,7 +720,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
               isMobile ? 'px-1.5 py-1' : 'px-2 py-1.5',
               isSelected 
                 ? 'bg-primary/10 text-primary' 
-                : 'hover:bg-accent/50 text-foreground'
+                : 'hover:bg-interactive-hover/50 text-foreground'
             )}
             style={{ paddingLeft: `${level * (isMobile ? 12 : 14) + (isMobile ? 4 : 6)}px` }}
           >
@@ -751,7 +751,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
                       }
                     }}
                     onBlur={createDirectory}
-                    className="h-6 typography-meta flex-1 selection:bg-muted selection:text-muted-foreground"
+                    className="h-6 typography-meta flex-1 selection:bg-interactive-selection selection:text-interactive-selection-foreground"
                     placeholder="new_directory"
                   />
                   <button
@@ -760,7 +760,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
                       e.stopPropagation();
                       createDirectory();
                     }}
-                    className="p-1 hover:bg-accent rounded"
+                    className="p-1 hover:bg-interactive-hover rounded"
                     title="Create directory"
                   >
                     <RiCheckLine className="h-3 w-3 text-green-600" />
@@ -771,7 +771,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
                       e.stopPropagation();
                       cancelCreatingDirectory();
                     }}
-                    className="p-1 hover:bg-accent rounded"
+                    className="p-1 hover:bg-interactive-hover rounded"
                     title="Cancel"
                   >
                     <RiCloseLine className="h-3 w-3 text-muted-foreground" />
@@ -790,7 +790,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
         <DropdownMenuItem
           className={cn(
             'flex items-center gap-1 cursor-pointer group',
-            currentPath === item.path && 'bg-accent'
+            currentPath === item.path && 'bg-interactive-selection'
           )}
           style={{ paddingLeft: `${level * 12 + 8}px` }}
           onSelect={(e) => {
@@ -803,7 +803,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
                 e.stopPropagation();
                 toggleExpanded(item);
               }}
-              className="p-0.5 hover:bg-accent rounded"
+              className="p-0.5 hover:bg-interactive-hover rounded"
             >
               {isExpanded ? (
                 <RiArrowDownSLine className="h-3 w-3" />
@@ -840,7 +840,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
                     }
                   }}
                   onBlur={createDirectory}
-                  className="h-6 typography-meta flex-1 selection:bg-muted selection:text-muted-foreground"
+                  className="h-6 typography-meta flex-1 selection:bg-interactive-selection selection:text-interactive-selection-foreground"
                   placeholder="new_directory"
                 />
                 <button
@@ -849,7 +849,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
                     e.stopPropagation();
                     createDirectory();
                   }}
-                  className="p-1 hover:bg-accent rounded"
+                  className="p-1 hover:bg-interactive-hover rounded"
                   title="Create directory"
                 >
                   <RiCheckLine className="h-3 w-3 text-green-600" />
@@ -860,7 +860,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
                     e.stopPropagation();
                     cancelCreatingDirectory();
                   }}
-                  className="p-1 hover:bg-accent rounded"
+                  className="p-1 hover:bg-interactive-hover rounded"
                   title="Cancel"
                 >
                   <RiCloseLine className="h-3 w-3 text-muted-foreground" />
@@ -885,7 +885,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
             isMobile ? 'px-1.5 py-1' : 'px-2 py-1.5',
             isSelected 
               ? 'bg-primary/10' 
-              : 'hover:bg-accent/50'
+              : 'hover:bg-interactive-hover/50'
           )}
         >
           <button
@@ -923,7 +923,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
           <button
             onClick={() => togglePin(path)}
             className={cn(
-              "hover:bg-accent rounded-md transition-opacity",
+              "hover:bg-interactive-hover rounded-md transition-opacity",
               isMobile ? "p-1.5 opacity-60" : "p-1 opacity-0 group-hover:opacity-100"
             )}
             title="Unpin directory"
@@ -946,7 +946,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
         }}
         className={cn(
           'flex items-start gap-2 cursor-pointer group py-2',
-          currentPath === path && 'bg-accent'
+          currentPath === path && 'bg-interactive-selection'
         )}
       >
         <RiFolder6Line className="h-3.5 w-3.5 text-muted-foreground mt-0.5" />
@@ -962,7 +962,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
             e.preventDefault();
             togglePin(path);
           }}
-          className="p-1 opacity-0 group-hover:opacity-100 hover:bg-accent rounded transition-opacity"
+          className="p-1 opacity-0 group-hover:opacity-100 hover:bg-interactive-hover rounded transition-opacity"
           title="Unpin directory"
         >
           <RiPushpin2Line className="h-3 w-3 text-primary" />
@@ -985,7 +985,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
                 type="button"
                 onClick={() => setIsPinnedExpanded(prev => !prev)}
                 className={cn(
-                  "flex w-full items-center gap-1.5 typography-meta font-medium text-muted-foreground/80 hover:bg-accent/30 rounded transition-colors uppercase tracking-wide",
+                  "flex w-full items-center gap-1.5 typography-meta font-medium text-muted-foreground/80 hover:bg-interactive-hover/30 rounded transition-colors uppercase tracking-wide",
                   isMobile ? "px-1.5 py-1" : "px-2 py-1.5"
                 )}
               >
diff --git a/packages/ui/src/components/session/GitHubIssuePickerDialog.tsx b/packages/ui/src/components/session/GitHubIssuePickerDialog.tsx
index fbf7644f..e5a0b07c 100644
--- a/packages/ui/src/components/session/GitHubIssuePickerDialog.tsx
+++ b/packages/ui/src/components/session/GitHubIssuePickerDialog.tsx
@@ -505,8 +505,8 @@ Do not implement changes until I confirm; end with: “Next actions: <1 sentence
           {directNumber && projectDirectory && github && connected ? (
             <div
               className={cn(
-                'group flex items-center gap-2 py-1.5 hover:bg-muted/30 rounded transition-colors cursor-pointer',
-                startingIssueNumber === directNumber && 'bg-muted/30'
+                'group flex items-center gap-2 py-1.5 hover:bg-interactive-hover/30 rounded transition-colors cursor-pointer',
+                startingIssueNumber === directNumber && 'bg-interactive-selection/30'
               )}
               onClick={() => void startSession(directNumber)}
             >
@@ -530,8 +530,8 @@ Do not implement changes until I confirm; end with: “Next actions: <1 sentence
             <div
               key={issue.number}
               className={cn(
-                'group flex items-center gap-2 py-1.5 hover:bg-muted/30 rounded transition-colors cursor-pointer',
-                startingIssueNumber === issue.number && 'bg-muted/30'
+                'group flex items-center gap-2 py-1.5 hover:bg-interactive-hover/30 rounded transition-colors cursor-pointer',
+                startingIssueNumber === issue.number && 'bg-interactive-selection/30'
               )}
               onClick={() => void startSession(issue.number)}
             >
diff --git a/packages/ui/src/components/session/GitHubPullRequestPickerDialog.tsx b/packages/ui/src/components/session/GitHubPullRequestPickerDialog.tsx
index eb9832b9..0648f4b6 100644
--- a/packages/ui/src/components/session/GitHubPullRequestPickerDialog.tsx
+++ b/packages/ui/src/components/session/GitHubPullRequestPickerDialog.tsx
@@ -646,8 +646,8 @@ Nice-to-have:
           {directNumber && projectDirectory && github && connected ? (
             <div
               className={cn(
-                'group flex items-center gap-2 py-1.5 hover:bg-muted/30 rounded transition-colors cursor-pointer',
-                startingNumber === directNumber && 'bg-muted/30'
+                'group flex items-center gap-2 py-1.5 hover:bg-interactive-hover/30 rounded transition-colors cursor-pointer',
+                startingNumber === directNumber && 'bg-interactive-selection/30'
               )}
               onClick={() => void startSession(directNumber)}
             >
@@ -675,10 +675,10 @@ Nice-to-have:
                 key={pr.number}
                 className={cn(
                   'group flex items-start gap-2 py-1.5 rounded transition-colors',
-                  startingNumber === pr.number && 'bg-muted/30',
+                  startingNumber === pr.number && 'bg-interactive-selection/30',
                   disabledByWorktree
                     ? 'opacity-50 cursor-not-allowed'
-                    : 'hover:bg-muted/30 cursor-pointer'
+                    : 'hover:bg-interactive-hover/30 cursor-pointer'
                 )}
                 onClick={() => {
                   if (disabledByWorktree) return;
diff --git a/packages/ui/src/components/session/SessionDialogs.tsx b/packages/ui/src/components/session/SessionDialogs.tsx
index 54c2e1f9..c786506c 100644
--- a/packages/ui/src/components/session/SessionDialogs.tsx
+++ b/packages/ui/src/components/session/SessionDialogs.tsx
@@ -491,7 +491,7 @@ export const SessionDialogs: React.FC = () => {
                         {targetWorktree ? formatPathForDisplay(targetWorktree.path, homeDirectory) : 'Worktree path unavailable.'}
                     </p>
                     {hasDirtyWorktrees && (
-                        <p className="typography-micro text-warning">Uncommitted changes will be discarded.</p>
+                        <p className="typography-micro text-status-warning">Uncommitted changes will be discarded.</p>
                     )}
 
                 </div>
diff --git a/packages/ui/src/components/session/SessionSidebar.tsx b/packages/ui/src/components/session/SessionSidebar.tsx
index d8647a06..03c2516f 100644
--- a/packages/ui/src/components/session/SessionSidebar.tsx
+++ b/packages/ui/src/components/session/SessionSidebar.tsx
@@ -210,7 +210,7 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
             ? isStuck ? 'var(--sidebar-stuck-bg)' : 'transparent'
             : undefined,
           borderColor: isHovered
-            ? 'var(--color-border)'
+            ? 'var(--color-border-hover)'
             : isCollapsed
               ? 'color-mix(in srgb, var(--color-border) 35%, transparent)'
               : 'var(--color-border)'
@@ -320,7 +320,7 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
                     onNewWorktreeSession();
                   }}
                   className={cn(
-                    'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground flex-shrink-0',
+                    'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground hover:bg-interactive-hover/50 flex-shrink-0',
                     mobileVariant ? 'opacity-70' : 'opacity-100',
                   )}
                   aria-label="New session in worktree"
@@ -342,7 +342,7 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
                     e.stopPropagation();
                     onNewSession();
                   }}
-                  className="inline-flex h-6 w-6 items-center justify-center text-muted-foreground hover:text-foreground flex-shrink-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                  className="inline-flex h-6 w-6 items-center justify-center text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 flex-shrink-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
                   aria-label="New session"
                 >
                   <RiAddLine className="h-4 w-4" />
@@ -1133,7 +1133,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
             key={session.id}
             className={cn(
               'group relative flex items-center rounded-md px-1.5 py-1',
-              'dark:bg-accent/80 bg-primary/12',
+              'bg-interactive-selection',
               depth > 0 && 'pl-[20px]',
             )}
           >
@@ -1209,7 +1209,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       const streamingIndicator = (() => {
         if (!memoryState) return null;
         if (memoryState.isZombie) {
-          return <RiErrorWarningLine className="h-4 w-4 text-warning" />;
+          return <RiErrorWarningLine className="h-4 w-4 text-status-warning" />;
         }
         return null;
       })();
@@ -1219,7 +1219,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
           <div
             className={cn(
               'group relative flex items-center rounded-md px-1.5 py-1',
-              isActive ? 'dark:bg-accent/80 bg-primary/12' : 'hover:dark:bg-accent/40 hover:bg-primary/6',
+              isActive ? 'bg-interactive-selection' : 'hover:bg-interactive-hover',
               isMissingDirectory ? 'opacity-75' : '',
               depth > 0 && 'pl-[20px]',
             )}
@@ -1314,7 +1314,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                     </span>
                   ) : null}
                   {isMissingDirectory ? (
-                    <span className="inline-flex items-center gap-0.5 text-warning flex-shrink-0">
+                    <span className="inline-flex items-center gap-0.5 text-status-warning flex-shrink-0">
                       <RiErrorWarningLine className="h-3 w-3" />
                       Missing
                     </span>
@@ -1570,7 +1570,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
               type="button"
               onClick={handleOpenDirectoryDialog}
               className={cn(
-                'inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+                'inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
                 !isDesktopRuntime && 'bg-sidebar/60 hover:bg-sidebar',
               )}
               aria-label="Add project"
diff --git a/packages/ui/src/components/ui/CodeMirrorEditor.tsx b/packages/ui/src/components/ui/CodeMirrorEditor.tsx
index 88cd934f..bc4dcc30 100644
--- a/packages/ui/src/components/ui/CodeMirrorEditor.tsx
+++ b/packages/ui/src/components/ui/CodeMirrorEditor.tsx
@@ -145,6 +145,7 @@ export function CodeMirrorEditor({ value, onChange, extensions, className, readO
         'h-full w-full',
         '[&_.cm-editor]:h-full [&_.cm-editor]:w-full',
         '[&_.cm-scroller]:font-mono [&_.cm-scroller]:text-[var(--text-code)] [&_.cm-scroller]:leading-6',
+        '[&_.cm-lineNumbers]:text-[var(--tools-edit-line-number)]',
         className,
       )}
     />
diff --git a/packages/ui/src/components/ui/ContextUsageDisplay.tsx b/packages/ui/src/components/ui/ContextUsageDisplay.tsx
index 744ec8bc..545ffbd8 100644
--- a/packages/ui/src/components/ui/ContextUsageDisplay.tsx
+++ b/packages/ui/src/components/ui/ContextUsageDisplay.tsx
@@ -11,6 +11,7 @@ interface ContextUsageDisplayProps {
   outputLimit?: number;
   size?: 'default' | 'compact';
   isMobile?: boolean;
+  hideIcon?: boolean;
 }
 
 export const ContextUsageDisplay: React.FC<ContextUsageDisplayProps> = ({
@@ -20,6 +21,7 @@ export const ContextUsageDisplay: React.FC<ContextUsageDisplayProps> = ({
   outputLimit,
   size = 'default',
   isMobile = false,
+  hideIcon = false,
 }) => {
   const [mobileTooltipOpen, setMobileTooltipOpen] = React.useState(false);
   const longPressTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
@@ -80,7 +82,7 @@ export const ContextUsageDisplay: React.FC<ContextUsageDisplayProps> = ({
       onTouchStart={isMobile ? handleLongPressStart : undefined}
       onTouchEnd={isMobile ? handleLongPressEnd : undefined}
     >
-      {!isMobile && <RiDonutChartLine className="h-4 w-4 flex-shrink-0" />}
+      {!isMobile && !hideIcon && <RiDonutChartLine className="h-4 w-4 flex-shrink-0" />}
       <span className={cn(getPercentageColor(percentage), 'font-medium')}>
         {Math.min(percentage, 999).toFixed(1)}%
       </span>
diff --git a/packages/ui/src/components/ui/ErrorBoundary.tsx b/packages/ui/src/components/ui/ErrorBoundary.tsx
index bad1c4ef..abe5a07e 100644
--- a/packages/ui/src/components/ui/ErrorBoundary.tsx
+++ b/packages/ui/src/components/ui/ErrorBoundary.tsx
@@ -58,7 +58,7 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
 
               {this.state.error && (
                 <details className="text-xs font-mono bg-muted p-3 rounded">
-                  <summary className="cursor-pointer hover:bg-muted/80">Error details</summary>
+                  <summary className="cursor-pointer hover:bg-interactive-hover/80">Error details</summary>
                   <pre className="mt-2 overflow-x-auto">
                     {this.state.error.toString()}
                   </pre>
@@ -79,4 +79,4 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
 
     return this.props.children;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/ui/src/components/ui/MemoryDebugPanel.tsx b/packages/ui/src/components/ui/MemoryDebugPanel.tsx
index 65068dfa..2c3c5fda 100644
--- a/packages/ui/src/components/ui/MemoryDebugPanel.tsx
+++ b/packages/ui/src/components/ui/MemoryDebugPanel.tsx
@@ -134,12 +134,12 @@ export const MemoryDebugPanel: React.FC<MemoryDebugPanelProps> = ({ onClose }) =
                     <RiPulseLine className="h-3 w-3 text-primary animate-pulse" />
                   )}
                   {stat.isZombie && (
-                    <span className="text-warning">!</span>
+                    <span className="text-status-warning">!</span>
                   )}
                 </div>
                 <div className="flex items-center gap-2">
                   <span className={`font-mono ${
-                    stat.messageCount > MEMORY_LIMITS.VIEWPORT_MESSAGES ? 'text-warning' : ''
+                    stat.messageCount > MEMORY_LIMITS.VIEWPORT_MESSAGES ? 'text-status-warning' : ''
                   }`}>
                     {stat.messageCount} msgs
                   </span>
diff --git a/packages/ui/src/components/ui/MobileOverlayPanel.tsx b/packages/ui/src/components/ui/MobileOverlayPanel.tsx
index a3cfd8ac..02f4965d 100644
--- a/packages/ui/src/components/ui/MobileOverlayPanel.tsx
+++ b/packages/ui/src/components/ui/MobileOverlayPanel.tsx
@@ -89,7 +89,7 @@ export const MobileOverlayPanel: React.FC<MobileOverlayPanelProps> = ({
             <button
               type="button"
               onClick={onClose}
-              className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent"
+              className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-interactive-hover"
             >
               <RiCloseLine className="h-4 w-4" />
             </button>
diff --git a/packages/ui/src/components/ui/OpenChamberLogo.tsx b/packages/ui/src/components/ui/OpenChamberLogo.tsx
index 0947c900..c28ffba9 100644
--- a/packages/ui/src/components/ui/OpenChamberLogo.tsx
+++ b/packages/ui/src/components/ui/OpenChamberLogo.tsx
@@ -78,10 +78,37 @@ export const OpenChamberLogo: React.FC<OpenChamberLogoProps> = ({
     isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
   }
 
-  const strokeColor = isDark ? 'white' : 'black';
-  const fillColor = isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.15)';
-  const logoFillColor = isDark ? 'white' : 'black';
-  const cellHighlightColor = isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.4)';
+  const strokeColor = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      const fromVars = getComputedStyle(document.documentElement).getPropertyValue('--splash-stroke').trim();
+      if (fromVars) {
+        return fromVars;
+      }
+    }
+    return isDark ? 'white' : 'black';
+  }, [isDark]);
+
+  const fillColor = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      const fromVars = getComputedStyle(document.documentElement).getPropertyValue('--splash-face-fill').trim();
+      if (fromVars) {
+        return fromVars;
+      }
+    }
+    return isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.15)';
+  }, [isDark]);
+
+  const cellHighlightColor = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      const fromVars = getComputedStyle(document.documentElement).getPropertyValue('--splash-cell-fill').trim();
+      if (fromVars) {
+        return fromVars;
+      }
+    }
+    return isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.4)';
+  }, [isDark]);
+
+  const logoFillColor = strokeColor;
 
 
 
diff --git a/packages/ui/src/components/ui/UpdateDialog.tsx b/packages/ui/src/components/ui/UpdateDialog.tsx
index 70ca4a61..509092fb 100644
--- a/packages/ui/src/components/ui/UpdateDialog.tsx
+++ b/packages/ui/src/components/ui/UpdateDialog.tsx
@@ -360,7 +360,7 @@ export const UpdateDialog: React.FC<UpdateDialogProps> = ({
                   onClick={handleCopyCommand}
                   className={cn(
                     'flex items-center justify-center p-2 rounded-md',
-                    'text-muted-foreground hover:text-foreground hover:bg-accent',
+                    'text-muted-foreground hover:text-foreground hover:bg-interactive-hover',
                     'transition-colors',
                     copied && 'text-primary'
                   )}
@@ -406,7 +406,7 @@ export const UpdateDialog: React.FC<UpdateDialogProps> = ({
               className={cn(
                 'flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md',
                 'text-sm text-muted-foreground',
-                'hover:text-foreground hover:bg-accent',
+                'hover:text-foreground hover:bg-interactive-hover',
                 'transition-colors'
               )}
             >
diff --git a/packages/ui/src/components/ui/animated-tabs.tsx b/packages/ui/src/components/ui/animated-tabs.tsx
index 89556d08..8f29a859 100644
--- a/packages/ui/src/components/ui/animated-tabs.tsx
+++ b/packages/ui/src/components/ui/animated-tabs.tsx
@@ -67,7 +67,7 @@ export function AnimatedTabs<T extends string>({
           animate ? '[transition:clip-path_200ms_ease]' : null
         )}
       >
-        <div className="flex h-9 items-center gap-1 rounded-lg bg-accent px-1.5 text-accent-foreground">
+        <div className="flex h-9 items-center gap-1 rounded-lg bg-interactive-selection px-1.5 text-interactive-selection-foreground">
           {tabs.map((tab) => {
             const Icon = tab.icon;
             return (
@@ -101,7 +101,7 @@ export function AnimatedTabs<T extends string>({
               className={cn(
                 'flex h-7 flex-1 items-center justify-center gap-1.25 rounded-lg px-2.5 text-sm font-semibold transition-colors duration-150',
                 isActive ? 'text-accent-foreground' : 'text-muted-foreground',
-                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-background'
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--interactive-focus-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-background'
               )}
               aria-pressed={isActive}
               aria-disabled={!isInteractive}
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
index a20766ff..c08dd6ad 100644
--- a/packages/ui/src/components/ui/button.tsx
+++ b/packages/ui/src/components/ui/button.tsx
@@ -15,11 +15,11 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-white shadow-none hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-none hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-none hover:bg-interactive-hover hover:text-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-none hover:bg-secondary/80",
+          "bg-interactive-hover text-foreground shadow-none hover:bg-interactive-active",
         ghost:
-          "text-foreground hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "text-foreground hover:bg-interactive-hover hover:text-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/packages/ui/src/components/ui/checkbox.tsx b/packages/ui/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..0d821d4b
--- /dev/null
+++ b/packages/ui/src/components/ui/checkbox.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { RiCheckboxBlankLine, RiCheckboxLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+
+interface CheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  iconClassName?: string;
+}
+
+export const Checkbox = React.memo<CheckboxProps>(function Checkbox({
+  checked,
+  onChange,
+  disabled = false,
+  ariaLabel,
+  className,
+  iconClassName,
+}) {
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!disabled) {
+        onChange(!checked);
+      }
+    },
+    [checked, disabled, onChange]
+  );
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault();
+        if (!disabled) {
+          onChange(!checked);
+        }
+      }
+    },
+    [checked, disabled, onChange]
+  );
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      disabled={disabled}
+      aria-pressed={checked}
+      aria-label={ariaLabel}
+      className={cn(
+        'flex size-5 shrink-0 items-center justify-center rounded',
+        'text-muted-foreground hover:text-foreground',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+        disabled && 'cursor-not-allowed opacity-50',
+        className
+      )}
+    >
+      {checked ? (
+        <RiCheckboxLine className={cn('size-4 text-primary', iconClassName)} />
+      ) : (
+        <RiCheckboxBlankLine className={cn('size-4', iconClassName)} />
+      )}
+    </button>
+  );
+});
diff --git a/packages/ui/src/components/ui/collapsible.tsx b/packages/ui/src/components/ui/collapsible.tsx
index 69d83540..bb4d07d4 100644
--- a/packages/ui/src/components/ui/collapsible.tsx
+++ b/packages/ui/src/components/ui/collapsible.tsx
@@ -11,7 +11,7 @@ const CollapsibleTrigger = ({
 }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) => (
   <CollapsiblePrimitive.CollapsibleTrigger
     className={cn(
-      "flex w-full items-center justify-between rounded-lg px-2 py-1.5 text-left text-foreground hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+      "flex w-full items-center justify-between rounded-lg px-2 py-1.5 text-left text-foreground hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
       className
     )}
     {...props}
diff --git a/packages/ui/src/components/ui/command.tsx b/packages/ui/src/components/ui/command.tsx
index a5e8507e..eebf7e1c 100644
--- a/packages/ui/src/components/ui/command.tsx
+++ b/packages/ui/src/components/ui/command.tsx
@@ -21,8 +21,12 @@ function Command({
   return (
     <CommandPrimitive
       data-slot="command"
+      style={{
+        backgroundColor: 'var(--surface-elevated)',
+        color: 'var(--surface-elevated-foreground)',
+      }}
       className={cn(
-        "bg-background text-foreground flex h-full w-full flex-col overflow-hidden rounded-xl",
+        "flex h-full w-full flex-col overflow-hidden rounded-xl",
         className
       )}
       {...props}
@@ -154,7 +158,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-[selected=true]:bg-muted hover:bg-muted [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 typography-meta outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[selected=true]:bg-interactive-selection data-[selected=true]:text-interactive-selection-foreground data-[highlighted]:bg-interactive-hover hover:bg-interactive-hover [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 typography-meta outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
index 06a65f1e..5e8a2a6f 100644
--- a/packages/ui/src/components/ui/dialog.tsx
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -86,7 +86,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-2 right-2 rounded-lg opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none text-muted-foreground hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-interactive-active data-[state=open]:text-foreground absolute top-2 right-2 rounded-lg opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none text-muted-foreground hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
             <RiCloseLine/>
             <span className="sr-only">Close</span>
diff --git a/packages/ui/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx
index 5a8c7238..6a6512a2 100644
--- a/packages/ui/src/components/ui/dropdown-menu.tsx
+++ b/packages/ui/src/components/ui/dropdown-menu.tsx
@@ -39,8 +39,12 @@ function DropdownMenuContent({
       <DropdownMenuPrimitive.Content
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
+        style={{
+          backgroundColor: 'var(--surface-elevated)',
+          color: 'var(--surface-elevated-foreground)',
+        }}
         className={cn(
-          "bg-background text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border p-1 shadow-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border-2 border-border/60 p-1 shadow-md",
           className
         )}
         {...props}
@@ -72,7 +76,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
         className={cn(
-          "hover:bg-muted data-[variant=destructive]:text-destructive data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 data-[variant=destructive]:hover:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1 typography-ui-label outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+          "data-[highlighted]:bg-interactive-hover hover:bg-interactive-hover data-[variant=destructive]:text-destructive data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 data-[variant=destructive]:hover:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1 typography-ui-label outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -90,7 +94,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "hover:bg-muted relative flex cursor-default items-center gap-2 rounded-lg py-1 px-2 typography-ui-label outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        "data-[highlighted]:bg-interactive-hover hover:bg-interactive-hover data-[state=checked]:bg-interactive-selection data-[state=checked]:text-interactive-selection-foreground relative flex cursor-default items-center gap-2 rounded-lg py-1 px-2 typography-ui-label outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       checked={checked}
@@ -126,7 +130,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "relative flex cursor-default items-start gap-2 rounded-lg py-1 pl-2 pr-8 typography-ui-label outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        "data-[highlighted]:bg-interactive-hover hover:bg-interactive-hover data-[state=checked]:bg-interactive-selection data-[state=checked]:text-interactive-selection-foreground relative flex cursor-default items-start gap-2 rounded-lg py-1 pl-2 pr-8 typography-ui-label outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -209,7 +213,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "hover:bg-muted flex cursor-default items-center rounded-lg px-2 py-1 typography-ui-label outline-hidden select-none data-[inset]:pl-8",
+        "data-[highlighted]:bg-interactive-hover hover:bg-interactive-hover flex cursor-default items-center rounded-lg px-2 py-1 typography-ui-label outline-hidden select-none data-[inset]:pl-8",
         className
       )}
       {...props}
@@ -227,8 +231,12 @@ function DropdownMenuSubContent({
   return (
       <DropdownMenuPrimitive.SubContent
         data-slot="dropdown-menu-sub-content"
+        style={{
+          backgroundColor: 'var(--surface-elevated)',
+          color: 'var(--surface-elevated-foreground)',
+        }}
         className={cn(
-          "bg-background text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border p-1 shadow-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border-2 border-border/60 p-1 shadow-md",
           className
         )}
         {...props}
diff --git a/packages/ui/src/components/ui/input.tsx b/packages/ui/src/components/ui/input.tsx
index ec35140e..5a2d1d4d 100644
--- a/packages/ui/src/components/ui/input.tsx
+++ b/packages/ui/src/components/ui/input.tsx
@@ -8,9 +8,10 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "text-foreground border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 appearance-none hover:border-input focus:border-ring flex h-9 w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 typography-markdown shadow-none transition-[color,box-shadow,border-color] outline-none focus-visible:outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:typography-ui-label file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:typography-ui-label",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "text-foreground border border-border/80 file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 appearance-none flex h-9 w-full min-w-0 rounded-lg bg-transparent px-3 py-1 typography-markdown outline-none focus-visible:outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:typography-ui-label file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:typography-ui-label",
+        "hover:border-input",
+        "focus:ring-1 focus:ring-primary/50 focus:border-primary/70",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive",
         className
       )}
       spellCheck={false}
diff --git a/packages/ui/src/components/ui/number-input.tsx b/packages/ui/src/components/ui/number-input.tsx
index a2e00779..c0287ce3 100644
--- a/packages/ui/src/components/ui/number-input.tsx
+++ b/packages/ui/src/components/ui/number-input.tsx
@@ -166,7 +166,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
             onClick={handleIncrement}
             className={cn(
               "flex flex-1 items-center justify-center",
-              "text-muted-foreground hover:bg-accent hover:text-foreground",
+              "text-muted-foreground hover:bg-interactive-hover hover:text-foreground",
               "disabled:pointer-events-none disabled:opacity-50"
             )}
           >
@@ -179,7 +179,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
             onClick={handleDecrement}
             className={cn(
               "flex flex-1 items-center justify-center border-t border-border",
-              "text-muted-foreground hover:bg-accent hover:text-foreground",
+              "text-muted-foreground hover:bg-interactive-hover hover:text-foreground",
               "disabled:pointer-events-none disabled:opacity-50"
             )}
           >
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
index 14bbf324..4b30e325 100644
--- a/packages/ui/src/components/ui/select.tsx
+++ b/packages/ui/src/components/ui/select.tsx
@@ -38,7 +38,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-lg border bg-transparent px-2 py-2 typography-ui-label whitespace-nowrap shadow-none outline-none focus-visible:outline-none hover:bg-muted data-[state=open]:bg-muted focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-6 data-[size=sm]:h-6 data-[size=lg]:h-8 data-[size=lg]:py-1.5 data-[size=chip]:h-7 data-[size=chip]:py-1 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-lg border bg-transparent px-2 py-2 typography-ui-label whitespace-nowrap shadow-none outline-none focus-visible:outline-none hover:bg-interactive-hover data-[state=open]:bg-interactive-active focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-6 data-[size=sm]:h-6 data-[size=lg]:h-8 data-[size=lg]:py-1.5 data-[size=chip]:h-7 data-[size=chip]:py-1 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -64,8 +64,12 @@ function SelectContent({
     <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       data-slot="select-content"
+      style={{
+        backgroundColor: 'var(--surface-elevated)',
+        color: 'var(--surface-elevated-foreground)',
+      }}
       className={cn(
-        "bg-background text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden rounded-xl border shadow-none transform-gpu will-change-transform",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden rounded-xl border-2 border-border/60 shadow-md transform-gpu will-change-transform",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         fitContent && "w-max min-w-0",
@@ -117,7 +121,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "hover:bg-muted [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 typography-ui-label outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "data-[highlighted]:bg-interactive-hover hover:bg-interactive-hover data-[state=checked]:bg-interactive-selection data-[state=checked]:text-interactive-selection-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 typography-ui-label outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/ui/switch.tsx b/packages/ui/src/components/ui/switch.tsx
index 815720cd..34eef41c 100644
--- a/packages/ui/src/components/ui/switch.tsx
+++ b/packages/ui/src/components/ui/switch.tsx
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30',
+      'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--interactive-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-[var(--interactive-border)]',
       className
     )}
     style={{ width: '36px', height: '20px', minWidth: '36px', minHeight: '20px' }}
diff --git a/packages/ui/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
index 3207c7d1..75030519 100644
--- a/packages/ui/src/components/ui/textarea.tsx
+++ b/packages/ui/src/components/ui/textarea.tsx
@@ -3,17 +3,19 @@ import * as React from "react"
 import { cn } from "@/lib/utils"
 import { ScrollableOverlay } from "./ScrollableOverlay"
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
-  ({ className, ...props }, ref) => {
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea"> & { outerClassName?: string }>(
+  ({ className, outerClassName, ...props }, ref) => {
     return (
       <ScrollableOverlay
         as="textarea"
         ref={ref as React.Ref<HTMLTextAreaElement>}
         disableHorizontal
         fillContainer={false}
-        outerClassName="w-full"
+        outerClassName={cn("w-full rounded-lg focus-within:ring-1 focus-within:ring-primary/50", outerClassName)}
         className={cn(
-          "text-foreground border-input placeholder:text-muted-foreground appearance-none hover:border-input focus:border-ring focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-3 py-2 typography-markdown shadow-none transition-[color,box-shadow,border-color] outline-none focus-visible:outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:typography-ui-label",
+          "text-foreground border border-border/80 placeholder:text-muted-foreground appearance-none dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-lg bg-transparent px-3 py-2 typography-markdown outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:typography-ui-label",
+          "hover:border-input aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+          "focus:border-primary/70",
           className
         )}
         spellCheck={false}
diff --git a/packages/ui/src/components/ui/toggle.tsx b/packages/ui/src/components/ui/toggle.tsx
index 50e2a506..c970289c 100644
--- a/packages/ui/src/components/ui/toggle.tsx
+++ b/packages/ui/src/components/ui/toggle.tsx
@@ -6,13 +6,13 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-xl typography-ui-label font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-xl typography-ui-label font-medium hover:bg-interactive-hover hover:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-interactive-selection data-[state=on]:text-interactive-selection-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent shadow-none hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-transparent shadow-none hover:bg-interactive-hover hover:text-foreground",
       },
       size: {
         default: "h-9 px-2 min-w-9",
diff --git a/packages/ui/src/components/views/DiffView.tsx b/packages/ui/src/components/views/DiffView.tsx
index 55860046..5a86785e 100644
--- a/packages/ui/src/components/views/DiffView.tsx
+++ b/packages/ui/src/components/views/DiffView.tsx
@@ -140,7 +140,7 @@ const FileSelector = React.memo<FileSelectorProps>(({
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <button className="flex h-8 items-center gap-2 rounded-lg border border-input bg-transparent px-2 typography-ui-label text-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring">
+                <button className="flex h-8 items-center gap-2 rounded-lg border border-input bg-transparent px-2 typography-ui-label text-foreground outline-none hover:bg-interactive-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring">
                     {selectedFileEntry ? (
                         <div className="flex min-w-0 items-center gap-3">
                             <span className="min-w-0 flex-1 truncate typography-meta">
@@ -210,7 +210,7 @@ const DiffViewModeSelector = React.memo<DiffViewModeSelectorProps>(({ mode, onMo
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <button className="flex h-8 items-center gap-2 rounded-lg border border-input bg-transparent px-2 typography-ui-label text-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring">
+                <button className="flex h-8 items-center gap-2 rounded-lg border border-input bg-transparent px-2 typography-ui-label text-foreground outline-none hover:bg-interactive-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring">
                     <span className="min-w-0 truncate typography-meta">
                         {currentOption.label}
                     </span>
@@ -268,8 +268,8 @@ const FileList = React.memo<FileListProps>(({
                                 className={cn(
                                     'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors',
                                     isActive
-                                        ? 'bg-accent/70 text-foreground'
-                                        : 'text-muted-foreground hover:bg-accent/40 hover:text-foreground'
+                                        ? 'bg-interactive-selection text-interactive-selection-foreground'
+                                        : 'text-muted-foreground hover:bg-interactive-hover hover:text-foreground'
                                 )}
                             >
                                 <span
@@ -700,13 +700,13 @@ const MultiFileDiffEntry = React.memo<MultiFileDiffEntryProps>(({
                             'bg-background hover:bg-background',
                             isExpanded ? 'rounded-b-none' : 'rounded-b-xl',
                             isSelected
-                                ? 'text-primary'
+                                ? 'text-foreground'
                                 : 'text-muted-foreground hover:text-foreground'
                         )}
                     >
                         <div className={cn(
                             'absolute inset-0 pointer-events-none transition-colors',
-                            isSelected ? 'bg-primary/10' : 'group-hover:bg-accent/40'
+                            isSelected ? 'bg-interactive-selection' : 'group-hover:bg-interactive-hover'
                         )} />
                         <div className="relative flex min-w-0 flex-1 items-center gap-2">
                             <span className="flex size-5 items-center justify-center opacity-70 group-hover:opacity-100 transition-opacity">
diff --git a/packages/ui/src/components/views/FilesView.tsx b/packages/ui/src/components/views/FilesView.tsx
index 1def6d3d..c296f8c8 100644
--- a/packages/ui/src/components/views/FilesView.tsx
+++ b/packages/ui/src/components/views/FilesView.tsx
@@ -226,13 +226,13 @@ const getFileIcon = (extension?: string): React.ReactNode => {
   const ext = extension?.toLowerCase();
 
   if (ext && CODE_EXTENSIONS.has(ext)) {
-    return <RiCodeLine className="h-4 w-4 flex-shrink-0 text-blue-500" />;
+    return <RiCodeLine className="h-4 w-4 flex-shrink-0 text-[var(--status-info)]" />;
   }
   if (ext && DATA_EXTENSIONS.has(ext)) {
-    return <RiCodeLine className="h-4 w-4 flex-shrink-0 text-yellow-500" />;
+    return <RiCodeLine className="h-4 w-4 flex-shrink-0 text-[var(--status-warning)]" />;
   }
   if (ext && IMAGE_EXTENSIONS.has(ext)) {
-    return <RiFileImageLine className="h-4 w-4 flex-shrink-0 text-green-500" />;
+    return <RiFileImageLine className="h-4 w-4 flex-shrink-0 text-[var(--status-success)]" />;
   }
   if (ext && DOCUMENT_EXTENSIONS.has(ext)) {
     return <RiFileTextLine className="h-4 w-4 flex-shrink-0 text-muted-foreground" />;
@@ -1152,7 +1152,7 @@ export const FilesView: React.FC = () => {
               }}
               className={cn(
                 'flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-foreground transition-colors pr-8 select-none',
-                isActive ? 'bg-accent/70' : 'hover:bg-accent/40'
+                isActive ? 'bg-interactive-selection/70' : 'hover:bg-interactive-hover/40'
               )}
             >
               {isDir ? (
@@ -1398,7 +1398,12 @@ export const FilesView: React.FC = () => {
         className="flex flex-col items-center gap-2 px-4"
         style={{ width: 'min(100vw - 1rem, 42rem)' }}
       >
-        <div className="w-full rounded-xl border bg-background flex flex-col relative shadow-lg" style={{ borderColor: 'var(--primary)' }}>
+        <div 
+          className="w-full rounded-xl flex flex-col relative shadow-lg border border-border/80 focus-within:border-primary/70 focus-within:ring-1 focus-within:ring-primary/50"
+          style={{ 
+            backgroundColor: currentTheme?.colors?.surface?.subtle,
+          }}
+        >
           <Textarea
             value={commentText}
             onChange={(e) => {
@@ -1410,7 +1415,8 @@ export const FilesView: React.FC = () => {
               textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
             }}
             placeholder="Type your comment..."
-            className="min-h-[28px] max-h-[108px] resize-none border-0 px-3 pt-2 pb-1 shadow-none rounded-none appearance-none focus:shadow-none focus-visible:shadow-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent hover:border-transparent bg-transparent dark:bg-transparent focus-visible:outline-none overflow-y-auto"
+            outerClassName="focus-within:ring-0"
+            className="min-h-[28px] max-h-[108px] resize-none border-0 px-3 pt-2 pb-1 rounded-none appearance-none hover:border-transparent bg-transparent dark:bg-transparent overflow-y-auto focus:ring-0 focus:shadow-none"
             autoFocus={!isMobile}
             rows={1}
             onKeyDown={(e) => {
@@ -1777,7 +1783,7 @@ export const FilesView: React.FC = () => {
           ) : selectedFile && isMarkdownFile(selectedFile.path) && getMdViewMode() === 'preview' ? (
             <div className="h-full overflow-auto p-3">
               {fileContent.length > 500 * 1024 && (
-                <div className="mb-3 rounded-md border border-warning/20 bg-warning/10 px-3 py-2 text-sm text-warning">
+                <div className="mb-3 rounded-md border border-status-warning/20 bg-status-warning/10 px-3 py-2 text-sm text-status-warning">
                   ⚠️ This file is large ({Math.round(fileContent.length / 1024)}KB). Preview may be limited.
                 </div>
               )}
@@ -1973,7 +1979,7 @@ export const FilesView: React.FC = () => {
                     onClick={() => void handleSelectFile(node)}
                     className={cn(
                       'flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-foreground transition-colors',
-                      isActive ? 'bg-accent/70' : 'hover:bg-accent/40'
+                      isActive ? 'bg-interactive-selection/70' : 'hover:bg-interactive-hover/40'
                     )}
                   >
                     {getFileIcon(node.extension)}
@@ -2156,7 +2162,7 @@ export const FilesView: React.FC = () => {
           ) : isMarkdownFile(selectedFile.path) && getMdViewMode() === 'preview' ? (
             <div className="h-full overflow-auto p-4">
               {fileContent.length > 500 * 1024 && (
-                <div className="mb-3 rounded-md border border-warning/20 bg-warning/10 px-3 py-2 text-sm text-warning">
+                <div className="mb-3 rounded-md border border-status-warning/20 bg-status-warning/10 px-3 py-2 text-sm text-status-warning">
                   This file is large ({Math.round(fileContent.length / 1024)}KB). Preview may be limited.
                 </div>
               )}
@@ -2200,7 +2206,7 @@ export const FilesView: React.FC = () => {
         )
        ) : (
          <div className="flex flex-1 min-h-0 min-w-0 gap-3 px-3 pb-3 pt-2">
-           {screenWidth >= 1024 && (
+           {screenWidth >= 700 && (
              <div className="w-72 flex-shrink-0 min-h-0 overflow-hidden">
                {treePanel}
              </div>
diff --git a/packages/ui/src/components/views/PierreDiffViewer.tsx b/packages/ui/src/components/views/PierreDiffViewer.tsx
index 6ac0a43a..1f4c1c0a 100644
--- a/packages/ui/src/components/views/PierreDiffViewer.tsx
+++ b/packages/ui/src/components/views/PierreDiffViewer.tsx
@@ -6,8 +6,8 @@ import { RiSendPlane2Line } from '@remixicon/react';
 
 import { useOptionalThemeSystem } from '@/contexts/useThemeSystem';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
-import { ensureFlexokiThemesRegistered } from '@/lib/shiki/registerFlexokiThemes';
-import { flexokiThemeNames } from '@/lib/shiki/flexokiThemes';
+import { ensurePierreThemeRegistered, getResolvedShikiTheme } from '@/lib/shiki/appThemeRegistry';
+import { getDefaultTheme } from '@/lib/theme/themes';
 
 import { toast } from '@/components/ui';
 import { Textarea } from '@/components/ui/textarea';
@@ -52,51 +52,51 @@ const WEBKIT_SCROLL_FIX_CSS = `
   [data-code] {
     -webkit-overflow-scrolling: touch;
   }
-  
+
   /* Mobile touch selection support */
   [data-line-number] {
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
   }
-  
+
   /* Ensure interactive line numbers work on touch */
   pre[data-interactive-line-numbers] [data-line-number] {
     touch-action: manipulation;
   }
   /* Reduce hunk separator height */
-  [data-separator-content] {
-    height: 24px !important;
-  }
-  [data-expand-button] {
-    height: 24px !important;
-    width: 24px !important;
-  }
-  [data-separator-multi-button] {
-    row-gap: 0 !important;
-  }
-  [data-expand-up] {
-    height: 12px !important;
-    min-height: 12px !important;
-    max-height: 12px !important;
-    margin: 0 !important;
-    margin-top: 3px !important;
-    padding: 0 !important;
-    border-radius: 4px 4px 0 0 !important;
-  }
-  [data-expand-down] {
-    height: 12px !important;
-    min-height: 12px !important;
-    max-height: 12px !important;
-    margin: 0 !important;
-    margin-top: -3px !important;
-    padding: 0 !important;
-    border-radius: 0 0 4px 4px !important;
-  }
+  // [data-separator-content] {
+  //   height: 24px !important;
+  // }
+  // [data-expand-button] {
+  //   height: 24px !important;
+  //   width: 24px !important;
+  // }
+  // [data-separator-multi-button] {
+  //   row-gap: 0 !important;
+  // }
+  // [data-expand-up] {
+  //   height: 12px !important;
+  //   min-height: 12px !important;
+  //   max-height: 12px !important;
+  //   margin: 0 !important;
+  //   margin-top: 3px !important;
+  //   padding: 0 !important;
+  //   border-radius: 4px 4px 0 0 !important;
+  // }
+  // [data-expand-down] {
+  //   height: 12px !important;
+  //   min-height: 12px !important;
+  //   max-height: 12px !important;
+  //   margin: 0 !important;
+  //   margin-top: -3px !important;
+  //   padding: 0 !important;
+  //   border-radius: 0 0 4px 4px !important;
+  // }
 `;
 
 // Fast cache key - use length + samples instead of full hash
-function getCacheKey(fileName: string, original: string, modified: string): string {
+function getCacheKey(fileName: string, original: string, modified: string, themeKey: string): string {
   // Sample a few characters instead of hashing entire content
   const sampleOriginal = original.length > 100
     ? `${original.slice(0, 50)}${original.slice(-50)}`
@@ -104,7 +104,7 @@ function getCacheKey(fileName: string, original: string, modified: string): stri
   const sampleModified = modified.length > 100
     ? `${modified.slice(0, 50)}${modified.slice(-50)}`
     : modified;
-  return `${fileName}:${original.length}:${modified.length}:${sampleOriginal.length}:${sampleModified.length}`;
+  return `${themeKey}::${fileName}:${original.length}:${modified.length}:${sampleOriginal.length}:${sampleModified.length}`;
 }
 
 const extractSelectedCode = (original: string, modified: string, range: SelectedLineRange): string => {
@@ -112,13 +112,13 @@ const extractSelectedCode = (original: string, modified: string, range: Selected
   const isOriginal = range.side === 'deletions';
   const content = isOriginal ? original : modified;
   const lines = content.split('\n');
-  
+
   // Ensure bounds
   const startLine = Math.max(1, range.start);
   const endLine = Math.min(lines.length, range.end);
-  
+
   if (startLine > endLine) return '';
-  
+
   return lines.slice(startLine - 1, endLine).join('\n');
 };
 
@@ -133,47 +133,65 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
 }) => {
   const { isMobile } = useDeviceInfo();
   const { inputBarOffset, isKeyboardOpen } = useUIStore();
-  
+
   const themeSystem = useOptionalThemeSystem();
   const isDark = themeSystem?.currentTheme?.metadata?.variant === 'dark';
 
+  const fallbackLight = getDefaultTheme(false);
+  const fallbackDark = getDefaultTheme(true);
+
+  const lightThemeId = themeSystem?.lightThemeId ?? fallbackLight.metadata.id;
+  const darkThemeId = themeSystem?.darkThemeId ?? fallbackDark.metadata.id;
+
+  const lightTheme =
+    themeSystem?.availableThemes.find((theme) => theme.metadata.id === lightThemeId) ??
+    fallbackLight;
+  const darkTheme =
+    themeSystem?.availableThemes.find((theme) => theme.metadata.id === darkThemeId) ??
+    fallbackDark;
+
   const setActiveMainTab = useUIStore(state => state.setActiveMainTab);
 
   const [selection, setSelection] = useState<SelectedLineRange | null>(null);
   const [commentText, setCommentText] = useState('');
   const commentContainerRef = useRef<HTMLDivElement>(null);
-  
-  // Calculate initial center synchronously to avoid flicker
-  const getMainContentCenter = useCallback(() => {
-    if (isMobile) return '50%';
+
+  // Calculate initial center and width synchronously to avoid flicker
+  const getMainContentMetrics = useCallback(() => {
+    if (isMobile) return { center: '50%', width: '100vw' };
     const mainContent = document.querySelector('main.flex-1');
     if (mainContent) {
       const rect = mainContent.getBoundingClientRect();
-      return `${rect.left + rect.width / 2}px`;
+      return {
+        center: `${rect.left + rect.width / 2}px`,
+        width: `${rect.width}px`
+      };
     }
-    return '50%';
+    return { center: '50%', width: '100vw' };
   }, [isMobile]);
-  
-  const [mainContentCenter, setMainContentCenter] = useState<string>(getMainContentCenter);
-  
+
+  const [mainContentMetrics, setMainContentMetrics] = useState(getMainContentMetrics);
+  const mainContentCenter = mainContentMetrics.center;
+  const mainContentWidth = mainContentMetrics.width;
+
   const sendMessage = useSessionStore(state => state.sendMessage);
   const currentSessionId = useSessionStore(state => state.currentSessionId);
   const { currentProviderId, currentModelId, currentAgentName, currentVariant } = useConfigStore();
   const getSessionAgentSelection = useContextStore(state => state.getSessionAgentSelection);
   const getAgentModelForSession = useContextStore(state => state.getAgentModelForSession);
   const getAgentModelVariantForSession = useContextStore(state => state.getAgentModelVariantForSession);
-  
-  // Update main content center on resize
+
+  // Update main content metrics on resize
   useEffect(() => {
     if (isMobile) return;
-    
-    const updateCenter = () => {
-      setMainContentCenter(getMainContentCenter());
+
+    const updateMetrics = () => {
+      setMainContentMetrics(getMainContentMetrics());
     };
-    
-    window.addEventListener('resize', updateCenter);
-    return () => window.removeEventListener('resize', updateCenter);
-  }, [isMobile, getMainContentCenter]);
+
+    window.addEventListener('resize', updateMetrics);
+    return () => window.removeEventListener('resize', updateMetrics);
+  }, [isMobile, getMainContentMetrics]);
 
   const handleSelectionChange = useCallback((range: SelectedLineRange | null) => {
     // On mobile: implement "tap to extend" behavior
@@ -182,11 +200,11 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
       const tappedLine = range.start;
       const existingStart = selection.start;
       const existingEnd = selection.end;
-      
+
       // Extend the selection to include the tapped line
       const newStart = Math.min(existingStart, existingEnd, tappedLine);
       const newEnd = Math.max(existingStart, existingEnd, tappedLine);
-      
+
       // Only extend if tapping outside current selection
       if (tappedLine < existingStart || tappedLine > existingEnd) {
         setSelection({
@@ -197,7 +215,7 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
         return;
       }
     }
-    
+
     setSelection(range);
     if (!range) {
       setCommentText('');
@@ -207,16 +225,16 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
   // Dismiss selection when clicking outside line numbers (desktop behavior)
   useEffect(() => {
     if (!selection) return;
-    
+
     const handleClickOutside = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
-      
+
       // Check if click is inside the comment UI portal
       if (commentContainerRef.current?.contains(target)) return;
 
       // Check if click is inside toast (sonner)
       if (target.closest('[data-sonner-toast]') || target.closest('[data-sonner-toaster]')) return;
-      
+
       // Check if click is on a line number (inside shadow DOM)
       const path = e.composedPath();
       const isLineNumber = path.some((el) => {
@@ -225,18 +243,18 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
         }
         return false;
       });
-      
+
       if (!isLineNumber) {
         setSelection(null);
         setCommentText('');
       }
     };
-    
+
     // Use timeout to avoid immediate dismissal from the same click that selected
     const timeoutId = setTimeout(() => {
       document.addEventListener('click', handleClickOutside);
     }, 100);
-    
+
     return () => {
       clearTimeout(timeoutId);
       document.removeEventListener('click', handleClickOutside);
@@ -264,19 +282,19 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
     const effectiveVariant = sessionAgent && effectiveProviderId && effectiveModelId
       ? getAgentModelVariantForSession(currentSessionId, sessionAgent, effectiveProviderId, effectiveModelId) ?? currentVariant
       : currentVariant;
-    
+
     const code = extractSelectedCode(original, modified, selection);
     const startLine = selection.start;
     const endLine = selection.end;
     const side = selection.side === 'deletions' ? 'original' : 'modified';
-    
+
     const message = `Comment on \`${fileName}\` lines ${startLine}-${endLine} (${side}):\n\`\`\`${language}\n${code}\n\`\`\`\n\n${commentText}`;
-    
+
     // Clear state and switch tab immediately for responsive UX
     setCommentText('');
     setSelection(null);
     setActiveMainTab('chat');
-    
+
     void sendMessage(
       message,
       effectiveProviderId,
@@ -291,7 +309,89 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
     });
   }, [selection, commentText, original, modified, fileName, language, sendMessage, currentSessionId, currentProviderId, currentModelId, currentAgentName, currentVariant, setActiveMainTab, getSessionAgentSelection, getAgentModelForSession, getAgentModelVariantForSession]);
 
-  ensureFlexokiThemesRegistered();
+  ensurePierreThemeRegistered(lightTheme);
+  ensurePierreThemeRegistered(darkTheme);
+
+  const diffThemeKey = `${lightTheme.metadata.id}:${darkTheme.metadata.id}:${isDark ? 'dark' : 'light'}`;
+
+  const diffRootRef = useRef<HTMLDivElement | null>(null);
+
+  const lightResolvedTheme = useMemo(() => getResolvedShikiTheme(lightTheme), [lightTheme]);
+  const darkResolvedTheme = useMemo(() => getResolvedShikiTheme(darkTheme), [darkTheme]);
+
+  // Fast-path: update base diff theme vars immediately.
+  // Without this, already-mounted diffs can keep old bg/bars until async highlight completes.
+  React.useLayoutEffect(() => {
+    const root = diffRootRef.current;
+    if (!root) return;
+
+    const container = root.querySelector('diffs-container') as HTMLElement | null;
+    if (!container) return;
+
+    const currentResolved = isDark ? darkResolvedTheme : lightResolvedTheme;
+
+    const getColor = (
+      resolved: typeof currentResolved,
+      key: string,
+    ): string | undefined => {
+      const colors = resolved.colors as Record<string, string> | undefined;
+      return colors?.[key];
+    };
+
+    const lightAdd = getColor(lightResolvedTheme, 'terminal.ansiGreen');
+    const lightDel = getColor(lightResolvedTheme, 'terminal.ansiRed');
+    const lightMod = getColor(lightResolvedTheme, 'terminal.ansiBlue');
+
+    const darkAdd = getColor(darkResolvedTheme, 'terminal.ansiGreen');
+    const darkDel = getColor(darkResolvedTheme, 'terminal.ansiRed');
+    const darkMod = getColor(darkResolvedTheme, 'terminal.ansiBlue');
+
+    // Apply on host; vars inherit into shadow root.
+    container.style.setProperty('--shiki-light', lightResolvedTheme.fg);
+    container.style.setProperty('--shiki-light-bg', lightResolvedTheme.bg);
+    if (lightAdd) container.style.setProperty('--shiki-light-addition-color', lightAdd);
+    if (lightDel) container.style.setProperty('--shiki-light-deletion-color', lightDel);
+    if (lightMod) container.style.setProperty('--shiki-light-modified-color', lightMod);
+
+    container.style.setProperty('--shiki-dark', darkResolvedTheme.fg);
+    container.style.setProperty('--shiki-dark-bg', darkResolvedTheme.bg);
+    if (darkAdd) container.style.setProperty('--shiki-dark-addition-color', darkAdd);
+    if (darkDel) container.style.setProperty('--shiki-dark-deletion-color', darkDel);
+    if (darkMod) container.style.setProperty('--shiki-dark-modified-color', darkMod);
+
+    container.style.setProperty('--diffs-bg', currentResolved.bg);
+    container.style.setProperty('--diffs-fg', currentResolved.fg);
+
+    const currentAdd = isDark ? darkAdd : lightAdd;
+    const currentDel = isDark ? darkDel : lightDel;
+    const currentMod = isDark ? darkMod : lightMod;
+    if (currentAdd) container.style.setProperty('--diffs-addition-color-override', currentAdd);
+    if (currentDel) container.style.setProperty('--diffs-deletion-color-override', currentDel);
+    if (currentMod) container.style.setProperty('--diffs-modified-color-override', currentMod);
+
+    // Pierre also inlines theme styles on <pre> inside shadow root.
+    // Patch it too so already-expanded diffs switch instantly.
+    const pre = container.shadowRoot?.querySelector('pre') as HTMLPreElement | null;
+    if (pre) {
+      pre.style.setProperty('--shiki-light', lightResolvedTheme.fg);
+      pre.style.setProperty('--shiki-light-bg', lightResolvedTheme.bg);
+      if (lightAdd) pre.style.setProperty('--shiki-light-addition-color', lightAdd);
+      if (lightDel) pre.style.setProperty('--shiki-light-deletion-color', lightDel);
+      if (lightMod) pre.style.setProperty('--shiki-light-modified-color', lightMod);
+
+      pre.style.setProperty('--shiki-dark', darkResolvedTheme.fg);
+      pre.style.setProperty('--shiki-dark-bg', darkResolvedTheme.bg);
+      if (darkAdd) pre.style.setProperty('--shiki-dark-addition-color', darkAdd);
+      if (darkDel) pre.style.setProperty('--shiki-dark-deletion-color', darkDel);
+      if (darkMod) pre.style.setProperty('--shiki-dark-modified-color', darkMod);
+
+      pre.style.setProperty('--diffs-bg', currentResolved.bg);
+      pre.style.setProperty('--diffs-fg', currentResolved.fg);
+      if (currentAdd) pre.style.setProperty('--diffs-addition-color-override', currentAdd);
+      if (currentDel) pre.style.setProperty('--diffs-deletion-color-override', currentDel);
+      if (currentMod) pre.style.setProperty('--diffs-modified-color-override', currentMod);
+    }
+  }, [darkResolvedTheme, diffThemeKey, isDark, lightResolvedTheme]);
 
   // Cache the last computed diff to avoid recomputing on every render
   const diffCacheRef = useRef<{
@@ -301,7 +401,7 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
 
   // Pre-parse the diff with cacheKey for worker pool caching
   const fileDiff = useMemo(() => {
-    const cacheKey = getCacheKey(fileName, original, modified);
+    const cacheKey = getCacheKey(fileName, original, modified, diffThemeKey);
 
     // Return cached diff if inputs haven't changed
     if (diffCacheRef.current?.key === cacheKey) {
@@ -328,12 +428,12 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
     diffCacheRef.current = { key: cacheKey, fileDiff: diff };
 
     return diff;
-  }, [fileName, original, modified, language]);
+  }, [diffThemeKey, fileName, original, modified, language]);
 
   const options = useMemo(() => ({
     theme: {
-      dark: flexokiThemeNames.dark,
-      light: flexokiThemeNames.light,
+      dark: darkTheme.metadata.id,
+      light: lightTheme.metadata.id,
     },
     themeType: isDark ? ('dark' as const) : ('light' as const),
     diffStyle: renderSideBySide ? ('split' as const) : ('unified' as const),
@@ -346,21 +446,26 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
     enableHoverUtility: false,
     onLineSelected: handleSelectionChange,
     unsafeCSS: WEBKIT_SCROLL_FIX_CSS,
-  }), [isDark, renderSideBySide, wrapLines, handleSelectionChange]);
- 
+  }), [darkTheme.metadata.id, isDark, lightTheme.metadata.id, renderSideBySide, wrapLines, handleSelectionChange]);
+
   if (typeof window === 'undefined') {
     return null;
   }
- 
+
   // Extracted Comment Interface Content for reuse in Portal or In-Flow
   const renderCommentContent = () => {
     if (!selection) return null;
     return (
-      <div 
+      <div
         className="flex flex-col items-center gap-2 px-4"
-        style={{ width: 'min(100vw - 1rem, 42rem)' }}
+        style={{ width: `min(calc(${mainContentWidth} - 2rem), 42rem)` }}
       >
-        <div className="w-full rounded-xl border bg-sidebar flex flex-col relative shadow-lg" style={{ borderColor: 'var(--primary)' }}>
+        <div
+          className="w-full rounded-xl flex flex-col relative shadow-lg border border-border/80 focus-within:border-primary/70 focus-within:ring-1 focus-within:ring-primary/50"
+          style={{
+            backgroundColor: themeSystem?.currentTheme?.colors?.surface?.subtle,
+          }}
+        >
           {/* Textarea - auto-grows from 1 line to max 5 lines */}
           <Textarea
             value={commentText}
@@ -374,7 +479,8 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
               textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
             }}
             placeholder="Type your comment..."
-            className="min-h-[28px] max-h-[108px] resize-none border-0 px-3 pt-2 pb-1 shadow-none rounded-none appearance-none focus:shadow-none focus-visible:shadow-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent hover:border-transparent bg-transparent dark:bg-transparent focus-visible:outline-none overflow-y-auto"
+            outerClassName="focus-within:ring-0"
+            className="min-h-[28px] max-h-[108px] resize-none border-0 px-3 pt-2 pb-1 rounded-none appearance-none hover:border-transparent bg-transparent dark:bg-transparent overflow-y-auto focus:ring-0 focus:shadow-none"
             autoFocus={!isMobile}
             rows={1}
             onKeyDown={(e) => {
@@ -437,7 +543,7 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
   // If we're in an inline diff ('inline' layout), render via Portal (fixed over content).
   if (layout === 'fill') {
     return (
-      <div 
+      <div
         className={cn("flex flex-col relative", "size-full")}
         style={{
           // Apply keyboard padding to the main container, just like ChatContainer
@@ -450,23 +556,26 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
             disableHorizontal={false}
             fillContainer={true}
           >
-            <FileDiff
-              fileDiff={fileDiff}
-              options={options}
-              selectedLines={selection}
-            />
+            <div ref={diffRootRef} className="size-full">
+              <FileDiff
+                key={diffThemeKey}
+                fileDiff={fileDiff}
+                options={options}
+                selectedLines={selection}
+              />
+            </div>
           </ScrollableOverlay>
         </div>
-        
-        {/* Render Input In-Flow at the bottom */}
+
+        {/* Render Input overlay at the bottom */}
         {selection && (
-          <div 
+          <div
             className={cn(
-              "pointer-events-auto relative pb-2 transition-none z-50 flex justify-center",
+              "pointer-events-auto absolute bottom-0 left-0 right-0 pb-2 transition-none z-50 flex justify-center w-full",
               isMobile && isKeyboardOpen ? "ios-keyboard-safe-area" : "bottom-safe-area"
             )}
             style={{
-              marginBottom: isMobile 
+              marginBottom: isMobile
                 ? (!isKeyboardOpen && inputBarOffset > 0 ? `${inputBarOffset}px` : '16px')
                 : '16px'
             }}
@@ -485,31 +594,32 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
   // Use simple div with overflow-x-auto to avoid nested ScrollableOverlay issues in Chrome
   return (
     <div className={cn("relative", "w-full")}>
-      <div className="pierre-diff-wrapper w-full overflow-x-auto overflow-y-visible">
+      <div ref={diffRootRef} className="pierre-diff-wrapper w-full overflow-x-auto overflow-y-visible">
         <FileDiff
+          key={diffThemeKey}
           fileDiff={fileDiff}
           options={options}
           selectedLines={selection}
         />
       </div>
-      
+
       {selection && createPortal(
-        <div 
+        <div
           className="fixed inset-0 z-50 flex flex-col justify-end items-start pointer-events-none transition-none transform-gpu"
-          style={{ 
+          style={{
             paddingBottom: isMobile ? 'var(--oc-keyboard-inset, 0px)' : '0px',
             isolation: 'isolate'
           }}
         >
-          <div 
+          <div
             className={cn(
               "pointer-events-auto relative pb-2 transition-none",
               isMobile && isKeyboardOpen ? "ios-keyboard-safe-area" : "bottom-safe-area"
             )}
-            style={{ 
+            style={{
               marginLeft: mainContentCenter,
               transform: 'translateX(-50%)',
-              marginBottom: isMobile 
+              marginBottom: isMobile
                 ? (!isKeyboardOpen && inputBarOffset > 0 ? `${inputBarOffset}px` : '16px')
                 : '16px'
             }}
diff --git a/packages/ui/src/components/views/SettingsView.tsx b/packages/ui/src/components/views/SettingsView.tsx
index 3686610f..63302b91 100644
--- a/packages/ui/src/components/views/SettingsView.tsx
+++ b/packages/ui/src/components/views/SettingsView.tsx
@@ -389,7 +389,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
                         className={cn(
                           'relative flex h-9 w-9 items-center justify-center rounded-md transition-colors',
                           'hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
-                          isActive ? 'bg-secondary text-foreground shadow-sm' : 'text-muted-foreground'
+                          isActive ? 'bg-interactive-selection text-interactive-selection-foreground shadow-sm' : 'text-muted-foreground hover:bg-interactive-hover/50'
                         )}
                         aria-pressed={isActive}
                         aria-label={label}
@@ -412,7 +412,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
                   onMouseDown={isActive ? handleActiveTabDragStart : undefined}
                   className={cn(
                     'relative flex h-8 items-center gap-2 px-3 rounded-md typography-ui-label font-medium transition-colors',
-                    isActive ? 'app-region-drag bg-secondary text-foreground shadow-sm' : 'app-region-no-drag text-muted-foreground hover:bg-secondary/50 hover:text-foreground',
+                    isActive ? 'app-region-drag bg-interactive-selection text-interactive-selection-foreground shadow-sm' : 'app-region-no-drag text-muted-foreground hover:bg-interactive-hover/50 hover:text-foreground',
                     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
                   )}
                   aria-pressed={isActive}
@@ -436,7 +436,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
                       type="button"
                       aria-label="Switch project"
                       title={activeProjectLabel}
-                      className="inline-flex h-9 w-9 items-center justify-center p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                      className="inline-flex h-9 w-9 items-center justify-center p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary border border-[var(--interactive-border)]"
                     >
                       <RiFolderLine className="h-5 w-5" />
                     </button>
@@ -446,7 +446,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
                       aria-label="Switch project"
                       title={activeProjectLabel}
                       className={cn(
-                        'flex h-9 max-w-[18rem] items-center gap-1.5 bg-transparent px-2 text-foreground outline-none hover:text-foreground/80 focus-visible:ring-2 focus-visible:ring-ring',
+                        'flex h-9 max-w-[18rem] items-center gap-1.5 bg-transparent px-2 rounded-lg text-foreground outline-none hover:bg-interactive-hover/50 focus-visible:ring-2 focus-visible:ring-ring border border-[var(--interactive-border)]',
                         !isMobile && 'app-region-no-drag'
                       )}
                     >
@@ -487,7 +487,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
                     onClick={onClose}
                     aria-label="Close settings"
                     className={cn(
-                      'inline-flex h-9 w-9 items-center justify-center p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+                      'inline-flex h-9 w-9 items-center justify-center p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
                       !isMobile && 'app-region-no-drag'
                     )}
                   >
diff --git a/packages/ui/src/components/views/agent-manager/AgentManagerEmptyState.tsx b/packages/ui/src/components/views/agent-manager/AgentManagerEmptyState.tsx
index 53deab8a..9b44fc85 100644
--- a/packages/ui/src/components/views/agent-manager/AgentManagerEmptyState.tsx
+++ b/packages/ui/src/components/views/agent-manager/AgentManagerEmptyState.tsx
@@ -22,6 +22,7 @@ import { BranchSelector, useBranchOptions } from '@/components/multirun/BranchSe
 import { AgentSelector } from '@/components/multirun/AgentSelector';
 import { isIMECompositionEvent } from '@/lib/ime';
 import { getWorktreeSetupCommands } from '@/lib/openchamberConfig';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
 import type { ProjectRef } from '@/lib/openchamberConfig';
 import type { CreateMultiRunParams, MultiRunFileAttachment } from '@/types/multirun';
 
@@ -66,6 +67,7 @@ export const AgentManagerEmptyState: React.FC<AgentManagerEmptyStateProps> = ({
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
   
+  const { currentTheme } = useThemeSystem();
   const currentDirectory = useDirectoryStore((state) => state.currentDirectory ?? null);
   const { isGitRepository, isLoading: isLoadingBranches } = useBranchOptions(currentDirectory);
   
@@ -312,7 +314,7 @@ export const AgentManagerEmptyState: React.FC<AgentManagerEmptyStateProps> = ({
 
         {/* Setup commands collapsible */}
         <Collapsible open={isSetupCommandsOpen} onOpenChange={setIsSetupCommandsOpen}>
-          <CollapsibleTrigger className="w-full flex items-center justify-between py-1 hover:opacity-80 transition-opacity">
+          <CollapsibleTrigger className="w-full flex items-center justify-between py-1 hover:bg-[var(--interactive-hover)] rounded-md px-1 -mx-1 transition-colors">
             <p className="typography-ui-label font-medium text-foreground">
               Setup commands
               {setupCommands.filter(cmd => cmd.trim()).length > 0 && (
@@ -409,7 +411,10 @@ export const AgentManagerEmptyState: React.FC<AgentManagerEmptyStateProps> = ({
           <label htmlFor="prompt" className="typography-ui-label font-medium text-foreground">
             Prompt
           </label>
-          <div className="rounded-xl border border-border/60 bg-input/10 dark:bg-input/30 overflow-hidden">
+          <div
+            className="rounded-xl border border-border/80 overflow-hidden focus-within:ring-1 focus-within:ring-primary/50"
+            style={{ backgroundColor: currentTheme?.colors?.surface?.subtle }}
+          >
             {/* Text Area */}
             <Textarea
               ref={textareaRef}
@@ -418,7 +423,7 @@ export const AgentManagerEmptyState: React.FC<AgentManagerEmptyStateProps> = ({
               onChange={(e) => setPrompt(e.target.value)}
               onKeyDown={handleKeyDown}
               placeholder="Ask anything..."
-              className="min-h-[100px] max-h-[300px] resize-none border-0 bg-transparent px-4 py-3 typography-markdown focus-visible:ring-0 focus-visible:ring-offset-0"
+              className="min-h-[100px] max-h-[300px] resize-none border-0 bg-transparent dark:bg-transparent px-4 py-3 typography-markdown focus-visible:ring-0 focus-visible:ring-offset-0"
             />
             
             {/* Attached Files Display */}
@@ -450,7 +455,7 @@ export const AgentManagerEmptyState: React.FC<AgentManagerEmptyStateProps> = ({
             )}
             
             {/* Footer Controls */}
-            <div className="flex items-center justify-between px-3 py-2 border-t border-border/40">
+            <div className="flex items-center justify-between px-3 py-2 border-t border-border/40 bg-transparent">
               {/* Left Controls - Attachments */}
               <div className="flex items-center gap-2">
                 <input
diff --git a/packages/ui/src/components/views/agent-manager/AgentManagerSidebar.tsx b/packages/ui/src/components/views/agent-manager/AgentManagerSidebar.tsx
index d5b62dc7..5ed1f5ee 100644
--- a/packages/ui/src/components/views/agent-manager/AgentManagerSidebar.tsx
+++ b/packages/ui/src/components/views/agent-manager/AgentManagerSidebar.tsx
@@ -74,7 +74,7 @@ const AgentGroupItem: React.FC<AgentGroupItemProps> = ({ group, isSelected, onSe
       <div
         className={cn(
           'group relative flex items-center rounded-md px-1.5 py-1.5 cursor-pointer',
-          isSelected ? 'dark:bg-accent/80 bg-primary/12' : 'hover:dark:bg-accent/40 hover:bg-primary/6',
+          isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover',
         )}
         onClick={onSelect}
       >
@@ -192,7 +192,7 @@ export const AgentManagerSidebar: React.FC<AgentManagerSidebarProps> = ({
   const remainingCount = filteredGroups.length - MAX_VISIBLE;
   
   return (
-    <div className={cn('flex h-full flex-col bg-background/50 dark:bg-neutral-900/80 text-foreground border-r border-border/30', className)}>
+    <div className={cn('flex h-full flex-col text-foreground border-r border-border/30', className)}>
       {/* Search Input */}
       <div className="px-2.5 pt-3 pb-2">
         <div className="relative">
diff --git a/packages/ui/src/components/views/git/HistoryCommitRow.tsx b/packages/ui/src/components/views/git/HistoryCommitRow.tsx
index 9e78e8d7..7125c156 100644
--- a/packages/ui/src/components/views/git/HistoryCommitRow.tsx
+++ b/packages/ui/src/components/views/git/HistoryCommitRow.tsx
@@ -33,13 +33,13 @@ function formatCommitDate(date: string) {
 function getChangeTypeColor(changeType: string) {
   switch (changeType) {
     case 'A':
-      return 'text-emerald-500';
+      return 'text-[var(--status-success)]';
     case 'D':
-      return 'text-red-500';
+      return 'text-[var(--status-error)]';
     case 'M':
-      return 'text-amber-500';
+      return 'text-[var(--status-warning)]';
     case 'R':
-      return 'text-blue-500';
+      return 'text-[var(--status-info)]';
     default:
       return 'text-muted-foreground';
   }
diff --git a/packages/ui/src/contexts/DiffWorkerProvider.tsx b/packages/ui/src/contexts/DiffWorkerProvider.tsx
index 9759f41f..b2e39d25 100644
--- a/packages/ui/src/contexts/DiffWorkerProvider.tsx
+++ b/packages/ui/src/contexts/DiffWorkerProvider.tsx
@@ -5,8 +5,8 @@ import type { SupportedLanguages } from '@pierre/diffs';
 
 import { useOptionalThemeSystem } from './useThemeSystem';
 import { workerFactory } from '@/lib/diff/workerFactory';
-import { ensureFlexokiThemesRegistered } from '@/lib/shiki/registerFlexokiThemes';
-import { flexokiThemeNames } from '@/lib/shiki/flexokiThemes';
+import { ensurePierreThemeRegistered } from '@/lib/shiki/appThemeRegistry';
+import { getDefaultTheme } from '@/lib/theme/themes';
 import { useGitStore } from '@/stores/useGitStore';
 import { getLanguageFromExtension } from '@/lib/toolHelpers';
 
@@ -31,14 +31,14 @@ const PRELOAD_LANGS: SupportedLanguages[] = [
 const WARMUP_MAX_FILES = 10;
 
 // Matches cache key logic in `packages/ui/src/components/views/PierreDiffViewer.tsx`
-function getPierreCacheKey(fileName: string, original: string, modified: string): string {
+function getPierreCacheKey(fileName: string, original: string, modified: string, themeKey: string): string {
   const sampleOriginal = original.length > 100
     ? `${original.slice(0, 50)}${original.slice(-50)}`
     : original;
   const sampleModified = modified.length > 100
     ? `${modified.slice(0, 50)}${modified.slice(-50)}`
     : modified;
-  return `${fileName}:${original.length}:${modified.length}:${sampleOriginal.length}:${sampleModified.length}`;
+  return `${themeKey}::${fileName}:${original.length}:${modified.length}:${sampleOriginal.length}:${sampleModified.length}`;
 }
 
 interface DiffWorkerProviderProps {
@@ -57,7 +57,11 @@ function scheduleWarmupWork(cb: (deadline?: IdleDeadlineLike) => void): () => vo
 }
 
 // Component that warms up the worker pool and precomputes diff ASTs
-const WorkerPoolWarmup: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+const WorkerPoolWarmup: React.FC<{
+  children: React.ReactNode;
+  themeKey: string;
+  renderTheme: { light: string; dark: string };
+}> = ({ children, themeKey, renderTheme }) => {
   const workerPool = useWorkerPool();
   const activeDirectory = useGitStore((state) => state.activeDirectory);
   const lastStatusChange = useGitStore((state) => {
@@ -72,6 +76,20 @@ const WorkerPoolWarmup: React.FC<{ children: React.ReactNode }> = ({ children })
   const didDummyWarmupRef = useRef(false);
   const warmedStatusRef = useRef(new Map<string, number>());
 
+  useEffect(() => {
+    warmedStatusRef.current.clear();
+  }, [themeKey]);
+
+  useEffect(() => {
+    if (!workerPool) {
+      return;
+    }
+
+    // Important: WorkerPoolContextProvider uses a singleton and does not react to
+    // prop changes. Update the worker pool render options explicitly.
+    void workerPool.setRenderOptions({ theme: renderTheme });
+  }, [renderTheme, workerPool]);
+
   useEffect(() => {
     if (!workerPool || didDummyWarmupRef.current) return;
 
@@ -128,7 +146,7 @@ const WorkerPoolWarmup: React.FC<{ children: React.ReactNode }> = ({ children })
         index += 1;
 
         const language = getLanguageFromExtension(filePath) || 'text';
-        const cacheKey = getPierreCacheKey(filePath, diff.original, diff.modified);
+        const cacheKey = getPierreCacheKey(filePath, diff.original, diff.modified, themeKey);
 
         const oldFile: FileContents = {
           name: filePath,
@@ -171,7 +189,7 @@ const WorkerPoolWarmup: React.FC<{ children: React.ReactNode }> = ({ children })
       cancelled = true;
       cancelScheduled?.();
     };
-  }, [workerPool, activeDirectory, lastStatusChange, diffCacheSize]);
+  }, [workerPool, activeDirectory, lastStatusChange, diffCacheSize, themeKey]);
 
   return <>{children}</>;
 };
@@ -180,16 +198,40 @@ export const DiffWorkerProvider: React.FC<DiffWorkerProviderProps> = ({ children
   const themeSystem = useOptionalThemeSystem();
   const isDark = themeSystem?.currentTheme?.metadata?.variant === 'dark';
 
-  ensureFlexokiThemesRegistered();
+  const fallbackLight = getDefaultTheme(false);
+  const fallbackDark = getDefaultTheme(true);
+
+  const lightThemeId = themeSystem?.lightThemeId ?? fallbackLight.metadata.id;
+  const darkThemeId = themeSystem?.darkThemeId ?? fallbackDark.metadata.id;
+
+  const lightTheme =
+    themeSystem?.availableThemes.find((theme) => theme.metadata.id === lightThemeId) ??
+    fallbackLight;
+  const darkTheme =
+    themeSystem?.availableThemes.find((theme) => theme.metadata.id === darkThemeId) ??
+    fallbackDark;
+
+  ensurePierreThemeRegistered(lightTheme);
+  ensurePierreThemeRegistered(darkTheme);
 
   const highlighterOptions = useMemo(() => ({
     theme: {
-      dark: flexokiThemeNames.dark,
-      light: flexokiThemeNames.light,
+      dark: darkTheme.metadata.id,
+      light: lightTheme.metadata.id,
     },
     themeType: isDark ? ('dark' as const) : ('light' as const),
     langs: PRELOAD_LANGS,
-  }), [isDark]);
+  }), [darkTheme.metadata.id, isDark, lightTheme.metadata.id]);
+
+  const workerThemeKey = `${lightTheme.metadata.id}:${darkTheme.metadata.id}:${isDark ? 'dark' : 'light'}`;
+
+  const renderTheme = useMemo(
+    () => ({
+      light: lightTheme.metadata.id,
+      dark: darkTheme.metadata.id,
+    }),
+    [darkTheme.metadata.id, lightTheme.metadata.id],
+  );
 
   return (
     <WorkerPoolContextProvider
@@ -200,7 +242,10 @@ export const DiffWorkerProvider: React.FC<DiffWorkerProviderProps> = ({ children
       }}
       highlighterOptions={highlighterOptions}
     >
-      <WorkerPoolWarmup>
+      <WorkerPoolWarmup
+        themeKey={workerThemeKey}
+        renderTheme={renderTheme}
+      >
         {children}
       </WorkerPoolWarmup>
     </WorkerPoolContextProvider>
diff --git a/packages/ui/src/contexts/ThemeSystemContext.tsx b/packages/ui/src/contexts/ThemeSystemContext.tsx
index 1cd9b8ef..dba8ada4 100644
--- a/packages/ui/src/contexts/ThemeSystemContext.tsx
+++ b/packages/ui/src/contexts/ThemeSystemContext.tsx
@@ -6,18 +6,18 @@ import React, {
 } from 'react';
 import type { Theme, ThemeMode } from '@/types/theme';
 import type { DesktopSettings } from '@/lib/desktop';
-import { isVSCodeRuntime } from '@/lib/desktop';
+import { isDesktopRuntime, isVSCodeRuntime } from '@/lib/desktop';
 import { CSSVariableGenerator } from '@/lib/theme/cssGenerator';
 import { updateDesktopSettings } from '@/lib/persistence';
 import {
   themes,
   getThemeById,
-  flexokiLightTheme,
-  flexokiDarkTheme,
+  getDefaultTheme,
+  DEFAULT_LIGHT_THEME_ID,
+  DEFAULT_DARK_THEME_ID,
 } from '@/lib/theme/themes';
 import { ThemeSystemContext, type ThemeContextValue } from './theme-system-context';
 import type { VSCodeThemePayload } from '@/lib/theme/vscode/adapter';
-import { useUIStore } from '@/stores/useUIStore';
 
 type ThemePreferences = {
   themeMode: ThemeMode;
@@ -25,8 +25,8 @@ type ThemePreferences = {
   darkThemeId: string;
 };
 
-const DEFAULT_LIGHT_ID = flexokiLightTheme.metadata.id;
-const DEFAULT_DARK_ID = flexokiDarkTheme.metadata.id;
+const DEFAULT_LIGHT_ID = DEFAULT_LIGHT_THEME_ID;
+const DEFAULT_DARK_ID = DEFAULT_DARK_THEME_ID;
 
 const getSystemPreference = (): boolean => {
   if (typeof window === 'undefined') {
@@ -36,38 +36,83 @@ const getSystemPreference = (): boolean => {
 };
 
 const fallbackThemeForVariant = (variant: 'light' | 'dark'): Theme =>
-  variant === 'dark' ? flexokiDarkTheme : flexokiLightTheme;
-
-const findFallbackThemeId = (variant: 'light' | 'dark'): string => {
-  const fallback = themes.find((candidate) => candidate.metadata.variant === variant);
-  return (fallback ?? fallbackThemeForVariant(variant)).metadata.id;
-};
-
-const ensureThemeById = (themeId: string, variant: 'light' | 'dark'): Theme => {
-  const theme = getThemeById(themeId);
-  if (theme && theme.metadata.variant === variant) {
-    return theme;
-  }
-  const fallback = themes.find((candidate) => candidate.metadata.variant === variant);
-  return fallback ?? fallbackThemeForVariant(variant);
-};
+  getDefaultTheme(variant === 'dark');
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
-const validateThemeId = (themeId: string | null, variant: 'light' | 'dark'): string => {
-  if (!themeId) {
-    return variant === 'light' ? DEFAULT_LIGHT_ID : DEFAULT_DARK_ID;
+const isNonEmptyString = (value: unknown): value is string =>
+  typeof value === 'string' && value.trim().length > 0;
+
+const getNested = (value: unknown, path: string[]): unknown =>
+  path.reduce<unknown>((acc, key) => (acc && typeof acc === 'object' ? (acc as Record<string, unknown>)[key] : undefined), value);
+
+const isValidCustomTheme = (value: unknown): value is Theme => {
+  if (!value || typeof value !== 'object') {
+    return false;
   }
-  const theme = getThemeById(themeId);
-  if (theme && theme.metadata.variant === variant) {
-    return theme.metadata.id;
+
+  const requiredPaths = [
+    ['metadata', 'id'],
+    ['metadata', 'name'],
+    ['metadata', 'variant'],
+    ['colors', 'primary', 'base'],
+    ['colors', 'primary', 'foreground'],
+    ['colors', 'surface', 'background'],
+    ['colors', 'surface', 'foreground'],
+    ['colors', 'surface', 'muted'],
+    ['colors', 'surface', 'mutedForeground'],
+    ['colors', 'surface', 'elevated'],
+    ['colors', 'surface', 'elevatedForeground'],
+    ['colors', 'surface', 'subtle'],
+    ['colors', 'interactive', 'border'],
+    ['colors', 'interactive', 'selection'],
+    ['colors', 'interactive', 'selectionForeground'],
+    ['colors', 'interactive', 'focusRing'],
+    ['colors', 'interactive', 'hover'],
+    ['colors', 'status', 'error'],
+    ['colors', 'status', 'errorForeground'],
+    ['colors', 'status', 'errorBackground'],
+    ['colors', 'status', 'errorBorder'],
+    ['colors', 'status', 'warning'],
+    ['colors', 'status', 'warningForeground'],
+    ['colors', 'status', 'warningBackground'],
+    ['colors', 'status', 'warningBorder'],
+    ['colors', 'status', 'success'],
+    ['colors', 'status', 'successForeground'],
+    ['colors', 'status', 'successBackground'],
+    ['colors', 'status', 'successBorder'],
+    ['colors', 'status', 'info'],
+    ['colors', 'status', 'infoForeground'],
+    ['colors', 'status', 'infoBackground'],
+    ['colors', 'status', 'infoBorder'],
+    ['colors', 'syntax', 'base', 'background'],
+    ['colors', 'syntax', 'base', 'foreground'],
+    ['colors', 'syntax', 'base', 'keyword'],
+    ['colors', 'syntax', 'base', 'string'],
+    ['colors', 'syntax', 'base', 'number'],
+    ['colors', 'syntax', 'base', 'function'],
+    ['colors', 'syntax', 'base', 'variable'],
+    ['colors', 'syntax', 'base', 'type'],
+    ['colors', 'syntax', 'base', 'comment'],
+    ['colors', 'syntax', 'base', 'operator'],
+    ['colors', 'syntax', 'highlights', 'diffAdded'],
+    ['colors', 'syntax', 'highlights', 'diffRemoved'],
+    ['colors', 'syntax', 'highlights', 'lineNumber'],
+  ];
+
+  for (const path of requiredPaths) {
+    if (!isNonEmptyString(getNested(value, path))) {
+      return false;
+    }
   }
-  return findFallbackThemeId(variant);
+
+  const variant = getNested(value, ['metadata', 'variant']);
+  return variant === 'light' || variant === 'dark';
 };
 
 const buildInitialPreferences = (defaultThemeId?: string): ThemePreferences => {
-  let lightThemeId = DEFAULT_LIGHT_ID;
-  let darkThemeId = DEFAULT_DARK_ID;
+  let lightThemeId: string = DEFAULT_LIGHT_ID;
+  let darkThemeId: string = DEFAULT_DARK_ID;
   let themeMode: ThemeMode = 'system';
 
   if (typeof window !== 'undefined') {
@@ -99,8 +144,13 @@ const buildInitialPreferences = (defaultThemeId?: string): ThemePreferences => {
       themeMode = legacyVariant;
     }
 
-    lightThemeId = validateThemeId(storedLightId, 'light');
-    darkThemeId = validateThemeId(storedDarkId, 'dark');
+    if (typeof storedLightId === 'string' && storedLightId.trim().length > 0) {
+      lightThemeId = storedLightId.trim();
+    }
+
+    if (typeof storedDarkId === 'string' && storedDarkId.trim().length > 0) {
+      darkThemeId = storedDarkId.trim();
+    }
   }
 
   if (defaultThemeId) {
@@ -130,6 +180,8 @@ export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemPro
   const cssGenerator = useMemo(() => new CSSVariableGenerator(), []);
   const [preferences, setPreferences] = useState<ThemePreferences>(() => buildInitialPreferences(defaultThemeId));
   const [systemPrefersDark, setSystemPrefersDark] = useState<boolean>(() => getSystemPreference());
+  const [customThemes, setCustomThemes] = useState<Theme[]>([]);
+  const [customThemesLoading, setCustomThemesLoading] = useState(false);
   const [vscodeTheme, setVSCodeTheme] = useState<Theme | null>(() => {
     if (typeof window === 'undefined' || !isVSCodeRuntime()) {
       return null;
@@ -138,6 +190,47 @@ export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemPro
     return existing || null;
   });
   const isVSCode = useMemo(() => isVSCodeRuntime(), []);
+  const isDesktop = useMemo(() => isDesktopRuntime(), []);
+
+  const availableThemes = useMemo(() => {
+    const merged: Theme[] = [];
+    const seen = new Set<string>();
+
+    const add = (theme: Theme) => {
+      const id = theme.metadata.id;
+      if (seen.has(id)) return;
+      seen.add(id);
+      merged.push(theme);
+    };
+
+    if (isVSCode && vscodeTheme) {
+      add(vscodeTheme);
+    }
+
+    // Custom themes first so they can override built-ins with the same id.
+    customThemes.forEach(add);
+    themes.forEach(add);
+
+    return merged;
+  }, [customThemes, isVSCode, vscodeTheme]);
+
+  const getThemeByIdFromAvailable = useCallback(
+    (themeId: string): Theme | undefined => availableThemes.find((theme) => theme.metadata.id === themeId),
+    [availableThemes],
+  );
+
+  const ensureThemeById = useCallback(
+    (themeId: string, variant: 'light' | 'dark'): Theme => {
+      const theme = getThemeByIdFromAvailable(themeId);
+      if (theme && theme.metadata.variant === variant) {
+        return theme;
+      }
+
+      const fallback = availableThemes.find((candidate) => candidate.metadata.variant === variant);
+      return fallback ?? fallbackThemeForVariant(variant);
+    },
+    [availableThemes, getThemeByIdFromAvailable],
+  );
 
   const currentTheme = useMemo(() => {
     if (isVSCode && vscodeTheme) {
@@ -152,12 +245,46 @@ export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemPro
     return systemPrefersDark
       ? ensureThemeById(preferences.darkThemeId, 'dark')
       : ensureThemeById(preferences.lightThemeId, 'light');
-  }, [isVSCode, preferences, systemPrefersDark, vscodeTheme]);
+  }, [ensureThemeById, isVSCode, preferences, systemPrefersDark, vscodeTheme]);
 
-  const availableThemes = useMemo(
-    () => (isVSCode && vscodeTheme ? [vscodeTheme, ...themes] : themes),
-    [isVSCode, vscodeTheme],
-  );
+  const reloadCustomThemes = useCallback(async () => {
+    if (typeof window === 'undefined' || isVSCode) {
+      return;
+    }
+
+    setCustomThemesLoading(true);
+    try {
+      const res = await fetch('/api/config/themes', {
+        method: 'GET',
+        credentials: isDesktop ? 'omit' : 'include',
+        headers: {
+          Accept: 'application/json',
+        },
+      });
+
+      if (res.status === 401) {
+        // UI auth gate will handle prompting; avoid noisy retries here.
+        return;
+      }
+
+      if (!res.ok) {
+        return;
+      }
+
+      const payload = await res.json();
+      const incoming = Array.isArray(payload?.themes) ? payload.themes : [];
+      const normalized = incoming.filter(isValidCustomTheme);
+      setCustomThemes(normalized);
+    } catch {
+      // ignore
+    } finally {
+      setCustomThemesLoading(false);
+    }
+  }, [isDesktop, isVSCode]);
+
+  useEffect(() => {
+    void reloadCustomThemes();
+  }, [reloadCustomThemes]);
 
   useEffect(() => {
     if (!isVSCode) {
@@ -166,11 +293,6 @@ export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemPro
 
     const applyVSCodeTheme = (theme: Theme) => {
       setVSCodeTheme(theme);
-      const variant: ThemeMode = theme.metadata.variant === 'dark' ? 'dark' : 'light';
-      const uiStore = useUIStore.getState();
-      if (uiStore.theme !== variant) {
-        uiStore.setTheme(variant);
-      }
     };
 
     const handleThemeEvent = (event: Event) => {
@@ -270,7 +392,17 @@ export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemPro
       'selectedThemeVariant',
       currentTheme.metadata.variant === 'light' ? 'light' : 'dark',
     );
-  }, [preferences, currentTheme]);
+
+    // Splash screen (packages/web/index.html) runs before the theme CSS vars load.
+    // Persist just enough to theme it on next boot.
+    const lightTheme = ensureThemeById(preferences.lightThemeId, 'light');
+    const darkTheme = ensureThemeById(preferences.darkThemeId, 'dark');
+
+    localStorage.setItem('splashBgLight', lightTheme.colors.surface.background);
+    localStorage.setItem('splashFgLight', lightTheme.colors.surface.foreground);
+    localStorage.setItem('splashBgDark', darkTheme.colors.surface.background);
+    localStorage.setItem('splashFgDark', darkTheme.colors.surface.foreground);
+  }, [preferences, currentTheme, ensureThemeById]);
 
   useEffect(() => {
     void updateDesktopSettings({
@@ -304,12 +436,12 @@ export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemPro
 
         let nextLight = prev.lightThemeId;
         if (typeof detail.lightThemeId === 'string' && detail.lightThemeId.length > 0) {
-          nextLight = validateThemeId(detail.lightThemeId, 'light');
+          nextLight = detail.lightThemeId.trim();
         }
 
         let nextDark = prev.darkThemeId;
         if (typeof detail.darkThemeId === 'string' && detail.darkThemeId.length > 0) {
-          nextDark = validateThemeId(detail.darkThemeId, 'dark');
+          nextDark = detail.darkThemeId.trim();
         }
 
         const same =
@@ -458,6 +590,8 @@ export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemPro
     currentTheme,
     availableThemes,
     setTheme,
+    customThemesLoading,
+    reloadCustomThemes,
     isSystemPreference: preferences.themeMode === 'system',
     setSystemPreference: setSystemPreferenceHandler,
     themeMode: preferences.themeMode,
diff --git a/packages/ui/src/contexts/theme-system-context.ts b/packages/ui/src/contexts/theme-system-context.ts
index 35fdec82..fbec61ce 100644
--- a/packages/ui/src/contexts/theme-system-context.ts
+++ b/packages/ui/src/contexts/theme-system-context.ts
@@ -6,6 +6,8 @@ export interface ThemeContextValue {
   currentTheme: Theme;
   availableThemes: Theme[];
   setTheme: (themeId: string) => void;
+  customThemesLoading: boolean;
+  reloadCustomThemes: () => Promise<void>;
   isSystemPreference: boolean;
   setSystemPreference: (use: boolean) => void;
   themeMode: ThemeMode;
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index af6bb1a9..ac7a6621 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -15,9 +15,9 @@ textarea[data-chat-input="true"] {
   box-shadow: none;
 }
 
+textarea[data-chat-input="true"]:hover,
 textarea[data-chat-input="true"]:focus,
-textarea[data-chat-input="true"]:focus-visible,
-textarea[data-chat-input="true"]:hover {
+textarea[data-chat-input="true"]:focus-visible {
   outline: none;
   border: none;
   box-shadow: none;
@@ -331,6 +331,7 @@ html:not(.dark) .chat-scroll {
 .overlay-scrollbar-target {
   scrollbar-width: none !important;
   -ms-overflow-style: none !important;
+  scrollbar-gutter: auto !important;
 }
 
 .overlay-scrollbar-target::-webkit-scrollbar {
@@ -444,6 +445,9 @@ html:not(.dark) .chat-scroll {
   :root:not(.mobile-pointer):not(.vscode-runtime) .header-tab-label {
     display: none;
   }
+  :root:not(.mobile-pointer):not(.vscode-runtime) .header-tab-badge {
+    margin-left: -0.125rem;
+  }
 }
 
 /* ============================================
@@ -570,6 +574,64 @@ html:not(.dark) .chat-scroll {
   font-size: var(--text-code);
 }
 
+/* Override Streamdown's hardcoded bg-muted for inline code - use theme colors instead */
+.streamdown-content code[data-streamdown="inline-code"] {
+  background-color: var(--markdown-inline-code-bg, var(--surface-muted)) !important;
+  color: var(--markdown-inline-code, var(--foreground)) !important;
+}
+
+/* Markdown headings - use theme colors */
+.streamdown-content h1 {
+  color: var(--markdown-heading1, var(--primary));
+}
+
+.streamdown-content h2 {
+  color: var(--markdown-heading2, var(--primary));
+}
+
+.streamdown-content h3 {
+  color: var(--markdown-heading3, var(--primary));
+}
+
+.streamdown-content h4,
+.streamdown-content h5,
+.streamdown-content h6 {
+  color: var(--markdown-heading4, var(--foreground));
+}
+
+/* Markdown links - use theme colors */
+.streamdown-content a {
+  color: var(--markdown-link, var(--primary));
+}
+
+.streamdown-content a:hover {
+  color: var(--markdown-link-hover, var(--primary));
+}
+
+/* Markdown blockquote - use theme colors */
+.streamdown-content blockquote {
+  color: var(--markdown-blockquote, var(--muted-foreground));
+  border-left-color: var(--markdown-blockquote-border, var(--border));
+}
+
+/* Markdown horizontal rule - use theme colors */
+.streamdown-content hr {
+  border-color: var(--markdown-hr, var(--border));
+}
+
+/* Markdown bold/italic/strikethrough - use theme colors */
+.streamdown-content strong {
+  color: var(--markdown-bold, var(--foreground));
+}
+
+.streamdown-content em {
+  color: var(--markdown-italic, var(--foreground));
+}
+
+.streamdown-content del {
+  color: var(--markdown-strikethrough, var(--muted-foreground));
+}
+
 /* Streamdown code blocks: ensure light/dark Shiki vars work even when Tailwind doesn't scan Streamdown's internal class names. */
 .streamdown-content [data-streamdown="code-block-body"] {
   font-size: var(--text-code);
diff --git a/packages/ui/src/lib/shiki/appThemeRegistry.ts b/packages/ui/src/lib/shiki/appThemeRegistry.ts
new file mode 100644
index 00000000..7043f8ff
--- /dev/null
+++ b/packages/ui/src/lib/shiki/appThemeRegistry.ts
@@ -0,0 +1,95 @@
+import { registerCustomTheme } from '@pierre/diffs';
+
+import type { Theme } from '@/types/theme';
+import type { VSCodeTextMateTheme, VSCodeTokenColorRule } from './vscodeTextMateTheme';
+import { buildTextMateThemeFromAppTheme } from './textMateThemeFromAppTheme';
+
+export type ShikiThemeRegistrationResolvedLike = VSCodeTextMateTheme & {
+  settings: VSCodeTokenColorRule[];
+  fg: string;
+  bg: string;
+};
+
+const isHex8 = (value: string): boolean => /^#[0-9a-fA-F]{8}$/.test(value);
+
+const stripAlpha = (value: string): string => {
+  if (isHex8(value)) {
+    return value.slice(0, 7);
+  }
+  return value;
+};
+
+function withStableStringId<T extends object>(value: T, id: string): T {
+  Object.defineProperty(value, 'toString', {
+    value: () => id,
+    enumerable: false,
+    configurable: true,
+  });
+
+  Object.defineProperty(value, Symbol.toPrimitive, {
+    value: () => id,
+    enumerable: false,
+    configurable: true,
+  });
+
+  return value;
+}
+
+const resolvedThemeCache = new Map<string, ShikiThemeRegistrationResolvedLike>();
+const registeredPierreThemes = new Set<string>();
+
+const toResolvedTheme = (raw: VSCodeTextMateTheme, id: string): ShikiThemeRegistrationResolvedLike => {
+  const bgRaw = raw.colors?.['editor.background'];
+  const fgRaw = raw.colors?.['editor.foreground'];
+
+  const bg = bgRaw ? stripAlpha(bgRaw) : undefined;
+  const fg = fgRaw ? stripAlpha(fgRaw) : undefined;
+
+  if (!bg || !fg) {
+    throw new Error(`Theme "${id}" is missing editor.background/editor.foreground`);
+  }
+
+  const settings = raw.tokenColors ?? [];
+
+  return withStableStringId(
+    {
+      ...raw,
+      name: id,
+      fg,
+      bg,
+      settings,
+    },
+    id,
+  );
+};
+
+const buildTextMateTheme = (theme: Theme): VSCodeTextMateTheme => {
+  return buildTextMateThemeFromAppTheme(theme);
+};
+
+export const getResolvedShikiTheme = (theme: Theme): ShikiThemeRegistrationResolvedLike => {
+  const cached = resolvedThemeCache.get(theme.metadata.id);
+  if (cached) {
+    return cached;
+  }
+
+  const raw = buildTextMateTheme(theme);
+  const resolved = toResolvedTheme(raw, theme.metadata.id);
+  resolvedThemeCache.set(theme.metadata.id, resolved);
+  return resolved;
+};
+
+export const ensurePierreThemeRegistered = (theme: Theme): void => {
+  const id = theme.metadata.id;
+  if (registeredPierreThemes.has(id)) {
+    return;
+  }
+
+  const resolved = getResolvedShikiTheme(theme);
+  registerCustomTheme(id, async () => resolved);
+  registeredPierreThemes.add(id);
+};
+
+export const getStreamdownThemePair = (light: Theme, dark: Theme) => {
+  return [getResolvedShikiTheme(light), getResolvedShikiTheme(dark)] as const;
+};
diff --git a/packages/ui/src/lib/shiki/flexokiThemes.ts b/packages/ui/src/lib/shiki/flexokiThemes.ts
deleted file mode 100644
index df1346e5..00000000
--- a/packages/ui/src/lib/shiki/flexokiThemes.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import flexokiDarkRawJson from './themes/flexoki-dark.json';
-import flexokiLightRawJson from './themes/flexoki-light.json';
-
-export const FLEXOKI_SHIKI_DARK_THEME_NAME = 'flexoki-dark';
-export const FLEXOKI_SHIKI_LIGHT_THEME_NAME = 'flexoki-light';
-
-type VSCodeTokenColorRule = {
-  name?: string;
-  scope?: string | string[];
-  settings: Record<string, string | undefined>;
-};
-
-type VSCodeTextMateTheme = {
-  name: string;
-  type: 'dark' | 'light';
-  colors?: Record<string, string>;
-  tokenColors?: VSCodeTokenColorRule[];
-  semanticHighlighting?: boolean;
-  semanticTokenColors?: Record<string, string>;
-};
-
-type ShikiThemeRegistrationResolvedLike = VSCodeTextMateTheme & {
-  settings: VSCodeTokenColorRule[];
-  fg: string;
-  bg: string;
-};
-
-const flexokiDarkRaw = flexokiDarkRawJson as VSCodeTextMateTheme;
-const flexokiLightRaw = flexokiLightRawJson as VSCodeTextMateTheme;
-
-function withStableStringId<T extends object>(value: T, id: string): T {
-  Object.defineProperty(value, 'toString', {
-    value: () => id,
-    enumerable: false,
-    configurable: true,
-  });
-
-  Object.defineProperty(value, Symbol.toPrimitive, {
-    value: () => id,
-    enumerable: false,
-    configurable: true,
-  });
-
-  return value;
-}
-
-function toResolvedTheme(
-  raw: VSCodeTextMateTheme,
-  name: string,
-  type: VSCodeTextMateTheme['type']
-): ShikiThemeRegistrationResolvedLike {
-  const bg = raw.colors?.['editor.background'];
-  const fg = raw.colors?.['editor.foreground'];
-
-  if (!bg || !fg) {
-    throw new Error(
-      `Flexoki Shiki theme "${name}" is missing editor.background/editor.foreground`
-    );
-  }
-
-  const settings = raw.tokenColors ?? [];
-
-  return {
-    ...raw,
-    name,
-    type,
-    fg,
-    bg,
-    settings,
-  };
-}
-
-export const flexokiDarkTheme = toResolvedTheme(
-  flexokiDarkRaw,
-  FLEXOKI_SHIKI_DARK_THEME_NAME,
-  'dark'
-);
-
-export const flexokiLightTheme = toResolvedTheme(
-  flexokiLightRaw,
-  FLEXOKI_SHIKI_LIGHT_THEME_NAME,
-  'light'
-);
-
-withStableStringId(flexokiDarkTheme, FLEXOKI_SHIKI_DARK_THEME_NAME);
-withStableStringId(flexokiLightTheme, FLEXOKI_SHIKI_LIGHT_THEME_NAME);
-
-export const flexokiThemeNames = {
-  dark: FLEXOKI_SHIKI_DARK_THEME_NAME,
-  light: FLEXOKI_SHIKI_LIGHT_THEME_NAME,
-} as const;
-
-export const flexokiStreamdownThemes = [
-  flexokiLightTheme,
-  flexokiDarkTheme,
-] as const;
diff --git a/packages/ui/src/lib/shiki/registerFlexokiThemes.ts b/packages/ui/src/lib/shiki/registerFlexokiThemes.ts
deleted file mode 100644
index 4270cddb..00000000
--- a/packages/ui/src/lib/shiki/registerFlexokiThemes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { registerCustomTheme } from '@pierre/diffs';
-
-import { flexokiDarkTheme, flexokiLightTheme, flexokiThemeNames } from './flexokiThemes';
-
-let hasRegistered = false;
-
-export function ensureFlexokiThemesRegistered(): void {
-  if (hasRegistered) return;
-
-  registerCustomTheme(flexokiThemeNames.dark, async () => flexokiDarkTheme);
-  registerCustomTheme(flexokiThemeNames.light, async () => flexokiLightTheme);
-
-  hasRegistered = true;
-}
-
diff --git a/packages/ui/src/lib/shiki/textMateThemeFromAppTheme.ts b/packages/ui/src/lib/shiki/textMateThemeFromAppTheme.ts
new file mode 100644
index 00000000..50134382
--- /dev/null
+++ b/packages/ui/src/lib/shiki/textMateThemeFromAppTheme.ts
@@ -0,0 +1,482 @@
+import type { Theme } from '@/types/theme';
+
+import type { VSCodeTextMateTheme, VSCodeTokenColorRule } from './vscodeTextMateTheme';
+
+const isHex6 = (value: string): boolean => /^#[0-9a-fA-F]{6}$/.test(value);
+const isHex8 = (value: string): boolean => /^#[0-9a-fA-F]{8}$/.test(value);
+
+const addAlpha = (value: string, alphaHex: string): string => {
+  if (!/^[0-9a-fA-F]{2}$/.test(alphaHex)) {
+    return value;
+  }
+
+  if (isHex6(value)) {
+    return `${value}${alphaHex}`;
+  }
+
+  if (isHex8(value)) {
+    return `${value.slice(0, 7)}${alphaHex}`;
+  }
+
+  return value;
+};
+
+const pick = (value: string | undefined, fallback: string): string => {
+  if (typeof value === 'string' && value.trim().length > 0) {
+    return value;
+  }
+  return fallback;
+};
+
+const buildTokenColors = (theme: Theme): VSCodeTokenColorRule[] => {
+  const base = theme.colors.syntax.base;
+  const tokens = theme.colors.syntax.tokens ?? {};
+
+  const t = (key: string, fallback: string): string => pick(tokens[key], fallback);
+
+  return [
+    {
+      name: 'plain',
+      scope: ['source', 'support.type.property-name.css'],
+      settings: { foreground: base.foreground },
+    },
+    {
+      name: 'classes',
+      scope: ['entity.name.type.class'],
+      settings: { foreground: t('className', t('class', base.function)) },
+    },
+    {
+      name: 'interfaces',
+      scope: ['entity.name.type.interface', 'entity.name.type'],
+      settings: { foreground: t('interface', base.type) },
+    },
+    {
+      name: 'structs',
+      scope: ['entity.name.type.struct'],
+      settings: { foreground: t('struct', base.function) },
+    },
+    {
+      name: 'enums',
+      scope: ['entity.name.type.enum'],
+      settings: { foreground: t('enum', base.function) },
+    },
+    {
+      name: 'keys',
+      scope: ['meta.object-literal.key', 'support.type.property-name'],
+      settings: { foreground: t('key', base.function) },
+    },
+    {
+      name: 'methods',
+      scope: ['entity.name.function.method', 'meta.function.method'],
+      settings: { foreground: t('method', theme.colors.status.success) },
+    },
+    {
+      name: 'functions',
+      scope: ['entity.name.function', 'support.function', 'meta.function-call.generic'],
+      settings: { foreground: base.function, fontStyle: 'bold' },
+    },
+    {
+      name: 'variables',
+      scope: ['variable', 'meta.variable', 'variable.other.object.property'],
+      settings: { foreground: base.variable },
+    },
+    {
+      name: 'variablesOther',
+      scope: ['variable.other.object', 'variable.other.readwrite.alias'],
+      settings: { foreground: t('variableOther', t('method', theme.colors.status.success)) },
+    },
+    {
+      name: 'globalVariables',
+      scope: ['variable.other.global', 'variable.language.this'],
+      settings: { foreground: t('variableGlobal', base.number) },
+    },
+    {
+      name: 'localVariables',
+      scope: ['variable.other.local'],
+      settings: { foreground: t('variableLocal', theme.colors.surface.elevated) },
+    },
+    {
+      name: 'parameters',
+      scope: ['variable.parameter', 'meta.parameter'],
+      settings: { foreground: t('parameter', base.foreground) },
+    },
+    {
+      name: 'properties',
+      scope: ['variable.other.property', 'meta.property'],
+      settings: { foreground: t('variableProperty', theme.colors.status.info) },
+    },
+    {
+      name: 'strings',
+      scope: ['string', 'string.other.link', 'markup.inline.raw.string.markdown'],
+      settings: { foreground: base.string },
+    },
+    {
+      name: 'stringEscapeSequences',
+      scope: ['constant.character.escape', 'constant.other.placeholder'],
+      settings: { foreground: t('stringEscape', base.foreground) },
+    },
+    {
+      name: 'keywords',
+      scope: ['keyword'],
+      settings: { foreground: base.keyword },
+    },
+    {
+      name: 'keywordsControl',
+      scope: ['keyword.control.import', 'keyword.control.from', 'keyword.import'],
+      settings: { foreground: t('keywordImport', base.operator) },
+    },
+    {
+      name: 'storageModifiers',
+      scope: ['storage.modifier', 'keyword.modifier', 'storage.type'],
+      settings: { foreground: t('storageModifier', base.keyword) },
+    },
+    {
+      name: 'comments',
+      scope: ['comment', 'punctuation.definition.comment'],
+      settings: { foreground: base.comment },
+    },
+    {
+      name: 'docComments',
+      scope: ['comment.documentation', 'comment.line.documentation'],
+      settings: { foreground: t('commentDoc', theme.colors.surface.mutedForeground) },
+    },
+    {
+      name: 'numbers',
+      scope: ['constant.numeric'],
+      settings: { foreground: base.number },
+    },
+    {
+      name: 'booleans',
+      scope: ['constant.language.boolean', 'constant.language.json'],
+      settings: { foreground: t('boolean', base.type) },
+    },
+    {
+      name: 'operators',
+      scope: ['keyword.operator'],
+      settings: { foreground: base.operator },
+    },
+    {
+      name: 'macros',
+      scope: ['entity.name.function.preprocessor', 'meta.preprocessor'],
+      settings: { foreground: t('macro', base.keyword) },
+    },
+    {
+      name: 'preprocessor',
+      scope: ['meta.preprocessor'],
+      settings: { foreground: t('preprocessor', t('label', base.number)) },
+    },
+    {
+      name: 'urls',
+      scope: ['markup.underline.link'],
+      settings: { foreground: t('url', theme.colors.status.info) },
+    },
+    {
+      name: 'tags',
+      scope: ['entity.name.tag'],
+      settings: { foreground: t('tag', base.keyword) },
+    },
+    {
+      name: 'jsxTags',
+      scope: ['support.class.component'],
+      settings: { foreground: t('jsxTag', t('label', base.number)) },
+    },
+    {
+      name: 'attributes',
+      scope: ['entity.other.attribute-name', 'meta.attribute'],
+      settings: { foreground: t('tagAttribute', base.type) },
+    },
+    {
+      name: 'types',
+      scope: ['support.type'],
+      settings: { foreground: base.type },
+    },
+    {
+      name: 'constants',
+      scope: ['variable.other.constant', 'variable.readonly'],
+      settings: { foreground: t('constant', base.foreground) },
+    },
+    {
+      name: 'labels',
+      scope: ['entity.name.label', 'punctuation.definition.label'],
+      settings: { foreground: t('label', t('variableGlobal', base.number)) },
+    },
+    {
+      name: 'namespaces',
+      scope: ['entity.name.namespace', 'storage.modifier.namespace', 'markup.bold.markdown'],
+      settings: { foreground: t('namespace', base.type) },
+    },
+    {
+      name: 'modules',
+      scope: ['entity.name.module', 'storage.modifier.module'],
+      settings: { foreground: t('module', base.operator) },
+    },
+    {
+      name: 'typeParameters',
+      scope: ['variable.type.parameter', 'variable.parameter.type'],
+      settings: { foreground: t('typeParameter', base.function) },
+    },
+    {
+      name: 'exceptions',
+      scope: ['keyword.control.exception', 'keyword.control.trycatch'],
+      settings: { foreground: t('exception', t('label', base.number)) },
+    },
+    {
+      name: 'decorators',
+      scope: ['meta.decorator', 'punctuation.decorator', 'entity.name.function.decorator'],
+      settings: { foreground: t('decorator', base.type) },
+    },
+    {
+      name: 'calls',
+      scope: ['variable.function'],
+      settings: { foreground: base.foreground },
+    },
+    {
+      name: 'punctuation',
+      scope: [
+        'punctuation',
+        'punctuation.terminator',
+        'punctuation.definition.tag',
+        'punctuation.separator',
+        'punctuation.definition.string',
+        'punctuation.section.block',
+      ],
+      settings: { foreground: t('punctuation', base.comment) },
+    },
+    {
+      name: 'yellow',
+      scope: [
+        'storage.type.numeric.go',
+        'storage.type.byte.go',
+        'storage.type.boolean.go',
+        'storage.type.string.go',
+        'storage.type.uintptr.go',
+        'storage.type.error.go',
+        'storage.type.rune.go',
+        'constant.language.go',
+        'support.class.dart',
+        'keyword.other.documentation',
+        'storage.modifier.import.java',
+        'punctuation.definition.list.begin.markdown',
+        'punctuation.definition.quote.begin.markdown',
+        'meta.separator.markdown',
+        'entity.name.section.markdown',
+      ],
+      settings: { foreground: base.type },
+    },
+    {
+      name: 'green',
+      scope: [],
+      settings: { foreground: t('method', theme.colors.status.success) },
+    },
+    {
+      name: 'cyan',
+      scope: [
+        'markup.italic.markdown',
+        'support.type.python',
+        'variable.legacy.builtin.python',
+        'support.constant.property-value.css',
+        'storage.modifier.attribute.swift',
+      ],
+      settings: { foreground: base.string },
+    },
+    {
+      name: 'blue',
+      scope: [],
+      settings: { foreground: base.keyword },
+    },
+    {
+      name: 'purple',
+      scope: ['keyword.channel.go', 'keyword.other.platform.os.swift'],
+      settings: { foreground: base.number },
+    },
+    {
+      name: 'magenta',
+      scope: ['punctuation.definition.heading.markdown'],
+      settings: { foreground: t('label', t('variableGlobal', base.number)) },
+    },
+    {
+      name: 'red',
+      scope: [],
+      settings: { foreground: base.operator },
+    },
+    {
+      name: 'orange',
+      scope: [],
+      settings: { foreground: base.function },
+    },
+  ];
+};
+
+const buildColors = (theme: Theme): Record<string, string> => {
+  const s = theme.colors.surface;
+  const i = theme.colors.interactive;
+  const st = theme.colors.status;
+  const base = theme.colors.syntax.base;
+  const hl = theme.colors.syntax.highlights ?? {};
+
+  const diffAddedBg = pick(hl.diffAddedBackground, st.successBackground);
+  const diffRemovedBg = pick(hl.diffRemovedBackground, st.errorBackground);
+
+  return {
+    'editor.background': s.background,
+    'editor.foreground': s.foreground,
+    'editor.hoverHighlightBackground': pick(i.hover, s.subtle),
+    'editor.lineHighlightBackground': s.muted,
+    'editor.selectionBackground': i.selection,
+    'editor.selectionHighlightBackground': i.selection,
+    'editor.findMatchBackground': base.type,
+    'editor.findMatchHighlightBackground': addAlpha(base.type, 'cc'),
+    'editor.findRangeHighlightBackground': s.muted,
+    'editor.inactiveSelectionBackground': s.elevated,
+    'editor.lineHighlightBorder': s.elevated,
+    'editor.rangeHighlightBackground': pick(i.active, i.borderHover),
+    'notifications.background': s.elevated,
+    'editorInlayHint.typeBackground': s.subtle,
+    'editorInlayHint.typeForeground': s.foreground,
+    'editorWhitespace.foreground': i.borderHover,
+    'editorIndentGuide.background1': s.subtle,
+    'editorHoverWidget.background': s.elevated,
+    'editorLineNumber.activeForeground': pick(hl.lineNumberActive, s.foreground),
+    'editorLineNumber.foreground': pick(hl.lineNumber, s.mutedForeground),
+    'editorGutter.background': s.background,
+    'editorGutter.modifiedBackground': st.info,
+    'editorGutter.addedBackground': st.success,
+    'editorGutter.deletedBackground': st.error,
+    'editorBracketMatch.background': s.elevated,
+    'editorBracketMatch.border': s.subtle,
+    'editorError.foreground': st.error,
+    'editorWarning.foreground': st.warning,
+    'editorInfo.foreground': st.info,
+    'diffEditor.insertedTextBackground': diffAddedBg,
+    'diffEditor.removedTextBackground': diffRemovedBg,
+    'editorGroupHeader.tabsBackground': s.background,
+    'editorGroup.border': i.border,
+    'tab.activeBackground': s.background,
+    'tab.inactiveBackground': s.muted,
+    'tab.inactiveForeground': s.mutedForeground,
+    'tab.activeForeground': s.foreground,
+    'tab.hoverBackground': s.subtle,
+    'tab.unfocusedHoverBackground': s.subtle,
+    'tab.border': i.border,
+    'tab.activeModifiedBorder': base.type,
+    'tab.inactiveModifiedBorder': st.info,
+    'tab.unfocusedActiveModifiedBorder': base.type,
+    'tab.unfocusedInactiveModifiedBorder': st.info,
+    'editorWidget.background': s.muted,
+    'editorWidget.border': i.border,
+    'editorSuggestWidget.background': s.background,
+    'editorSuggestWidget.border': i.border,
+    'editorSuggestWidget.foreground': s.foreground,
+    'editorSuggestWidget.highlightForeground': s.mutedForeground,
+    'editorSuggestWidget.selectedBackground': s.subtle,
+    'peekView.border': i.border,
+    'peekViewEditor.background': s.background,
+    'peekViewEditor.matchHighlightBackground': s.subtle,
+    'peekViewResult.background': s.muted,
+    'peekViewResult.fileForeground': s.foreground,
+    'peekViewResult.lineForeground': s.mutedForeground,
+    'peekViewResult.matchHighlightBackground': s.subtle,
+    'peekViewResult.selectionBackground': s.elevated,
+    'peekViewResult.selectionForeground': s.mutedForeground,
+    'peekViewTitle.background': s.subtle,
+    'peekViewTitleDescription.foreground': s.mutedForeground,
+    'peekViewTitleLabel.foreground': s.foreground,
+    'merge.currentHeaderBackground': st.success,
+    'merge.currentContentBackground': pick(hl.diffAdded, st.success),
+    'merge.incomingHeaderBackground': st.info,
+    'merge.incomingContentBackground': pick(hl.diffModified, st.info),
+    'merge.border': i.border,
+    'merge.commonContentBackground': s.subtle,
+    'merge.commonHeaderBackground': s.muted,
+    'panel.background': s.background,
+    'panel.border': i.border,
+    'panelTitle.activeBorder': i.borderHover,
+    'panelTitle.activeForeground': s.foreground,
+    'panelTitle.inactiveForeground': s.mutedForeground,
+    'statusBar.background': s.background,
+    'statusBar.foreground': s.foreground,
+    'statusBar.border': i.border,
+    'statusBar.debuggingBackground': st.error,
+    'statusBar.debuggingForeground': st.errorForeground,
+    'statusBar.noFolderBackground': s.subtle,
+    'statusBar.noFolderForeground': s.mutedForeground,
+    'titleBar.activeBackground': s.background,
+    'titleBar.activeForeground': s.foreground,
+    'titleBar.inactiveBackground': s.muted,
+    'titleBar.inactiveForeground': s.mutedForeground,
+    'titleBar.border': i.border,
+    'menu.foreground': s.foreground,
+    'menu.background': s.background,
+    'menu.selectionForeground': s.foreground,
+    'menu.selectionBackground': s.subtle,
+    'menu.border': i.border,
+    'editorInlayHint.foreground': s.mutedForeground,
+    'editorInlayHint.background': s.subtle,
+    'terminal.foreground': s.foreground,
+    'terminal.background': s.background,
+    'terminalCursor.foreground': s.foreground,
+    'terminalCursor.background': s.background,
+    'terminal.ansiRed': pick(hl.diffRemoved, st.error),
+    'terminal.ansiGreen': pick(hl.diffAdded, st.success),
+    'terminal.ansiYellow': st.warning,
+    'terminal.ansiBlue': pick(hl.diffModified, st.info),
+    'terminal.ansiMagenta': base.keyword,
+    'terminal.ansiCyan': base.type,
+    'activityBar.background': s.background,
+    'activityBar.foreground': s.foreground,
+    'activityBar.inactiveForeground': s.mutedForeground,
+    'activityBar.activeBorder': s.foreground,
+    'activityBar.border': i.border,
+    'sideBar.background': s.background,
+    'sideBar.foreground': s.foreground,
+    'sideBar.border': i.border,
+    'sideBarTitle.foreground': s.foreground,
+    'sideBarSectionHeader.background': s.muted,
+    'sideBarSectionHeader.foreground': s.foreground,
+    'sideBarSectionHeader.border': i.border,
+    'sideBar.activeBackground': s.subtle,
+    'sideBar.activeForeground': s.foreground,
+    'sideBar.hoverBackground': s.muted,
+    'sideBar.hoverForeground': s.foreground,
+    'list.warningForeground': st.warning,
+    'list.errorForeground': st.error,
+    'list.inactiveSelectionBackground': s.subtle,
+    'list.activeSelectionBackground': s.elevated,
+    'list.inactiveSelectionForeground': s.foreground,
+    'list.activeSelectionForeground': s.foreground,
+    'list.hoverForeground': s.foreground,
+    'list.hoverBackground': s.muted,
+    'input.background': s.muted,
+    'input.foreground': s.foreground,
+    'input.border': i.border,
+    'input.placeholderForeground': s.mutedForeground,
+    'inputOption.activeBorder': i.border,
+    'inputOption.activeBackground': s.elevated,
+    'inputOption.activeForeground': s.foreground,
+    'inputValidation.infoBackground': st.infoBackground,
+    'inputValidation.infoBorder': st.infoBorder,
+    'inputValidation.warningBackground': st.warningBackground,
+    'inputValidation.warningBorder': st.warningBorder,
+    'inputValidation.errorBackground': st.errorBackground,
+    'inputValidation.errorBorder': st.errorBorder,
+    'dropdown.background': s.muted,
+    'dropdown.foreground': s.foreground,
+    'dropdown.border': i.border,
+    'dropdown.listBackground': s.background,
+    'badge.background': theme.colors.primary.base,
+    'activityBarBadge.background': theme.colors.primary.base,
+    'button.background': theme.colors.primary.base,
+    'button.foreground': pick(theme.colors.primary.foreground, s.background),
+    'badge.foreground': pick(theme.colors.primary.foreground, s.background),
+    'activityBarBadge.foreground': pick(theme.colors.primary.foreground, s.background),
+  };
+};
+
+export function buildTextMateThemeFromAppTheme(theme: Theme): VSCodeTextMateTheme {
+  return {
+    name: theme.metadata.name,
+    type: theme.metadata.variant,
+    colors: buildColors(theme),
+    tokenColors: buildTokenColors(theme),
+  };
+}
diff --git a/packages/ui/src/lib/shiki/themes/flexoki-dark.json b/packages/ui/src/lib/shiki/themes/flexoki-dark.json
deleted file mode 100644
index 53e0144b..00000000
--- a/packages/ui/src/lib/shiki/themes/flexoki-dark.json
+++ /dev/null
@@ -1,547 +0,0 @@
-{
-  "name": "Flexoki",
-  "type": "dark",
-  "colors": {
-    "editor.background": "#100F0F",
-    "editor.foreground": "#CECDC3",
-    "editor.hoverHighlightBackground": "#343331",
-    "editor.lineHighlightBackground": "#1C1B1A",
-    "editor.selectionBackground": "#CECDC333",
-    "editor.selectionHighlightBackground": "#CECDC333",
-    "editor.findMatchBackground": "#AD8301",
-    "editor.findMatchHighlightBackground": "#AD8301cc",
-    "editor.findRangeHighlightBackground": "#1C1B1A",
-    "editor.inactiveSelectionBackground": "#282726",
-    "editor.lineHighlightBorder": "#282726",
-    "editor.rangeHighlightBackground": "#403E3C",
-    "notifications.background": "#282726",
-    "editorInlayHint.typeBackground": "#343331",
-    "editorInlayHint.typeForeground": "#CECDC3",
-    "editorWhitespace.foreground": "#403E3C",
-    "editorIndentGuide.background1": "#343331",
-    "editorHoverWidget.background": "#282726",
-    "editorLineNumber.activeForeground": "#CECDC3",
-    "editorLineNumber.foreground": "#403E3C",
-    "editorGutter.background": "#100F0F",
-    "editorGutter.modifiedBackground": "#3AA99F",
-    "editorGutter.addedBackground": "#879A39",
-    "editorGutter.deletedBackground": "#D14D41",
-    "editorBracketMatch.background": "#282726",
-    "editorBracketMatch.border": "#343331",
-    "editorError.foreground": "#D14D41",
-    "editorWarning.foreground": "#DA702C",
-    "editorInfo.foreground": "#4385BE",
-    "diffEditor.insertedTextBackground": "#66800B99",
-    "diffEditor.removedTextBackground": "#AF302999",
-    "editorGroupHeader.tabsBackground": "#100F0F",
-    "editorGroup.border": "#343331",
-    "tab.activeBackground": "#100F0F",
-    "tab.inactiveBackground": "#1C1B1A",
-    "tab.inactiveForeground": "#878580",
-    "tab.activeForeground": "#CECDC3",
-    "tab.hoverBackground": "#343331",
-    "tab.unfocusedHoverBackground": "#343331",
-    "tab.border": "#343331",
-    "tab.activeModifiedBorder": "#D0A215",
-    "tab.inactiveModifiedBorder": "#4385BE",
-    "tab.unfocusedActiveModifiedBorder": "#AD8301",
-    "tab.unfocusedInactiveModifiedBorder": "#205EA6",
-    "editorWidget.background": "#1C1B1A",
-    "editorWidget.border": "#343331",
-    "editorSuggestWidget.background": "#100F0F",
-    "editorSuggestWidget.border": "#343331",
-    "editorSuggestWidget.foreground": "#CECDC3",
-    "editorSuggestWidget.highlightForeground": "#878580",
-    "editorSuggestWidget.selectedBackground": "#343331",
-    "peekView.border": "#343331",
-    "peekViewEditor.background": "#100F0F",
-    "peekViewEditor.matchHighlightBackground": "#403E3C",
-    "peekViewResult.background": "#1C1B1A",
-    "peekViewResult.fileForeground": "#CECDC3",
-    "peekViewResult.lineForeground": "#878580",
-    "peekViewResult.matchHighlightBackground": "#403E3C",
-    "peekViewResult.selectionBackground": "#282726",
-    "peekViewResult.selectionForeground": "#575653",
-    "peekViewTitle.background": "#343331",
-    "peekViewTitleDescription.foreground": "#878580",
-    "peekViewTitleLabel.foreground": "#CECDC3",
-    "merge.currentHeaderBackground": "#879A39",
-    "merge.currentContentBackground": "#66800B",
-    "merge.incomingHeaderBackground": "#3AA99F",
-    "merge.incomingContentBackground": "#24837B",
-    "merge.border": "#343331",
-    "merge.commonContentBackground": "#403E3C",
-    "merge.commonHeaderBackground": "#343331",
-    "panel.background": "#100F0F",
-    "panel.border": "#343331",
-    "panelTitle.activeBorder": "#403E3C",
-    "panelTitle.activeForeground": "#CECDC3",
-    "panelTitle.inactiveForeground": "#878580",
-    "statusBar.background": "#100F0F",
-    "statusBar.foreground": "#CECDC3",
-    "statusBar.border": "#343331",
-    "statusBar.debuggingBackground": "#D14D41",
-    "statusBar.debuggingForeground": "#CECDC3",
-    "statusBar.noFolderBackground": "#403E3C",
-    "statusBar.noFolderForeground": "#575653",
-    "titleBar.activeBackground": "#100F0F",
-    "titleBar.activeForeground": "#CECDC3",
-    "titleBar.inactiveBackground": "#1C1B1A",
-    "titleBar.inactiveForeground": "#878580",
-    "titleBar.border": "#343331",
-    "menu.foreground": "#CECDC3",
-    "menu.background": "#100F0F",
-    "menu.selectionForeground": "#CECDC3",
-    "menu.selectionBackground": "#343331",
-    "menu.border": "#343331",
-    "editorInlayHint.foreground": "#878580",
-    "editorInlayHint.background": "#343331",
-    "terminal.foreground": "#CECDC3",
-    "terminal.background": "#100F0F",
-    "terminalCursor.foreground": "#CECDC3",
-    "terminalCursor.background": "#100F0F",
-    "terminal.ansiRed": "#D14D41",
-    "terminal.ansiGreen": "#879A39",
-    "terminal.ansiYellow": "#D0A215",
-    "terminal.ansiBlue": "#4385BE",
-    "terminal.ansiMagenta": "#3AA99F",
-    "terminal.ansiCyan": "#3AA99F",
-    "activityBar.background": "#100F0F",
-    "activityBar.foreground": "#CECDC3",
-    "activityBar.inactiveForeground": "#878580",
-    "activityBar.activeBorder": "#CECDC3",
-    "activityBar.border": "#343331",
-    "sideBar.background": "#100F0F",
-    "sideBar.foreground": "#CECDC3",
-    "sideBar.border": "#343331",
-    "sideBarTitle.foreground": "#CECDC3",
-    "sideBarSectionHeader.background": "#1C1B1A",
-    "sideBarSectionHeader.foreground": "#CECDC3",
-    "sideBarSectionHeader.border": "#343331",
-    "sideBar.activeBackground": "#403E3C",
-    "sideBar.activeForeground": "#CECDC3",
-    "sideBar.hoverBackground": "#343331",
-    "sideBar.hoverForeground": "#878580",
-    "sideBar.folderIcon.foreground": "#879A39",
-    "sideBar.fileIcon.foreground": "#4385BE",
-    "list.warningForeground": "#DA702C",
-    "list.errorForeground": "#D14D41",
-    "list.inactiveSelectionBackground": "#343331",
-    "list.activeSelectionBackground": "#403E3C",
-    "list.inactiveSelectionForeground": "#CECDC3",
-    "list.activeSelectionForeground": "#CECDC3",
-    "list.hoverForeground": "#CECDC3",
-    "list.hoverBackground": "#343331",
-    "input.background": "#1C1B1A",
-    "input.foreground": "#CECDC3",
-    "input.border": "#343331",
-    "input.placeholderForeground": "#878580",
-    "inputOption.activeBorder": "#343331",
-    "inputOption.activeBackground": "#282726",
-    "inputOption.activeForeground": "#CECDC3",
-    "inputValidation.infoBackground": "#3AA99F",
-    "inputValidation.infoBorder": "#24837B",
-    "inputValidation.warningBackground": "#DA702C",
-    "inputValidation.warningBorder": "#BC5215",
-    "inputValidation.errorBackground": "#D14D41",
-    "inputValidation.errorBorder": "#AF3029",
-    "dropdown.background": "#1C1B1A",
-    "dropdown.foreground": "#CECDC3",
-    "dropdown.border": "#343331",
-    "dropdown.listBackground": "#100F0F",
-    "badge.background": "#3AA99F",
-    "activityBarBadge.background": "#3AA99F",
-    "button.background": "#3AA99F",
-    "button.foreground": "#100F0F",
-    "badge.foreground": "#100F0F",
-    "activityBarBadge.foreground": "#100F0F"
-  },
-  "tokenColors": [
-    {
-      "name": "plain",
-      "scope": ["source", "support.type.property-name.css"],
-      "settings": {
-        "foreground": "#CECDC3"
-      }
-    },
-    {
-      "name": "classes",
-      "scope": ["entity.name.type.class"],
-      "settings": {
-        "foreground": "#DA702C"
-      }
-    },
-    {
-      "name": "interfaces",
-      "scope": ["entity.name.type.interface", "entity.name.type"],
-      "settings": {
-        "foreground": "#D0A215"
-      }
-    },
-    {
-      "name": "structs",
-      "scope": ["entity.name.type.struct"],
-      "settings": {
-        "foreground": "#DA702C"
-      }
-    },
-    {
-      "name": "enums",
-      "scope": ["entity.name.type.enum"],
-      "settings": {
-        "foreground": "#DA702C"
-      }
-    },
-    {
-      "name": "keys",
-      "scope": ["meta.object-literal.key", "support.type.property-name"],
-      "settings": {
-        "foreground": "#DA702C"
-      }
-    },
-    {
-      "name": "methods",
-      "scope": ["entity.name.function.method", "meta.function.method"],
-      "settings": {
-        "foreground": "#879A39"
-      }
-    },
-    {
-      "name": "functions",
-      "scope": [
-        "entity.name.function",
-        "support.function",
-        "meta.function-call.generic"
-      ],
-      "settings": {
-        "foreground": "#DA702C",
-        "fontStyle": "bold"
-      }
-    },
-    {
-      "name": "variables",
-      "scope": ["variable", "meta.variable", "variable.other.object.property"],
-      "settings": {
-        "foreground": "#CECDC3"
-      }
-    },
-    {
-      "name": "variablesOther",
-      "scope": ["variable.other.object", "variable.other.readwrite.alias"],
-      "settings": {
-        "foreground": "#879A39"
-      }
-    },
-    {
-      "name": "globalVariables",
-      "scope": ["variable.other.global", "variable.language.this"],
-      "settings": {
-        "foreground": "#CE5D97"
-      }
-    },
-    {
-      "name": "localVariables",
-      "scope": ["variable.other.local"],
-      "settings": {
-        "foreground": "#282726"
-      }
-    },
-    {
-      "name": "parameters",
-      "scope": ["variable.parameter", "meta.parameter"],
-      "settings": {
-        "foreground": "#CECDC3"
-      }
-    },
-    {
-      "name": "properties",
-      "scope": ["variable.other.property", "meta.property"],
-      "settings": {
-        "foreground": "#4385BE"
-      }
-    },
-    {
-      "name": "strings",
-      "scope": [
-        "string",
-        "string.other.link",
-        "markup.inline.raw.string.markdown"
-      ],
-      "settings": {
-        "foreground": "#3AA99F"
-      }
-    },
-    {
-      "name": "stringEscapeSequences",
-      "scope": ["constant.character.escape", "constant.other.placeholder"],
-      "settings": {
-        "foreground": "#CECDC3"
-      }
-    },
-    {
-      "name": "keywords",
-      "scope": ["keyword"],
-      "settings": {
-        "foreground": "#879A39"
-      }
-    },
-    {
-      "name": "keywordsControl",
-      "scope": [
-        "keyword.control.import",
-        "keyword.control.from",
-        "keyword.import"
-      ],
-      "settings": {
-        "foreground": "#D14D41"
-      }
-    },
-    {
-      "name": "storageModifiers",
-      "scope": ["storage.modifier", "keyword.modifier", "storage.type"],
-      "settings": {
-        "foreground": "#4385BE"
-      }
-    },
-    {
-      "name": "comments",
-      "scope": ["comment", "punctuation.definition.comment"],
-      "settings": {
-        "foreground": "#878580"
-      }
-    },
-    {
-      "name": "docComments",
-      "scope": ["comment.documentation", "comment.line.documentation"],
-      "settings": {
-        "foreground": "#575653"
-      }
-    },
-    {
-      "name": "numbers",
-      "scope": ["constant.numeric"],
-      "settings": {
-        "foreground": "#8B7EC8"
-      }
-    },
-    {
-      "name": "booleans",
-      "scope": ["constant.language.boolean", "constant.language.json"],
-      "settings": {
-        "foreground": "#D0A215"
-      }
-    },
-    {
-      "name": "operators",
-      "scope": ["keyword.operator"],
-      "settings": {
-        "foreground": "#D14D41"
-      }
-    },
-    {
-      "name": "macros",
-      "scope": ["entity.name.function.preprocessor", "meta.preprocessor"],
-      "settings": {
-        "foreground": "#4385BE"
-      }
-    },
-    {
-      "name": "preprocessor",
-      "scope": ["meta.preprocessor"],
-      "settings": {
-        "foreground": "#CE5D97"
-      }
-    },
-    {
-      "name": "urls",
-      "scope": ["markup.underline.link"],
-      "settings": {
-        "foreground": "#4385BE"
-      }
-    },
-    {
-      "name": "tags",
-      "scope": ["entity.name.tag"],
-      "settings": {
-        "foreground": "#4385BE"
-      }
-    },
-    {
-      "name": "jsxTags",
-      "scope": ["support.class.component"],
-      "settings": {
-        "foreground": "#CE5D97"
-      }
-    },
-    {
-      "name": "attributes",
-      "scope": ["entity.other.attribute-name", "meta.attribute"],
-      "settings": {
-        "foreground": "#D0A215"
-      }
-    },
-    {
-      "name": "types",
-      "scope": ["support.type"],
-      "settings": {
-        "foreground": "#D0A215"
-      }
-    },
-    {
-      "name": "constants",
-      "scope": ["variable.other.constant", "variable.readonly"],
-      "settings": {
-        "foreground": "#CECDC3"
-      }
-    },
-    {
-      "name": "labels",
-      "scope": ["entity.name.label", "punctuation.definition.label"],
-      "settings": {
-        "foreground": "#CE5D97"
-      }
-    },
-    {
-      "name": "namespaces",
-      "scope": [
-        "entity.name.namespace",
-        "storage.modifier.namespace",
-        "markup.bold.markdown"
-      ],
-      "settings": {
-        "foreground": "#D0A215"
-      }
-    },
-    {
-      "name": "modules",
-      "scope": ["entity.name.module", "storage.modifier.module"],
-      "settings": {
-        "foreground": "#D14D41"
-      }
-    },
-    {
-      "name": "typeParameters",
-      "scope": ["variable.type.parameter", "variable.parameter.type"],
-      "settings": {
-        "foreground": "#DA702C"
-      }
-    },
-    {
-      "name": "exceptions",
-      "scope": ["keyword.control.exception", "keyword.control.trycatch"],
-      "settings": {
-        "foreground": "#CE5D97"
-      }
-    },
-    {
-      "name": "decorators",
-      "scope": [
-        "meta.decorator",
-        "punctuation.decorator",
-        "entity.name.function.decorator"
-      ],
-      "settings": {
-        "foreground": "#D0A215"
-      }
-    },
-    {
-      "name": "calls",
-      "scope": ["variable.function"],
-      "settings": {
-        "foreground": "#CECDC3"
-      }
-    },
-    {
-      "name": "punctuation",
-      "scope": [
-        "punctuation",
-        "punctuation.terminator",
-        "punctuation.definition.tag",
-        "punctuation.separator",
-        "punctuation.definition.string",
-        "punctuation.section.block"
-      ],
-      "settings": {
-        "foreground": "#878580"
-      }
-    },
-    {
-      "name": "yellow",
-      "scope": [
-        "storage.type.numeric.go",
-        "storage.type.byte.go",
-        "storage.type.boolean.go",
-        "storage.type.string.go",
-        "storage.type.uintptr.go",
-        "storage.type.error.go",
-        "storage.type.rune.go",
-        "constant.language.go",
-        "support.class.dart",
-        "keyword.other.documentation",
-        "storage.modifier.import.java",
-        "punctuation.definition.list.begin.markdown",
-        "punctuation.definition.quote.begin.markdown",
-        "meta.separator.markdown",
-        "entity.name.section.markdown"
-      ],
-      "settings": {
-        "foreground": "#D0A215"
-      }
-    },
-    {
-      "name": "green",
-      "scope": [],
-      "settings": {
-        "foreground": "#879A39"
-      }
-    },
-    {
-      "name": "cyan",
-      "scope": [
-        "markup.italic.markdown",
-        "support.type.python",
-        "variable.legacy.builtin.python",
-        "support.constant.property-value.css",
-        "storage.modifier.attribute.swift"
-      ],
-      "settings": {
-        "foreground": "#3AA99F"
-      }
-    },
-    {
-      "name": "blue",
-      "scope": [],
-      "settings": {
-        "foreground": "#4385BE"
-      }
-    },
-    {
-      "name": "purple",
-      "scope": ["keyword.channel.go", "keyword.other.platform.os.swift"],
-      "settings": {
-        "foreground": "#8B7EC8"
-      }
-    },
-    {
-      "name": "magenta",
-      "scope": ["punctuation.definition.heading.markdown"],
-      "settings": {
-        "foreground": "#CE5D97"
-      }
-    },
-    {
-      "name": "red",
-      "scope": [],
-      "settings": {
-        "foreground": "#D14D41"
-      }
-    },
-    {
-      "name": "orange",
-      "scope": [],
-      "settings": {
-        "foreground": "#DA702C"
-      }
-    }
-  ]
-}
diff --git a/packages/ui/src/lib/shiki/themes/flexoki-light.json b/packages/ui/src/lib/shiki/themes/flexoki-light.json
deleted file mode 100644
index 05e618b3..00000000
--- a/packages/ui/src/lib/shiki/themes/flexoki-light.json
+++ /dev/null
@@ -1,547 +0,0 @@
-{
-  "name": "Flexoki",
-  "type": "light",
-  "colors": {
-    "editor.background": "#FFFCF0",
-    "editor.foreground": "#100F0F",
-    "editor.hoverHighlightBackground": "#DAD8CE",
-    "editor.lineHighlightBackground": "#F2F0E5",
-    "editor.selectionBackground": "#100F0F44",
-    "editor.selectionHighlightBackground": "#100F0F44",
-    "editor.findMatchBackground": "#D0A215",
-    "editor.findMatchHighlightBackground": "#D0A215cc",
-    "editor.findRangeHighlightBackground": "#F2F0E5",
-    "editor.inactiveSelectionBackground": "#E6E4D9",
-    "editor.lineHighlightBorder": "#E6E4D9",
-    "editor.rangeHighlightBackground": "#CECDC3",
-    "notifications.background": "#E6E4D9",
-    "editorInlayHint.typeBackground": "#DAD8CE",
-    "editorInlayHint.typeForeground": "#100F0F",
-    "editorWhitespace.foreground": "#CECDC3",
-    "editorIndentGuide.background1": "#DAD8CE",
-    "editorHoverWidget.background": "#E6E4D9",
-    "editorLineNumber.activeForeground": "#100F0F",
-    "editorLineNumber.foreground": "#CECDC3",
-    "editorGutter.background": "#FFFCF0",
-    "editorGutter.modifiedBackground": "#24837B",
-    "editorGutter.addedBackground": "#66800B",
-    "editorGutter.deletedBackground": "#AF3029",
-    "editorBracketMatch.background": "#E6E4D9",
-    "editorBracketMatch.border": "#DAD8CE",
-    "editorError.foreground": "#AF3029",
-    "editorWarning.foreground": "#BC5215",
-    "editorInfo.foreground": "#205EA6",
-    "diffEditor.insertedTextBackground": "#879A3999",
-    "diffEditor.removedTextBackground": "#D14D4199",
-    "editorGroupHeader.tabsBackground": "#FFFCF0",
-    "editorGroup.border": "#DAD8CE",
-    "tab.activeBackground": "#FFFCF0",
-    "tab.inactiveBackground": "#F2F0E5",
-    "tab.inactiveForeground": "#6F6E69",
-    "tab.activeForeground": "#100F0F",
-    "tab.hoverBackground": "#DAD8CE",
-    "tab.unfocusedHoverBackground": "#DAD8CE",
-    "tab.border": "#DAD8CE",
-    "tab.activeModifiedBorder": "#AD8301",
-    "tab.inactiveModifiedBorder": "#205EA6",
-    "tab.unfocusedActiveModifiedBorder": "#D0A215",
-    "tab.unfocusedInactiveModifiedBorder": "#4385BE",
-    "editorWidget.background": "#F2F0E5",
-    "editorWidget.border": "#DAD8CE",
-    "editorSuggestWidget.background": "#FFFCF0",
-    "editorSuggestWidget.border": "#DAD8CE",
-    "editorSuggestWidget.foreground": "#100F0F",
-    "editorSuggestWidget.highlightForeground": "#6F6E69",
-    "editorSuggestWidget.selectedBackground": "#DAD8CE",
-    "peekView.border": "#DAD8CE",
-    "peekViewEditor.background": "#FFFCF0",
-    "peekViewEditor.matchHighlightBackground": "#CECDC3",
-    "peekViewResult.background": "#F2F0E5",
-    "peekViewResult.fileForeground": "#100F0F",
-    "peekViewResult.lineForeground": "#6F6E69",
-    "peekViewResult.matchHighlightBackground": "#CECDC3",
-    "peekViewResult.selectionBackground": "#E6E4D9",
-    "peekViewResult.selectionForeground": "#B7B5AC",
-    "peekViewTitle.background": "#DAD8CE",
-    "peekViewTitleDescription.foreground": "#6F6E69",
-    "peekViewTitleLabel.foreground": "#100F0F",
-    "merge.currentHeaderBackground": "#66800B",
-    "merge.currentContentBackground": "#879A39",
-    "merge.incomingHeaderBackground": "#24837B",
-    "merge.incomingContentBackground": "#3AA99F",
-    "merge.border": "#DAD8CE",
-    "merge.commonContentBackground": "#CECDC3",
-    "merge.commonHeaderBackground": "#DAD8CE",
-    "panel.background": "#FFFCF0",
-    "panel.border": "#DAD8CE",
-    "panelTitle.activeBorder": "#CECDC3",
-    "panelTitle.activeForeground": "#100F0F",
-    "panelTitle.inactiveForeground": "#6F6E69",
-    "statusBar.background": "#FFFCF0",
-    "statusBar.foreground": "#100F0F",
-    "statusBar.border": "#DAD8CE",
-    "statusBar.debuggingBackground": "#AF3029",
-    "statusBar.debuggingForeground": "#100F0F",
-    "statusBar.noFolderBackground": "#CECDC3",
-    "statusBar.noFolderForeground": "#B7B5AC",
-    "titleBar.activeBackground": "#FFFCF0",
-    "titleBar.activeForeground": "#100F0F",
-    "titleBar.inactiveBackground": "#F2F0E5",
-    "titleBar.inactiveForeground": "#6F6E69",
-    "titleBar.border": "#DAD8CE",
-    "menu.foreground": "#100F0F",
-    "menu.background": "#FFFCF0",
-    "menu.selectionForeground": "#100F0F",
-    "menu.selectionBackground": "#DAD8CE",
-    "menu.border": "#DAD8CE",
-    "editorInlayHint.foreground": "#6F6E69",
-    "editorInlayHint.background": "#DAD8CE",
-    "terminal.foreground": "#100F0F",
-    "terminal.background": "#FFFCF0",
-    "terminalCursor.foreground": "#100F0F",
-    "terminalCursor.background": "#FFFCF0",
-    "terminal.ansiRed": "#AF3029",
-    "terminal.ansiGreen": "#66800B",
-    "terminal.ansiYellow": "#AD8301",
-    "terminal.ansiBlue": "#205EA6",
-    "terminal.ansiMagenta": "#24837B",
-    "terminal.ansiCyan": "#24837B",
-    "activityBar.background": "#FFFCF0",
-    "activityBar.foreground": "#100F0F",
-    "activityBar.inactiveForeground": "#6F6E69",
-    "activityBar.activeBorder": "#100F0F",
-    "activityBar.border": "#DAD8CE",
-    "sideBar.background": "#FFFCF0",
-    "sideBar.foreground": "#100F0F",
-    "sideBar.border": "#DAD8CE",
-    "sideBarTitle.foreground": "#100F0F",
-    "sideBarSectionHeader.background": "#F2F0E5",
-    "sideBarSectionHeader.foreground": "#100F0F",
-    "sideBarSectionHeader.border": "#DAD8CE",
-    "sideBar.activeBackground": "#CECDC3",
-    "sideBar.activeForeground": "#100F0F",
-    "sideBar.hoverBackground": "#DAD8CE",
-    "sideBar.hoverForeground": "#6F6E69",
-    "sideBar.folderIcon.foreground": "#66800B",
-    "sideBar.fileIcon.foreground": "#205EA6",
-    "list.warningForeground": "#BC5215",
-    "list.errorForeground": "#AF3029",
-    "list.inactiveSelectionBackground": "#DAD8CE",
-    "list.activeSelectionBackground": "#CECDC3",
-    "list.inactiveSelectionForeground": "#100F0F",
-    "list.activeSelectionForeground": "#100F0F",
-    "list.hoverForeground": "#100F0F",
-    "list.hoverBackground": "#DAD8CE",
-    "input.background": "#F2F0E5",
-    "input.foreground": "#100F0F",
-    "input.border": "#DAD8CE",
-    "input.placeholderForeground": "#6F6E69",
-    "inputOption.activeBorder": "#DAD8CE",
-    "inputOption.activeBackground": "#E6E4D9",
-    "inputOption.activeForeground": "#100F0F",
-    "inputValidation.infoBackground": "#24837B",
-    "inputValidation.infoBorder": "#3AA99F",
-    "inputValidation.warningBackground": "#BC5215",
-    "inputValidation.warningBorder": "#DA702C",
-    "inputValidation.errorBackground": "#AF3029",
-    "inputValidation.errorBorder": "#D14D41",
-    "dropdown.background": "#F2F0E5",
-    "dropdown.foreground": "#100F0F",
-    "dropdown.border": "#DAD8CE",
-    "dropdown.listBackground": "#FFFCF0",
-    "badge.background": "#24837B",
-    "activityBarBadge.background": "#24837B",
-    "button.background": "#24837B",
-    "button.foreground": "#FFFCF0",
-    "badge.foreground": "#FFFCF0",
-    "activityBarBadge.foreground": "#FFFCF0"
-  },
-  "tokenColors": [
-    {
-      "name": "plain",
-      "scope": ["source", "support.type.property-name.css"],
-      "settings": {
-        "foreground": "#100F0F"
-      }
-    },
-    {
-      "name": "classes",
-      "scope": ["entity.name.type.class"],
-      "settings": {
-        "foreground": "#BC5215"
-      }
-    },
-    {
-      "name": "interfaces",
-      "scope": ["entity.name.type.interface", "entity.name.type"],
-      "settings": {
-        "foreground": "#AD8301"
-      }
-    },
-    {
-      "name": "structs",
-      "scope": ["entity.name.type.struct"],
-      "settings": {
-        "foreground": "#BC5215"
-      }
-    },
-    {
-      "name": "enums",
-      "scope": ["entity.name.type.enum"],
-      "settings": {
-        "foreground": "#BC5215"
-      }
-    },
-    {
-      "name": "keys",
-      "scope": ["meta.object-literal.key", "support.type.property-name"],
-      "settings": {
-        "foreground": "#BC5215"
-      }
-    },
-    {
-      "name": "methods",
-      "scope": ["entity.name.function.method", "meta.function.method"],
-      "settings": {
-        "foreground": "#66800B"
-      }
-    },
-    {
-      "name": "functions",
-      "scope": [
-        "entity.name.function",
-        "support.function",
-        "meta.function-call.generic"
-      ],
-      "settings": {
-        "foreground": "#BC5215",
-        "fontStyle": "bold"
-      }
-    },
-    {
-      "name": "variables",
-      "scope": ["variable", "meta.variable", "variable.other.object.property"],
-      "settings": {
-        "foreground": "#100F0F"
-      }
-    },
-    {
-      "name": "variablesOther",
-      "scope": ["variable.other.object", "variable.other.readwrite.alias"],
-      "settings": {
-        "foreground": "#66800B"
-      }
-    },
-    {
-      "name": "globalVariables",
-      "scope": ["variable.other.global", "variable.language.this"],
-      "settings": {
-        "foreground": "#A02F6F"
-      }
-    },
-    {
-      "name": "localVariables",
-      "scope": ["variable.other.local"],
-      "settings": {
-        "foreground": "#E6E4D9"
-      }
-    },
-    {
-      "name": "parameters",
-      "scope": ["variable.parameter", "meta.parameter"],
-      "settings": {
-        "foreground": "#100F0F"
-      }
-    },
-    {
-      "name": "properties",
-      "scope": ["variable.other.property", "meta.property"],
-      "settings": {
-        "foreground": "#205EA6"
-      }
-    },
-    {
-      "name": "strings",
-      "scope": [
-        "string",
-        "string.other.link",
-        "markup.inline.raw.string.markdown"
-      ],
-      "settings": {
-        "foreground": "#24837B"
-      }
-    },
-    {
-      "name": "stringEscapeSequences",
-      "scope": ["constant.character.escape", "constant.other.placeholder"],
-      "settings": {
-        "foreground": "#100F0F"
-      }
-    },
-    {
-      "name": "keywords",
-      "scope": ["keyword"],
-      "settings": {
-        "foreground": "#66800B"
-      }
-    },
-    {
-      "name": "keywordsControl",
-      "scope": [
-        "keyword.control.import",
-        "keyword.control.from",
-        "keyword.import"
-      ],
-      "settings": {
-        "foreground": "#AF3029"
-      }
-    },
-    {
-      "name": "storageModifiers",
-      "scope": ["storage.modifier", "keyword.modifier", "storage.type"],
-      "settings": {
-        "foreground": "#205EA6"
-      }
-    },
-    {
-      "name": "comments",
-      "scope": ["comment", "punctuation.definition.comment"],
-      "settings": {
-        "foreground": "#6F6E69"
-      }
-    },
-    {
-      "name": "docComments",
-      "scope": ["comment.documentation", "comment.line.documentation"],
-      "settings": {
-        "foreground": "#B7B5AC"
-      }
-    },
-    {
-      "name": "numbers",
-      "scope": ["constant.numeric"],
-      "settings": {
-        "foreground": "#5E409D"
-      }
-    },
-    {
-      "name": "booleans",
-      "scope": ["constant.language.boolean", "constant.language.json"],
-      "settings": {
-        "foreground": "#AD8301"
-      }
-    },
-    {
-      "name": "operators",
-      "scope": ["keyword.operator"],
-      "settings": {
-        "foreground": "#AF3029"
-      }
-    },
-    {
-      "name": "macros",
-      "scope": ["entity.name.function.preprocessor", "meta.preprocessor"],
-      "settings": {
-        "foreground": "#205EA6"
-      }
-    },
-    {
-      "name": "preprocessor",
-      "scope": ["meta.preprocessor"],
-      "settings": {
-        "foreground": "#A02F6F"
-      }
-    },
-    {
-      "name": "urls",
-      "scope": ["markup.underline.link"],
-      "settings": {
-        "foreground": "#205EA6"
-      }
-    },
-    {
-      "name": "tags",
-      "scope": ["entity.name.tag"],
-      "settings": {
-        "foreground": "#205EA6"
-      }
-    },
-    {
-      "name": "jsxTags",
-      "scope": ["support.class.component"],
-      "settings": {
-        "foreground": "#A02F6F"
-      }
-    },
-    {
-      "name": "attributes",
-      "scope": ["entity.other.attribute-name", "meta.attribute"],
-      "settings": {
-        "foreground": "#AD8301"
-      }
-    },
-    {
-      "name": "types",
-      "scope": ["support.type"],
-      "settings": {
-        "foreground": "#AD8301"
-      }
-    },
-    {
-      "name": "constants",
-      "scope": ["variable.other.constant", "variable.readonly"],
-      "settings": {
-        "foreground": "#100F0F"
-      }
-    },
-    {
-      "name": "labels",
-      "scope": ["entity.name.label", "punctuation.definition.label"],
-      "settings": {
-        "foreground": "#A02F6F"
-      }
-    },
-    {
-      "name": "namespaces",
-      "scope": [
-        "entity.name.namespace",
-        "storage.modifier.namespace",
-        "markup.bold.markdown"
-      ],
-      "settings": {
-        "foreground": "#AD8301"
-      }
-    },
-    {
-      "name": "modules",
-      "scope": ["entity.name.module", "storage.modifier.module"],
-      "settings": {
-        "foreground": "#AF3029"
-      }
-    },
-    {
-      "name": "typeParameters",
-      "scope": ["variable.type.parameter", "variable.parameter.type"],
-      "settings": {
-        "foreground": "#BC5215"
-      }
-    },
-    {
-      "name": "exceptions",
-      "scope": ["keyword.control.exception", "keyword.control.trycatch"],
-      "settings": {
-        "foreground": "#A02F6F"
-      }
-    },
-    {
-      "name": "decorators",
-      "scope": [
-        "meta.decorator",
-        "punctuation.decorator",
-        "entity.name.function.decorator"
-      ],
-      "settings": {
-        "foreground": "#AD8301"
-      }
-    },
-    {
-      "name": "calls",
-      "scope": ["variable.function"],
-      "settings": {
-        "foreground": "#100F0F"
-      }
-    },
-    {
-      "name": "punctuation",
-      "scope": [
-        "punctuation",
-        "punctuation.terminator",
-        "punctuation.definition.tag",
-        "punctuation.separator",
-        "punctuation.definition.string",
-        "punctuation.section.block"
-      ],
-      "settings": {
-        "foreground": "#6F6E69"
-      }
-    },
-    {
-      "name": "yellow",
-      "scope": [
-        "storage.type.numeric.go",
-        "storage.type.byte.go",
-        "storage.type.boolean.go",
-        "storage.type.string.go",
-        "storage.type.uintptr.go",
-        "storage.type.error.go",
-        "storage.type.rune.go",
-        "constant.language.go",
-        "support.class.dart",
-        "keyword.other.documentation",
-        "storage.modifier.import.java",
-        "punctuation.definition.list.begin.markdown",
-        "punctuation.definition.quote.begin.markdown",
-        "meta.separator.markdown",
-        "entity.name.section.markdown"
-      ],
-      "settings": {
-        "foreground": "#AD8301"
-      }
-    },
-    {
-      "name": "green",
-      "scope": [],
-      "settings": {
-        "foreground": "#66800B"
-      }
-    },
-    {
-      "name": "cyan",
-      "scope": [
-        "markup.italic.markdown",
-        "support.type.python",
-        "variable.legacy.builtin.python",
-        "support.constant.property-value.css",
-        "storage.modifier.attribute.swift"
-      ],
-      "settings": {
-        "foreground": "#24837B"
-      }
-    },
-    {
-      "name": "blue",
-      "scope": [],
-      "settings": {
-        "foreground": "#205EA6"
-      }
-    },
-    {
-      "name": "purple",
-      "scope": ["keyword.channel.go", "keyword.other.platform.os.swift"],
-      "settings": {
-        "foreground": "#5E409D"
-      }
-    },
-    {
-      "name": "magenta",
-      "scope": ["punctuation.definition.heading.markdown"],
-      "settings": {
-        "foreground": "#A02F6F"
-      }
-    },
-    {
-      "name": "red",
-      "scope": [],
-      "settings": {
-        "foreground": "#AF3029"
-      }
-    },
-    {
-      "name": "orange",
-      "scope": [],
-      "settings": {
-        "foreground": "#BC5215"
-      }
-    }
-  ]
-}
diff --git a/packages/ui/src/lib/shiki/vscodeTextMateTheme.ts b/packages/ui/src/lib/shiki/vscodeTextMateTheme.ts
new file mode 100644
index 00000000..0df959ef
--- /dev/null
+++ b/packages/ui/src/lib/shiki/vscodeTextMateTheme.ts
@@ -0,0 +1,14 @@
+export type VSCodeTokenColorRule = {
+  name?: string;
+  scope?: string | string[];
+  settings: Record<string, string | undefined>;
+};
+
+export type VSCodeTextMateTheme = {
+  name: string;
+  type: 'dark' | 'light';
+  colors?: Record<string, string>;
+  tokenColors?: VSCodeTokenColorRule[];
+  semanticHighlighting?: boolean;
+  semanticTokenColors?: Record<string, string>;
+};
diff --git a/packages/ui/src/lib/theme/themes/aura-dark.json b/packages/ui/src/lib/theme/themes/aura-dark.json
new file mode 100644
index 00000000..f2e79cc6
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/aura-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "aura-dark",
+    "name": "Aura",
+    "description": "Aura",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#A277FF",
+      "hover": "#8D68DD",
+      "active": "#B08BFF",
+      "foreground": "#15141B",
+      "muted": "#A277FF80",
+      "emphasis": "#8D68DD"
+    },
+    "surface": {
+      "background": "#15141B",
+      "foreground": "#EDECEE",
+      "muted": "#1A1921",
+      "mutedForeground": "#9c9393",
+      "elevated": "#201e2b",
+      "elevatedForeground": "#EDECEE",
+      "overlay": "#FFFFFF20",
+      "subtle": "#25232f"
+    },
+    "interactive": {
+      "border": "#2D2B38",
+      "borderHover": "#47415a",
+      "borderFocus": "#4E496C",
+      "selection": "#95abe02d",
+      "selectionForeground": "#FFFFFF",
+      "focus": "#A277FF",
+      "focusRing": "#A277FF40",
+      "cursor": "#FFFFFF",
+      "hover": "#7887ac2d",
+      "active": "#95abe02d"
+    },
+    "status": {
+      "error": "#FF6767",
+      "errorForeground": "#15141B",
+      "errorBackground": "#FF676720",
+      "errorBorder": "#FF676750",
+      "warning": "#FFCA85",
+      "warningForeground": "#15141B",
+      "warningBackground": "#FFCA8520",
+      "warningBorder": "#FFCA8550",
+      "success": "#61FFCA",
+      "successForeground": "#15141B",
+      "successBackground": "#61FFCA20",
+      "successBorder": "#61FFCA50",
+      "info": "#82E2FF",
+      "infoForeground": "#15141B",
+      "infoBackground": "#82E2FF20",
+      "infoBorder": "#82E2FF50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#1A1921",
+        "foreground": "#EDECEE",
+        "comment": "#6D6D6D",
+        "keyword": "#A277FF",
+        "string": "#61FFCA",
+        "number": "#FF6767",
+        "function": "#A277FF",
+        "variable": "#EDECEE",
+        "type": "#FFCA85",
+        "operator": "#FF6767"
+      },
+      "tokens": {
+        "boolean": "#FFCA85",
+        "class": "#A277FF",
+        "className": "#A277FF",
+        "commentDoc": "#606061",
+        "constant": "#82E2FF",
+        "decorator": "#FFCA85",
+        "enum": "#A277FF",
+        "exception": "#FF6767",
+        "functionCall": "#A277FF",
+        "interface": "#FFCA85",
+        "jsxTag": "#A277FF",
+        "key": "#A277FF",
+        "keywordImport": "#FF6767",
+        "label": "#FF6767",
+        "macro": "#82E2FF",
+        "method": "#61FFCA",
+        "module": "#FF6767",
+        "namespace": "#FFCA85",
+        "parameter": "#EDECEE",
+        "preprocessor": "#FF6767",
+        "punctuation": "#6D6D6D",
+        "regex": "#61FFCA",
+        "storageModifier": "#82E2FF",
+        "stringEscape": "#FFFFFF",
+        "struct": "#A277FF",
+        "tag": "#A277FF",
+        "tagAttribute": "#FFCA85",
+        "tagAttributeValue": "#61FFCA",
+        "typeParameter": "#FFCA85",
+        "url": "#A277FF",
+        "variableGlobal": "#A277FF",
+        "variableLocal": "#121118",
+        "variableOther": "#61FFCA",
+        "variableProperty": "#82E2FF"
+      },
+      "highlights": {
+        "diffAdded": "#61FFCA",
+        "diffAddedBackground": "#162620",
+        "diffModified": "#82E2FF",
+        "diffModifiedBackground": "#1E1D2A",
+        "diffRemoved": "#FF6767",
+        "diffRemovedBackground": "#26161A",
+        "lineNumber": "#3E3A56",
+        "lineNumberActive": "#FFFFFF"
+      }
+    },
+    "markdown": {
+      "heading1": "#e7d7f4",
+      "heading2": "#e7e0ee",
+      "heading3": "#ece7f0",
+      "heading4": "#EDECEE",
+      "link": "#A277FF",
+      "linkHover": "#F694FF",
+      "inlineCode": "#61FFCA",
+      "inlineCodeBackground": "#1A1921",
+      "blockquote": "#6D6D6D",
+      "blockquoteBorder": "#2D2B38",
+      "listMarker": "#A277FF99"
+    },
+    "chat": {
+      "userMessage": "#EDECEE",
+      "userMessageBackground": "#393647",
+      "assistantMessage": "#EDECEE",
+      "assistantMessageBackground": "#15141B",
+      "timestamp": "#6D6D6D",
+      "divider": "#2D2B38"
+    },
+    "tools": {
+      "background": "#1A192180",
+      "border": "#43415480",
+      "headerHover": "#0F0E14",
+      "icon": "#6D6D6D",
+      "title": "#EDECEE",
+      "description": "#6D6D6D",
+      "edit": {
+        "added": "#61FFCA",
+        "addedBackground": "#61FFCA25",
+        "removed": "#FF6767",
+        "removedBackground": "#FF676725",
+        "lineNumber": "#3E3A56"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/aura-light.json b/packages/ui/src/lib/theme/themes/aura-light.json
new file mode 100644
index 00000000..4339f5b3
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/aura-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "aura-light",
+    "name": "Aura",
+    "description": "Aura",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#A277FF",
+      "hover": "#B38FFF",
+      "active": "#8D68DD",
+      "foreground": "#F5F0FF",
+      "muted": "#A277FF80",
+      "emphasis": "#B38FFF"
+    },
+    "surface": {
+      "background": "#F5F0FF",
+      "foreground": "#2D2640",
+      "muted": "#EFE8FC",
+      "mutedForeground": "#5C5270",
+      "elevated": "#f1ebfb",
+      "elevatedForeground": "#2D2640",
+      "overlay": "#15101F20",
+      "subtle": "#EFE8FC"
+    },
+    "interactive": {
+      "border": "#E0D6F2",
+      "borderHover": "#D5C9EB",
+      "borderFocus": "#A593C8",
+      "selection": "#bdb2d74c",
+      "selectionForeground": "#15101F",
+      "focus": "#A277FF",
+      "focusRing": "#A277FF40",
+      "cursor": "#15101F",
+      "hover": "#bdb2d72d",
+      "active": "#bdb2d74c"
+    },
+    "status": {
+      "error": "#D94F4F",
+      "errorForeground": "#F5F0FF",
+      "errorBackground": "#D94F4F20",
+      "errorBorder": "#D94F4F50",
+      "warning": "#D9A24A",
+      "warningForeground": "#F5F0FF",
+      "warningBackground": "#D9A24A20",
+      "warningBorder": "#D9A24A50",
+      "success": "#40BF7A",
+      "successForeground": "#F5F0FF",
+      "successBackground": "#40BF7A20",
+      "successBorder": "#40BF7A50",
+      "info": "#5BB8D9",
+      "infoForeground": "#F5F0FF",
+      "infoBackground": "#5BB8D920",
+      "infoBorder": "#5BB8D950"
+    },
+    "syntax": {
+      "base": {
+        "background": "#EFE8FC",
+        "foreground": "#2D2640",
+        "comment": "#5C5270",
+        "keyword": "#A277FF",
+        "string": "#40BF7A",
+        "number": "#D94F4F",
+        "function": "#A277FF",
+        "variable": "#2D2640",
+        "type": "#D9A24A",
+        "operator": "#D94F4F"
+      },
+      "tokens": {
+        "boolean": "#D9A24A",
+        "class": "#A277FF",
+        "className": "#A277FF",
+        "commentDoc": "#A9A1B8",
+        "constant": "#5BB8D9",
+        "decorator": "#D9A24A",
+        "enum": "#A277FF",
+        "exception": "#D94F4F",
+        "functionCall": "#A277FF",
+        "interface": "#D9A24A",
+        "jsxTag": "#A277FF",
+        "key": "#A277FF",
+        "keywordImport": "#D94F4F",
+        "label": "#D94F4F",
+        "macro": "#5BB8D9",
+        "method": "#40BF7A",
+        "module": "#D94F4F",
+        "namespace": "#D9A24A",
+        "parameter": "#2D2640",
+        "preprocessor": "#D94F4F",
+        "punctuation": "#5C5270",
+        "regex": "#40BF7A",
+        "storageModifier": "#5BB8D9",
+        "stringEscape": "#15101F",
+        "struct": "#A277FF",
+        "tag": "#A277FF",
+        "tagAttribute": "#D9A24A",
+        "tagAttributeValue": "#40BF7A",
+        "typeParameter": "#D9A24A",
+        "url": "#A277FF",
+        "variableGlobal": "#A277FF",
+        "variableLocal": "#FAF7FF",
+        "variableOther": "#40BF7A",
+        "variableProperty": "#5BB8D9"
+      },
+      "highlights": {
+        "diffAdded": "#40BF7A",
+        "diffAddedBackground": "#E8F5ED",
+        "diffModified": "#5BB8D9",
+        "diffModifiedBackground": "#E8E4F5",
+        "diffRemoved": "#D94F4F",
+        "diffRemovedBackground": "#FAE8E8",
+        "lineNumber": "#C0B3DC",
+        "lineNumberActive": "#15101F"
+      }
+    },
+    "markdown": {
+      "heading1": "#A277FF",
+      "heading2": "#A277FF",
+      "heading3": "#D9A24A",
+      "heading4": "#2D2640",
+      "link": "#A277FF",
+      "linkHover": "#C17AC8",
+      "inlineCode": "#40BF7A",
+      "inlineCodeBackground": "#EFE8FC",
+      "blockquote": "#6D6D6D",
+      "blockquoteBorder": "#E0D6F2",
+      "listMarker": "#A277FF99"
+    },
+    "chat": {
+      "userMessage": "#2D2640",
+      "userMessageBackground": "#EFE8FC",
+      "assistantMessage": "#2D2640",
+      "assistantMessageBackground": "#F5F0FF",
+      "timestamp": "#5C5270",
+      "divider": "#E0D6F2"
+    },
+    "tools": {
+      "background": "#EFE8FC80",
+      "border": "#bdb5cd80",
+      "headerHover": "#FDFCFF",
+      "icon": "#5C5270",
+      "title": "#2D2640",
+      "description": "#5C5270",
+      "edit": {
+        "added": "#40BF7A",
+        "addedBackground": "#40BF7A25",
+        "removed": "#D94F4F",
+        "removedBackground": "#D94F4F25",
+        "lineNumber": "#C0B3DC"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/ayu-dark.json b/packages/ui/src/lib/theme/themes/ayu-dark.json
new file mode 100644
index 00000000..f3e67953
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/ayu-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "ayu-dark",
+    "name": "Ayu",
+    "description": "Ayu",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#3FB7E3",
+      "hover": "#389FC5",
+      "active": "#5BC1E7",
+      "foreground": "#0F1419",
+      "muted": "#3FB7E380",
+      "emphasis": "#389FC5"
+    },
+    "surface": {
+      "background": "#0F1419",
+      "foreground": "#D6DAE0",
+      "muted": "#18222C",
+      "mutedForeground": "#A3ADBA",
+      "elevated": "#17202a",
+      "elevatedForeground": "#D6DAE0",
+      "overlay": "#FBFBFD20",
+      "subtle": "#1e252d"
+    },
+    "interactive": {
+      "border": "#2B3440",
+      "borderHover": "#323C49",
+      "borderFocus": "#56647C",
+      "selection": "#c7c7df1d",
+      "selectionForeground": "#FBFBFD",
+      "focus": "#3FB7E3",
+      "focusRing": "#3FB7E340",
+      "cursor": "#FBFBFD",
+      "hover": "#b6b6cc1d",
+      "active": "#b8b8ce1d"
+    },
+    "status": {
+      "error": "#F58572",
+      "errorForeground": "#0F1419",
+      "errorBackground": "#F5857220",
+      "errorBorder": "#F5857250",
+      "warning": "#E4A75C",
+      "warningForeground": "#0F1419",
+      "warningBackground": "#E4A75C20",
+      "warningBorder": "#E4A75C50",
+      "success": "#78D05C",
+      "successForeground": "#0F1419",
+      "successBackground": "#78D05C20",
+      "successBorder": "#78D05C50",
+      "info": "#66C6F1",
+      "infoForeground": "#0F1419",
+      "infoBackground": "#66C6F120",
+      "infoBorder": "#66C6F150"
+    },
+    "syntax": {
+      "base": {
+        "background": "#18222C",
+        "foreground": "#D6DAE0",
+        "comment": "#A3ADBA",
+        "keyword": "#3FB7E3",
+        "string": "#B1C74A",
+        "number": "#F2856F",
+        "function": "#3FB7E3",
+        "variable": "#D6DAE0",
+        "type": "#E4A75C",
+        "operator": "#F2856F"
+      },
+      "tokens": {
+        "boolean": "#E4A75C",
+        "class": "#3FB7E3",
+        "className": "#3FB7E3",
+        "commentDoc": "#8D96A2",
+        "constant": "#66C6F1",
+        "decorator": "#E4A75C",
+        "enum": "#3FB7E3",
+        "exception": "#F2856F",
+        "functionCall": "#3FB7E3",
+        "interface": "#E4A75C",
+        "jsxTag": "#3FB7E3",
+        "key": "#3FB7E3",
+        "keywordImport": "#F2856F",
+        "label": "#F2856F",
+        "macro": "#66C6F1",
+        "method": "#78D05C",
+        "module": "#F2856F",
+        "namespace": "#E4A75C",
+        "parameter": "#D6DAE0",
+        "preprocessor": "#F2856F",
+        "punctuation": "#A3ADBA",
+        "regex": "#B1C74A",
+        "storageModifier": "#66C6F1",
+        "stringEscape": "#FBFBFD",
+        "struct": "#3FB7E3",
+        "tag": "#3FB7E3",
+        "tagAttribute": "#E4A75C",
+        "tagAttributeValue": "#B1C74A",
+        "typeParameter": "#E4A75C",
+        "url": "#66C6F1",
+        "variableGlobal": "#3FB7E3",
+        "variableLocal": "#0B1015",
+        "variableOther": "#78D05C",
+        "variableProperty": "#66C6F1"
+      },
+      "highlights": {
+        "diffAdded": "#78D05C",
+        "diffAddedBackground": "#132F27",
+        "diffModified": "#66C6F1",
+        "diffModifiedBackground": "#1B2632",
+        "diffRemoved": "#F58572",
+        "diffRemovedBackground": "#361D20",
+        "lineNumber": "#415063",
+        "lineNumberActive": "#FBFBFD"
+      }
+    },
+    "markdown": {
+      "heading1": "#D6DAE0",
+      "heading2": "#D6DAE0",
+      "heading3": "#D6DAE0",
+      "heading4": "#D6DAE0",
+      "link": "#66C6F1",
+      "linkHover": "#3FB7E3",
+      "inlineCode": "#B1C74A",
+      "inlineCodeBackground": "#161d23",
+      "blockquote": "#E4A75C",
+      "blockquoteBorder": "#2B3440",
+      "listMarker": "#3FB7E399"
+    },
+    "chat": {
+      "userMessage": "#D6DAE0",
+      "userMessageBackground": "#1d2935",
+      "assistantMessage": "#D6DAE0",
+      "assistantMessageBackground": "#0F1419",
+      "timestamp": "#A3ADBA",
+      "divider": "#2B3440"
+    },
+    "tools": {
+      "background": "#18222C80",
+      "border": "#414e5f80",
+      "headerHover": "#080C10",
+      "icon": "#A3ADBA",
+      "title": "#D6DAE0",
+      "description": "#A3ADBA",
+      "edit": {
+        "added": "#78D05C",
+        "addedBackground": "#78D05C25",
+        "removed": "#F58572",
+        "removedBackground": "#F5857225",
+        "lineNumber": "#415063"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/ayu-light.json b/packages/ui/src/lib/theme/themes/ayu-light.json
new file mode 100644
index 00000000..8342cc32
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/ayu-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "ayu-light",
+    "name": "Ayu",
+    "description": "Ayu",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#4AA8C8",
+      "hover": "#6EB8D1",
+      "active": "#4394B0",
+      "foreground": "#FDFAF4",
+      "muted": "#4AA8C880",
+      "emphasis": "#6EB8D1"
+    },
+    "surface": {
+      "background": "#FDFAF4",
+      "foreground": "#394049",
+      "muted": "#f7f3eb",
+      "mutedForeground": "#6a727c",
+      "elevated": "#faf6ed",
+      "elevatedForeground": "#4F5964",
+      "overlay": "#1B232B20",
+      "subtle": "#FFF7E5"
+    },
+    "interactive": {
+      "border": "#E6DDCF",
+      "borderHover": "#DCD3C5",
+      "borderFocus": "#B09F8F",
+      "selection": "#9fb2c43e",
+      "selectionForeground": "#171e25",
+      "focus": "#4AA8C8",
+      "focusRing": "#4AA8C840",
+      "cursor": "#1B232B",
+      "hover": "#9fb2c42c",
+      "active": "#9fb2c43e"
+    },
+    "status": {
+      "error": "#E6656A",
+      "errorForeground": "#FDFAF4",
+      "errorBackground": "#E6656A20",
+      "errorBorder": "#E6656A50",
+      "warning": "#EA9F41",
+      "warningForeground": "#FDFAF4",
+      "warningBackground": "#EA9F4120",
+      "warningBorder": "#EA9F4150",
+      "success": "#5FB978",
+      "successForeground": "#FDFAF4",
+      "successBackground": "#5FB97820",
+      "successBorder": "#5FB97850",
+      "info": "#2F9BCE",
+      "infoForeground": "#FDFAF4",
+      "infoBackground": "#2F9BCE20",
+      "infoBorder": "#2F9BCE50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#FCF9F3",
+        "foreground": "#4F5964",
+        "comment": "#77818D",
+        "keyword": "#4AA8C8",
+        "string": "#7FAD00",
+        "number": "#EF7D71",
+        "function": "#4AA8C8",
+        "variable": "#4F5964",
+        "type": "#ED982E",
+        "operator": "#EF7D71"
+      },
+      "tokens": {
+        "boolean": "#ED982E",
+        "class": "#4AA8C8",
+        "className": "#4AA8C8",
+        "commentDoc": "#BABEC1",
+        "constant": "#2F9BCE",
+        "decorator": "#ED982E",
+        "enum": "#4AA8C8",
+        "exception": "#EF7D71",
+        "functionCall": "#4AA8C8",
+        "interface": "#ED982E",
+        "jsxTag": "#4AA8C8",
+        "key": "#4AA8C8",
+        "keywordImport": "#EF7D71",
+        "label": "#EF7D71",
+        "macro": "#2F9BCE",
+        "method": "#5FB978",
+        "module": "#EF7D71",
+        "namespace": "#ED982E",
+        "parameter": "#4F5964",
+        "preprocessor": "#EF7D71",
+        "punctuation": "#77818D",
+        "regex": "#7FAD00",
+        "storageModifier": "#2F9BCE",
+        "stringEscape": "#1B232B",
+        "struct": "#4AA8C8",
+        "tag": "#4AA8C8",
+        "tagAttribute": "#ED982E",
+        "tagAttributeValue": "#7FAD00",
+        "typeParameter": "#ED982E",
+        "url": "#2F9BCE",
+        "variableGlobal": "#4AA8C8",
+        "variableLocal": "#FBF8F2",
+        "variableOther": "#5FB978",
+        "variableProperty": "#2F9BCE"
+      },
+      "highlights": {
+        "diffAdded": "#5FB978",
+        "diffAddedBackground": "#EEF5E4",
+        "diffModified": "#2F9BCE",
+        "diffModifiedBackground": "#E3EDF3",
+        "diffRemoved": "#E6656A",
+        "diffRemovedBackground": "#FDE5E5",
+        "lineNumber": "#C6BFAF",
+        "lineNumberActive": "#1B232B"
+      }
+    },
+    "markdown": {
+      "heading1": "#394049",
+      "heading2": "#394049",
+      "heading3": "#394049",
+      "heading4": "#394049",
+      "link": "#2F9BCE",
+      "linkHover": "#4AA8C8",
+      "inlineCode": "#7FAD00",
+      "inlineCodeBackground": "#FCF9F3",
+      "blockquote": "#ED982E",
+      "blockquoteBorder": "#E6DDCF",
+      "listMarker": "#4AA8C899"
+    },
+    "chat": {
+      "userMessage": "#4F5964",
+      "userMessageBackground": "#fff7e5",
+      "assistantMessage": "#4F5964",
+      "assistantMessageBackground": "#FDFAF4",
+      "timestamp": "#77818D",
+      "divider": "#E6DDCF"
+    },
+    "tools": {
+      "background": "#FCF9F380",
+      "border": "#cec6b980",
+      "headerHover": "#FAF7F1",
+      "icon": "#77818D",
+      "title": "#4F5964",
+      "description": "#77818D",
+      "edit": {
+        "added": "#5FB978",
+        "addedBackground": "#5FB97825",
+        "removed": "#E6656A",
+        "removedBackground": "#E6656A25",
+        "lineNumber": "#C6BFAF"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/carbonfox-dark.json b/packages/ui/src/lib/theme/themes/carbonfox-dark.json
new file mode 100644
index 00000000..2cfeb243
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/carbonfox-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "carbonfox-dark",
+    "name": "Carbonfox",
+    "description": "Carbonfox",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#33B1FF",
+      "hover": "#2F9ADC",
+      "active": "#52BDFF",
+      "foreground": "#161616",
+      "muted": "#33B1FF80",
+      "emphasis": "#2F9ADC"
+    },
+    "surface": {
+      "background": "#161616",
+      "foreground": "#F2F4F8",
+      "muted": "#222222",
+      "mutedForeground": "#b4b3b3",
+      "elevated": "#222222",
+      "elevatedForeground": "#F2F4F8",
+      "overlay": "#FFFFFF20",
+      "subtle": "#292828"
+    },
+    "interactive": {
+      "border": "#393939",
+      "borderHover": "#4C4C4C",
+      "borderFocus": "#4589FF",
+      "selection": "#ffffff20",
+      "selectionForeground": "#FFFFFF",
+      "focus": "#4589FF",
+      "focusRing": "#4589FF40",
+      "cursor": "#FFFFFF",
+      "hover": "#ffffff12",
+      "active": "#ffffff12"
+    },
+    "status": {
+      "error": "#FF8389",
+      "errorForeground": "#161616",
+      "errorBackground": "#FF838920",
+      "errorBorder": "#FF838950",
+      "warning": "#F1C21B",
+      "warningForeground": "#161616",
+      "warningBackground": "#F1C21B20",
+      "warningBorder": "#F1C21B50",
+      "success": "#42BE65",
+      "successForeground": "#161616",
+      "successBackground": "#42BE6520",
+      "successBorder": "#42BE6550",
+      "info": "#78A9FF",
+      "infoForeground": "#161616",
+      "infoBackground": "#78A9FF20",
+      "infoBorder": "#78A9FF50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#262626",
+        "foreground": "#F2F4F8",
+        "comment": "#8D8D8D",
+        "keyword": "#78A9FF",
+        "string": "#42BE65",
+        "number": "#FF8389",
+        "function": "#78A9FF",
+        "variable": "#F2F4F8",
+        "type": "#08BDBA",
+        "operator": "#FF8389"
+      },
+      "tokens": {
+        "boolean": "#08BDBA",
+        "class": "#78A9FF",
+        "className": "#78A9FF",
+        "commentDoc": "#7B7B7B",
+        "constant": "#BE95FF",
+        "decorator": "#08BDBA",
+        "enum": "#78A9FF",
+        "exception": "#FF8389",
+        "functionCall": "#78A9FF",
+        "interface": "#08BDBA",
+        "jsxTag": "#78A9FF",
+        "key": "#78A9FF",
+        "keywordImport": "#FF8389",
+        "label": "#FF8389",
+        "macro": "#78A9FF",
+        "method": "#42BE65",
+        "module": "#FF8389",
+        "namespace": "#08BDBA",
+        "parameter": "#F2F4F8",
+        "preprocessor": "#FF8389",
+        "punctuation": "#8D8D8D",
+        "regex": "#42BE65",
+        "storageModifier": "#78A9FF",
+        "stringEscape": "#FFFFFF",
+        "struct": "#78A9FF",
+        "tag": "#78A9FF",
+        "tagAttribute": "#08BDBA",
+        "tagAttributeValue": "#42BE65",
+        "typeParameter": "#08BDBA",
+        "url": "#33B1FF",
+        "variableGlobal": "#78A9FF",
+        "variableLocal": "#0D0D0D",
+        "variableOther": "#42BE65",
+        "variableProperty": "#BE95FF"
+      },
+      "highlights": {
+        "diffAdded": "#42BE65",
+        "diffAddedBackground": "#0E3A22",
+        "diffModified": "#78A9FF",
+        "diffModifiedBackground": "#78A9FF20",
+        "diffRemoved": "#FF8389",
+        "diffRemovedBackground": "#4D1A1F",
+        "lineNumber": "#4C4C4C",
+        "lineNumberActive": "#FFFFFF"
+      }
+    },
+    "markdown": {
+      "heading1": "#F2F4F8",
+      "heading2": "#F2F4F8",
+      "heading3": "#F2F4F8",
+      "heading4": "#F2F4F8",
+      "link": "#33B1FF",
+      "linkHover": "#78A9FF",
+      "inlineCode": "#42BE65",
+      "inlineCodeBackground": "#1e1e1e",
+      "blockquote": "#8D8D8D",
+      "blockquoteBorder": "#393939",
+      "listMarker": "#33B1FF99"
+    },
+    "chat": {
+      "userMessage": "#F2F4F8",
+      "userMessageBackground": "#262626",
+      "assistantMessage": "#F2F4F8",
+      "assistantMessageBackground": "#161616",
+      "timestamp": "#8D8D8D",
+      "divider": "#393939"
+    },
+    "tools": {
+      "background": "#26262680",
+      "border": "#4e4c4c80",
+      "headerHover": "#000000",
+      "icon": "#8D8D8D",
+      "title": "#F2F4F8",
+      "description": "#8D8D8D",
+      "edit": {
+        "added": "#42BE65",
+        "addedBackground": "#42BE6525",
+        "removed": "#FF8389",
+        "removedBackground": "#FF838925",
+        "lineNumber": "#4C4C4C"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/carbonfox-light.json b/packages/ui/src/lib/theme/themes/carbonfox-light.json
new file mode 100644
index 00000000..064c56bd
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/carbonfox-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "carbonfox-light",
+    "name": "Carbonfox",
+    "description": "Carbonfox",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#0072C3",
+      "hover": "#338ECF",
+      "active": "#0061A6",
+      "foreground": "#FFFFFF",
+      "muted": "#0072C380",
+      "emphasis": "#338ECF"
+    },
+    "surface": {
+      "background": "#FFFFFF",
+      "foreground": "#161616",
+      "muted": "#F4F4F4",
+      "mutedForeground": "#525252",
+      "elevated": "#f4f4f7",
+      "elevatedForeground": "#161616",
+      "overlay": "#00000020",
+      "subtle": "#f2f2f8"
+    },
+    "interactive": {
+      "border": "#DCDCDC",
+      "borderHover": "#D0D0D0",
+      "borderFocus": "#0F62FE",
+      "selection": "#cacfd87f",
+      "selectionForeground": "#000000",
+      "focus": "#0F62FE",
+      "focusRing": "#0F62FE40",
+      "cursor": "#000000",
+      "hover": "#43424214",
+      "active": "#43424212"
+    },
+    "status": {
+      "error": "#DA1E28",
+      "errorForeground": "#FFFFFF",
+      "errorBackground": "#DA1E2820",
+      "errorBorder": "#DA1E2850",
+      "warning": "#F1C21B",
+      "warningForeground": "#FFFFFF",
+      "warningBackground": "#F1C21B20",
+      "warningBorder": "#F1C21B50",
+      "success": "#198038",
+      "successForeground": "#FFFFFF",
+      "successBackground": "#19803820",
+      "successBorder": "#19803850",
+      "info": "#0043CE",
+      "infoForeground": "#FFFFFF",
+      "infoBackground": "#0043CE20",
+      "infoBorder": "#0043CE50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#F4F4F4",
+        "foreground": "#161616",
+        "comment": "#525252",
+        "keyword": "#0043CE",
+        "string": "#198038",
+        "number": "#DA1E28",
+        "function": "#0043CE",
+        "variable": "#161616",
+        "type": "#007D79",
+        "operator": "#DA1E28"
+      },
+      "tokens": {
+        "boolean": "#007D79",
+        "class": "#0043CE",
+        "className": "#0043CE",
+        "commentDoc": "#A9A9A9",
+        "constant": "#6929C4",
+        "decorator": "#007D79",
+        "enum": "#0043CE",
+        "exception": "#DA1E28",
+        "functionCall": "#0043CE",
+        "interface": "#007D79",
+        "jsxTag": "#0043CE",
+        "key": "#0043CE",
+        "keywordImport": "#DA1E28",
+        "label": "#DA1E28",
+        "macro": "#0043CE",
+        "method": "#198038",
+        "module": "#DA1E28",
+        "namespace": "#007D79",
+        "parameter": "#161616",
+        "preprocessor": "#DA1E28",
+        "punctuation": "#525252",
+        "regex": "#198038",
+        "storageModifier": "#0043CE",
+        "stringEscape": "#000000",
+        "struct": "#0043CE",
+        "tag": "#0043CE",
+        "tagAttribute": "#007D79",
+        "tagAttributeValue": "#198038",
+        "typeParameter": "#007D79",
+        "url": "#0072C3",
+        "variableGlobal": "#0043CE",
+        "variableLocal": "#E8E8E8",
+        "variableOther": "#198038",
+        "variableProperty": "#6929C4"
+      },
+      "highlights": {
+        "diffAdded": "#198038",
+        "diffAddedBackground": "#19803820",
+        "diffModified": "#0043CE",
+        "diffModifiedBackground": "#0043CE20",
+        "diffRemoved": "#DA1E28",
+        "diffRemovedBackground": "#DA1E2820",
+        "lineNumber": "#D0D0D0",
+        "lineNumberActive": "#000000"
+      }
+    },
+    "markdown": {
+      "heading1": "#161616",
+      "heading2": "#161616",
+      "heading3": "#161616",
+      "heading4": "#161616",
+      "link": "#0072C3",
+      "linkHover": "#0043CE",
+      "inlineCode": "#198038",
+      "inlineCodeBackground": "#F4F4F4",
+      "blockquote": "#525252",
+      "blockquoteBorder": "#DCDCDC",
+      "listMarker": "#0072C399"
+    },
+    "chat": {
+      "userMessage": "#161616",
+      "userMessageBackground": "#f4f4f7",
+      "assistantMessage": "#161616",
+      "assistantMessageBackground": "#FFFFFF",
+      "timestamp": "#525252",
+      "divider": "#DCDCDC"
+    },
+    "tools": {
+      "background": "#F4F4F480",
+      "border": "#bdbbbb80",
+      "headerHover": "#DCDCDC",
+      "icon": "#525252",
+      "title": "#161616",
+      "description": "#525252",
+      "edit": {
+        "added": "#198038",
+        "addedBackground": "#19803825",
+        "removed": "#DA1E28",
+        "removedBackground": "#DA1E2825",
+        "lineNumber": "#D0D0D0"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/catppuccin-dark.json b/packages/ui/src/lib/theme/themes/catppuccin-dark.json
new file mode 100644
index 00000000..134d03c3
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/catppuccin-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "catppuccin-dark",
+    "name": "Catppuccin",
+    "description": "Catppuccin",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#7d8fff",
+      "hover": "#9EA6DF",
+      "active": "#BEC6FE",
+      "foreground": "#1E1E2E",
+      "muted": "#B4BEFE80",
+      "emphasis": "#9EA6DF"
+    },
+    "surface": {
+      "background": "#1E1E2E",
+      "foreground": "#CDD6F4",
+      "muted": "#2a273b",
+      "mutedForeground": "#c3cbea",
+      "elevated": "#282841",
+      "elevatedForeground": "#CDD6F4",
+      "overlay": "#F4F2FF20",
+      "subtle": "#2f2f50"
+    },
+    "interactive": {
+      "border": "#35324A",
+      "borderHover": "#393655",
+      "borderFocus": "#575379",
+      "selection": "#8883ae5c",
+      "selectionForeground": "#F4F2FF",
+      "focus": "#B4BEFE",
+      "focusRing": "#B4BEFE40",
+      "cursor": "#F4F2FF",
+      "hover": "#a19ace20",
+      "active": "#a19ace20"
+    },
+    "status": {
+      "error": "#F38BA8",
+      "errorForeground": "#1E1E2E",
+      "errorBackground": "#F38BA820",
+      "errorBorder": "#F38BA850",
+      "warning": "#F4B8E4",
+      "warningForeground": "#1E1E2E",
+      "warningBackground": "#F4B8E420",
+      "warningBorder": "#F4B8E450",
+      "success": "#A6D189",
+      "successForeground": "#1E1E2E",
+      "successBackground": "#A6D18920",
+      "successBorder": "#A6D18950",
+      "info": "#89DCEB",
+      "infoForeground": "#1E1E2E",
+      "infoBackground": "#89DCEB20",
+      "infoBorder": "#89DCEB50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#211F31",
+        "foreground": "#CDD6F4",
+        "comment": "#A6ADC8",
+        "keyword": "#B4BEFE",
+        "string": "#A6E3A1",
+        "number": "#F38BA8",
+        "function": "#B4BEFE",
+        "variable": "#CDD6F4",
+        "type": "#F9E2AF",
+        "operator": "#F38BA8"
+      },
+      "tokens": {
+        "boolean": "#F9E2AF",
+        "class": "#B4BEFE",
+        "className": "#B4BEFE",
+        "commentDoc": "#9298B1",
+        "constant": "#89DCEB",
+        "decorator": "#F9E2AF",
+        "enum": "#B4BEFE",
+        "exception": "#F38BA8",
+        "functionCall": "#B4BEFE",
+        "interface": "#F9E2AF",
+        "jsxTag": "#B4BEFE",
+        "key": "#B4BEFE",
+        "keywordImport": "#F38BA8",
+        "label": "#F38BA8",
+        "macro": "#89DCEB",
+        "method": "#A6D189",
+        "module": "#F38BA8",
+        "namespace": "#F9E2AF",
+        "parameter": "#CDD6F4",
+        "preprocessor": "#F38BA8",
+        "punctuation": "#A6ADC8",
+        "regex": "#A6E3A1",
+        "storageModifier": "#89DCEB",
+        "stringEscape": "#F4F2FF",
+        "struct": "#B4BEFE",
+        "tag": "#B4BEFE",
+        "tagAttribute": "#F9E2AF",
+        "tagAttributeValue": "#A6E3A1",
+        "typeParameter": "#F9E2AF",
+        "url": "#89DCEB",
+        "variableGlobal": "#B4BEFE",
+        "variableLocal": "#1C1C29",
+        "variableOther": "#A6D189",
+        "variableProperty": "#89DCEB"
+      },
+      "highlights": {
+        "diffAdded": "#A6D189",
+        "diffAddedBackground": "#1D2C30",
+        "diffModified": "#89DCEB",
+        "diffModifiedBackground": "#232538",
+        "diffRemoved": "#F38BA8",
+        "diffRemovedBackground": "#2C1F2A",
+        "lineNumber": "#47436D",
+        "lineNumberActive": "#F4F2FF"
+      }
+    },
+    "markdown": {
+      "heading1": "#CDD6F4",
+      "heading2": "#CDD6F4",
+      "heading3": "#CDD6F4",
+      "heading4": "#CDD6F4",
+      "link": "#89DCEB",
+      "linkHover": "#B4BEFE",
+      "inlineCode": "#A6E3A1",
+      "inlineCodeBackground": "#2d2a42",
+      "blockquote": "#F9E2AF",
+      "blockquoteBorder": "#35324A",
+      "listMarker": "#B4BEFE99"
+    },
+    "chat": {
+      "userMessage": "#CDD6F4",
+      "userMessageBackground": "#3a3a5b",
+      "assistantMessage": "#CDD6F4",
+      "assistantMessageBackground": "#1E1E2E",
+      "timestamp": "#A6ADC8",
+      "divider": "#35324A"
+    },
+    "tools": {
+      "background": "#211F3180",
+      "border": "#534e7180",
+      "headerHover": "#191926",
+      "icon": "#A6ADC8",
+      "title": "#CDD6F4",
+      "description": "#A6ADC8",
+      "edit": {
+        "added": "#A6D189",
+        "addedBackground": "#A6D18925",
+        "removed": "#F38BA8",
+        "removedBackground": "#F38BA825",
+        "lineNumber": "#47436D"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/catppuccin-light.json b/packages/ui/src/lib/theme/themes/catppuccin-light.json
new file mode 100644
index 00000000..bb865048
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/catppuccin-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "catppuccin-light",
+    "name": "Catppuccin",
+    "description": "Catppuccin",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#7287FD",
+      "hover": "#8C99F6",
+      "active": "#6677DD",
+      "foreground": "#F5E0DC",
+      "muted": "#7287FD80",
+      "emphasis": "#8C99F6"
+    },
+    "surface": {
+      "background": "#fff6f4",
+      "foreground": "#2e314a",
+      "muted": "#f8ebe9",
+      "mutedForeground": "#6C6F85",
+      "elevated": "#fbefea",
+      "elevatedForeground": "#4C4F69",
+      "overlay": "#1F1F2A20",
+      "subtle": "#FDEEEE"
+    },
+    "interactive": {
+      "border": "#E0CFD3",
+      "borderHover": "#D6C4C8",
+      "borderFocus": "#AB97A1",
+      "selection": "#ffffff",
+      "selectionForeground": "#1F1F2A",
+      "focus": "#7287FD",
+      "focusRing": "#7287FD40",
+      "cursor": "#1F1F2A",
+      "hover": "#ffffff8f",
+      "active": "#ffffff"
+    },
+    "status": {
+      "error": "#D20F39",
+      "errorForeground": "#F5E0DC",
+      "errorBackground": "#D20F3920",
+      "errorBorder": "#D20F3950",
+      "warning": "#DF8E1D",
+      "warningForeground": "#F5E0DC",
+      "warningBackground": "#DF8E1D20",
+      "warningBorder": "#DF8E1D50",
+      "success": "#40A02B",
+      "successForeground": "#F5E0DC",
+      "successBackground": "#40A02B20",
+      "successBorder": "#40A02B50",
+      "info": "#04A5E5",
+      "infoForeground": "#F5E0DC",
+      "infoBackground": "#04A5E520",
+      "infoBorder": "#04A5E550"
+    },
+    "syntax": {
+      "base": {
+        "background": "#F2D8D4",
+        "foreground": "#4C4F69",
+        "comment": "#6C6F85",
+        "keyword": "#7287FD",
+        "string": "#40A02B",
+        "number": "#D20F39",
+        "function": "#7287FD",
+        "variable": "#4C4F69",
+        "type": "#DF8E1D",
+        "operator": "#D20F39"
+      },
+      "tokens": {
+        "boolean": "#DF8E1D",
+        "class": "#7287FD",
+        "className": "#7287FD",
+        "commentDoc": "#B1A8B1",
+        "constant": "#04A5E5",
+        "decorator": "#DF8E1D",
+        "enum": "#7287FD",
+        "exception": "#D20F39",
+        "functionCall": "#7287FD",
+        "interface": "#DF8E1D",
+        "jsxTag": "#7287FD",
+        "key": "#7287FD",
+        "keywordImport": "#D20F39",
+        "label": "#D20F39",
+        "macro": "#04A5E5",
+        "method": "#40A02B",
+        "module": "#D20F39",
+        "namespace": "#DF8E1D",
+        "parameter": "#4C4F69",
+        "preprocessor": "#D20F39",
+        "punctuation": "#6C6F85",
+        "regex": "#40A02B",
+        "storageModifier": "#04A5E5",
+        "stringEscape": "#1F1F2A",
+        "struct": "#7287FD",
+        "tag": "#7287FD",
+        "tagAttribute": "#DF8E1D",
+        "tagAttributeValue": "#40A02B",
+        "typeParameter": "#DF8E1D",
+        "url": "#04A5E5",
+        "variableGlobal": "#7287FD",
+        "variableLocal": "#F9E8E4",
+        "variableOther": "#40A02B",
+        "variableProperty": "#04A5E5"
+      },
+      "highlights": {
+        "diffAdded": "#40A02B",
+        "diffAddedBackground": "#EDF5E6",
+        "diffModified": "#04A5E5",
+        "diffModifiedBackground": "#E4E2F6",
+        "diffRemoved": "#D20F39",
+        "diffRemovedBackground": "#FDE1E3",
+        "lineNumber": "#C2AEB4",
+        "lineNumberActive": "#1F1F2A"
+      }
+    },
+    "markdown": {
+      "heading1": "#2e314a",
+      "heading2": "#2e314a",
+      "heading3": "#2e314a",
+      "heading4": "#2e314a",
+      "link": "#04A5E5",
+      "linkHover": "#7287FD",
+      "inlineCode": "#40A02B",
+      "inlineCodeBackground": "#f6eeec",
+      "blockquote": "#DF8E1D",
+      "blockquoteBorder": "#E0CFD3",
+      "listMarker": "#7287FD99"
+    },
+    "chat": {
+      "userMessage": "#2e314a",
+      "userMessageBackground": "#ffffff",
+      "assistantMessage": "#4C4F69",
+      "assistantMessageBackground": "#F5E0DC",
+      "timestamp": "#6C6F85",
+      "divider": "#E0CFD3"
+    },
+    "tools": {
+      "background": "#F2D8D480",
+      "border": "#cbbec180",
+      "headerHover": "#FDEEEE",
+      "icon": "#6C6F85",
+      "title": "#4C4F69",
+      "description": "#6C6F85",
+      "edit": {
+        "added": "#40A02B",
+        "addedBackground": "#40A02B25",
+        "removed": "#D20F39",
+        "removedBackground": "#D20F3925",
+        "lineNumber": "#C2AEB4"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/dracula-dark.json b/packages/ui/src/lib/theme/themes/dracula-dark.json
new file mode 100644
index 00000000..5784ab4a
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/dracula-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "dracula-dark",
+    "name": "Dracula",
+    "description": "Dracula",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#BD93F9",
+      "hover": "#A480D8",
+      "active": "#C7A3FA",
+      "foreground": "#14151F",
+      "muted": "#BD93F980",
+      "emphasis": "#A480D8"
+    },
+    "surface": {
+      "background": "#14151F",
+      "foreground": "#F8F8F2",
+      "muted": "#181926",
+      "mutedForeground": "#B6B9E4",
+      "elevated": "#161722",
+      "elevatedForeground": "#F8F8F2",
+      "overlay": "#FFFFFF20",
+      "subtle": "#222436"
+    },
+    "interactive": {
+      "border": "#2D2F3C",
+      "borderHover": "#303244",
+      "borderFocus": "#4A4D6D",
+      "selection": "#30334b",
+      "selectionForeground": "#FFFFFF",
+      "focus": "#BD93F9",
+      "focusRing": "#BD93F940",
+      "cursor": "#FFFFFF",
+      "hover": "#30334ba3",
+      "active": "#30334b"
+    },
+    "status": {
+      "error": "#FF5555",
+      "errorForeground": "#14151F",
+      "errorBackground": "#FF555520",
+      "errorBorder": "#FF555550",
+      "warning": "#FFB86C",
+      "warningForeground": "#14151F",
+      "warningBackground": "#FFB86C20",
+      "warningBorder": "#FFB86C50",
+      "success": "#50FA7B",
+      "successForeground": "#14151F",
+      "successBackground": "#50FA7B20",
+      "successBorder": "#50FA7B50",
+      "info": "#8BE9FD",
+      "infoForeground": "#14151F",
+      "infoBackground": "#8BE9FD20",
+      "infoBorder": "#8BE9FD50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#181926",
+        "foreground": "#F8F8F2",
+        "comment": "#B6B9E4",
+        "keyword": "#BD93F9",
+        "string": "#50FA7B",
+        "number": "#FF79C6",
+        "function": "#BD93F9",
+        "variable": "#F8F8F2",
+        "type": "#FFB86C",
+        "operator": "#FF79C6"
+      },
+      "tokens": {
+        "boolean": "#FFB86C",
+        "class": "#BD93F9",
+        "className": "#BD93F9",
+        "commentDoc": "#9EA0C6",
+        "constant": "#8BE9FD",
+        "decorator": "#FFB86C",
+        "enum": "#BD93F9",
+        "exception": "#FF79C6",
+        "functionCall": "#BD93F9",
+        "interface": "#FFB86C",
+        "jsxTag": "#BD93F9",
+        "key": "#BD93F9",
+        "keywordImport": "#FF79C6",
+        "label": "#FF79C6",
+        "macro": "#8BE9FD",
+        "method": "#50FA7B",
+        "module": "#FF79C6",
+        "namespace": "#FFB86C",
+        "parameter": "#F8F8F2",
+        "preprocessor": "#FF79C6",
+        "punctuation": "#B6B9E4",
+        "regex": "#50FA7B",
+        "storageModifier": "#8BE9FD",
+        "stringEscape": "#FFFFFF",
+        "struct": "#BD93F9",
+        "tag": "#BD93F9",
+        "tagAttribute": "#FFB86C",
+        "tagAttributeValue": "#50FA7B",
+        "typeParameter": "#FFB86C",
+        "url": "#8BE9FD",
+        "variableGlobal": "#BD93F9",
+        "variableLocal": "#161722",
+        "variableOther": "#50FA7B",
+        "variableProperty": "#8BE9FD"
+      },
+      "highlights": {
+        "diffAdded": "#50FA7B",
+        "diffAddedBackground": "#1F2A2F",
+        "diffModified": "#8BE9FD",
+        "diffModifiedBackground": "#24253A",
+        "diffRemoved": "#FF5555",
+        "diffRemovedBackground": "#2D1F27",
+        "lineNumber": "#3B3D55",
+        "lineNumberActive": "#FFFFFF"
+      }
+    },
+    "markdown": {
+      "heading1": "#F8F8F2",
+      "heading2": "#F8F8F2",
+      "heading3": "#F8F8F2",
+      "heading4": "#F8F8F2",
+      "link": "#8BE9FD",
+      "linkHover": "#BD93F9",
+      "inlineCode": "#4aeb72",
+      "inlineCodeBackground": "#202132",
+      "blockquote": "#FFB86C",
+      "blockquoteBorder": "#2D2F3C",
+      "listMarker": "#BD93F999"
+    },
+    "chat": {
+      "userMessage": "#F8F8F2",
+      "userMessageBackground": "#222436",
+      "assistantMessage": "#F8F8F2",
+      "assistantMessageBackground": "#14151F",
+      "timestamp": "#B6B9E4",
+      "divider": "#2D2F3C"
+    },
+    "tools": {
+      "background": "#18192680",
+      "border": "#494c6180",
+      "headerHover": "#191A26",
+      "icon": "#B6B9E4",
+      "title": "#F8F8F2",
+      "description": "#B6B9E4",
+      "edit": {
+        "added": "#50FA7B",
+        "addedBackground": "#50FA7B25",
+        "removed": "#FF5555",
+        "removedBackground": "#FF555525",
+        "lineNumber": "#3B3D55"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/dracula-light.json b/packages/ui/src/lib/theme/themes/dracula-light.json
new file mode 100644
index 00000000..bf95f5c1
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/dracula-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "dracula-light",
+    "name": "Dracula",
+    "description": "Dracula",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#7C6BF5",
+      "hover": "#9587F4",
+      "active": "#6A5CD2",
+      "foreground": "#F8F8F2",
+      "muted": "#7C6BF580",
+      "emphasis": "#9587F4"
+    },
+    "surface": {
+      "background": "#F8F8F2",
+      "foreground": "#1F1F2F",
+      "muted": "#eff1eb",
+      "mutedForeground": "#52526B",
+      "elevated": "#eeeee5",
+      "elevatedForeground": "#1F1F2F",
+      "overlay": "#05040C20",
+      "subtle": "#edeee7"
+    },
+    "interactive": {
+      "border": "#E2E3DA",
+      "borderHover": "#D8D9D0",
+      "borderFocus": "#B0B2A7",
+      "selection": "#c2bcea63",
+      "selectionForeground": "#05040C",
+      "focus": "#7C6BF5",
+      "focusRing": "#7C6BF540",
+      "cursor": "#05040C",
+      "hover": "#c2bcea38",
+      "active": "#c2bcea63"
+    },
+    "status": {
+      "error": "#D9536F",
+      "errorForeground": "#F8F8F2",
+      "errorBackground": "#D9536F20",
+      "errorBorder": "#D9536F50",
+      "warning": "#F7A14D",
+      "warningForeground": "#F8F8F2",
+      "warningBackground": "#F7A14D20",
+      "warningBorder": "#F7A14D50",
+      "success": "#2FBF71",
+      "successForeground": "#F8F8F2",
+      "successBackground": "#2FBF7120",
+      "successBorder": "#2FBF7150",
+      "info": "#1D7FC5",
+      "infoForeground": "#F8F8F2",
+      "infoBackground": "#1D7FC520",
+      "infoBorder": "#1D7FC550"
+    },
+    "syntax": {
+      "base": {
+        "background": "#F1F2ED",
+        "foreground": "#1F1F2F",
+        "comment": "#52526B",
+        "keyword": "#7C6BF5",
+        "string": "#2FBF71",
+        "number": "#D16090",
+        "function": "#7C6BF5",
+        "variable": "#1F1F2F",
+        "type": "#F7A14D",
+        "operator": "#D16090"
+      },
+      "tokens": {
+        "boolean": "#F7A14D",
+        "class": "#7C6BF5",
+        "className": "#7C6BF5",
+        "commentDoc": "#A5A5AF",
+        "constant": "#1D7FC5",
+        "decorator": "#F7A14D",
+        "enum": "#7C6BF5",
+        "exception": "#D16090",
+        "functionCall": "#7C6BF5",
+        "interface": "#F7A14D",
+        "jsxTag": "#7C6BF5",
+        "key": "#7C6BF5",
+        "keywordImport": "#D16090",
+        "label": "#D16090",
+        "macro": "#1D7FC5",
+        "method": "#2FBF71",
+        "module": "#D16090",
+        "namespace": "#F7A14D",
+        "parameter": "#1F1F2F",
+        "preprocessor": "#D16090",
+        "punctuation": "#52526B",
+        "regex": "#2FBF71",
+        "storageModifier": "#1D7FC5",
+        "stringEscape": "#05040C",
+        "struct": "#7C6BF5",
+        "tag": "#7C6BF5",
+        "tagAttribute": "#F7A14D",
+        "tagAttributeValue": "#2FBF71",
+        "typeParameter": "#F7A14D",
+        "url": "#1D7FC5",
+        "variableGlobal": "#7C6BF5",
+        "variableLocal": "#F6F6F1",
+        "variableOther": "#2FBF71",
+        "variableProperty": "#1D7FC5"
+      },
+      "highlights": {
+        "diffAdded": "#2FBF71",
+        "diffAddedBackground": "#E4F5E6",
+        "diffModified": "#1D7FC5",
+        "diffModifiedBackground": "#DEDFE9",
+        "diffRemoved": "#D9536F",
+        "diffRemovedBackground": "#FAE4EB",
+        "lineNumber": "#C4C6BC",
+        "lineNumberActive": "#05040C"
+      }
+    },
+    "markdown": {
+      "heading1": "#1F1F2F",
+      "heading2": "#1F1F2F",
+      "heading3": "#1F1F2F",
+      "heading4": "#1F1F2F",
+      "link": "#1D7FC5",
+      "linkHover": "#7C6BF5",
+      "inlineCode": "#2FBF71",
+      "inlineCodeBackground": "#F1F2ED",
+      "blockquote": "#F7A14D",
+      "blockquoteBorder": "#E2E3DA",
+      "listMarker": "#7C6BF599"
+    },
+    "chat": {
+      "userMessage": "#1F1F2F",
+      "userMessageBackground": "#F1F2ED",
+      "assistantMessage": "#1F1F2F",
+      "assistantMessageBackground": "#F8F8F2",
+      "timestamp": "#52526B",
+      "divider": "#E2E3DA"
+    },
+    "tools": {
+      "background": "#F1F2ED80",
+      "border": "#E2E3DA80",
+      "headerHover": "#F2F2EC",
+      "icon": "#52526B",
+      "title": "#1F1F2F",
+      "description": "#52526B",
+      "edit": {
+        "added": "#2FBF71",
+        "addedBackground": "#2FBF7125",
+        "removed": "#D9536F",
+        "removedBackground": "#D9536F25",
+        "lineNumber": "#C4C6BC"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/flexoki-dark.json b/packages/ui/src/lib/theme/themes/flexoki-dark.json
new file mode 100644
index 00000000..3de7d684
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/flexoki-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "flexoki-dark",
+    "name": "Flexoki",
+    "description": "An inky color scheme for prose and code - dark variant",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": ["dark", "warm", "natural", "ink"]
+  },
+  "colors": {
+    "primary": {
+      "base": "#EC8B49",
+      "hover": "#DA702C",
+      "active": "#F9AE77",
+      "foreground": "#100F0F",
+      "muted": "#EC8B4980",
+      "emphasis": "#F9AE77"
+    },
+    "surface": {
+      "background": "#100F0F",
+      "foreground": "#CECDC3",
+      "muted": "#1C1B1A",
+      "mutedForeground": "#878580",
+      "elevated": "#1C1A19",
+      "elevatedForeground": "#CECDC3",
+      "overlay": "#00000080",
+      "subtle": "#1e1d1c"
+    },
+    "interactive": {
+      "border": "#343331",
+      "borderHover": "#403E3C",
+      "borderFocus": "#EC8B49",
+      "selection": "#f4f4f41f",
+      "selectionForeground": "#CECDC3",
+      "focus": "#EC8B49",
+      "focusRing": "#EC8B4950",
+      "cursor": "#CECDC3",
+      "hover": "#ffffff18",
+      "active": "#ffffff1f"
+    },
+    "status": {
+      "error": "#D14D41",
+      "errorForeground": "#100F0F",
+      "errorBackground": "#AF302920",
+      "errorBorder": "#AF302950",
+      "warning": "#DA702C",
+      "warningForeground": "#100F0F",
+      "warningBackground": "#BC521520",
+      "warningBorder": "#BC521550",
+      "success": "#A0AF54",
+      "successForeground": "#100F0F",
+      "successBackground": "#66800B20",
+      "successBorder": "#66800B50",
+      "info": "#4385BE",
+      "infoForeground": "#100F0F",
+      "infoBackground": "#205EA620",
+      "infoBorder": "#205EA650"
+    },
+    "syntax": {
+      "base": {
+        "background": "#1C1B1A",
+        "foreground": "#CECDC3",
+        "comment": "#878580",
+        "keyword": "#4385BE",
+        "string": "#3AA99F",
+        "number": "#8B7EC8",
+        "function": "#DA702C",
+        "variable": "#CECDC3",
+        "type": "#D0A215",
+        "operator": "#D14D41"
+      },
+      "tokens": {
+        "commentDoc": "#575653",
+        "stringEscape": "#CECDC3",
+        "keywordImport": "#D14D41",
+        "storageModifier": "#4385BE",
+        "functionCall": "#DA702C",
+        "method": "#879A39",
+        "variableProperty": "#4385BE",
+        "variableOther": "#879A39",
+        "variableGlobal": "#CE5D97",
+        "variableLocal": "#282726",
+        "parameter": "#CECDC3",
+        "constant": "#CECDC3",
+        "class": "#DA702C",
+        "className": "#DA702C",
+        "interface": "#D0A215",
+        "struct": "#DA702C",
+        "enum": "#DA702C",
+        "typeParameter": "#DA702C",
+        "namespace": "#D0A215",
+        "module": "#D14D41",
+        "tag": "#4385BE",
+        "jsxTag": "#CE5D97",
+        "tagAttribute": "#D0A215",
+        "tagAttributeValue": "#3AA99F",
+        "boolean": "#D0A215",
+        "decorator": "#D0A215",
+        "label": "#CE5D97",
+        "punctuation": "#878580",
+        "macro": "#4385BE",
+        "preprocessor": "#CE5D97",
+        "regex": "#3AA99F",
+        "url": "#4385BE",
+        "key": "#DA702C",
+        "exception": "#CE5D97"
+      },
+      "highlights": {
+        "diffAdded": "#879A39",
+        "diffAddedBackground": "#66800B20",
+        "diffRemoved": "#D14D41",
+        "diffRemovedBackground": "#AF302920",
+        "diffModified": "#4385BE",
+        "diffModifiedBackground": "#205EA620",
+        "lineNumber": "#403E3C",
+        "lineNumberActive": "#CECDC3"
+      }
+    },
+    "markdown": {
+      "heading1": "#fbf9e6",
+      "heading2": "#e6e4d2",
+      "heading3": "#CECDC3",
+      "heading4": "#CECDC3",
+      "link": "#4385BE",
+      "linkHover": "#205EA6",
+      "inlineCode": "#A0AF53",
+      "inlineCodeBackground": "#1C1B1A",
+      "blockquote": "#878580",
+      "blockquoteBorder": "#343331",
+      "listMarker": "#D0A21599"
+    },
+    "chat": {
+      "userMessage": "#CECDC3",
+      "userMessageBackground": "#2d1d15",
+      "assistantMessage": "#CECDC3",
+      "assistantMessageBackground": "#100F0F",
+      "timestamp": "#878580",
+      "divider": "#343331"
+    },
+    "tools": {
+      "background": "#1C1B1A50",
+      "border": "#42403e9d",
+      "headerHover": "#34333150",
+      "icon": "#aca7a1",
+      "title": "#CECDC3",
+      "description": "#878580",
+      "edit": {
+        "added": "#879A39",
+        "addedBackground": "#66800B25",
+        "removed": "#D14D41",
+        "removedBackground": "#AF302925",
+        "lineNumber": "#403E3C"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/flexoki-dark.ts b/packages/ui/src/lib/theme/themes/flexoki-dark.ts
deleted file mode 100644
index 9907d093..00000000
--- a/packages/ui/src/lib/theme/themes/flexoki-dark.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-import type { Theme } from '@/types/theme';
-
-export const flexokiDarkTheme: Theme = {
-  metadata: {
-    id: 'flexoki-dark',
-    name: 'Flexoki Dark',
-    description: 'An inky color scheme for prose and code - dark variant',
-    author: 'Steph Ango',
-    version: '1.0.0',
-    variant: 'dark',
-    tags: ['dark', 'warm', 'natural', 'ink']
-  },
-
-  colors: {
-
-    primary: {
-      base: '#EC8B49',
-      hover: '#DA702C',
-      active: '#F9AE77',
-      foreground: '#100F0F',
-      muted: '#EC8B4980',
-      emphasis: '#F9AE77'
-    },
-
-    surface: {
-      background: '#100F0F',
-      foreground: '#CECDC3',
-      muted: '#1C1B1A',
-      mutedForeground: '#878580',
-      elevated: '#282726',
-      elevatedForeground: '#CECDC3',
-      overlay: '#00000080',
-      subtle: '#343331'
-    },
-
-    interactive: {
-      border: '#343331',
-      borderHover: '#403E3C',
-      borderFocus: '#EC8B49',
-      selection: '#CECDC330',
-      selectionForeground: '#CECDC3',
-      focus: '#EC8B49',
-      focusRing: '#EC8B4950',
-      cursor: '#CECDC3',
-      hover: '#343331',
-      active: '#403E3C'
-    },
-
-    status: {
-      error: '#D14D41',
-      errorForeground: '#100F0F',
-      errorBackground: '#AF302920',
-      errorBorder: '#AF302950',
-
-      warning: '#DA702C',
-      warningForeground: '#100F0F',
-      warningBackground: '#BC521520',
-      warningBorder: '#BC521550',
-
-      success: '#A0AF54',
-      successForeground: '#100F0F',
-      successBackground: '#66800B20',
-      successBorder: '#66800B50',
-
-      info: '#4385BE',
-      infoForeground: '#100F0F',
-      infoBackground: '#205EA620',
-      infoBorder: '#205EA650'
-    },
-
-    syntax: {
-      base: {
-        background: '#1C1B1A',
-        foreground: '#CECDC3',
-        comment: '#878580',
-        keyword: '#4385BE',
-        string: '#3AA99F',
-        number: '#8B7EC8',
-        function: '#DA702C',
-        variable: '#CECDC3',
-        type: '#D0A215',
-        operator: '#D14D41'
-      },
-
-      tokens: {
-        commentDoc: '#575653',
-        stringEscape: '#CECDC3',
-        keywordImport: '#D14D41',
-        storageModifier: '#4385BE',
-        functionCall: '#DA702C',
-        method: '#879A39',
-        variableProperty: '#4385BE',
-        variableOther: '#879A39',
-        variableGlobal: '#CE5D97',
-        variableLocal: '#282726',
-        parameter: '#CECDC3',
-        constant: '#CECDC3',
-        class: '#DA702C',
-        className: '#DA702C',
-        interface: '#D0A215',
-        struct: '#DA702C',
-        enum: '#DA702C',
-        typeParameter: '#DA702C',
-        namespace: '#D0A215',
-        module: '#D14D41',
-        tag: '#4385BE',
-        jsxTag: '#CE5D97',
-        tagAttribute: '#D0A215',
-        tagAttributeValue: '#3AA99F',
-        boolean: '#D0A215',
-        decorator: '#D0A215',
-        label: '#CE5D97',
-        punctuation: '#878580',
-        macro: '#4385BE',
-        preprocessor: '#CE5D97',
-        regex: '#3AA99F',
-        url: '#4385BE',
-        key: '#DA702C',
-        exception: '#CE5D97'
-      },
-
-      highlights: {
-        diffAdded: '#879A39',
-        diffAddedBackground: '#66800B20',
-        diffRemoved: '#D14D41',
-        diffRemovedBackground: '#AF302920',
-        diffModified: '#4385BE',
-        diffModifiedBackground: '#205EA620',
-        lineNumber: '#403E3C',
-        lineNumberActive: '#CECDC3'
-      }
-    },
-
-    markdown: {
-      heading1: '#D0A215',
-      heading2: '#DA702C',
-      heading3: '#4385BE',
-      heading4: '#CECDC3',
-      link: '#4385BE',
-      linkHover: '#205EA6',
-      inlineCode: '#A0AF54',
-      inlineCodeBackground: '#1C1B1A',
-      blockquote: '#878580',
-      blockquoteBorder: '#343331',
-      listMarker: '#D0A21599'
-    },
-
-    chat: {
-      userMessage: '#CECDC3',
-      userMessageBackground: '#282726',
-      assistantMessage: '#CECDC3',
-      assistantMessageBackground: '#100F0F',
-      timestamp: '#878580',
-      divider: '#343331'
-    },
-
-    tools: {
-      background: '#1C1B1A50',
-      border: '#34333180',
-      headerHover: '#34333150',
-      icon: '#878580',
-       title: '#CECDC3',
-      description: '#878580',
-
-      edit: {
-        added: '#879A39',
-        addedBackground: '#66800B25',
-        removed: '#D14D41',
-        removedBackground: '#AF302925',
-        lineNumber: '#403E3C'
-      }
-    }
-  },
-
-  config: {
-    fonts: {
-      sans: '"IBM Plex Mono", monospace',
-      mono: '"IBM Plex Mono", monospace',
-      heading: '"IBM Plex Mono", monospace'
-    },
-
-    radius: {
-      none: '0',
-      sm: '0.125rem',
-      md: '0.375rem',
-      lg: '0.5rem',
-      xl: '0.75rem',
-      full: '9999px'
-    },
-
-    transitions: {
-      fast: '150ms ease',
-      normal: '250ms ease',
-      slow: '350ms ease'
-    }
-  }
-};
diff --git a/packages/ui/src/lib/theme/themes/flexoki-light.json b/packages/ui/src/lib/theme/themes/flexoki-light.json
new file mode 100644
index 00000000..171ac6ac
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/flexoki-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "flexoki-light",
+    "name": "Flexoki",
+    "description": "An inky color scheme for prose and code - light variant",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": ["light", "warm", "natural", "paper"]
+  },
+  "colors": {
+    "primary": {
+      "base": "#EC8B49",
+      "hover": "#F9AE77",
+      "active": "#DA702C",
+      "foreground": "#FFFCF0",
+      "muted": "#EC8B4980",
+      "emphasis": "#F9AE77"
+    },
+    "surface": {
+      "background": "#FFFCF0",
+      "foreground": "#100F0F",
+      "muted": "#F2F0E5",
+      "mutedForeground": "#474643",
+      "elevated": "#fdf6ec",
+      "elevatedForeground": "#100F0F",
+      "overlay": "#100F0F20",
+      "subtle": "#f9f1e4"
+    },
+    "interactive": {
+      "border": "#DAD8CE",
+      "borderHover": "#CECDC3",
+      "borderFocus": "#EC8B49",
+      "selection": "#76736f30",
+      "selectionForeground": "#100F0F",
+      "focus": "#EC8B49",
+      "focusRing": "#EC8B4940",
+      "cursor": "#100F0F",
+      "hover": "#76736f20",
+      "active": "#76736f20"
+    },
+    "status": {
+      "error": "#AF3029",
+      "errorForeground": "#FFFCF0",
+      "errorBackground": "#D14D4120",
+      "errorBorder": "#D14D4150",
+      "warning": "#BC5215",
+      "warningForeground": "#FFFCF0",
+      "warningBackground": "#DA702C20",
+      "warningBorder": "#DA702C50",
+      "success": "#66800B",
+      "successForeground": "#FFFCF0",
+      "successBackground": "#879A3920",
+      "successBorder": "#879A3950",
+      "info": "#205EA6",
+      "infoForeground": "#FFFCF0",
+      "infoBackground": "#4385BE20",
+      "infoBorder": "#4385BE50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#F2F0E5",
+        "foreground": "#100F0F",
+        "comment": "#6F6E69",
+        "keyword": "#205EA6",
+        "string": "#24837B",
+        "number": "#5E409D",
+        "function": "#BC5215",
+        "variable": "#100F0F",
+        "type": "#AD8301",
+        "operator": "#AF3029"
+      },
+      "tokens": {
+        "commentDoc": "#B7B5AC",
+        "stringEscape": "#100F0F",
+        "keywordImport": "#AF3029",
+        "storageModifier": "#205EA6",
+        "functionCall": "#BC5215",
+        "method": "#66800B",
+        "variableProperty": "#205EA6",
+        "variableOther": "#66800B",
+        "variableGlobal": "#A02F6F",
+        "variableLocal": "#E6E4D9",
+        "parameter": "#100F0F",
+        "constant": "#100F0F",
+        "class": "#BC5215",
+        "className": "#BC5215",
+        "interface": "#AD8301",
+        "struct": "#BC5215",
+        "enum": "#BC5215",
+        "typeParameter": "#BC5215",
+        "namespace": "#AD8301",
+        "module": "#AF3029",
+        "tag": "#205EA6",
+        "jsxTag": "#A02F6F",
+        "tagAttribute": "#AD8301",
+        "tagAttributeValue": "#24837B",
+        "boolean": "#AD8301",
+        "decorator": "#AD8301",
+        "label": "#A02F6F",
+        "punctuation": "#6F6E69",
+        "macro": "#205EA6",
+        "preprocessor": "#A02F6F",
+        "regex": "#24837B",
+        "url": "#205EA6",
+        "key": "#BC5215",
+        "exception": "#A02F6F"
+      },
+      "highlights": {
+        "diffAdded": "#66800B",
+        "diffAddedBackground": "#879A3920",
+        "diffRemoved": "#AF3029",
+        "diffRemovedBackground": "#D14D4120",
+        "diffModified": "#205EA6",
+        "diffModifiedBackground": "#4385BE20",
+        "lineNumber": "#CECDC3",
+        "lineNumberActive": "#100F0F"
+      }
+    },
+    "markdown": {
+      "heading1": "#100F0F",
+      "heading2": "#100F0F",
+      "heading3": "#100F0F",
+      "heading4": "#100F0F",
+      "link": "#205EA6",
+      "linkHover": "#4385BE",
+      "inlineCode": "#24837B",
+      "inlineCodeBackground": "#F2F0E5",
+      "blockquote": "#6F6E69",
+      "blockquoteBorder": "#DAD8CE",
+      "listMarker": "#AD830199"
+    },
+    "chat": {
+      "userMessage": "#100F0F",
+      "userMessageBackground": "#f9f1e4",
+      "assistantMessage": "#100F0F",
+      "assistantMessageBackground": "#FFFCF0",
+      "timestamp": "#6F6E69",
+      "divider": "#DAD8CE"
+    },
+    "tools": {
+      "background": "#F2F0E550",
+      "border": "#b4b2a980",
+      "headerHover": "#DAD8CE",
+      "icon": "#6F6E69",
+      "title": "#100F0F",
+      "description": "#6F6E69",
+      "edit": {
+        "added": "#66800B",
+        "addedBackground": "#66800B25",
+        "removed": "#AF3029",
+        "removedBackground": "#AF302925",
+        "lineNumber": "#CECDC3"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/flexoki-light.ts b/packages/ui/src/lib/theme/themes/flexoki-light.ts
deleted file mode 100644
index 7c3c65fd..00000000
--- a/packages/ui/src/lib/theme/themes/flexoki-light.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-import type { Theme } from '@/types/theme';
-
-export const flexokiLightTheme: Theme = {
-  metadata: {
-    id: 'flexoki-light',
-    name: 'Flexoki Light',
-    description: 'An inky color scheme for prose and code - light variant',
-    author: 'Steph Ango',
-    version: '1.0.0',
-    variant: 'light',
-    tags: ['light', 'warm', 'natural', 'paper']
-  },
-
-  colors: {
-
-    primary: {
-      base: '#EC8B49',
-      hover: '#F9AE77',
-      active: '#DA702C',
-      foreground: '#FFFCF0',
-      muted: '#EC8B4980',
-      emphasis: '#F9AE77'
-    },
-
-    surface: {
-      background: '#FFFCF0',
-      foreground: '#100F0F',
-      muted: '#F2F0E5',
-      mutedForeground: '#6F6E69',
-      elevated: '#E6E4D9',
-      elevatedForeground: '#100F0F',
-      overlay: '#100F0F20',
-      subtle: '#DAD8CE'
-    },
-
-    interactive: {
-      border: '#DAD8CE',
-      borderHover: '#CECDC3',
-      borderFocus: '#EC8B49',
-      selection: '#100F0F44',
-      selectionForeground: '#100F0F',
-      focus: '#EC8B49',
-      focusRing: '#EC8B4940',
-      cursor: '#100F0F',
-      hover: '#DAD8CE',
-      active: '#CECDC3'
-    },
-
-    status: {
-       error: '#AF3029',
-       errorForeground: '#FFFCF0',
-       errorBackground: '#D14D4120',
-       errorBorder: '#D14D4150',
-
-       warning: '#BC5215',
-      warningForeground: '#FFFCF0',
-      warningBackground: '#DA702C20',
-      warningBorder: '#DA702C50',
-
-      success: '#66800B',
-      successForeground: '#FFFCF0',
-      successBackground: '#879A3920',
-      successBorder: '#879A3950',
-
-      info: '#205EA6',
-      infoForeground: '#FFFCF0',
-      infoBackground: '#4385BE20',
-      infoBorder: '#4385BE50'
-    },
-
-    syntax: {
-      base: {
-        background: '#F2F0E5',
-        foreground: '#100F0F',
-        comment: '#6F6E69',
-        keyword: '#205EA6',
-        string: '#24837B',
-        number: '#5E409D',
-        function: '#BC5215',
-        variable: '#100F0F',
-        type: '#AD8301',
-        operator: '#AF3029'
-      },
-
-      tokens: {
-        commentDoc: '#B7B5AC',
-        stringEscape: '#100F0F',
-        keywordImport: '#AF3029',
-        storageModifier: '#205EA6',
-        functionCall: '#BC5215',
-        method: '#66800B',
-        variableProperty: '#205EA6',
-        variableOther: '#66800B',
-        variableGlobal: '#A02F6F',
-        variableLocal: '#E6E4D9',
-        parameter: '#100F0F',
-        constant: '#100F0F',
-        class: '#BC5215',
-        className: '#BC5215',
-        interface: '#AD8301',
-        struct: '#BC5215',
-        enum: '#BC5215',
-        typeParameter: '#BC5215',
-        namespace: '#AD8301',
-        module: '#AF3029',
-        tag: '#205EA6',
-        jsxTag: '#A02F6F',
-        tagAttribute: '#AD8301',
-        tagAttributeValue: '#24837B',
-        boolean: '#AD8301',
-        decorator: '#AD8301',
-        label: '#A02F6F',
-        punctuation: '#6F6E69',
-        macro: '#205EA6',
-        preprocessor: '#A02F6F',
-        regex: '#24837B',
-        url: '#205EA6',
-        key: '#BC5215',
-        exception: '#A02F6F'
-      },
-
-      highlights: {
-        diffAdded: '#66800B',
-        diffAddedBackground: '#879A3920',
-        diffRemoved: '#AF3029',
-        diffRemovedBackground: '#D14D4120',
-        diffModified: '#205EA6',
-        diffModifiedBackground: '#4385BE20',
-        lineNumber: '#CECDC3',
-        lineNumberActive: '#100F0F'
-      }
-    },
-
-    markdown: {
-      heading1: '#AD8301',
-      heading2: '#BC5215',
-      heading3: '#205EA6',
-      heading4: '#100F0F',
-      link: '#205EA6',
-      linkHover: '#4385BE',
-      inlineCode: '#24837B',
-      inlineCodeBackground: '#F2F0E5',
-      blockquote: '#6F6E69',
-      blockquoteBorder: '#DAD8CE',
-      listMarker: '#AD830199'
-    },
-
-    chat: {
-      userMessage: '#100F0F',
-      userMessageBackground: '#F2F0E5',
-      assistantMessage: '#100F0F',
-      assistantMessageBackground: '#FFFCF0',
-      timestamp: '#6F6E69',
-      divider: '#DAD8CE'
-    },
-
-    tools: {
-      background: '#F2F0E550',
-      border: '#DAD8CE80',
-      headerHover: '#DAD8CE',
-      icon: '#6F6E69',
-       title: '#100F0F',
-      description: '#6F6E69',
-
-      edit: {
-        added: '#66800B',
-        addedBackground: '#66800B25',
-        removed: '#AF3029',
-        removedBackground: '#AF302925',
-        lineNumber: '#CECDC3'
-      }
-    }
-  },
-
-  config: {
-    fonts: {
-      sans: '"IBM Plex Mono", monospace',
-      mono: '"IBM Plex Mono", monospace',
-      heading: '"IBM Plex Mono", monospace'
-    },
-
-    radius: {
-      none: '0',
-      sm: '0.125rem',
-      md: '0.375rem',
-      lg: '0.5rem',
-      xl: '0.75rem',
-      full: '9999px'
-    },
-
-    transitions: {
-      fast: '150ms ease',
-      normal: '250ms ease',
-      slow: '350ms ease'
-    }
-  }
-};
diff --git a/packages/ui/src/lib/theme/themes/gruvbox-dark.json b/packages/ui/src/lib/theme/themes/gruvbox-dark.json
new file mode 100644
index 00000000..2a8032ec
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/gruvbox-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "gruvbox-dark",
+    "name": "Gruvbox",
+    "description": "Gruvbox",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#83A598",
+      "hover": "#759287",
+      "active": "#95B09F",
+      "foreground": "#282828",
+      "muted": "#83A59880",
+      "emphasis": "#759287"
+    },
+    "surface": {
+      "background": "#282828",
+      "foreground": "#EBDBB2",
+      "muted": "#32302F",
+      "mutedForeground": "#A89984",
+      "elevated": "#25292b",
+      "elevatedForeground": "#EBDBB2",
+      "overlay": "#FBF1C720",
+      "subtle": "#3e3c3a"
+    },
+    "interactive": {
+      "border": "#504945",
+      "borderHover": "#5A524B",
+      "borderFocus": "#7C6F64",
+      "selection": "#5a5647db",
+      "selectionForeground": "#FBF1C7",
+      "focus": "#83A598",
+      "focusRing": "#83A59840",
+      "cursor": "#FBF1C7",
+      "hover": "#5a5647d9",
+      "active": "#5a5647ec"
+    },
+    "status": {
+      "error": "#FB4934",
+      "errorForeground": "#282828",
+      "errorBackground": "#FB493420",
+      "errorBorder": "#FB493450",
+      "warning": "#FABD2F",
+      "warningForeground": "#282828",
+      "warningBackground": "#FABD2F20",
+      "warningBorder": "#FABD2F50",
+      "success": "#B8BB26",
+      "successForeground": "#282828",
+      "successBackground": "#B8BB2620",
+      "successBorder": "#B8BB2650",
+      "info": "#D3869B",
+      "infoForeground": "#282828",
+      "infoBackground": "#D3869B20",
+      "infoBorder": "#D3869B50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#32302F",
+        "foreground": "#EBDBB2",
+        "comment": "#A89984",
+        "keyword": "#83A598",
+        "string": "#B8BB26",
+        "number": "#FB4934",
+        "function": "#83A598",
+        "variable": "#EBDBB2",
+        "type": "#FABD2F",
+        "operator": "#FB4934"
+      },
+      "tokens": {
+        "boolean": "#FABD2F",
+        "class": "#83A598",
+        "className": "#83A598",
+        "commentDoc": "#958876",
+        "constant": "#D3869B",
+        "decorator": "#FABD2F",
+        "enum": "#83A598",
+        "exception": "#FB4934",
+        "functionCall": "#83A598",
+        "interface": "#FABD2F",
+        "jsxTag": "#83A598",
+        "key": "#83A598",
+        "keywordImport": "#FB4934",
+        "label": "#FB4934",
+        "macro": "#8EC07C",
+        "method": "#B8BB26",
+        "module": "#FB4934",
+        "namespace": "#FABD2F",
+        "parameter": "#EBDBB2",
+        "preprocessor": "#FB4934",
+        "punctuation": "#A89984",
+        "regex": "#B8BB26",
+        "storageModifier": "#8EC07C",
+        "stringEscape": "#FBF1C7",
+        "struct": "#83A598",
+        "tag": "#83A598",
+        "tagAttribute": "#FABD2F",
+        "tagAttributeValue": "#B8BB26",
+        "typeParameter": "#FABD2F",
+        "url": "#8EC07C",
+        "variableGlobal": "#83A598",
+        "variableLocal": "#1D2021",
+        "variableOther": "#B8BB26",
+        "variableProperty": "#D3869B"
+      },
+      "highlights": {
+        "diffAdded": "#B8BB26",
+        "diffAddedBackground": "#2A3325",
+        "diffModified": "#D3869B",
+        "diffModifiedBackground": "#32302F",
+        "diffRemoved": "#FB4934",
+        "diffRemovedBackground": "#3C2222",
+        "lineNumber": "#70665D",
+        "lineNumberActive": "#FBF1C7"
+      }
+    },
+    "markdown": {
+      "heading1": "#EBDBB2",
+      "heading2": "#EBDBB2",
+      "heading3": "#EBDBB2",
+      "heading4": "#EBDBB2",
+      "link": "#8EC07C",
+      "linkHover": "#83A598",
+      "inlineCode": "#B8BB26",
+      "inlineCodeBackground": "#32302F",
+      "blockquote": "#928374",
+      "blockquoteBorder": "#504945",
+      "listMarker": "#83A59899"
+    },
+    "chat": {
+      "userMessage": "#EBDBB2",
+      "userMessageBackground": "#3e3c3a",
+      "assistantMessage": "#EBDBB2",
+      "assistantMessageBackground": "#282828",
+      "timestamp": "#A89984",
+      "divider": "#504945"
+    },
+    "tools": {
+      "background": "#32302F80",
+      "border": "#6e645e80",
+      "headerHover": "#141617",
+      "icon": "#A89984",
+      "title": "#EBDBB2",
+      "description": "#A89984",
+      "edit": {
+        "added": "#B8BB26",
+        "addedBackground": "#B8BB2625",
+        "removed": "#FB4934",
+        "removedBackground": "#FB493425",
+        "lineNumber": "#70665D"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/gruvbox-light.json b/packages/ui/src/lib/theme/themes/gruvbox-light.json
new file mode 100644
index 00000000..a10822fd
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/gruvbox-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "gruvbox-light",
+    "name": "Gruvbox",
+    "description": "Gruvbox",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#076678",
+      "hover": "#388288",
+      "active": "#0C5D6C",
+      "foreground": "#FBF1C7",
+      "muted": "#07667880",
+      "emphasis": "#388288"
+    },
+    "surface": {
+      "background": "#FBF1C7",
+      "foreground": "#3C3836",
+      "muted": "#F2E5BC",
+      "mutedForeground": "#7C6F64",
+      "elevated": "#efebcd",
+      "elevatedForeground": "#3C3836",
+      "overlay": "#28282820",
+      "subtle": "#FDF9E8"
+    },
+    "interactive": {
+      "border": "#D5C4A1",
+      "borderHover": "#C9B897",
+      "borderFocus": "#A89984",
+      "selection": "#fffdfdec",
+      "selectionForeground": "#282828",
+      "focus": "#076678",
+      "focusRing": "#07667840",
+      "cursor": "#282828",
+      "hover": "#fffdfdb3",
+      "active": "#fffdfdcf"
+    },
+    "status": {
+      "error": "#9D0006",
+      "errorForeground": "#FBF1C7",
+      "errorBackground": "#9D000620",
+      "errorBorder": "#9D000650",
+      "warning": "#B57614",
+      "warningForeground": "#FBF1C7",
+      "warningBackground": "#B5761420",
+      "warningBorder": "#B5761450",
+      "success": "#79740E",
+      "successForeground": "#FBF1C7",
+      "successBackground": "#79740E20",
+      "successBorder": "#79740E50",
+      "info": "#8F3F71",
+      "infoForeground": "#FBF1C7",
+      "infoBackground": "#8F3F7120",
+      "infoBorder": "#8F3F7150"
+    },
+    "syntax": {
+      "base": {
+        "background": "#F2E5BC",
+        "foreground": "#3C3836",
+        "comment": "#7C6F64",
+        "keyword": "#076678",
+        "string": "#79740E",
+        "number": "#9D0006",
+        "function": "#076678",
+        "variable": "#3C3836",
+        "type": "#B57614",
+        "operator": "#9D0006"
+      },
+      "tokens": {
+        "boolean": "#B57614",
+        "class": "#076678",
+        "className": "#076678",
+        "commentDoc": "#BCB096",
+        "constant": "#8F3F71",
+        "decorator": "#B57614",
+        "enum": "#076678",
+        "exception": "#9D0006",
+        "functionCall": "#076678",
+        "interface": "#B57614",
+        "jsxTag": "#076678",
+        "key": "#076678",
+        "keywordImport": "#9D0006",
+        "label": "#9D0006",
+        "macro": "#427B58",
+        "method": "#79740E",
+        "module": "#9D0006",
+        "namespace": "#B57614",
+        "parameter": "#3C3836",
+        "preprocessor": "#9D0006",
+        "punctuation": "#7C6F64",
+        "regex": "#79740E",
+        "storageModifier": "#427B58",
+        "stringEscape": "#282828",
+        "struct": "#076678",
+        "tag": "#076678",
+        "tagAttribute": "#B57614",
+        "tagAttributeValue": "#79740E",
+        "typeParameter": "#B57614",
+        "url": "#427B58",
+        "variableGlobal": "#076678",
+        "variableLocal": "#F9F5D7",
+        "variableOther": "#79740E",
+        "variableProperty": "#8F3F71"
+      },
+      "highlights": {
+        "diffAdded": "#79740E",
+        "diffAddedBackground": "#DDE3B1",
+        "diffModified": "#8F3F71",
+        "diffModifiedBackground": "#EBDFB5",
+        "diffRemoved": "#9D0006",
+        "diffRemovedBackground": "#E8C7C3",
+        "lineNumber": "#B0A285",
+        "lineNumberActive": "#282828"
+      }
+    },
+    "markdown": {
+      "heading1": "#3C3836",
+      "heading2": "#3C3836",
+      "heading3": "#3C3836",
+      "heading4": "#3C3836",
+      "link": "#427B58",
+      "linkHover": "#076678",
+      "inlineCode": "#79740E",
+      "inlineCodeBackground": "#F2E5BC",
+      "blockquote": "#928374",
+      "blockquoteBorder": "#D5C4A1",
+      "listMarker": "#07667899"
+    },
+    "chat": {
+      "userMessage": "#3C3836",
+      "userMessageBackground": "#FDF9E8",
+      "assistantMessage": "#3C3836",
+      "assistantMessageBackground": "#FBF1C7",
+      "timestamp": "#7C6F64",
+      "divider": "#D5C4A1"
+    },
+    "tools": {
+      "background": "#F2E5BC80",
+      "border": "#a6997e80",
+      "headerHover": "#FDF9E8",
+      "icon": "#7C6F64",
+      "title": "#3C3836",
+      "description": "#7C6F64",
+      "edit": {
+        "added": "#79740E",
+        "addedBackground": "#79740E25",
+        "removed": "#9D0006",
+        "removedBackground": "#9D000625",
+        "lineNumber": "#B0A285"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/index.ts b/packages/ui/src/lib/theme/themes/index.ts
index 54ab1de6..44a98cb9 100644
--- a/packages/ui/src/lib/theme/themes/index.ts
+++ b/packages/ui/src/lib/theme/themes/index.ts
@@ -1,21 +1,34 @@
 import type { Theme } from '@/types/theme';
-import { flexokiLightTheme } from './flexoki-light';
-import { flexokiDarkTheme } from './flexoki-dark';
+import { presetThemes } from './presets';
+import flexokiLightRaw from './flexoki-light.json';
+import flexokiDarkRaw from './flexoki-dark.json';
 
-export const themes: Theme[] = [
-  flexokiLightTheme,
-  flexokiDarkTheme,
-];
+export const flexokiLightTheme = flexokiLightRaw as Theme;
+export const flexokiDarkTheme = flexokiDarkRaw as Theme;
 
-export {
-  flexokiLightTheme,
-  flexokiDarkTheme,
-};
+export const DEFAULT_LIGHT_THEME_ID = 'flexoki-light' as const;
+export const DEFAULT_DARK_THEME_ID = 'flexoki-dark' as const;
+
+export const themes: Theme[] = [flexokiLightTheme, flexokiDarkTheme, ...presetThemes];
 
 export function getThemeById(id: string): Theme | undefined {
-  return themes.find(theme => theme.metadata.id === id);
+  // Back-compat for a short-lived rename.
+  const resolvedId =
+    id === 'app-light' ? 'flexoki-light' :
+    id === 'app-dark' ? 'flexoki-dark' :
+    id;
+
+  return themes.find(theme => theme.metadata.id === resolvedId);
 }
 
 export function getDefaultTheme(prefersDark: boolean): Theme {
-  return prefersDark ? flexokiDarkTheme : flexokiLightTheme;
+  const variant: Theme['metadata']['variant'] = prefersDark ? 'dark' : 'light';
+
+  const defaultId = prefersDark ? DEFAULT_DARK_THEME_ID : DEFAULT_LIGHT_THEME_ID;
+  const defaultTheme = getThemeById(defaultId);
+  if (defaultTheme && defaultTheme.metadata.variant === variant) {
+    return defaultTheme;
+  }
+
+  return themes.find((theme) => theme.metadata.variant === variant) ?? themes[0] ?? flexokiLightTheme;
 }
diff --git a/packages/ui/src/lib/theme/themes/kanagawa-dark.json b/packages/ui/src/lib/theme/themes/kanagawa-dark.json
new file mode 100644
index 00000000..dc2f6630
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/kanagawa-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "kanagawa-dark",
+    "name": "Kanagawa",
+    "description": "A color scheme inspired by Japanese art and ink painting - dark variant",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": ["dark", "japanese", "ink", "elegant"]
+  },
+  "colors": {
+    "primary": {
+      "base": "#7FB4CA",
+      "hover": "#9DC5E0",
+      "active": "#658594",
+      "foreground": "#1F1F28",
+      "muted": "#7FB4CA80",
+      "emphasis": "#7E9CD8"
+    },
+    "surface": {
+      "background": "#1F1F28",
+      "foreground": "#DCD7BA",
+      "muted": "#23232d",
+      "mutedForeground": "#807f78",
+      "elevated": "#2A2A37",
+      "elevatedForeground": "#DCD7BA",
+      "overlay": "#16161DCC",
+      "subtle": "#2f2f3d"
+    },
+    "interactive": {
+      "border": "#363646",
+      "borderHover": "#54546D",
+      "borderFocus": "#7FB4CA",
+      "selection": "#729fb333",
+      "selectionForeground": "#DCD7BA",
+      "focus": "#7FB4CA",
+      "focusRing": "#7FB4CA50",
+      "cursor": "#DCD7BA",
+      "hover": "#363646",
+      "active": "#54546D"
+    },
+    "status": {
+      "error": "#E82424",
+      "errorForeground": "#DCD7BA",
+      "errorBackground": "#E8242420",
+      "errorBorder": "#E8242450",
+      "warning": "#FF9E3B",
+      "warningForeground": "#1F1F28",
+      "warningBackground": "#FF9E3B20",
+      "warningBorder": "#FF9E3B50",
+      "success": "#98BB6C",
+      "successForeground": "#1F1F28",
+      "successBackground": "#98BB6C20",
+      "successBorder": "#98BB6C50",
+      "info": "#7E9CD8",
+      "infoForeground": "#1F1F28",
+      "infoBackground": "#7E9CD820",
+      "infoBorder": "#7E9CD850"
+    },
+    "syntax": {
+      "base": {
+        "background": "#16161D",
+        "foreground": "#DCD7BA",
+        "comment": "#54546D",
+        "keyword": "#7E9CD8",
+        "string": "#98BB6C",
+        "number": "#FF9E3B",
+        "function": "#E6C384",
+        "variable": "#DCD7BA",
+        "type": "#C8C093",
+        "operator": "#C34043"
+      },
+      "tokens": {
+        "commentDoc": "#727169",
+        "stringEscape": "#DCD7BA",
+        "keywordImport": "#957FB8",
+        "storageModifier": "#7E9CD8",
+        "functionCall": "#E6C384",
+        "method": "#76946A",
+        "variableProperty": "#7E9CD8",
+        "variableOther": "#76946A",
+        "variableGlobal": "#D27E99",
+        "variableLocal": "#2A2A37",
+        "parameter": "#DCD7BA",
+        "constant": "#DCD7BA",
+        "class": "#E6C384",
+        "className": "#E6C384",
+        "interface": "#C8C093",
+        "struct": "#E6C384",
+        "enum": "#E6C384",
+        "typeParameter": "#E6C384",
+        "namespace": "#C8C093",
+        "module": "#C34043",
+        "tag": "#7E9CD8",
+        "jsxTag": "#D27E99",
+        "tagAttribute": "#C8C093",
+        "tagAttributeValue": "#98BB6C",
+        "boolean": "#C8C093",
+        "decorator": "#C8C093",
+        "label": "#D27E99",
+        "punctuation": "#54546D",
+        "macro": "#7E9CD8",
+        "preprocessor": "#D27E99",
+        "regex": "#98BB6C",
+        "url": "#7E9CD8",
+        "key": "#E6C384",
+        "exception": "#D27E99"
+      },
+      "highlights": {
+        "diffAdded": "#98BB6C",
+        "diffAddedBackground": "#76946A20",
+        "diffRemoved": "#C34043",
+        "diffRemovedBackground": "#E8242420",
+        "diffModified": "#7E9CD8",
+        "diffModifiedBackground": "#7E9CD820",
+        "lineNumber": "#363646",
+        "lineNumberActive": "#DCD7BA"
+      }
+    },
+    "markdown": {
+      "heading1": "#DCD7BA",
+      "heading2": "#DCD7BA",
+      "heading3": "#DCD7BA",
+      "heading4": "#DCD7BA",
+      "link": "#7FB4CA",
+      "linkHover": "#7E9CD8",
+      "inlineCode": "#98BB6C",
+      "inlineCodeBackground": "#16161D",
+      "blockquote": "#54546D",
+      "blockquoteBorder": "#363646",
+      "listMarker": "#FF9E3B99"
+    },
+    "chat": {
+      "userMessage": "#DCD7BA",
+      "userMessageBackground": "#2A2A37",
+      "assistantMessage": "#DCD7BA",
+      "assistantMessageBackground": "#2f2f3d",
+      "timestamp": "#54546D",
+      "divider": "#363646"
+    },
+    "tools": {
+      "background": "#16161D50",
+      "border": "#4a4a5f80",
+      "headerHover": "#36364650",
+      "icon": "#afad9c",
+      "title": "#DCD7BA",
+      "description": "#5A595B",
+      "edit": {
+        "added": "#98BB6C",
+        "addedBackground": "#98BB6C25",
+        "removed": "#C34043",
+        "removedBackground": "#C3404325",
+        "lineNumber": "#56566d"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/kanagawa-light.json b/packages/ui/src/lib/theme/themes/kanagawa-light.json
new file mode 100644
index 00000000..18af2119
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/kanagawa-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "kanagawa-light",
+    "name": "Kanagawa",
+    "description": "A color scheme inspired by Japanese art and ink painting - light variant (Lotus)",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": ["light", "japanese", "lotus", "elegant"]
+  },
+  "colors": {
+    "primary": {
+      "base": "#4D699B",
+      "hover": "#6693BF",
+      "active": "#5D57A3",
+      "foreground": "#F2ECBC",
+      "muted": "#4D699B80",
+      "emphasis": "#6693BF"
+    },
+    "surface": {
+      "background": "#F2ECBC",
+      "foreground": "#545464",
+      "muted": "#E7DBA0",
+      "mutedForeground": "#717169",
+      "elevated": "#eae4bf",
+      "elevatedForeground": "#545464",
+      "overlay": "#54546433",
+      "subtle": "#f4fff0"
+    },
+    "interactive": {
+      "border": "#bfbaa4",
+      "borderHover": "#8A8980",
+      "borderFocus": "#4D699B",
+      "selection": "#e9f3e5cf",
+      "selectionForeground": "#545464",
+      "focus": "#4D699B",
+      "focusRing": "#4D699B40",
+      "cursor": "#545464",
+      "hover": "#e9f3e5a9",
+      "active": "#e9f3e5cf"
+    },
+    "status": {
+      "error": "#E82424",
+      "errorForeground": "#F2ECBC",
+      "errorBackground": "#E8242420",
+      "errorBorder": "#E8242450",
+      "warning": "#DE9800",
+      "warningForeground": "#545464",
+      "warningBackground": "#DE980020",
+      "warningBorder": "#DE980050",
+      "success": "#6F894E",
+      "successForeground": "#F2ECBC",
+      "successBackground": "#98BB6C20",
+      "successBorder": "#6F894E50",
+      "info": "#4D699B",
+      "infoForeground": "#F2ECBC",
+      "infoBackground": "#6693BF20",
+      "infoBorder": "#4D699B50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#DCD5AC",
+        "foreground": "#545464",
+        "comment": "#716E61",
+        "keyword": "#4D699B",
+        "string": "#6F894E",
+        "number": "#836F4A",
+        "function": "#CC6D00",
+        "variable": "#545464",
+        "type": "#77713F",
+        "operator": "#C84053"
+      },
+      "tokens": {
+        "commentDoc": "#8A8980",
+        "stringEscape": "#545464",
+        "keywordImport": "#624C83",
+        "storageModifier": "#4D699B",
+        "functionCall": "#CC6D00",
+        "method": "#6E915F",
+        "variableProperty": "#4D699B",
+        "variableOther": "#6E915F",
+        "variableGlobal": "#B35B79",
+        "variableLocal": "#D5CEA3",
+        "parameter": "#545464",
+        "constant": "#545464",
+        "class": "#CC6D00",
+        "className": "#CC6D00",
+        "interface": "#77713F",
+        "struct": "#CC6D00",
+        "enum": "#CC6D00",
+        "typeParameter": "#CC6D00",
+        "namespace": "#77713F",
+        "module": "#C84053",
+        "tag": "#4D699B",
+        "jsxTag": "#B35B79",
+        "tagAttribute": "#77713F",
+        "tagAttributeValue": "#6F894E",
+        "boolean": "#77713F",
+        "decorator": "#77713F",
+        "label": "#B35B79",
+        "punctuation": "#716E61",
+        "macro": "#4D699B",
+        "preprocessor": "#B35B79",
+        "regex": "#6F894E",
+        "url": "#4D699B",
+        "key": "#CC6D00",
+        "exception": "#B35B79"
+      },
+      "highlights": {
+        "diffAdded": "#6F894E",
+        "diffAddedBackground": "#6F894E20",
+        "diffRemoved": "#C84053",
+        "diffRemovedBackground": "#C8405320",
+        "diffModified": "#4D699B",
+        "diffModifiedBackground": "#4D699B20",
+        "lineNumber": "#8A8980",
+        "lineNumberActive": "#545464"
+      }
+    },
+    "markdown": {
+      "heading1": "#545464",
+      "heading2": "#545464",
+      "heading3": "#545464",
+      "heading4": "#545464",
+      "link": "#5D57A3",
+      "linkHover": "#4D699B",
+      "inlineCode": "#6F894E",
+      "inlineCodeBackground": "#e7e2c7",
+      "blockquote": "#716E61",
+      "blockquoteBorder": "#716E61",
+      "listMarker": "#836F4A99"
+    },
+    "chat": {
+      "userMessage": "#545464",
+      "userMessageBackground": "#e6f2e1",
+      "assistantMessage": "#545464",
+      "assistantMessageBackground": "#F2ECBC",
+      "timestamp": "#716E61",
+      "divider": "#716E61"
+    },
+    "tools": {
+      "background": "#DCD5AC50",
+      "border": "#716E6180",
+      "headerHover": "#716E61",
+      "icon": "#8A8980",
+      "title": "#545464",
+      "description": "#8A8980",
+      "edit": {
+        "added": "#6F894E",
+        "addedBackground": "#6F894E25",
+        "removed": "#C84053",
+        "removedBackground": "#C8405325",
+        "lineNumber": "#8A8980"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/mono-dark.json b/packages/ui/src/lib/theme/themes/mono-dark.json
new file mode 100644
index 00000000..f772ff2e
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/mono-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "mono-dark",
+    "name": "Mono",
+    "description": "A pure monochromatic theme - dark variant with shades of grey",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": ["dark", "monochrome", "minimal", "grayscale"]
+  },
+  "colors": {
+    "primary": {
+      "base": "#FFFFFF",
+      "hover": "#E5E5E5",
+      "active": "#CCCCCC",
+      "foreground": "#000000",
+      "muted": "#FFFFFF80",
+      "emphasis": "#FFFFFF"
+    },
+    "surface": {
+      "background": "#000000",
+      "foreground": "#E5E5E5",
+      "muted": "#0A0A0A",
+      "mutedForeground": "#808080",
+      "elevated": "#141414",
+      "elevatedForeground": "#E5E5E5",
+      "overlay": "#00000080",
+      "subtle": "#1A1A1A"
+    },
+    "interactive": {
+      "border": "#222222",
+      "borderHover": "#333333",
+      "borderFocus": "#FFFFFF",
+      "selection": "#ffffff1f",
+      "selectionForeground": "#E5E5E5",
+      "focus": "#FFFFFF",
+      "focusRing": "#FFFFFF50",
+      "cursor": "#E5E5E5",
+      "hover": "#ffffff1f",
+      "active": "#ffffff1f"
+    },
+    "status": {
+      "error": "#666666",
+      "errorForeground": "#000000",
+      "errorBackground": "#ffffff10",
+      "errorBorder": "#ffffff20",
+      "warning": "#999999",
+      "warningForeground": "#000000",
+      "warningBackground": "#ffffff12",
+      "warningBorder": "#ffffff25",
+      "success": "#E5E5E5",
+      "successForeground": "#000000",
+      "successBackground": "#ffffff18",
+      "successBorder": "#ffffff30",
+      "info": "#A6A6A6",
+      "infoForeground": "#000000",
+      "infoBackground": "#ffffff14",
+      "infoBorder": "#ffffff28"
+    },
+    "syntax": {
+      "base": {
+        "background": "#0A0A0A",
+        "foreground": "#E5E5E5",
+        "comment": "#666666",
+        "keyword": "#FFFFFF",
+        "string": "#B3B3B3",
+        "number": "#999999",
+        "function": "#E5E5E5",
+        "variable": "#CCCCCC",
+        "type": "#D9D9D9",
+        "operator": "#808080"
+      },
+      "tokens": {
+        "commentDoc": "#595959",
+        "stringEscape": "#E5E5E5",
+        "keywordImport": "#FFFFFF",
+        "storageModifier": "#E5E5E5",
+        "functionCall": "#D9D9D9",
+        "method": "#CCCCCC",
+        "variableProperty": "#B3B3B3",
+        "variableOther": "#CCCCCC",
+        "variableGlobal": "#999999",
+        "variableLocal": "#1A1A1A",
+        "parameter": "#CCCCCC",
+        "constant": "#E5E5E5",
+        "class": "#FFFFFF",
+        "className": "#FFFFFF",
+        "interface": "#D9D9D9",
+        "struct": "#E5E5E5",
+        "enum": "#E5E5E5",
+        "typeParameter": "#D9D9D9",
+        "namespace": "#CCCCCC",
+        "module": "#B3B3B3",
+        "tag": "#E5E5E5",
+        "jsxTag": "#FFFFFF",
+        "tagAttribute": "#B3B3B3",
+        "tagAttributeValue": "#999999",
+        "boolean": "#CCCCCC",
+        "decorator": "#999999",
+        "label": "#808080",
+        "punctuation": "#666666",
+        "macro": "#D9D9D9",
+        "preprocessor": "#B3B3B3",
+        "regex": "#A6A6A6",
+        "url": "#CCCCCC",
+        "key": "#E5E5E5",
+        "exception": "#999999"
+      },
+      "highlights": {
+        "diffAdded": "#E5E5E5",
+        "diffAddedBackground": "#ffffff18",
+        "diffRemoved": "#666666",
+        "diffRemovedBackground": "#ffffff0d",
+        "diffModified": "#B3B3B3",
+        "diffModifiedBackground": "#ffffff12",
+        "lineNumber": "#404040",
+        "lineNumberActive": "#E5E5E5"
+      }
+    },
+    "markdown": {
+      "heading1": "#FFFFFF",
+      "heading2": "#F2F2F2",
+      "heading3": "#E5E5E5",
+      "heading4": "#D9D9D9",
+      "link": "#CCCCCC",
+      "linkHover": "#FFFFFF",
+      "inlineCode": "#B3B3B3",
+      "inlineCodeBackground": "#1A1A1A",
+      "blockquote": "#808080",
+      "blockquoteBorder": "#333333",
+      "listMarker": "#99999999"
+    },
+    "chat": {
+      "userMessage": "#E5E5E5",
+      "userMessageBackground": "#1A1A1A",
+      "assistantMessage": "#E5E5E5",
+      "assistantMessageBackground": "#000000",
+      "timestamp": "#808080",
+      "divider": "#333333"
+    },
+    "tools": {
+      "background": "#0A0A0A50",
+      "border": "#4040409d",
+      "headerHover": "#33333350",
+      "icon": "#A6A6A6",
+      "title": "#E5E5E5",
+      "description": "#808080",
+      "edit": {
+        "added": "#E5E5E5",
+        "addedBackground": "#ffffff20",
+        "removed": "#666666",
+        "removedBackground": "#ffffff10",
+        "lineNumber": "#404040"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/mono-light.json b/packages/ui/src/lib/theme/themes/mono-light.json
new file mode 100644
index 00000000..00db54db
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/mono-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "mono-light",
+    "name": "Mono",
+    "description": "A pure monochromatic theme - light variant with shades of grey",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": ["light", "monochrome", "minimal", "grayscale"]
+  },
+  "colors": {
+    "primary": {
+      "base": "#000000",
+      "hover": "#1A1A1A",
+      "active": "#333333",
+      "foreground": "#FFFFFF",
+      "muted": "#00000080",
+      "emphasis": "#000000"
+    },
+    "surface": {
+      "background": "#FFFFFF",
+      "foreground": "#1A1A1A",
+      "muted": "#F5F5F5",
+      "mutedForeground": "#666666",
+      "elevated": "#FAFAFA",
+      "elevatedForeground": "#1A1A1A",
+      "overlay": "#00000020",
+      "subtle": "#F0F0F0"
+    },
+    "interactive": {
+      "border": "#D9D9D9",
+      "borderHover": "#B3B3B3",
+      "borderFocus": "#000000",
+      "selection": "#00000015",
+      "selectionForeground": "#1A1A1A",
+      "focus": "#000000",
+      "focusRing": "#00000040",
+      "cursor": "#1A1A1A",
+      "hover": "#00000010",
+      "active": "#00000015"
+    },
+    "status": {
+      "error": "#999999",
+      "errorForeground": "#FFFFFF",
+      "errorBackground": "#00000008",
+      "errorBorder": "#00000015",
+      "warning": "#666666",
+      "warningForeground": "#FFFFFF",
+      "warningBackground": "#0000000a",
+      "warningBorder": "#00000018",
+      "success": "#1A1A1A",
+      "successForeground": "#FFFFFF",
+      "successBackground": "#00000012",
+      "successBorder": "#00000020",
+      "info": "#595959",
+      "infoForeground": "#FFFFFF",
+      "infoBackground": "#0000000c",
+      "infoBorder": "#0000001a"
+    },
+    "syntax": {
+      "base": {
+        "background": "#F5F5F5",
+        "foreground": "#1A1A1A",
+        "comment": "#999999",
+        "keyword": "#000000",
+        "string": "#4D4D4D",
+        "number": "#666666",
+        "function": "#1A1A1A",
+        "variable": "#333333",
+        "type": "#262626",
+        "operator": "#808080"
+      },
+      "tokens": {
+        "commentDoc": "#ABABAB",
+        "stringEscape": "#1A1A1A",
+        "keywordImport": "#000000",
+        "storageModifier": "#1A1A1A",
+        "functionCall": "#262626",
+        "method": "#333333",
+        "variableProperty": "#4D4D4D",
+        "variableOther": "#333333",
+        "variableGlobal": "#666666",
+        "variableLocal": "#E5E5E5",
+        "parameter": "#333333",
+        "constant": "#1A1A1A",
+        "class": "#000000",
+        "className": "#000000",
+        "interface": "#262626",
+        "struct": "#1A1A1A",
+        "enum": "#1A1A1A",
+        "typeParameter": "#262626",
+        "namespace": "#333333",
+        "module": "#4D4D4D",
+        "tag": "#1A1A1A",
+        "jsxTag": "#000000",
+        "tagAttribute": "#4D4D4D",
+        "tagAttributeValue": "#666666",
+        "boolean": "#333333",
+        "decorator": "#666666",
+        "label": "#808080",
+        "punctuation": "#999999",
+        "macro": "#262626",
+        "preprocessor": "#4D4D4D",
+        "regex": "#595959",
+        "url": "#333333",
+        "key": "#1A1A1A",
+        "exception": "#666666"
+      },
+      "highlights": {
+        "diffAdded": "#1A1A1A",
+        "diffAddedBackground": "#00000012",
+        "diffRemoved": "#999999",
+        "diffRemovedBackground": "#00000008",
+        "diffModified": "#595959",
+        "diffModifiedBackground": "#0000000c",
+        "lineNumber": "#CCCCCC",
+        "lineNumberActive": "#1A1A1A"
+      }
+    },
+    "markdown": {
+      "heading1": "#000000",
+      "heading2": "#0D0D0D",
+      "heading3": "#1A1A1A",
+      "heading4": "#262626",
+      "link": "#333333",
+      "linkHover": "#000000",
+      "inlineCode": "#4D4D4D",
+      "inlineCodeBackground": "#E5E5E5",
+      "blockquote": "#808080",
+      "blockquoteBorder": "#D9D9D9",
+      "listMarker": "#66666699"
+    },
+    "chat": {
+      "userMessage": "#1A1A1A",
+      "userMessageBackground": "#E5E5E5",
+      "assistantMessage": "#1A1A1A",
+      "assistantMessageBackground": "#FFFFFF",
+      "timestamp": "#808080",
+      "divider": "#D9D9D9"
+    },
+    "tools": {
+      "background": "#F5F5F550",
+      "border": "#B3B3B380",
+      "headerHover": "#D9D9D9",
+      "icon": "#666666",
+      "title": "#1A1A1A",
+      "description": "#808080",
+      "edit": {
+        "added": "#1A1A1A",
+        "addedBackground": "#00000015",
+        "removed": "#999999",
+        "removedBackground": "#0000000a",
+        "lineNumber": "#CCCCCC"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/mono-plus-dark.json b/packages/ui/src/lib/theme/themes/mono-plus-dark.json
new file mode 100644
index 00000000..609fd743
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/mono-plus-dark.json
@@ -0,0 +1,155 @@
+{
+  "metadata": {
+    "id": "mono-plus-dark",
+    "name": "Mono Plus",
+    "description": "A pure monochromatic theme - dark variant with slight colors added",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": ["dark", "monochrome", "minimal"]
+  },
+  "colors": {
+    "primary": {
+      "base": "#a2bee8",
+      "hover": "#E5E5E5",
+      "active": "#CCCCCC",
+      "foreground": "#000000",
+      "muted": "#FFFFFF80",
+      "emphasis": "#FFFFFF"
+    },
+    "surface": {
+      "background": "#000000",
+      "foreground": "#E5E5E5",
+      "muted": "#0A0A0A",
+      "mutedForeground": "#808080",
+      "elevated": "#141414",
+      "elevatedForeground": "#E5E5E5",
+      "overlay": "#00000080",
+      "subtle": "#1A1A1A"
+    },
+    "interactive": {
+      "border": "#222222",
+      "borderHover": "#333333",
+      "borderFocus": "#FFFFFF",
+      "selection": "#ffffff1f",
+      "selectionForeground": "#E5E5E5",
+      "focus": "#FFFFFF",
+      "focusRing": "#FFFFFF50",
+      "cursor": "#E5E5E5",
+      "hover": "#ffffff1f",
+      "active": "#ffffff1f"
+    },
+    "status": {
+      "error": "#9e6a6a",
+      "errorForeground": "#0a0a0a",
+      "errorBackground": "#9e6a6a20",
+      "errorBorder": "#9e6a6a50",
+      "warning": "#9e8a6a",
+      "warningForeground": "#0a0a0a",
+      "warningBackground": "#9e8a6a20",
+      "warningBorder": "#9e8a6a50",
+      "success": "#6a8e6a",
+      "successForeground": "#0a0a0a",
+      "successBackground": "#6a8e6a20",
+      "successBorder": "#6a8e6a50",
+      "info": "#6a7e9e",
+      "infoForeground": "#0a0a0a",
+      "infoBackground": "#6a7e9e20",
+      "infoBorder": "#6a7e9e50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#0a0a0a",
+        "foreground": "#d4d4d4",
+        "comment": "#8c8c8c",
+        "keyword": "#dccdbeff",
+        "string": "#b6d8e6ff",
+        "number": "#e3bdadff",
+        "function": "#a2bee8",
+        "variable": "#d4d4d4",
+        "type": "#edcbb8ff",
+        "operator": "#dccdbeff"
+      },
+      "tokens": {
+        "commentDoc": "#8c8c8c",
+        "stringEscape": "#b6d8e6ff",
+        "keywordImport": "#dccdbeff",
+        "storageModifier": "#dccdbeff",
+        "functionCall": "#a2bee8",
+        "method": "#a2bee8",
+        "variableProperty": "#c0dcc0ff",
+        "variableOther": "#d4d4d4",
+        "class": "#edcbb8ff",
+        "className": "#edcbb8ff",
+        "interface": "#edcbb8ff",
+        "tag": "#a2bee8",
+        "boolean": "#e3bdadff",
+        "url": "#b6d8e6ff",
+        "key": "#c0dcc0ff"
+      },
+      "highlights": {
+        "diffAdded": "#6a8e6a",
+        "diffAddedBackground": "#6a8e6a20",
+        "diffRemoved": "#9e6a6a",
+        "diffRemovedBackground": "#9e6a6a20",
+        "lineNumber": "#7c7c7c",
+        "lineNumberActive": "#d4d4d4"
+      }
+    },
+    "markdown": {
+      "heading1": "#FFFFFF",
+      "heading2": "#F2F2F2",
+      "heading3": "#E5E5E5",
+      "heading4": "#D9D9D9",
+      "link": "#CCCCCC",
+      "linkHover": "#a2bee8",
+      "inlineCode": "#a2bee8",
+      "inlineCodeBackground": "#1A1A1A",
+      "blockquote": "#808080",
+      "blockquoteBorder": "#333333",
+      "listMarker": "#99999999"
+    },
+    "chat": {
+      "userMessage": "#E5E5E5",
+      "userMessageBackground": "#1A1A1A",
+      "assistantMessage": "#E5E5E5",
+      "assistantMessageBackground": "#000000",
+      "timestamp": "#808080",
+      "divider": "#333333"
+    },
+    "tools": {
+      "background": "#0A0A0A50",
+      "border": "#4040409d",
+      "headerHover": "#33333350",
+      "icon": "#A6A6A6",
+      "title": "#E5E5E5",
+      "description": "#808080",
+      "edit": {
+        "added": "#6a8e6a",
+        "addedBackground": "#6a8e6a20",
+        "removed": "#9e6a6a",
+        "removedBackground": "#9e6a6a20",
+        "lineNumber": "#2a2a2a"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/mono-plus-light.json b/packages/ui/src/lib/theme/themes/mono-plus-light.json
new file mode 100644
index 00000000..a1486850
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/mono-plus-light.json
@@ -0,0 +1,155 @@
+{
+  "metadata": {
+    "id": "mono-plus-light",
+    "name": "Mono Plus",
+    "description": "A pure monochromatic theme - light variant with slight colors added",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": ["light", "monochrome", "minimal"]
+  },
+  "colors": {
+    "primary": {
+      "base": "#4a6a9e",
+      "hover": "#1A1A1A",
+      "active": "#333333",
+      "foreground": "#FFFFFF",
+      "muted": "#00000080",
+      "emphasis": "#000000"
+    },
+    "surface": {
+      "background": "#FFFFFF",
+      "foreground": "#1A1A1A",
+      "muted": "#F5F5F5",
+      "mutedForeground": "#666666",
+      "elevated": "#FAFAFA",
+      "elevatedForeground": "#1A1A1A",
+      "overlay": "#00000020",
+      "subtle": "#F0F0F0"
+    },
+    "interactive": {
+      "border": "#D9D9D9",
+      "borderHover": "#B3B3B3",
+      "borderFocus": "#000000",
+      "selection": "#00000015",
+      "selectionForeground": "#1A1A1A",
+      "focus": "#000000",
+      "focusRing": "#00000040",
+      "cursor": "#1A1A1A",
+      "hover": "#00000010",
+      "active": "#00000015"
+    },
+    "status": {
+      "error": "#8a5a5a",
+      "errorForeground": "#fafafa",
+      "errorBackground": "#8a5a5a18",
+      "errorBorder": "#8a5a5a40",
+      "warning": "#8a7a5a",
+      "warningForeground": "#fafafa",
+      "warningBackground": "#8a7a5a18",
+      "warningBorder": "#8a7a5a40",
+      "success": "#5a7a5a",
+      "successForeground": "#fafafa",
+      "successBackground": "#5a7a5a18",
+      "successBorder": "#5a7a5a40",
+      "info": "#5a6a8a",
+      "infoForeground": "#fafafa",
+      "infoBackground": "#5a6a8a18",
+      "infoBorder": "#5a6a8a40"
+    },
+    "syntax": {
+      "base": {
+        "background": "#f5f5f5",
+        "foreground": "#2a2a2a",
+        "comment": "#8c8c8c",
+        "keyword": "#6a5a4a",
+        "string": "#4a6a7a",
+        "number": "#7a5a4a",
+        "function": "#4a6a9e",
+        "variable": "#2a2a2a",
+        "type": "#6a5040",
+        "operator": "#6a5a4a"
+      },
+      "tokens": {
+        "commentDoc": "#8c8c8c",
+        "stringEscape": "#4a6a7a",
+        "keywordImport": "#6a5a4a",
+        "storageModifier": "#6a5a4a",
+        "functionCall": "#4a6a9e",
+        "method": "#4a6a9e",
+        "variableProperty": "#4a6a4a",
+        "variableOther": "#2a2a2a",
+        "class": "#6a5040",
+        "className": "#6a5040",
+        "interface": "#6a5040",
+        "tag": "#4a6a9e",
+        "boolean": "#7a5a4a",
+        "url": "#4a6a7a",
+        "key": "#4a6a4a"
+      },
+      "highlights": {
+        "diffAdded": "#5a7a5a",
+        "diffAddedBackground": "#5a7a5a18",
+        "diffRemoved": "#8a5a5a",
+        "diffRemovedBackground": "#8a5a5a18",
+        "lineNumber": "#b0b0b0",
+        "lineNumberActive": "#2a2a2a"
+      }
+    },
+    "markdown": {
+      "heading1": "#000000",
+      "heading2": "#0D0D0D",
+      "heading3": "#1A1A1A",
+      "heading4": "#262626",
+      "link": "#333333",
+      "linkHover": "#4a6a9e",
+      "inlineCode": "#4a6a9e",
+      "inlineCodeBackground": "#f1efef",
+      "blockquote": "#808080",
+      "blockquoteBorder": "#D9D9D9",
+      "listMarker": "#66666699"
+    },
+    "chat": {
+      "userMessage": "#1A1A1A",
+      "userMessageBackground": "#E5E5E5",
+      "assistantMessage": "#1A1A1A",
+      "assistantMessageBackground": "#FFFFFF",
+      "timestamp": "#808080",
+      "divider": "#D9D9D9"
+    },
+    "tools": {
+      "background": "#F5F5F550",
+      "border": "#B3B3B380",
+      "headerHover": "#D9D9D9",
+      "icon": "#666666",
+      "title": "#1A1A1A",
+      "description": "#808080",
+      "edit": {
+        "added": "#5a7a5a",
+        "addedBackground": "#5a7a5a18",
+        "removed": "#8a5a5a",
+        "removedBackground": "#8a5a5a18",
+        "lineNumber": "#d0d0d0"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/monokai-dark.json b/packages/ui/src/lib/theme/themes/monokai-dark.json
new file mode 100644
index 00000000..e37a8c61
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/monokai-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "monokai-dark",
+    "name": "Monokai",
+    "description": "Monokai",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#AE81FF",
+      "hover": "#9973DD",
+      "active": "#BA94FF",
+      "foreground": "#23241E",
+      "muted": "#AE81FF80",
+      "emphasis": "#9973DD"
+    },
+    "surface": {
+      "background": "#23241E",
+      "foreground": "#F8F8F2",
+      "muted": "#282a20",
+      "mutedForeground": "#C5C5C0",
+      "elevated": "#21221a",
+      "elevatedForeground": "#F8F8F2",
+      "overlay": "#FFFFFF20",
+      "subtle": "#36372a"
+    },
+    "interactive": {
+      "border": "#343528",
+      "borderHover": "#393A2D",
+      "borderFocus": "#555741",
+      "selection": "#434d3cfe",
+      "selectionForeground": "#FFFFFF",
+      "focus": "#AE81FF",
+      "focusRing": "#AE81FF40",
+      "cursor": "#FFFFFF",
+      "hover": "#36372a",
+      "active": "#36382e"
+    },
+    "status": {
+      "error": "#F92672",
+      "errorForeground": "#23241E",
+      "errorBackground": "#F9267220",
+      "errorBorder": "#F9267250",
+      "warning": "#FD971F",
+      "warningForeground": "#23241E",
+      "warningBackground": "#FD971F20",
+      "warningBorder": "#FD971F50",
+      "success": "#A6E22E",
+      "successForeground": "#23241E",
+      "successBackground": "#A6E22E20",
+      "successBorder": "#A6E22E50",
+      "info": "#66D9EF",
+      "infoForeground": "#23241E",
+      "infoBackground": "#66D9EF20",
+      "infoBorder": "#66D9EF50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#27281F",
+        "foreground": "#F8F8F2",
+        "comment": "#C5C5C0",
+        "keyword": "#AE81FF",
+        "string": "#A6E22E",
+        "number": "#F92672",
+        "function": "#AE81FF",
+        "variable": "#F8F8F2",
+        "type": "#FD971F",
+        "operator": "#F92672"
+      },
+      "tokens": {
+        "boolean": "#FD971F",
+        "class": "#AE81FF",
+        "className": "#AE81FF",
+        "commentDoc": "#ADADA8",
+        "constant": "#66D9EF",
+        "decorator": "#FD971F",
+        "enum": "#AE81FF",
+        "exception": "#F92672",
+        "functionCall": "#AE81FF",
+        "interface": "#FD971F",
+        "jsxTag": "#AE81FF",
+        "key": "#AE81FF",
+        "keywordImport": "#F92672",
+        "label": "#F92672",
+        "macro": "#66D9EF",
+        "method": "#A6E22E",
+        "module": "#F92672",
+        "namespace": "#FD971F",
+        "parameter": "#F8F8F2",
+        "preprocessor": "#F92672",
+        "punctuation": "#C5C5C0",
+        "regex": "#A6E22E",
+        "storageModifier": "#66D9EF",
+        "stringEscape": "#FFFFFF",
+        "struct": "#AE81FF",
+        "tag": "#AE81FF",
+        "tagAttribute": "#FD971F",
+        "tagAttributeValue": "#A6E22E",
+        "typeParameter": "#FD971F",
+        "url": "#66D9EF",
+        "variableGlobal": "#AE81FF",
+        "variableLocal": "#25261F",
+        "variableOther": "#A6E22E",
+        "variableProperty": "#66D9EF"
+      },
+      "highlights": {
+        "diffAdded": "#A6E22E",
+        "diffAddedBackground": "#1E2A1D",
+        "diffModified": "#66D9EF",
+        "diffModifiedBackground": "#2F2F24",
+        "diffRemoved": "#F92672",
+        "diffRemovedBackground": "#301C24",
+        "lineNumber": "#454639",
+        "lineNumberActive": "#FFFFFF"
+      }
+    },
+    "markdown": {
+      "heading1": "#F8F8F2",
+      "heading2": "#F8F8F2",
+      "heading3": "#F8F8F2",
+      "heading4": "#F8F8F2",
+      "link": "#66D9EF",
+      "linkHover": "#AE81FF",
+      "inlineCode": "#A6E22E",
+      "inlineCodeBackground": "#27281F",
+      "blockquote": "#FD971F",
+      "blockquoteBorder": "#343528",
+      "listMarker": "#AE81FF99"
+    },
+    "chat": {
+      "userMessage": "#F8F8F2",
+      "userMessageBackground": "#36372a",
+      "assistantMessage": "#F8F8F2",
+      "assistantMessageBackground": "#23241E",
+      "timestamp": "#C5C5C0",
+      "divider": "#343528"
+    },
+    "tools": {
+      "background": "#27281F80",
+      "border": "#4d4f3c80",
+      "headerHover": "#292A23",
+      "icon": "#C5C5C0",
+      "title": "#F8F8F2",
+      "description": "#C5C5C0",
+      "edit": {
+        "added": "#A6E22E",
+        "addedBackground": "#A6E22E25",
+        "removed": "#bd215a",
+        "removedBackground": "#F9267225",
+        "lineNumber": "#505142"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/monokai-light.json b/packages/ui/src/lib/theme/themes/monokai-light.json
new file mode 100644
index 00000000..2dd67330
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/monokai-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "monokai-light",
+    "name": "Monokai",
+    "description": "Monokai",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#BF7BFF",
+      "hover": "#CB94FB",
+      "active": "#A76CDB",
+      "foreground": "#FDF8EC",
+      "muted": "#BF7BFF80",
+      "emphasis": "#CB94FB"
+    },
+    "surface": {
+      "background": "#FDF8EC",
+      "foreground": "#292318",
+      "muted": "#F8F2E6",
+      "mutedForeground": "#6D5C40",
+      "elevated": "#FBF5E8",
+      "elevatedForeground": "#292318",
+      "overlay": "#1C150C20",
+      "subtle": "#F7EFDD"
+    },
+    "interactive": {
+      "border": "#E9E0CF",
+      "borderHover": "#DFD5C3",
+      "borderFocus": "#B6A893",
+      "selection": "#1C150C22",
+      "selectionForeground": "#1C150C",
+      "focus": "#BF7BFF",
+      "focusRing": "#BF7BFF40",
+      "cursor": "#1C150C",
+      "hover": "#e6e0d5",
+      "active": "#FBF5E8"
+    },
+    "status": {
+      "error": "#E54B4B",
+      "errorForeground": "#FDF8EC",
+      "errorBackground": "#E54B4B20",
+      "errorBorder": "#E54B4B50",
+      "warning": "#F1A948",
+      "warningForeground": "#FDF8EC",
+      "warningBackground": "#F1A94820",
+      "warningBorder": "#F1A94850",
+      "success": "#4FB54B",
+      "successForeground": "#FDF8EC",
+      "successBackground": "#4FB54B20",
+      "successBorder": "#4FB54B50",
+      "info": "#2D9AD7",
+      "infoForeground": "#FDF8EC",
+      "infoBackground": "#2D9AD720",
+      "infoBorder": "#2D9AD750"
+    },
+    "syntax": {
+      "base": {
+        "background": "#F8F2E6",
+        "foreground": "#292318",
+        "comment": "#6D5C40",
+        "keyword": "#BF7BFF",
+        "string": "#4FB54B",
+        "number": "#D9487C",
+        "function": "#BF7BFF",
+        "variable": "#292318",
+        "type": "#F1A948",
+        "operator": "#D9487C"
+      },
+      "tokens": {
+        "boolean": "#F1A948",
+        "class": "#BF7BFF",
+        "className": "#BF7BFF",
+        "commentDoc": "#B5AA96",
+        "constant": "#2D9AD7",
+        "decorator": "#F1A948",
+        "enum": "#BF7BFF",
+        "exception": "#D9487C",
+        "functionCall": "#BF7BFF",
+        "interface": "#F1A948",
+        "jsxTag": "#BF7BFF",
+        "key": "#BF7BFF",
+        "keywordImport": "#D9487C",
+        "label": "#D9487C",
+        "macro": "#2D9AD7",
+        "method": "#4FB54B",
+        "module": "#D9487C",
+        "namespace": "#F1A948",
+        "parameter": "#292318",
+        "preprocessor": "#D9487C",
+        "punctuation": "#6D5C40",
+        "regex": "#4FB54B",
+        "storageModifier": "#2D9AD7",
+        "stringEscape": "#1C150C",
+        "struct": "#BF7BFF",
+        "tag": "#BF7BFF",
+        "tagAttribute": "#F1A948",
+        "tagAttributeValue": "#4FB54B",
+        "typeParameter": "#F1A948",
+        "url": "#2D9AD7",
+        "variableGlobal": "#BF7BFF",
+        "variableLocal": "#FBF5E8",
+        "variableOther": "#4FB54B",
+        "variableProperty": "#2D9AD7"
+      },
+      "highlights": {
+        "diffAdded": "#4FB54B",
+        "diffAddedBackground": "#E8F7E1",
+        "diffModified": "#2D9AD7",
+        "diffModifiedBackground": "#E9E0D0",
+        "diffRemoved": "#E54B4B",
+        "diffRemovedBackground": "#FDE5E4",
+        "lineNumber": "#CABFAD",
+        "lineNumberActive": "#1C150C"
+      }
+    },
+    "markdown": {
+      "heading1": "#292318",
+      "heading2": "#292318",
+      "heading3": "#292318",
+      "heading4": "#292318",
+      "link": "#2D9AD7",
+      "linkHover": "#BF7BFF",
+      "inlineCode": "#4FB54B",
+      "inlineCodeBackground": "#F8F2E6",
+      "blockquote": "#F1A948",
+      "blockquoteBorder": "#E9E0CF",
+      "listMarker": "#BF7BFF99"
+    },
+    "chat": {
+      "userMessage": "#292318",
+      "userMessageBackground": "#F8F2E6",
+      "assistantMessage": "#292318",
+      "assistantMessageBackground": "#FDF8EC",
+      "timestamp": "#6D5C40",
+      "divider": "#E9E0CF"
+    },
+    "tools": {
+      "background": "#F8F2E680",
+      "border": "#d0c8b880",
+      "headerHover": "#F7EFDD",
+      "icon": "#6D5C40",
+      "title": "#292318",
+      "description": "#6D5C40",
+      "edit": {
+        "added": "#4FB54B",
+        "addedBackground": "#4FB54B25",
+        "removed": "#E54B4B",
+        "removedBackground": "#E54B4B25",
+        "lineNumber": "#bfb5a4"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/nightowl-dark.json b/packages/ui/src/lib/theme/themes/nightowl-dark.json
new file mode 100644
index 00000000..d4e5423f
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/nightowl-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "nightowl-dark",
+    "name": "Night Owl",
+    "description": "Night Owl",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#82AAFF",
+      "hover": "#6F94DF",
+      "active": "#95B7FF",
+      "foreground": "#011627",
+      "muted": "#82AAFF80",
+      "emphasis": "#6F94DF"
+    },
+    "surface": {
+      "background": "#011627",
+      "foreground": "#D6DEEB",
+      "muted": "#0B253A",
+      "mutedForeground": "#7a9ebc",
+      "elevated": "#001122",
+      "elevatedForeground": "#D6DEEB",
+      "overlay": "#FFFFFF20",
+      "subtle": "#0f283f"
+    },
+    "interactive": {
+      "border": "#1D3B53",
+      "borderHover": "#234561",
+      "borderFocus": "#82AAFF",
+      "selection": "#555d6d94",
+      "selectionForeground": "#FFFFFF",
+      "focus": "#82AAFF",
+      "focusRing": "#82AAFF40",
+      "cursor": "#FFFFFF",
+      "hover": "#555d6d68",
+      "active": "#555d6d94"
+    },
+    "status": {
+      "error": "#EF5350",
+      "errorForeground": "#011627",
+      "errorBackground": "#EF535020",
+      "errorBorder": "#EF535050",
+      "warning": "#ECC48D",
+      "warningForeground": "#011627",
+      "warningBackground": "#ECC48D20",
+      "warningBorder": "#ECC48D50",
+      "success": "#C5E478",
+      "successForeground": "#011627",
+      "successBackground": "#C5E47820",
+      "successBorder": "#C5E47850",
+      "info": "#82AAFF",
+      "infoForeground": "#011627",
+      "infoBackground": "#82AAFF20",
+      "infoBorder": "#82AAFF50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#0B253A",
+        "foreground": "#D6DEEB",
+        "comment": "#5F7E97",
+        "keyword": "#82AAFF",
+        "string": "#ECC48D",
+        "number": "#F78C6C",
+        "function": "#82AAFF",
+        "variable": "#D6DEEB",
+        "type": "#C5E478",
+        "operator": "#F78C6C"
+      },
+      "tokens": {
+        "boolean": "#C5E478",
+        "class": "#82AAFF",
+        "className": "#82AAFF",
+        "commentDoc": "#516E86",
+        "constant": "#7FDBCA",
+        "decorator": "#C5E478",
+        "enum": "#82AAFF",
+        "exception": "#F78C6C",
+        "functionCall": "#82AAFF",
+        "interface": "#C5E478",
+        "jsxTag": "#82AAFF",
+        "key": "#82AAFF",
+        "keywordImport": "#F78C6C",
+        "label": "#F78C6C",
+        "macro": "#82AAFF",
+        "method": "#C5E478",
+        "module": "#F78C6C",
+        "namespace": "#C5E478",
+        "parameter": "#D6DEEB",
+        "preprocessor": "#F78C6C",
+        "punctuation": "#5F7E97",
+        "regex": "#ECC48D",
+        "storageModifier": "#82AAFF",
+        "stringEscape": "#FFFFFF",
+        "struct": "#82AAFF",
+        "tag": "#82AAFF",
+        "tagAttribute": "#C5E478",
+        "tagAttributeValue": "#ECC48D",
+        "typeParameter": "#C5E478",
+        "url": "#7FDBCA",
+        "variableGlobal": "#82AAFF",
+        "variableLocal": "#001122",
+        "variableOther": "#C5E478",
+        "variableProperty": "#7FDBCA"
+      },
+      "highlights": {
+        "diffAdded": "#C5E478",
+        "diffAddedBackground": "#0A2E1A",
+        "diffModified": "#82AAFF",
+        "diffModifiedBackground": "#0B253A",
+        "diffRemoved": "#EF5350",
+        "diffRemovedBackground": "#2D1B1B",
+        "lineNumber": "#82AAFF",
+        "lineNumberActive": "#FFFFFF"
+      }
+    },
+    "markdown": {
+      "heading1": "#D6DEEB",
+      "heading2": "#D6DEEB",
+      "heading3": "#D6DEEB",
+      "heading4": "#D6DEEB",
+      "link": "#7FDBCA",
+      "linkHover": "#82AAFF",
+      "inlineCode": "#C5E478",
+      "inlineCodeBackground": "#0B253A",
+      "blockquote": "#5F7E97",
+      "blockquoteBorder": "#1D3B53",
+      "listMarker": "#82AAFF99"
+    },
+    "chat": {
+      "userMessage": "#D6DEEB",
+      "userMessageBackground": "#0f283f",
+      "assistantMessage": "#D6DEEB",
+      "assistantMessageBackground": "#011627",
+      "timestamp": "#5F7E97",
+      "divider": "#1D3B53"
+    },
+    "tools": {
+      "background": "#0B253A80",
+      "border": "#24496780",
+      "headerHover": "#000C17",
+      "icon": "#5F7E97",
+      "title": "#D6DEEB",
+      "description": "#5F7E97",
+      "edit": {
+        "added": "#C5E478",
+        "addedBackground": "#C5E47825",
+        "removed": "#EF5350",
+        "removedBackground": "#EF535025",
+        "lineNumber": "#58698f"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/nightowl-light.json b/packages/ui/src/lib/theme/themes/nightowl-light.json
new file mode 100644
index 00000000..e9569e1d
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/nightowl-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "nightowl-light",
+    "name": "Night Owl",
+    "description": "Night Owl",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#4876D6",
+      "hover": "#6C91DD",
+      "active": "#4168BA",
+      "foreground": "#FBFBFB",
+      "muted": "#4876D680",
+      "emphasis": "#6C91DD"
+    },
+    "surface": {
+      "background": "#FBFBFB",
+      "foreground": "#403F53",
+      "muted": "#F0F0F0",
+      "mutedForeground": "#555a5a",
+      "elevated": "#FFFFFF",
+      "elevatedForeground": "#403F53",
+      "overlay": "#1A1A1A20",
+      "subtle": "#F0F0F0"
+    },
+    "interactive": {
+      "border": "#D9D9D9",
+      "borderHover": "#CCCCCC",
+      "borderFocus": "#4876D6",
+      "selection": "#706e6e22",
+      "selectionForeground": "#1A1A1A",
+      "focus": "#4876D6",
+      "focusRing": "#4876D640",
+      "cursor": "#1A1A1A",
+      "hover": "#706e6e16",
+      "active": "#706e6e22"
+    },
+    "status": {
+      "error": "#DE3D3B",
+      "errorForeground": "#FBFBFB",
+      "errorBackground": "#DE3D3B20",
+      "errorBorder": "#DE3D3B50",
+      "warning": "#C96765",
+      "warningForeground": "#FBFBFB",
+      "warningBackground": "#C9676520",
+      "warningBorder": "#C9676550",
+      "success": "#2AA298",
+      "successForeground": "#FBFBFB",
+      "successBackground": "#2AA29820",
+      "successBorder": "#2AA29850",
+      "info": "#4876D6",
+      "infoForeground": "#FBFBFB",
+      "infoBackground": "#4876D620",
+      "infoBorder": "#4876D650"
+    },
+    "syntax": {
+      "base": {
+        "background": "#F0F0F0",
+        "foreground": "#403F53",
+        "comment": "#7A8181",
+        "keyword": "#4876D6",
+        "string": "#C96765",
+        "number": "#AA0982",
+        "function": "#4876D6",
+        "variable": "#403F53",
+        "type": "#994CC3",
+        "operator": "#AA0982"
+      },
+      "tokens": {
+        "boolean": "#994CC3",
+        "class": "#4876D6",
+        "className": "#4876D6",
+        "commentDoc": "#BBBEBE",
+        "constant": "#2AA298",
+        "decorator": "#994CC3",
+        "enum": "#4876D6",
+        "exception": "#AA0982",
+        "functionCall": "#4876D6",
+        "interface": "#994CC3",
+        "jsxTag": "#4876D6",
+        "key": "#4876D6",
+        "keywordImport": "#AA0982",
+        "label": "#AA0982",
+        "macro": "#4876D6",
+        "method": "#2AA298",
+        "module": "#AA0982",
+        "namespace": "#994CC3",
+        "parameter": "#403F53",
+        "preprocessor": "#AA0982",
+        "punctuation": "#7A8181",
+        "regex": "#C96765",
+        "storageModifier": "#4876D6",
+        "stringEscape": "#1A1A1A",
+        "struct": "#4876D6",
+        "tag": "#4876D6",
+        "tagAttribute": "#994CC3",
+        "tagAttributeValue": "#C96765",
+        "typeParameter": "#994CC3",
+        "url": "#2AA298",
+        "variableGlobal": "#4876D6",
+        "variableLocal": "#FFFFFF",
+        "variableOther": "#2AA298",
+        "variableProperty": "#2AA298"
+      },
+      "highlights": {
+        "diffAdded": "#2AA298",
+        "diffAddedBackground": "#EAF8F6",
+        "diffModified": "#4876D6",
+        "diffModifiedBackground": "#E8F0FC",
+        "diffRemoved": "#DE3D3B",
+        "diffRemovedBackground": "#FBE9E9",
+        "lineNumber": "#4876D6",
+        "lineNumberActive": "#1A1A1A"
+      }
+    },
+    "markdown": {
+      "heading1": "#403F53",
+      "heading2": "#403F53",
+      "heading3": "#403F53",
+      "heading4": "#403F53",
+      "link": "#2AA298",
+      "linkHover": "#4876D6",
+      "inlineCode": "#2AA298",
+      "inlineCodeBackground": "#F0F0F0",
+      "blockquote": "#7A8181",
+      "blockquoteBorder": "#D9D9D9",
+      "listMarker": "#4876D699"
+    },
+    "chat": {
+      "userMessage": "#403F53",
+      "userMessageBackground": "#F0F0F0",
+      "assistantMessage": "#403F53",
+      "assistantMessageBackground": "#FBFBFB",
+      "timestamp": "#7A8181",
+      "divider": "#D9D9D9"
+    },
+    "tools": {
+      "background": "#F0F0F080",
+      "border": "#D9D9D980",
+      "headerHover": "#FFFFFF",
+      "icon": "#7A8181",
+      "title": "#403F53",
+      "description": "#7A8181",
+      "edit": {
+        "added": "#2AA298",
+        "addedBackground": "#2AA29825",
+        "removed": "#DE3D3B",
+        "removedBackground": "#DE3D3B25",
+        "lineNumber": "#4876D6"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/nord-dark.json b/packages/ui/src/lib/theme/themes/nord-dark.json
new file mode 100644
index 00000000..017a62fa
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/nord-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "nord-dark",
+    "name": "Nord",
+    "description": "Nord",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#88C0D0",
+      "hover": "#78A9B8",
+      "active": "#99C9D7",
+      "foreground": "#1F2430",
+      "muted": "#88C0D080",
+      "emphasis": "#78A9B8"
+    },
+    "surface": {
+      "background": "#1F2430",
+      "foreground": "#E5E9F0",
+      "muted": "#222938",
+      "mutedForeground": "#A4ADBF",
+      "elevated": "#1C202A",
+      "elevatedForeground": "#E5E9F0",
+      "overlay": "#F8FAFC20",
+      "subtle": "#272f40"
+    },
+    "interactive": {
+      "border": "#343A47",
+      "borderHover": "#383F50",
+      "borderFocus": "#545B78",
+      "selection": "#3e4a56fe",
+      "selectionForeground": "#F8FAFC",
+      "focus": "#88C0D0",
+      "focusRing": "#88C0D040",
+      "cursor": "#F8FAFC",
+      "hover": "#3e4a5692",
+      "active": "#3e4a56fe"
+    },
+    "status": {
+      "error": "#BF616A",
+      "errorForeground": "#1F2430",
+      "errorBackground": "#BF616A20",
+      "errorBorder": "#BF616A50",
+      "warning": "#D08770",
+      "warningForeground": "#1F2430",
+      "warningBackground": "#D0877020",
+      "warningBorder": "#D0877050",
+      "success": "#A3BE8C",
+      "successForeground": "#1F2430",
+      "successBackground": "#A3BE8C20",
+      "successBorder": "#A3BE8C50",
+      "info": "#81A1C1",
+      "infoForeground": "#1F2430",
+      "infoBackground": "#81A1C120",
+      "infoBorder": "#81A1C150"
+    },
+    "syntax": {
+      "base": {
+        "background": "#222938",
+        "foreground": "#E5E9F0",
+        "comment": "#A4ADBF",
+        "keyword": "#88C0D0",
+        "string": "#A3BE8C",
+        "number": "#D57780",
+        "function": "#88C0D0",
+        "variable": "#E5E9F0",
+        "type": "#EAC196",
+        "operator": "#D57780"
+      },
+      "tokens": {
+        "boolean": "#EAC196",
+        "class": "#88C0D0",
+        "className": "#88C0D0",
+        "commentDoc": "#9098AA",
+        "constant": "#81A1C1",
+        "decorator": "#EAC196",
+        "enum": "#88C0D0",
+        "exception": "#D57780",
+        "functionCall": "#88C0D0",
+        "interface": "#EAC196",
+        "jsxTag": "#88C0D0",
+        "key": "#88C0D0",
+        "keywordImport": "#D57780",
+        "label": "#D57780",
+        "macro": "#81A1C1",
+        "method": "#A3BE8C",
+        "module": "#D57780",
+        "namespace": "#EAC196",
+        "parameter": "#E5E9F0",
+        "preprocessor": "#D57780",
+        "punctuation": "#A4ADBF",
+        "regex": "#A3BE8C",
+        "storageModifier": "#81A1C1",
+        "stringEscape": "#F8FAFC",
+        "struct": "#88C0D0",
+        "tag": "#88C0D0",
+        "tagAttribute": "#EAC196",
+        "tagAttributeValue": "#A3BE8C",
+        "typeParameter": "#EAC196",
+        "url": "#81A1C1",
+        "variableGlobal": "#88C0D0",
+        "variableLocal": "#1C202A",
+        "variableOther": "#A3BE8C",
+        "variableProperty": "#81A1C1"
+      },
+      "highlights": {
+        "diffAdded": "#A3BE8C",
+        "diffAddedBackground": "#1F2E33",
+        "diffModified": "#81A1C1",
+        "diffModifiedBackground": "#222B3A",
+        "diffRemoved": "#BF616A",
+        "diffRemovedBackground": "#2E212A",
+        "lineNumber": "#434A62",
+        "lineNumberActive": "#F8FAFC"
+      }
+    },
+    "markdown": {
+      "heading1": "#E5E9F0",
+      "heading2": "#E5E9F0",
+      "heading3": "#E5E9F0",
+      "heading4": "#E5E9F0",
+      "link": "#81A1C1",
+      "linkHover": "#88C0D0",
+      "inlineCode": "#A3BE8C",
+      "inlineCodeBackground": "#252c3c",
+      "blockquote": "#D08770",
+      "blockquoteBorder": "#343A47",
+      "listMarker": "#88C0D099"
+    },
+    "chat": {
+      "userMessage": "#E5E9F0",
+      "userMessageBackground": "#272f40",
+      "assistantMessage": "#E5E9F0",
+      "assistantMessageBackground": "#1F2430",
+      "timestamp": "#A4ADBF",
+      "divider": "#343A47"
+    },
+    "tools": {
+      "background": "#22293880",
+      "border": "#454e5f80",
+      "headerHover": "#181C24",
+      "icon": "#A4ADBF",
+      "title": "#E5E9F0",
+      "description": "#A4ADBF",
+      "edit": {
+        "added": "#A3BE8C",
+        "addedBackground": "#A3BE8C25",
+        "removed": "#BF616A",
+        "removedBackground": "#BF616A25",
+        "lineNumber": "#4a526b"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/nord-light.json b/packages/ui/src/lib/theme/themes/nord-light.json
new file mode 100644
index 00000000..2d968142
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/nord-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "nord-light",
+    "name": "Nord",
+    "description": "Nord",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#5E81AC",
+      "hover": "#7A97BA",
+      "active": "#557399",
+      "foreground": "#ECEFF4",
+      "muted": "#5E81AC80",
+      "emphasis": "#7A97BA"
+    },
+    "surface": {
+      "background": "#ECEFF4",
+      "foreground": "#2E3440",
+      "muted": "#E4E8F0",
+      "mutedForeground": "#4C566A",
+      "elevated": "#e7ebf5",
+      "elevatedForeground": "#2E3440",
+      "overlay": "#1F253020",
+      "subtle": "#dee4f0"
+    },
+    "interactive": {
+      "border": "#D5DBE7",
+      "borderHover": "#C9D0DE",
+      "borderFocus": "#9CA4BA",
+      "selection": "#c6ccd881",
+      "selectionForeground": "#1F2530",
+      "focus": "#5E81AC",
+      "focusRing": "#5E81AC40",
+      "cursor": "#1F2530",
+      "hover": "#c6ccd84a",
+      "active": "#c6ccd881"
+    },
+    "status": {
+      "error": "#BF616A",
+      "errorForeground": "#ECEFF4",
+      "errorBackground": "#BF616A20",
+      "errorBorder": "#BF616A50",
+      "warning": "#D08770",
+      "warningForeground": "#ECEFF4",
+      "warningBackground": "#D0877020",
+      "warningBorder": "#D0877050",
+      "success": "#8FBCBB",
+      "successForeground": "#ECEFF4",
+      "successBackground": "#8FBCBB20",
+      "successBorder": "#8FBCBB50",
+      "info": "#81A1C1",
+      "infoForeground": "#ECEFF4",
+      "infoBackground": "#81A1C120",
+      "infoBorder": "#81A1C150"
+    },
+    "syntax": {
+      "base": {
+        "background": "#E4E8F0",
+        "foreground": "#2E3440",
+        "comment": "#4C566A",
+        "keyword": "#5E81AC",
+        "string": "#A3BE8C",
+        "number": "#BF616A",
+        "function": "#5E81AC",
+        "variable": "#2E3440",
+        "type": "#D08770",
+        "operator": "#BF616A"
+      },
+      "tokens": {
+        "boolean": "#D08770",
+        "class": "#5E81AC",
+        "className": "#5E81AC",
+        "commentDoc": "#9CA3AF",
+        "constant": "#81A1C1",
+        "decorator": "#D08770",
+        "enum": "#5E81AC",
+        "exception": "#BF616A",
+        "functionCall": "#5E81AC",
+        "interface": "#D08770",
+        "jsxTag": "#5E81AC",
+        "key": "#5E81AC",
+        "keywordImport": "#BF616A",
+        "label": "#BF616A",
+        "macro": "#81A1C1",
+        "method": "#8FBCBB",
+        "module": "#BF616A",
+        "namespace": "#D08770",
+        "parameter": "#2E3440",
+        "preprocessor": "#BF616A",
+        "punctuation": "#4C566A",
+        "regex": "#A3BE8C",
+        "storageModifier": "#81A1C1",
+        "stringEscape": "#1F2530",
+        "struct": "#5E81AC",
+        "tag": "#5E81AC",
+        "tagAttribute": "#D08770",
+        "tagAttributeValue": "#A3BE8C",
+        "typeParameter": "#D08770",
+        "url": "#81A1C1",
+        "variableGlobal": "#5E81AC",
+        "variableLocal": "#F1F3F8",
+        "variableOther": "#8FBCBB",
+        "variableProperty": "#81A1C1"
+      },
+      "highlights": {
+        "diffAdded": "#8FBCBB",
+        "diffAddedBackground": "#E4F0E4",
+        "diffModified": "#81A1C1",
+        "diffModifiedBackground": "#DFE6F2",
+        "diffRemoved": "#BF616A",
+        "diffRemovedBackground": "#F4E1E4",
+        "lineNumber": "#B2BACC",
+        "lineNumberActive": "#1F2530"
+      }
+    },
+    "markdown": {
+      "heading1": "#2E3440",
+      "heading2": "#2E3440",
+      "heading3": "#2E3440",
+      "heading4": "#2E3440",
+      "link": "#81A1C1",
+      "linkHover": "#5E81AC",
+      "inlineCode": "#4f7034",
+      "inlineCodeBackground": "#E4E8F0",
+      "blockquote": "#D08770",
+      "blockquoteBorder": "#D5DBE7",
+      "listMarker": "#5E81AC99"
+    },
+    "chat": {
+      "userMessage": "#2E3440",
+      "userMessageBackground": "#dee4f0",
+      "assistantMessage": "#2E3440",
+      "assistantMessageBackground": "#ECEFF4",
+      "timestamp": "#4C566A",
+      "divider": "#D5DBE7"
+    },
+    "tools": {
+      "background": "#E4E8F080",
+      "border": "#b8bfcc80",
+      "headerHover": "#F6F8FC",
+      "icon": "#4C566A",
+      "title": "#2E3440",
+      "description": "#4C566A",
+      "edit": {
+        "added": "#8FBCBB",
+        "addedBackground": "#8FBCBB25",
+        "removed": "#BF616A",
+        "removedBackground": "#BF616A25",
+        "lineNumber": "#b7bfd1"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/onedarkpro-dark.json b/packages/ui/src/lib/theme/themes/onedarkpro-dark.json
new file mode 100644
index 00000000..5de05438
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/onedarkpro-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "onedarkpro-dark",
+    "name": "One Dark Pro",
+    "description": "One Dark Pro",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#61AFEF",
+      "hover": "#579AD1",
+      "active": "#77BAF1",
+      "foreground": "#1E222A",
+      "muted": "#61AFEF80",
+      "emphasis": "#579AD1"
+    },
+    "surface": {
+      "background": "#1E222A",
+      "foreground": "#ABB2BF",
+      "muted": "#212631",
+      "mutedForeground": "#939bad",
+      "elevated": "#232832",
+      "elevatedForeground": "#ABB2BF",
+      "overlay": "#F6F7FB20",
+      "subtle": "#2E3442"
+    },
+    "interactive": {
+      "border": "#323848",
+      "borderHover": "#363D52",
+      "borderFocus": "#555C79",
+      "selection": "#a8aec533",
+      "selectionForeground": "#F6F7FB",
+      "focus": "#61AFEF",
+      "focusRing": "#61AFEF40",
+      "cursor": "#F6F7FB",
+      "hover": "#a8aec525",
+      "active": "#a8aec533"
+    },
+    "status": {
+      "error": "#E06C75",
+      "errorForeground": "#1E222A",
+      "errorBackground": "#E06C7520",
+      "errorBorder": "#E06C7550",
+      "warning": "#E5C07B",
+      "warningForeground": "#1E222A",
+      "warningBackground": "#E5C07B20",
+      "warningBorder": "#E5C07B50",
+      "success": "#98C379",
+      "successForeground": "#1E222A",
+      "successBackground": "#98C37920",
+      "successBorder": "#98C37950",
+      "info": "#56B6C2",
+      "infoForeground": "#1E222A",
+      "infoBackground": "#56B6C220",
+      "infoBorder": "#56B6C250"
+    },
+    "syntax": {
+      "base": {
+        "background": "#212631",
+        "foreground": "#ABB2BF",
+        "comment": "#818899",
+        "keyword": "#61AFEF",
+        "string": "#98C379",
+        "number": "#E06C75",
+        "function": "#61AFEF",
+        "variable": "#ABB2BF",
+        "type": "#E5C07B",
+        "operator": "#E06C75"
+      },
+      "tokens": {
+        "boolean": "#E5C07B",
+        "class": "#61AFEF",
+        "className": "#61AFEF",
+        "commentDoc": "#727988",
+        "constant": "#56B6C2",
+        "decorator": "#E5C07B",
+        "enum": "#61AFEF",
+        "exception": "#E06C75",
+        "functionCall": "#61AFEF",
+        "interface": "#E5C07B",
+        "jsxTag": "#61AFEF",
+        "key": "#61AFEF",
+        "keywordImport": "#E06C75",
+        "label": "#E06C75",
+        "macro": "#56B6C2",
+        "method": "#98C379",
+        "module": "#E06C75",
+        "namespace": "#E5C07B",
+        "parameter": "#ABB2BF",
+        "preprocessor": "#E06C75",
+        "punctuation": "#818899",
+        "regex": "#98C379",
+        "storageModifier": "#56B6C2",
+        "stringEscape": "#F6F7FB",
+        "struct": "#61AFEF",
+        "tag": "#61AFEF",
+        "tagAttribute": "#E5C07B",
+        "tagAttributeValue": "#98C379",
+        "typeParameter": "#E5C07B",
+        "url": "#56B6C2",
+        "variableGlobal": "#61AFEF",
+        "variableLocal": "#1B1F27",
+        "variableOther": "#98C379",
+        "variableProperty": "#56B6C2"
+      },
+      "highlights": {
+        "diffAdded": "#98C379",
+        "diffAddedBackground": "#1C2A26",
+        "diffModified": "#56B6C2",
+        "diffModifiedBackground": "#232836",
+        "diffRemoved": "#E06C75",
+        "diffRemovedBackground": "#2A1C22",
+        "lineNumber": "#424967",
+        "lineNumberActive": "#F6F7FB"
+      }
+    },
+    "markdown": {
+      "heading1": "#ABB2BF",
+      "heading2": "#ABB2BF",
+      "heading3": "#ABB2BF",
+      "heading4": "#ABB2BF",
+      "link": "#56B6C2",
+      "linkHover": "#61AFEF",
+      "inlineCode": "#a0c288",
+      "inlineCodeBackground": "#232937",
+      "blockquote": "#E5C07B",
+      "blockquoteBorder": "#323848",
+      "listMarker": "#61AFEF99"
+    },
+    "chat": {
+      "userMessage": "#ABB2BF",
+      "userMessageBackground": "#2e3442",
+      "assistantMessage": "#ABB2BF",
+      "assistantMessageBackground": "#1E222A",
+      "timestamp": "#818899",
+      "divider": "#323848"
+    },
+    "tools": {
+      "background": "#21263180",
+      "border": "#41495e80",
+      "headerHover": "#171B23",
+      "icon": "#818899",
+      "title": "#ABB2BF",
+      "description": "#818899",
+      "edit": {
+        "added": "#98C379",
+        "addedBackground": "#98C37925",
+        "removed": "#E06C75",
+        "removedBackground": "#E06C7525",
+        "lineNumber": "#545c81"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/onedarkpro-light.json b/packages/ui/src/lib/theme/themes/onedarkpro-light.json
new file mode 100644
index 00000000..d433c078
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/onedarkpro-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "onedarkpro-light",
+    "name": "One Dark Pro",
+    "description": "One Dark Pro",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#528BFF",
+      "hover": "#73A0FE",
+      "active": "#4879DC",
+      "foreground": "#F5F6F8",
+      "muted": "#528BFF80",
+      "emphasis": "#73A0FE"
+    },
+    "surface": {
+      "background": "#F5F6F8",
+      "foreground": "#2B303B",
+      "muted": "#EEF0F4",
+      "mutedForeground": "#6B717F",
+      "elevated": "#f0f5fa",
+      "elevatedForeground": "#2B303B",
+      "overlay": "#0E111820",
+      "subtle": "#eaedf4"
+    },
+    "interactive": {
+      "border": "#DEE2EB",
+      "borderHover": "#D4D9E3",
+      "borderFocus": "#A6ADBF",
+      "selection": "#d8dde6",
+      "selectionForeground": "#0E1118",
+      "focus": "#528BFF",
+      "focusRing": "#528BFF40",
+      "cursor": "#0E1118",
+      "hover": "#d8dde6c2",
+      "active": "#FAFBFC"
+    },
+    "status": {
+      "error": "#E06C75",
+      "errorForeground": "#F5F6F8",
+      "errorBackground": "#E06C7520",
+      "errorBorder": "#E06C7550",
+      "warning": "#D19A66",
+      "warningForeground": "#F5F6F8",
+      "warningBackground": "#D19A6620",
+      "warningBorder": "#D19A6650",
+      "success": "#4FA66D",
+      "successForeground": "#F5F6F8",
+      "successBackground": "#4FA66D20",
+      "successBorder": "#4FA66D50",
+      "info": "#61AFEF",
+      "infoForeground": "#F5F6F8",
+      "infoBackground": "#61AFEF20",
+      "infoBorder": "#61AFEF50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#EEF0F4",
+        "foreground": "#2B303B",
+        "comment": "#6B717F",
+        "keyword": "#528BFF",
+        "string": "#4FA66D",
+        "number": "#D85462",
+        "function": "#528BFF",
+        "variable": "#2B303B",
+        "type": "#D19A66",
+        "operator": "#D85462"
+      },
+      "tokens": {
+        "boolean": "#D19A66",
+        "class": "#528BFF",
+        "className": "#528BFF",
+        "commentDoc": "#B0B4BC",
+        "constant": "#61AFEF",
+        "decorator": "#D19A66",
+        "enum": "#528BFF",
+        "exception": "#D85462",
+        "functionCall": "#528BFF",
+        "interface": "#D19A66",
+        "jsxTag": "#528BFF",
+        "key": "#528BFF",
+        "keywordImport": "#D85462",
+        "label": "#D85462",
+        "macro": "#61AFEF",
+        "method": "#4FA66D",
+        "module": "#D85462",
+        "namespace": "#D19A66",
+        "parameter": "#2B303B",
+        "preprocessor": "#D85462",
+        "punctuation": "#6B717F",
+        "regex": "#4FA66D",
+        "storageModifier": "#61AFEF",
+        "stringEscape": "#0E1118",
+        "struct": "#528BFF",
+        "tag": "#528BFF",
+        "tagAttribute": "#D19A66",
+        "tagAttributeValue": "#4FA66D",
+        "typeParameter": "#D19A66",
+        "url": "#61AFEF",
+        "variableGlobal": "#528BFF",
+        "variableLocal": "#FAFBFC",
+        "variableOther": "#4FA66D",
+        "variableProperty": "#61AFEF"
+      },
+      "highlights": {
+        "diffAdded": "#4FA66D",
+        "diffAddedBackground": "#E5F4EA",
+        "diffModified": "#61AFEF",
+        "diffModifiedBackground": "#E4E8F4",
+        "diffRemoved": "#E06C75",
+        "diffRemovedBackground": "#FDE7EA",
+        "lineNumber": "#BEC4D0",
+        "lineNumberActive": "#0E1118"
+      }
+    },
+    "markdown": {
+      "heading1": "#2B303B",
+      "heading2": "#2B303B",
+      "heading3": "#2B303B",
+      "heading4": "#2B303B",
+      "link": "#61AFEF",
+      "linkHover": "#528BFF",
+      "inlineCode": "#327d4c",
+      "inlineCodeBackground": "#EEF0F4",
+      "blockquote": "#D19A66",
+      "blockquoteBorder": "#DEE2EB",
+      "listMarker": "#528BFF99"
+    },
+    "chat": {
+      "userMessage": "#2B303B",
+      "userMessageBackground": "#eaedf4",
+      "assistantMessage": "#2B303B",
+      "assistantMessageBackground": "#F5F6F8",
+      "timestamp": "#6B717F",
+      "divider": "#DEE2EB"
+    },
+    "tools": {
+      "background": "#EEF0F480",
+      "border": "#c4c8d080",
+      "headerHover": "#FFFFFF",
+      "icon": "#6B717F",
+      "title": "#2B303B",
+      "description": "#6B717F",
+      "edit": {
+        "added": "#4FA66D",
+        "addedBackground": "#4FA66D25",
+        "removed": "#E06C75",
+        "removedBackground": "#E06C7525",
+        "lineNumber": "#afb5c1"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/presets.ts b/packages/ui/src/lib/theme/themes/presets.ts
new file mode 100644
index 00000000..86320ffd
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/presets.ts
@@ -0,0 +1,69 @@
+import type { Theme } from '@/types/theme';
+
+import aura_dark_Raw from './aura-dark.json';
+import aura_light_Raw from './aura-light.json';
+import ayu_dark_Raw from './ayu-dark.json';
+import ayu_light_Raw from './ayu-light.json';
+import carbonfox_dark_Raw from './carbonfox-dark.json';
+import carbonfox_light_Raw from './carbonfox-light.json';
+import catppuccin_dark_Raw from './catppuccin-dark.json';
+import catppuccin_light_Raw from './catppuccin-light.json';
+import dracula_dark_Raw from './dracula-dark.json';
+import dracula_light_Raw from './dracula-light.json';
+import gruvbox_dark_Raw from './gruvbox-dark.json';
+import gruvbox_light_Raw from './gruvbox-light.json';
+import kanagawa_dark_Raw from './kanagawa-dark.json';
+import kanagawa_light_Raw from './kanagawa-light.json';
+import monokai_dark_Raw from './monokai-dark.json';
+import monokai_light_Raw from './monokai-light.json';
+import nightowl_dark_Raw from './nightowl-dark.json';
+import nightowl_light_Raw from './nightowl-light.json';
+import nord_dark_Raw from './nord-dark.json';
+import nord_light_Raw from './nord-light.json';
+import onedarkpro_dark_Raw from './onedarkpro-dark.json';
+import onedarkpro_light_Raw from './onedarkpro-light.json';
+import solarized_dark_Raw from './solarized-dark.json';
+import solarized_light_Raw from './solarized-light.json';
+import tokyonight_dark_Raw from './tokyonight-dark.json';
+import tokyonight_light_Raw from './tokyonight-light.json';
+import vesper_dark_Raw from './vesper-dark.json';
+import vesper_light_Raw from './vesper-light.json';
+import mono_plus_dark_Raw from './mono-plus-dark.json';
+import mono_plus_light_Raw from './mono-plus-light.json';
+import mono_dark_Raw from './mono-dark.json';
+import mono_light_Raw from './mono-light.json';
+
+export const presetThemes: Theme[] = [
+  aura_dark_Raw as Theme,
+  aura_light_Raw as Theme,
+  ayu_dark_Raw as Theme,
+  ayu_light_Raw as Theme,
+  carbonfox_dark_Raw as Theme,
+  carbonfox_light_Raw as Theme,
+  catppuccin_dark_Raw as Theme,
+  catppuccin_light_Raw as Theme,
+  dracula_dark_Raw as Theme,
+  dracula_light_Raw as Theme,
+  gruvbox_dark_Raw as Theme,
+  gruvbox_light_Raw as Theme,
+  kanagawa_dark_Raw as Theme,
+  kanagawa_light_Raw as Theme,
+  monokai_dark_Raw as Theme,
+  monokai_light_Raw as Theme,
+  nightowl_dark_Raw as Theme,
+  nightowl_light_Raw as Theme,
+  nord_dark_Raw as Theme,
+  nord_light_Raw as Theme,
+  onedarkpro_dark_Raw as Theme,
+  onedarkpro_light_Raw as Theme,
+  solarized_dark_Raw as Theme,
+  solarized_light_Raw as Theme,
+  tokyonight_dark_Raw as Theme,
+  tokyonight_light_Raw as Theme,
+  vesper_dark_Raw as Theme,
+  vesper_light_Raw as Theme,
+  mono_plus_dark_Raw as Theme,
+  mono_plus_light_Raw as Theme,
+  mono_dark_Raw as Theme,
+  mono_light_Raw as Theme,
+];
diff --git a/packages/ui/src/lib/theme/themes/solarized-dark.json b/packages/ui/src/lib/theme/themes/solarized-dark.json
new file mode 100644
index 00000000..f77a5a70
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/solarized-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "solarized-dark",
+    "name": "Solarized",
+    "description": "Solarized",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#278BD2",
+      "hover": "#5C65AC",
+      "active": "#8285C9",
+      "foreground": "#001F27",
+      "muted": "#6C71C480",
+      "emphasis": "#5C65AC"
+    },
+    "surface": {
+      "background": "#001e25",
+      "foreground": "#93A1A1",
+      "muted": "#02232e",
+      "mutedForeground": "#89999a",
+      "elevated": "#052832",
+      "elevatedForeground": "#93A1A1",
+      "overlay": "#FDF6E320",
+      "subtle": "#042b34"
+    },
+    "interactive": {
+      "border": "#20373F",
+      "borderHover": "#243E47",
+      "borderFocus": "#3A5A6B",
+      "selection": "#98afbd33",
+      "selectionForeground": "#FDF6E3",
+      "focus": "#6C71C4",
+      "focusRing": "#6C71C440",
+      "cursor": "#FDF6E3",
+      "hover": "#98afbd25",
+      "active": "#98afbd33"
+    },
+    "status": {
+      "error": "#DC322F",
+      "errorForeground": "#001F27",
+      "errorBackground": "#DC322F20",
+      "errorBorder": "#DC322F50",
+      "warning": "#B58900",
+      "warningForeground": "#001F27",
+      "warningBackground": "#B5890020",
+      "warningBorder": "#B5890050",
+      "success": "#859900",
+      "successForeground": "#001F27",
+      "successBackground": "#85990020",
+      "successBorder": "#85990050",
+      "info": "#2AA198",
+      "infoForeground": "#001F27",
+      "infoBackground": "#2AA19820",
+      "infoBorder": "#2AA19850"
+    },
+    "syntax": {
+      "base": {
+        "background": "#022733",
+        "foreground": "#93A1A1",
+        "comment": "#6C7F80",
+        "keyword": "#6C71C4",
+        "string": "#859900",
+        "number": "#D33682",
+        "function": "#6C71C4",
+        "variable": "#93A1A1",
+        "type": "#B58900",
+        "operator": "#D33682"
+      },
+      "tokens": {
+        "boolean": "#B58900",
+        "class": "#6C71C4",
+        "className": "#6C71C4",
+        "commentDoc": "#5C7173",
+        "constant": "#2AA198",
+        "decorator": "#B58900",
+        "enum": "#6C71C4",
+        "exception": "#D33682",
+        "functionCall": "#6C71C4",
+        "interface": "#B58900",
+        "jsxTag": "#6C71C4",
+        "key": "#6C71C4",
+        "keywordImport": "#D33682",
+        "label": "#D33682",
+        "macro": "#2AA198",
+        "method": "#859900",
+        "module": "#D33682",
+        "namespace": "#B58900",
+        "parameter": "#93A1A1",
+        "preprocessor": "#D33682",
+        "punctuation": "#6C7F80",
+        "regex": "#859900",
+        "storageModifier": "#2AA198",
+        "stringEscape": "#FDF6E3",
+        "struct": "#6C71C4",
+        "tag": "#6C71C4",
+        "tagAttribute": "#B58900",
+        "tagAttributeValue": "#859900",
+        "typeParameter": "#B58900",
+        "url": "#2AA198",
+        "variableGlobal": "#6C71C4",
+        "variableLocal": "#01222B",
+        "variableOther": "#859900",
+        "variableProperty": "#2AA198"
+      },
+      "highlights": {
+        "diffAdded": "#859900",
+        "diffAddedBackground": "#0F2F29",
+        "diffModified": "#2AA198",
+        "diffModifiedBackground": "#0F3844",
+        "diffRemoved": "#DC322F",
+        "diffRemovedBackground": "#321C1C",
+        "lineNumber": "#2D4958",
+        "lineNumberActive": "#FDF6E3"
+      }
+    },
+    "markdown": {
+      "heading1": "#93A1A1",
+      "heading2": "#93A1A1",
+      "heading3": "#93A1A1",
+      "heading4": "#93A1A1",
+      "link": "#2AA198",
+      "linkHover": "#6C71C4",
+      "inlineCode": "#859900",
+      "inlineCodeBackground": "#022733",
+      "blockquote": "#B58900",
+      "blockquoteBorder": "#20373F",
+      "listMarker": "#6C71C499"
+    },
+    "chat": {
+      "userMessage": "#93A1A1",
+      "userMessageBackground": "#042B34",
+      "assistantMessage": "#93A1A1",
+      "assistantMessageBackground": "#001F27",
+      "timestamp": "#6C7F80",
+      "divider": "#20373F"
+    },
+    "tools": {
+      "background": "#02273380",
+      "border": "#2b495380",
+      "headerHover": "#032830",
+      "icon": "#6C7F80",
+      "title": "#93A1A1",
+      "description": "#6C7F80",
+      "edit": {
+        "added": "#859900",
+        "addedBackground": "#85990025",
+        "removed": "#DC322F",
+        "removedBackground": "#DC322F25",
+        "lineNumber": "#345567"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/solarized-light.json b/packages/ui/src/lib/theme/themes/solarized-light.json
new file mode 100644
index 00000000..a3f5ee06
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/solarized-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "solarized-light",
+    "name": "Solarized",
+    "description": "Solarized",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#268BD2",
+      "hover": "#51A0D5",
+      "active": "#217EBC",
+      "foreground": "#FDF6E3",
+      "muted": "#268BD280",
+      "emphasis": "#51A0D5"
+    },
+    "surface": {
+      "background": "#FDF6E3",
+      "foreground": "#586E75",
+      "muted": "#F6EFDA",
+      "mutedForeground": "#667678",
+      "elevated": "#FAF3DC",
+      "elevatedForeground": "#586E75",
+      "overlay": "#07364220",
+      "subtle": "#F6EFDA"
+    },
+    "interactive": {
+      "border": "#E3E0CD",
+      "borderHover": "#D9D4C2",
+      "borderFocus": "#ACA58F",
+      "selection": "#10647a22",
+      "selectionForeground": "#073642",
+      "focus": "#268BD2",
+      "focusRing": "#268BD240",
+      "cursor": "#073642",
+      "hover": "#10647a14",
+      "active": "#10647a22"
+    },
+    "status": {
+      "error": "#DC322F",
+      "errorForeground": "#FDF6E3",
+      "errorBackground": "#DC322F20",
+      "errorBorder": "#DC322F50",
+      "warning": "#B58900",
+      "warningForeground": "#FDF6E3",
+      "warningBackground": "#B5890020",
+      "warningBorder": "#B5890050",
+      "success": "#859900",
+      "successForeground": "#FDF6E3",
+      "successBackground": "#85990020",
+      "successBorder": "#85990050",
+      "info": "#2AA198",
+      "infoForeground": "#FDF6E3",
+      "infoBackground": "#2AA19820",
+      "infoBorder": "#2AA19850"
+    },
+    "syntax": {
+      "base": {
+        "background": "#F6EFDA",
+        "foreground": "#586E75",
+        "comment": "#7A8C8E",
+        "keyword": "#268BD2",
+        "string": "#859900",
+        "number": "#D33682",
+        "function": "#268BD2",
+        "variable": "#586E75",
+        "type": "#B58900",
+        "operator": "#D33682"
+      },
+      "tokens": {
+        "boolean": "#B58900",
+        "class": "#268BD2",
+        "className": "#268BD2",
+        "commentDoc": "#BCC1B9",
+        "constant": "#2AA198",
+        "decorator": "#B58900",
+        "enum": "#268BD2",
+        "exception": "#D33682",
+        "functionCall": "#268BD2",
+        "interface": "#B58900",
+        "jsxTag": "#268BD2",
+        "key": "#268BD2",
+        "keywordImport": "#D33682",
+        "label": "#D33682",
+        "macro": "#2AA198",
+        "method": "#859900",
+        "module": "#D33682",
+        "namespace": "#B58900",
+        "parameter": "#586E75",
+        "preprocessor": "#D33682",
+        "punctuation": "#7A8C8E",
+        "regex": "#859900",
+        "storageModifier": "#2AA198",
+        "stringEscape": "#073642",
+        "struct": "#268BD2",
+        "tag": "#268BD2",
+        "tagAttribute": "#B58900",
+        "tagAttributeValue": "#859900",
+        "typeParameter": "#B58900",
+        "url": "#2AA198",
+        "variableGlobal": "#268BD2",
+        "variableLocal": "#FAF3DC",
+        "variableOther": "#859900",
+        "variableProperty": "#2AA198"
+      },
+      "highlights": {
+        "diffAdded": "#859900",
+        "diffAddedBackground": "#EEF5D6",
+        "diffModified": "#2AA198",
+        "diffModifiedBackground": "#E3ECF3",
+        "diffRemoved": "#DC322F",
+        "diffRemovedBackground": "#FDE4DD",
+        "lineNumber": "#C5C0AD",
+        "lineNumberActive": "#073642"
+      }
+    },
+    "markdown": {
+      "heading1": "#586E75",
+      "heading2": "#586E75",
+      "heading3": "#586E75",
+      "heading4": "#586E75",
+      "link": "#2AA198",
+      "linkHover": "#268BD2",
+      "inlineCode": "#859900",
+      "inlineCodeBackground": "#F6EFDA",
+      "blockquote": "#B58900",
+      "blockquoteBorder": "#E3E0CD",
+      "listMarker": "#268BD299"
+    },
+    "chat": {
+      "userMessage": "#586E75",
+      "userMessageBackground": "#F6EFDA",
+      "assistantMessage": "#586E75",
+      "assistantMessageBackground": "#FDF6E3",
+      "timestamp": "#7A8C8E",
+      "divider": "#E3E0CD"
+    },
+    "tools": {
+      "background": "#F6EFDA80",
+      "border": "#d1cebc80",
+      "headerHover": "#F6EDD4",
+      "icon": "#7A8C8E",
+      "title": "#586E75",
+      "description": "#7A8C8E",
+      "edit": {
+        "added": "#859900",
+        "addedBackground": "#85990025",
+        "removed": "#DC322F",
+        "removedBackground": "#DC322F25",
+        "lineNumber": "#c3bead"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/tokyonight-dark.json b/packages/ui/src/lib/theme/themes/tokyonight-dark.json
new file mode 100644
index 00000000..411d36c2
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/tokyonight-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "tokyonight-dark",
+    "name": "Tokyonight",
+    "description": "Tokyonight",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#7AA2F7",
+      "hover": "#6A8CD6",
+      "active": "#8BADF8",
+      "foreground": "#0F111A",
+      "muted": "#7AA2F780",
+      "emphasis": "#6A8CD6"
+    },
+    "surface": {
+      "background": "#0F111A",
+      "foreground": "#C0CAF5",
+      "muted": "#111428",
+      "mutedForeground": "#7A88CF",
+      "elevated": "#131629",
+      "elevatedForeground": "#C0CAF5",
+      "overlay": "#EAEAFF20",
+      "subtle": "#171b30"
+    },
+    "interactive": {
+      "border": "#25283B",
+      "borderHover": "#292C43",
+      "borderFocus": "#45496F",
+      "selection": "#b3b3cc33",
+      "selectionForeground": "#EAEAFF",
+      "focus": "#7AA2F7",
+      "focusRing": "#7AA2F740",
+      "cursor": "#EAEAFF",
+      "hover": "#272E49",
+      "active": "#262C46"
+    },
+    "status": {
+      "error": "#F7768E",
+      "errorForeground": "#0F111A",
+      "errorBackground": "#F7768E20",
+      "errorBorder": "#F7768E50",
+      "warning": "#E0AF68",
+      "warningForeground": "#0F111A",
+      "warningBackground": "#E0AF6820",
+      "warningBorder": "#E0AF6850",
+      "success": "#9ECE6A",
+      "successForeground": "#0F111A",
+      "successBackground": "#9ECE6A20",
+      "successBorder": "#9ECE6A50",
+      "info": "#7DCFFF",
+      "infoForeground": "#0F111A",
+      "infoBackground": "#7DCFFF20",
+      "infoBorder": "#7DCFFF50"
+    },
+    "syntax": {
+      "base": {
+        "background": "#111428",
+        "foreground": "#C0CAF5",
+        "comment": "#7A88CF",
+        "keyword": "#BB9AF7",
+        "string": "#9ECE6A",
+        "number": "#FF9E64",
+        "function": "#BB9AF7",
+        "variable": "#C0CAF5",
+        "type": "#E0AF68",
+        "operator": "#FF9E64"
+      },
+      "tokens": {
+        "boolean": "#E0AF68",
+        "class": "#BB9AF7",
+        "className": "#BB9AF7",
+        "commentDoc": "#6A76B4",
+        "constant": "#7DCFFF",
+        "decorator": "#E0AF68",
+        "enum": "#BB9AF7",
+        "exception": "#FF9E64",
+        "functionCall": "#BB9AF7",
+        "interface": "#E0AF68",
+        "jsxTag": "#BB9AF7",
+        "key": "#BB9AF7",
+        "keywordImport": "#FF9E64",
+        "label": "#FF9E64",
+        "macro": "#7DCFFF",
+        "method": "#9ECE6A",
+        "module": "#FF9E64",
+        "namespace": "#E0AF68",
+        "parameter": "#C0CAF5",
+        "preprocessor": "#FF9E64",
+        "punctuation": "#7A88CF",
+        "regex": "#9ECE6A",
+        "storageModifier": "#7DCFFF",
+        "stringEscape": "#EAEAFF",
+        "struct": "#BB9AF7",
+        "tag": "#BB9AF7",
+        "tagAttribute": "#E0AF68",
+        "tagAttributeValue": "#9ECE6A",
+        "typeParameter": "#E0AF68",
+        "url": "#7DCFFF",
+        "variableGlobal": "#BB9AF7",
+        "variableLocal": "#101324",
+        "variableOther": "#9ECE6A",
+        "variableProperty": "#7DCFFF"
+      },
+      "highlights": {
+        "diffAdded": "#9ECE6A",
+        "diffAddedBackground": "#1C2A38",
+        "diffModified": "#7DCFFF",
+        "diffModifiedBackground": "#24283B",
+        "diffRemoved": "#F7768E",
+        "diffRemovedBackground": "#2A1F32",
+        "lineNumber": "#343755",
+        "lineNumberActive": "#EAEAFF"
+      }
+    },
+    "markdown": {
+      "heading1": "#C0CAF5",
+      "heading2": "#C0CAF5",
+      "heading3": "#C0CAF5",
+      "heading4": "#C0CAF5",
+      "link": "#7DCFFF",
+      "linkHover": "#7AA2F7",
+      "inlineCode": "#9ECE6A",
+      "inlineCodeBackground": "#111428",
+      "blockquote": "#E0AF68",
+      "blockquoteBorder": "#25283B",
+      "listMarker": "#7AA2F799"
+    },
+    "chat": {
+      "userMessage": "#C0CAF5",
+      "userMessageBackground": "#171b30",
+      "assistantMessage": "#C0CAF5",
+      "assistantMessageBackground": "#0F111A",
+      "timestamp": "#7A88CF",
+      "divider": "#25283B"
+    },
+    "tools": {
+      "background": "#11142880",
+      "border": "#393e5c80",
+      "headerHover": "#13172A",
+      "icon": "#7A88CF",
+      "title": "#C0CAF5",
+      "description": "#7A88CF",
+      "edit": {
+        "added": "#9ECE6A",
+        "addedBackground": "#9ECE6A25",
+        "removed": "#F7768E",
+        "removedBackground": "#F7768E25",
+        "lineNumber": "#3e4266"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/tokyonight-light.json b/packages/ui/src/lib/theme/themes/tokyonight-light.json
new file mode 100644
index 00000000..c7eee71f
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/tokyonight-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "tokyonight-light",
+    "name": "Tokyonight",
+    "description": "Tokyonight",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#2E7DE9",
+      "hover": "#5291E9",
+      "active": "#2B70D0",
+      "foreground": "#E1E2E7",
+      "muted": "#2E7DE980",
+      "emphasis": "#5291E9"
+    },
+    "surface": {
+      "background": "#E1E2E7",
+      "foreground": "#273153",
+      "muted": "#DEE0EA",
+      "mutedForeground": "#5C6390",
+      "elevated": "#dee0ee",
+      "elevatedForeground": "#273153",
+      "overlay": "#1C254420",
+      "subtle": "#dadce6"
+    },
+    "interactive": {
+      "border": "#CDD0DC",
+      "borderHover": "#C3C6D2",
+      "borderFocus": "#9599A8",
+      "selection": "#939cbf47",
+      "selectionForeground": "#1C2544",
+      "focus": "#2E7DE9",
+      "focusRing": "#2E7DE940",
+      "cursor": "#1C2544",
+      "hover": "#7b86ad2a",
+      "active": "#7b86ad47"
+    },
+    "status": {
+      "error": "#C94060",
+      "errorForeground": "#E1E2E7",
+      "errorBackground": "#C9406020",
+      "errorBorder": "#C9406050",
+      "warning": "#8C6C3E",
+      "warningForeground": "#E1E2E7",
+      "warningBackground": "#8C6C3E20",
+      "warningBorder": "#8C6C3E50",
+      "success": "#587539",
+      "successForeground": "#E1E2E7",
+      "successBackground": "#58753920",
+      "successBorder": "#58753950",
+      "info": "#007197",
+      "infoForeground": "#E1E2E7",
+      "infoBackground": "#00719720",
+      "infoBorder": "#00719750"
+    },
+    "syntax": {
+      "base": {
+        "background": "#DEE0EA",
+        "foreground": "#273153",
+        "comment": "#5C6390",
+        "keyword": "#9854F1",
+        "string": "#587539",
+        "number": "#B15C00",
+        "function": "#9854F1",
+        "variable": "#273153",
+        "type": "#3760BF",
+        "operator": "#B15C00"
+      },
+      "tokens": {
+        "boolean": "#3760BF",
+        "class": "#9854F1",
+        "className": "#9854F1",
+        "commentDoc": "#9FA3BC",
+        "constant": "#007197",
+        "decorator": "#3760BF",
+        "enum": "#9854F1",
+        "exception": "#B15C00",
+        "functionCall": "#9854F1",
+        "interface": "#3760BF",
+        "jsxTag": "#9854F1",
+        "key": "#9854F1",
+        "keywordImport": "#B15C00",
+        "label": "#B15C00",
+        "macro": "#007197",
+        "method": "#587539",
+        "module": "#B15C00",
+        "namespace": "#3760BF",
+        "parameter": "#273153",
+        "preprocessor": "#B15C00",
+        "punctuation": "#5C6390",
+        "regex": "#587539",
+        "storageModifier": "#007197",
+        "stringEscape": "#1C2544",
+        "struct": "#9854F1",
+        "tag": "#9854F1",
+        "tagAttribute": "#3760BF",
+        "tagAttributeValue": "#587539",
+        "typeParameter": "#3760BF",
+        "url": "#007197",
+        "variableGlobal": "#9854F1",
+        "variableLocal": "#E5E6EE",
+        "variableOther": "#587539",
+        "variableProperty": "#007197"
+      },
+      "highlights": {
+        "diffAdded": "#587539",
+        "diffAddedBackground": "#DFE7DA",
+        "diffModified": "#007197",
+        "diffModifiedBackground": "#CFD1DD",
+        "diffRemoved": "#C94060",
+        "diffRemovedBackground": "#F4DADD",
+        "lineNumber": "#AEB2BF",
+        "lineNumberActive": "#1C2544"
+      }
+    },
+    "markdown": {
+      "heading1": "#9854F1",
+      "heading2": "#B15C00",
+      "heading3": "#8C6C3E",
+      "heading4": "#273153",
+      "link": "#007197",
+      "linkHover": "#2E7DE9",
+      "inlineCode": "#587539",
+      "inlineCodeBackground": "#DEE0EA",
+      "blockquote": "#8C6C3E",
+      "blockquoteBorder": "#CDD0DC",
+      "listMarker": "#2E7DE999"
+    },
+    "chat": {
+      "userMessage": "#273153",
+      "userMessageBackground": "#dcdee9",
+      "assistantMessage": "#273153",
+      "assistantMessageBackground": "#E1E2E7",
+      "timestamp": "#5C6390",
+      "divider": "#CDD0DC"
+    },
+    "tools": {
+      "background": "#DEE0EA80",
+      "border": "#a5a8b580",
+      "headerHover": "#E9EAF1",
+      "icon": "#5C6390",
+      "title": "#273153",
+      "description": "#5C6390",
+      "edit": {
+        "added": "#587539",
+        "addedBackground": "#58753925",
+        "removed": "#C94060",
+        "removedBackground": "#C9406025",
+        "lineNumber": "#9b9ea9"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/vesper-dark.json b/packages/ui/src/lib/theme/themes/vesper-dark.json
new file mode 100644
index 00000000..7d998b73
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/vesper-dark.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "vesper-dark",
+    "name": "Vesper",
+    "description": "Vesper",
+    "version": "1.0.0",
+    "variant": "dark",
+    "tags": [ "dark", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#FFC799",
+      "hover": "#DBAC84",
+      "active": "#FFCFA8",
+      "foreground": "#101010",
+      "muted": "#FFC79980",
+      "emphasis": "#DBAC84"
+    },
+    "surface": {
+      "background": "#101010",
+      "foreground": "#FFFFFF",
+      "muted": "#141414",
+      "mutedForeground": "#A0A0A0",
+      "elevated": "#110f0f",
+      "elevatedForeground": "#FFFFFF",
+      "overlay": "#FFFFFF20",
+      "subtle": "#232323"
+    },
+    "interactive": {
+      "border": "#1C1C1C",
+      "borderHover": "#202020",
+      "borderFocus": "#383838",
+      "selection": "#b1adad33",
+      "selectionForeground": "#FFFFFF",
+      "focus": "#FFC799",
+      "focusRing": "#FFC79940",
+      "cursor": "#FFFFFF",
+      "hover": "#ffffff1c",
+      "active": "#ffffff33"
+    },
+    "status": {
+      "error": "#FF8080",
+      "errorForeground": "#101010",
+      "errorBackground": "#FF808020",
+      "errorBorder": "#FF808050",
+      "warning": "#FFC799",
+      "warningForeground": "#101010",
+      "warningBackground": "#FFC79920",
+      "warningBorder": "#FFC79950",
+      "success": "#99FFE4",
+      "successForeground": "#101010",
+      "successBackground": "#99FFE420",
+      "successBorder": "#99FFE450",
+      "info": "#FFC799",
+      "infoForeground": "#101010",
+      "infoBackground": "#FFC79920",
+      "infoBorder": "#FFC79950"
+    },
+    "syntax": {
+      "base": {
+        "background": "#141414",
+        "foreground": "#FFFFFF",
+        "comment": "#A0A0A0",
+        "keyword": "#FFC799",
+        "string": "#99FFE4",
+        "number": "#FF8080",
+        "function": "#FFC799",
+        "variable": "#FFFFFF",
+        "type": "#FFC799",
+        "operator": "#FF8080"
+      },
+      "tokens": {
+        "boolean": "#FFC799",
+        "class": "#FFC799",
+        "className": "#FFC799",
+        "commentDoc": "#8A8A8A",
+        "constant": "#A0A0A0",
+        "decorator": "#FFC799",
+        "enum": "#FFC799",
+        "exception": "#FF8080",
+        "functionCall": "#FFC799",
+        "interface": "#FFC799",
+        "jsxTag": "#FFC799",
+        "key": "#FFC799",
+        "keywordImport": "#FF8080",
+        "label": "#FF8080",
+        "macro": "#8B8B8B",
+        "method": "#99FFE4",
+        "module": "#FF8080",
+        "namespace": "#FFC799",
+        "parameter": "#FFFFFF",
+        "preprocessor": "#FF8080",
+        "punctuation": "#A0A0A0",
+        "regex": "#99FFE4",
+        "storageModifier": "#8B8B8B",
+        "stringEscape": "#FFFFFF",
+        "struct": "#FFC799",
+        "tag": "#FFC799",
+        "tagAttribute": "#FFC799",
+        "tagAttributeValue": "#99FFE4",
+        "typeParameter": "#FFC799",
+        "url": "#A0A0A0",
+        "variableGlobal": "#FFC799",
+        "variableLocal": "#0C0C0C",
+        "variableOther": "#99FFE4",
+        "variableProperty": "#A0A0A0"
+      },
+      "highlights": {
+        "diffAdded": "#99FFE4",
+        "diffAddedBackground": "#0D2818",
+        "diffModified": "#FFC799",
+        "diffModifiedBackground": "#141414",
+        "diffRemoved": "#FF8080",
+        "diffRemovedBackground": "#281A1A",
+        "lineNumber": "#282828",
+        "lineNumberActive": "#FFFFFF"
+      }
+    },
+    "markdown": {
+      "heading1": "#FFFFFF",
+      "heading2": "#FFFFFF",
+      "heading3": "#FFFFFF",
+      "heading4": "#FFFFFF",
+      "link": "#A0A0A0",
+      "linkHover": "#FFC799",
+      "inlineCode": "#A0A0A0",
+      "inlineCodeBackground": "#141414",
+      "blockquote": "#FFFFFF",
+      "blockquoteBorder": "#1C1C1C",
+      "listMarker": "#FFFFFF99"
+    },
+    "chat": {
+      "userMessage": "#FFFFFF",
+      "userMessageBackground": "#232323",
+      "assistantMessage": "#FFFFFF",
+      "assistantMessageBackground": "#101010",
+      "timestamp": "#A0A0A0",
+      "divider": "#1C1C1C"
+    },
+    "tools": {
+      "background": "#14141480",
+      "border": "#48474780",
+      "headerHover": "#080808",
+      "icon": "#A0A0A0",
+      "title": "#FFFFFF",
+      "description": "#A0A0A0",
+      "edit": {
+        "added": "#99FFE4",
+        "addedBackground": "#99FFE425",
+        "removed": "#FF8080",
+        "removedBackground": "#FF808025",
+        "lineNumber": "#615f5f"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/themes/vesper-light.json b/packages/ui/src/lib/theme/themes/vesper-light.json
new file mode 100644
index 00000000..13ceb158
--- /dev/null
+++ b/packages/ui/src/lib/theme/themes/vesper-light.json
@@ -0,0 +1,176 @@
+{
+  "metadata": {
+    "id": "vesper-light",
+    "name": "Vesper",
+    "description": "Vesper",
+    "version": "1.0.0",
+    "variant": "light",
+    "tags": [ "light", "palette" ]
+  },
+  "colors": {
+    "primary": {
+      "base": "#f5a666",
+      "hover": "#FFD2AD",
+      "active": "#D9A982",
+      "foreground": "#FFFFFF",
+      "muted": "#FFC79980",
+      "emphasis": "#FFD2AD"
+    },
+    "surface": {
+      "background": "#FFFFFF",
+      "foreground": "#101010",
+      "muted": "#F8F8F8",
+      "mutedForeground": "#646363",
+      "elevated": "#F0F0F0",
+      "elevatedForeground": "#101010",
+      "overlay": "#00000020",
+      "subtle": "#f5f3f3"
+    },
+    "interactive": {
+      "border": "#E8E8E8",
+      "borderHover": "#E0E0E0",
+      "borderFocus": "#C0C0C0",
+      "selection": "#5e5b5b22",
+      "selectionForeground": "#000000",
+      "focus": "#FFC799",
+      "focusRing": "#FFC79940",
+      "cursor": "#000000",
+      "hover": "#5e5c5c22",
+      "active": "#48474722"
+    },
+    "status": {
+      "error": "#FF8080",
+      "errorForeground": "#FFFFFF",
+      "errorBackground": "#FF808020",
+      "errorBorder": "#FF808050",
+      "warning": "#f4994e",
+      "warningForeground": "#FFFFFF",
+      "warningBackground": "#FFC79920",
+      "warningBorder": "#FFC79950",
+      "success": "#12b489",
+      "successForeground": "#FFFFFF",
+      "successBackground": "#99FFE420",
+      "successBorder": "#99FFE450",
+      "info": "#62bced",
+      "infoForeground": "#FFFFFF",
+      "infoBackground": "#FFC79920",
+      "infoBorder": "#FFC79950"
+    },
+    "syntax": {
+      "base": {
+        "background": "#F8F8F8",
+        "foreground": "#101010",
+        "comment": "#A0A0A0",
+        "keyword": "#FFC799",
+        "string": "#55d9b6",
+        "number": "#FF8080",
+        "function": "#FFC799",
+        "variable": "#101010",
+        "type": "#FFC799",
+        "operator": "#FF8080"
+      },
+      "tokens": {
+        "boolean": "#FFC799",
+        "class": "#FFC799",
+        "className": "#FFC799",
+        "commentDoc": "#D0D0D0",
+        "constant": "#A0A0A0",
+        "decorator": "#FFC799",
+        "enum": "#FFC799",
+        "exception": "#FF8080",
+        "functionCall": "#FFC799",
+        "interface": "#FFC799",
+        "jsxTag": "#FFC799",
+        "key": "#FFC799",
+        "keywordImport": "#FF8080",
+        "label": "#FF8080",
+        "macro": "#A0A0A0",
+        "method": "#74e8c9",
+        "module": "#FF8080",
+        "namespace": "#FFC799",
+        "parameter": "#101010",
+        "preprocessor": "#FF8080",
+        "punctuation": "#A0A0A0",
+        "regex": "#67e7c5",
+        "storageModifier": "#A0A0A0",
+        "stringEscape": "#000000",
+        "struct": "#FFC799",
+        "tag": "#FFC799",
+        "tagAttribute": "#FFC799",
+        "tagAttributeValue": "#6adebf",
+        "typeParameter": "#FFC799",
+        "url": "#A0A0A0",
+        "variableGlobal": "#FFC799",
+        "variableLocal": "#F0F0F0",
+        "variableOther": "#49dcb5",
+        "variableProperty": "#A0A0A0"
+      },
+      "highlights": {
+        "diffAdded": "#56d8b5",
+        "diffAddedBackground": "#E8F5E8",
+        "diffModified": "#FFC799",
+        "diffModifiedBackground": "#F0F0F0",
+        "diffRemoved": "#FF8080",
+        "diffRemovedBackground": "#F5E8E8",
+        "lineNumber": "#D0D0D0",
+        "lineNumberActive": "#000000"
+      }
+    },
+    "markdown": {
+      "heading1": "#101010",
+      "heading2": "#101010",
+      "heading3": "#101010",
+      "heading4": "#101010",
+      "link": "#A0A0A0",
+      "linkHover": "#FFC799",
+      "inlineCode": "#796363",
+      "inlineCodeBackground": "#F8F8F8",
+      "blockquote": "#101010",
+      "blockquoteBorder": "#E8E8E8",
+      "listMarker": "#10101099"
+    },
+    "chat": {
+      "userMessage": "#101010",
+      "userMessageBackground": "#F8F8F8",
+      "assistantMessage": "#101010",
+      "assistantMessageBackground": "#FFFFFF",
+      "timestamp": "#A0A0A0",
+      "divider": "#E8E8E8"
+    },
+    "tools": {
+      "background": "#F8F8F880",
+      "border": "#d0cece80",
+      "headerHover": "#E8E8E8",
+      "icon": "#A0A0A0",
+      "title": "#101010",
+      "description": "#A0A0A0",
+      "edit": {
+        "added": "#40d7af",
+        "addedBackground": "#99FFE425",
+        "removed": "#FF8080",
+        "removedBackground": "#FF808025",
+        "lineNumber": "#b4b2b2"
+      }
+    }
+  },
+  "config": {
+    "fonts": {
+      "sans": "\"IBM Plex Mono\", monospace",
+      "mono": "\"IBM Plex Mono\", monospace",
+      "heading": "\"IBM Plex Mono\", monospace"
+    },
+    "radius": {
+      "none": "0",
+      "sm": "0.125rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "transitions": {
+      "fast": "150ms ease",
+      "normal": "250ms ease",
+      "slow": "350ms ease"
+    }
+  }
+}
diff --git a/packages/ui/src/lib/theme/vscode/adapter.ts b/packages/ui/src/lib/theme/vscode/adapter.ts
index ec8fc370..10d88a23 100644
--- a/packages/ui/src/lib/theme/vscode/adapter.ts
+++ b/packages/ui/src/lib/theme/vscode/adapter.ts
@@ -1,56 +1,98 @@
 import type { Theme } from '@/types/theme';
 import type { ThemeMode } from '@/types/theme';
-import { flexokiDarkTheme, flexokiLightTheme } from '@/lib/theme/themes';
+import { getDefaultTheme } from '@/lib/theme/themes';
 
 export type VSCodeThemeKind = 'light' | 'dark' | 'high-contrast';
 
 export type VSCodeThemeColorToken =
+  // Editor core
   | 'editor.background'
   | 'editor.foreground'
   | 'editor.selectionBackground'
   | 'editor.selectionForeground'
   | 'editor.lineHighlightBackground'
   | 'editorCursor.foreground'
+  // UI borders and focus
   | 'focusBorder'
   | 'contrastBorder'
+  | 'widget.border'
+  // Diff editor
   | 'diffEditor.insertedTextBackground'
   | 'diffEditor.insertedTextBorder'
   | 'diffEditor.insertedLineBackground'
+  | 'diffEditor.removedTextBackground'
+  | 'diffEditor.removedLineBackground'
   | 'gitDecoration.addedResourceForeground'
+  | 'gitDecoration.deletedResourceForeground'
+  | 'gitDecoration.modifiedResourceForeground'
+  // Sidebar
   | 'sideBar.background'
   | 'sideBar.foreground'
   | 'sideBar.border'
+  // Panel (bottom area)
   | 'panel.background'
   | 'panel.foreground'
   | 'panel.border'
+  // Inputs
   | 'input.background'
   | 'input.foreground'
   | 'input.border'
+  | 'input.placeholderForeground'
+  // Buttons
   | 'button.background'
   | 'button.foreground'
   | 'button.hoverBackground'
+  | 'button.secondaryBackground'
+  | 'button.secondaryForeground'
+  // Text
   | 'textLink.foreground'
+  | 'textLink.activeForeground'
   | 'descriptionForeground'
+  | 'foreground'
+  // Terminal colors (for syntax)
   | 'terminal.ansiRed'
   | 'terminal.ansiGreen'
   | 'terminal.ansiBlue'
   | 'terminal.ansiYellow'
   | 'terminal.ansiCyan'
+  | 'terminal.ansiMagenta'
+  // Editor diagnostics
   | 'editorError.foreground'
   | 'editorError.background'
   | 'editorWarning.foreground'
   | 'editorWarning.background'
   | 'editorInfo.foreground'
   | 'editorInfo.background'
+  // Testing
   | 'testing.iconPassed'
+  | 'testing.iconFailed'
+  // Badge
   | 'badge.background'
   | 'badge.foreground'
+  // Status bar
   | 'statusBar.background'
   | 'statusBar.foreground'
+  // Lists
   | 'list.hoverBackground'
   | 'list.activeSelectionBackground'
+  | 'list.activeSelectionForeground'
+  | 'list.inactiveSelectionBackground'
+  // Preformatted text (code)
   | 'textPreformat.foreground'
-  | 'textPreformat.background';
+  | 'textPreformat.background'
+  // Editor widgets
+  | 'editorWidget.background'
+  | 'editorWidget.foreground'
+  | 'editorWidget.border'
+  // Dropdown
+  | 'dropdown.background'
+  | 'dropdown.border'
+  // Editor gutter
+  | 'editorLineNumber.foreground'
+  | 'editorLineNumber.activeForeground'
+  // Scrollbar
+  | 'scrollbarSlider.background'
+  | 'scrollbarSlider.hoverBackground';
 
 export type VSCodeThemePalette = {
   kind: VSCodeThemeKind;
@@ -64,52 +106,94 @@ export type VSCodeThemePayload = {
 };
 
 const VARIABLE_MAP: Record<VSCodeThemeColorToken, string> = {
+  // Editor core
   'editor.background': '--vscode-editor-background',
   'editor.foreground': '--vscode-editor-foreground',
   'editor.selectionBackground': '--vscode-editor-selectionBackground',
   'editor.selectionForeground': '--vscode-editor-selectionForeground',
   'editor.lineHighlightBackground': '--vscode-editor-lineHighlightBackground',
   'editorCursor.foreground': '--vscode-editorCursor-foreground',
+  // UI borders and focus
   focusBorder: '--vscode-focusBorder',
   contrastBorder: '--vscode-contrastBorder',
+  'widget.border': '--vscode-widget-border',
+  // Diff editor
   'diffEditor.insertedTextBackground': '--vscode-diffEditor-insertedTextBackground',
   'diffEditor.insertedTextBorder': '--vscode-diffEditor-insertedTextBorder',
   'diffEditor.insertedLineBackground': '--vscode-diffEditor-insertedLineBackground',
+  'diffEditor.removedTextBackground': '--vscode-diffEditor-removedTextBackground',
+  'diffEditor.removedLineBackground': '--vscode-diffEditor-removedLineBackground',
   'gitDecoration.addedResourceForeground': '--vscode-gitDecoration-addedResourceForeground',
+  'gitDecoration.deletedResourceForeground': '--vscode-gitDecoration-deletedResourceForeground',
+  'gitDecoration.modifiedResourceForeground': '--vscode-gitDecoration-modifiedResourceForeground',
+  // Sidebar
   'sideBar.background': '--vscode-sideBar-background',
   'sideBar.foreground': '--vscode-sideBar-foreground',
   'sideBar.border': '--vscode-sideBar-border',
+  // Panel
   'panel.background': '--vscode-panel-background',
   'panel.foreground': '--vscode-panel-foreground',
   'panel.border': '--vscode-panel-border',
+  // Inputs
   'input.background': '--vscode-input-background',
   'input.foreground': '--vscode-input-foreground',
   'input.border': '--vscode-input-border',
+  'input.placeholderForeground': '--vscode-input-placeholderForeground',
+  // Buttons
   'button.background': '--vscode-button-background',
   'button.foreground': '--vscode-button-foreground',
   'button.hoverBackground': '--vscode-button-hoverBackground',
+  'button.secondaryBackground': '--vscode-button-secondaryBackground',
+  'button.secondaryForeground': '--vscode-button-secondaryForeground',
+  // Text
   'textLink.foreground': '--vscode-textLink-foreground',
+  'textLink.activeForeground': '--vscode-textLink-activeForeground',
   descriptionForeground: '--vscode-descriptionForeground',
+  foreground: '--vscode-foreground',
+  // Terminal
   'terminal.ansiRed': '--vscode-terminal-ansiRed',
   'terminal.ansiGreen': '--vscode-terminal-ansiGreen',
   'terminal.ansiBlue': '--vscode-terminal-ansiBlue',
   'terminal.ansiYellow': '--vscode-terminal-ansiYellow',
   'terminal.ansiCyan': '--vscode-terminal-ansiCyan',
+  'terminal.ansiMagenta': '--vscode-terminal-ansiMagenta',
+  // Diagnostics
   'editorError.foreground': '--vscode-editorError-foreground',
   'editorError.background': '--vscode-editorError-background',
   'editorWarning.foreground': '--vscode-editorWarning-foreground',
   'editorWarning.background': '--vscode-editorWarning-background',
   'editorInfo.foreground': '--vscode-editorInfo-foreground',
   'editorInfo.background': '--vscode-editorInfo-background',
+  // Testing
   'testing.iconPassed': '--vscode-testing-iconPassed',
+  'testing.iconFailed': '--vscode-testing-iconFailed',
+  // Badge
   'badge.background': '--vscode-badge-background',
   'badge.foreground': '--vscode-badge-foreground',
+  // Status bar
   'statusBar.background': '--vscode-statusBar-background',
   'statusBar.foreground': '--vscode-statusBar-foreground',
+  // Lists
   'list.hoverBackground': '--vscode-list-hoverBackground',
   'list.activeSelectionBackground': '--vscode-list-activeSelectionBackground',
+  'list.activeSelectionForeground': '--vscode-list-activeSelectionForeground',
+  'list.inactiveSelectionBackground': '--vscode-list-inactiveSelectionBackground',
+  // Preformat
   'textPreformat.foreground': '--vscode-textPreformat-foreground',
   'textPreformat.background': '--vscode-textPreformat-background',
+  // Editor widgets
+  'editorWidget.background': '--vscode-editorWidget-background',
+  'editorWidget.foreground': '--vscode-editorWidget-foreground',
+  'editorWidget.border': '--vscode-editorWidget-border',
+  // Dropdown
+  'dropdown.background': '--vscode-dropdown-background',
+  'dropdown.border': '--vscode-dropdown-border',
+  // Editor gutter
+  'editorLineNumber.foreground': '--vscode-editorLineNumber-foreground',
+  'editorLineNumber.activeForeground': '--vscode-editorLineNumber-activeForeground',
+  // Scrollbar
+  'scrollbarSlider.background': '--vscode-scrollbarSlider-background',
+  'scrollbarSlider.hoverBackground': '--vscode-scrollbarSlider-hoverBackground',
 };
 
 const normalizeColor = (value?: string | null): string | undefined => {
@@ -154,8 +238,6 @@ const applyAlpha = (color: string, opacity: number): string => {
   return color;
 };
 
-const forceOpaque = (color: string): string => applyAlpha(color, 1);
-
 const readKind = (preferred?: VSCodeThemeKind): VSCodeThemeKind => {
   if (preferred === 'light' || preferred === 'dark' || preferred === 'high-contrast') {
     return preferred;
@@ -199,48 +281,135 @@ export const readVSCodeThemePalette = (
 };
 
 export const buildVSCodeThemeFromPalette = (palette: VSCodeThemePalette): Theme => {
-  const base = palette.kind === 'light' ? flexokiLightTheme : flexokiDarkTheme;
+  const base = getDefaultTheme(palette.kind === 'dark');
+  const isDark = palette.kind === 'dark' || palette.kind === 'high-contrast';
+  
   const read = (token: VSCodeThemeColorToken, fallback: string): string =>
     palette.colors[token] ?? fallback;
 
-  const sidebarBg = read('sideBar.background', base.colors.surface.background);
-  const panelBg = read('panel.background', read('editor.background', base.colors.surface.elevated));
-  const panelFg = read('panel.foreground', read('editor.foreground', base.colors.surface.foreground));
-  const background = sidebarBg;
-  const foreground = read('editor.foreground', base.colors.surface.foreground);
-  // Use descriptionForeground for muted text with reduced opacity for less prominence
-  // This makes inactive tabs and secondary text clearly distinguishable from active/primary text
-  const rawMutedFg = read('descriptionForeground', base.colors.surface.mutedForeground);
-  const mutedFg = applyAlpha(rawMutedFg, palette.kind === 'light' ? 0.55 : 0.5);
-  // Prefer stable UI colors for accent to avoid theme-specific diff values.
+  // ===========================================
+  // SURFACE COLORS - Layered backgrounds
+  // ===========================================
+  
+  // Main app background: sidebar is the outermost container
+  const background = read('sideBar.background', base.colors.surface.background);
+  
+  // Main foreground text color
+  const foreground = read('foreground', read('editor.foreground', base.colors.surface.foreground));
+  
+  // Elevated surfaces: panels, cards, dialogs - use editorWidget or panel
+  const elevated = read('editorWidget.background', read('panel.background', read('editor.background', base.colors.surface.elevated)));
+  const elevatedForeground = read('editorWidget.foreground', read('panel.foreground', foreground));
+  
+  // Muted background: used for inactive/deemphasized areas - use list inactive selection
+  const muted = read('list.inactiveSelectionBackground', read('editor.lineHighlightBackground', base.colors.surface.muted));
+  
+  // Muted foreground: secondary text - description foreground is perfect semantic match
+  const mutedForeground = read('descriptionForeground', read('input.placeholderForeground', base.colors.surface.mutedForeground));
+  
+  // Subtle: used for input backgrounds, user message bubbles - input.background is the semantic match
+  const subtle = read('input.background', read('dropdown.background', elevated));
+  
+  // Overlay: modal backdrops, status bar
+  const overlay = read('statusBar.background', base.colors.surface.overlay);
+
+  // ===========================================
+  // PRIMARY / ACCENT COLORS
+  // ===========================================
+  
   const accent = read('button.background', read('textLink.foreground', base.colors.primary.base));
-  const accentFg = read('button.foreground', base.colors.primary.foreground || base.colors.surface.background);
-  const hoverBg = read('list.hoverBackground', read('editor.selectionBackground', base.colors.interactive.hover));
-  const activeBg = read('list.activeSelectionBackground', hoverBg);
-  const selection = read('editor.selectionBackground', activeBg);
-  const selectionFg = read('editor.selectionForeground', foreground);
-  const focus = read('focusBorder', accent);
-  // Build a visible border color: prefer contrastBorder (high-contrast themes), then sideBar.border, panel.border, input.border
-  // If the chosen border is too transparent or matches background, derive one from foreground
-  const rawBorder = read('contrastBorder', '') ||
-    read('sideBar.border', '') ||
+  const accentHover = read('button.hoverBackground', accent);
+  const accentForeground = read('button.foreground', base.colors.primary.foreground || background);
+  const accentMuted = read('textLink.foreground', accent);
+
+  // ===========================================
+  // INTERACTIVE COLORS
+  // ===========================================
+  
+  // Border: Use widget.border (most generic), then input.border, panel.border
+  // DO NOT reduce opacity - these are already properly set by VS Code themes
+  const border = read('widget.border', '') ||
+    read('input.border', '') ||
     read('panel.border', '') ||
-    read('input.border', base.colors.interactive.border);
-  // Ensure border has enough visibility by applying minimum opacity
-  const border = rawBorder ? applyAlpha(forceOpaque(rawBorder), palette.kind === 'light' ? 0.15 : 0.2) : applyAlpha(foreground, palette.kind === 'light' ? 0.1 : 0.15);
-  const focusRing = applyAlpha(focus, palette.kind === 'light' ? 0.35 : 0.45);
+    read('sideBar.border', '') ||
+    read('contrastBorder', base.colors.interactive.border);
+  
+  // For high-contrast or missing borders, derive from foreground
+  const effectiveBorder = border || applyAlpha(foreground, isDark ? 0.25 : 0.2);
+  
+  // Hover/active backgrounds
+  const hoverBg = read('list.hoverBackground', base.colors.interactive.hover);
+  const activeBg = read('list.activeSelectionBackground', hoverBg);
+  
+  // Selection
+  const selection = read('editor.selectionBackground', base.colors.interactive.selection);
+  const selectionForeground = read('editor.selectionForeground', read('list.activeSelectionForeground', foreground));
+  
+  // Focus
+  const focus = read('focusBorder', accent);
+  const focusRing = applyAlpha(focus, isDark ? 0.45 : 0.35);
+  
+  // Cursor
   const cursor = read('editorCursor.foreground', base.colors.interactive.cursor);
+
+  // ===========================================
+  // STATUS COLORS
+  // ===========================================
+  
+  const errorColor = read('editorError.foreground', read('testing.iconFailed', base.colors.status.error));
+  const errorBg = read('editorError.background', applyAlpha(errorColor, isDark ? 0.16 : 0.12));
+  
+  const warningColor = read('editorWarning.foreground', base.colors.status.warning);
+  const warningBg = read('editorWarning.background', applyAlpha(warningColor, isDark ? 0.16 : 0.12));
+  
+  const successColor = read('testing.iconPassed', read('gitDecoration.addedResourceForeground', base.colors.status.success));
+  const successBg = applyAlpha(successColor, isDark ? 0.16 : 0.12);
+  
+  const infoColor = read('editorInfo.foreground', base.colors.status.info);
+  const infoBg = read('editorInfo.background', applyAlpha(infoColor, isDark ? 0.16 : 0.12));
+
+  // ===========================================
+  // SYNTAX / CODE COLORS
+  // ===========================================
+  
+  const syntaxComment = read('editorLineNumber.foreground', mutedForeground);
+  const syntaxString = read('textPreformat.foreground', read('terminal.ansiGreen', base.colors.syntax.base.string));
+  const syntaxKeyword = read('terminal.ansiBlue', accent);
+  const syntaxNumber = read('terminal.ansiYellow', base.colors.syntax.base.number);
+  const syntaxFunction = read('terminal.ansiCyan', base.colors.syntax.base.function);
+  const syntaxVariable = read('terminal.ansiMagenta', foreground);
+  const syntaxType = read('terminal.ansiYellow', base.colors.syntax.base.type);
+
+  // ===========================================
+  // TOOLS SECTION - For tool cards, diffs, etc.
+  // ===========================================
+  
+  // Tools border should be visible! Use border directly without extra opacity reduction
+  const toolsBorder = effectiveBorder;
+  const toolsBackground = applyAlpha(muted, 0.5);
+  const toolsHeaderHover = applyAlpha(hoverBg, 0.5);
+  
+  // Diff colors from VS Code diff editor
+  const diffAddedBg = read('diffEditor.insertedLineBackground', read('diffEditor.insertedTextBackground', successBg));
+  const diffRemovedBg = read('diffEditor.removedLineBackground', read('diffEditor.removedTextBackground', errorBg));
+  const diffAddedColor = read('gitDecoration.addedResourceForeground', successColor);
+  const diffRemovedColor = read('gitDecoration.deletedResourceForeground', errorColor);
+  const diffModifiedColor = read('gitDecoration.modifiedResourceForeground', infoColor);
+
+  // ===========================================
+  // BADGES
+  // ===========================================
+  
   const badgeBg = read('badge.background', accent);
-  const badgeFg = read('badge.foreground', foreground);
-
-  const success = read('testing.iconPassed', base.colors.status.success);
-  const successBg = applyAlpha(success, palette.kind === 'light' ? 0.12 : 0.16);
-  const successBorder = applyAlpha(success, palette.kind === 'light' ? 0.35 : 0.45);
-
-  const inlineCode = read('textPreformat.foreground', read('terminal.ansiGreen', base.colors.syntax.base.string));
-  // Tailwind's `--accent` drives hovered/selected menu items in Radix/shadcn; prefer VS Code list hover/selection.
-  const subtle = hoverBg;
+  const badgeFg = read('badge.foreground', accentForeground);
 
+  // ===========================================
+  // CHAT COLORS
+  // ===========================================
+  
+  // User messages: same as chat input (subtle surface)
+  const userMessageBg = subtle;
+  
   return {
     ...base,
     metadata: {
@@ -250,37 +419,35 @@ export const buildVSCodeThemeFromPalette = (palette: VSCodeThemePalette): Theme
       description: 'Mirrors your current VS Code color theme',
       author: 'VS Code',
       version: '1.0.0',
-      variant: palette.kind === 'light' ? 'light' : 'dark',
+      variant: isDark ? 'dark' : 'light',
       tags: ['vscode', 'auto'],
     },
     colors: {
       ...base.colors,
       primary: {
         base: accent,
-        hover: read('button.hoverBackground', accent),
-        active: read('button.hoverBackground', accent),
-        foreground: accentFg,
-        muted: read('textLink.foreground', accent),
+        hover: accentHover,
+        active: accentHover,
+        foreground: accentForeground,
+        muted: accentMuted,
         emphasis: accent,
       },
       surface: {
-        ...base.colors.surface,
         background,
         foreground,
-        muted: activeBg,
-        mutedForeground: mutedFg,
-        elevated: panelBg,
-        elevatedForeground: panelFg,
-        overlay: read('statusBar.background', base.colors.surface.overlay),
+        muted,
+        mutedForeground,
+        elevated,
+        elevatedForeground,
+        overlay,
         subtle,
       },
       interactive: {
-        ...base.colors.interactive,
-        border,
-        borderHover: border,
+        border: effectiveBorder,
+        borderHover: effectiveBorder,
         borderFocus: focus,
         selection,
-        selectionForeground: selectionFg,
+        selectionForeground,
         focus,
         focusRing,
         cursor,
@@ -288,48 +455,94 @@ export const buildVSCodeThemeFromPalette = (palette: VSCodeThemePalette): Theme
         active: activeBg,
       },
       status: {
-        ...base.colors.status,
-        error: read('editorError.foreground', base.colors.status.error),
-        errorForeground: read('editorError.foreground', base.colors.status.errorForeground),
-        errorBackground: read('editorError.background', base.colors.status.errorBackground),
-        errorBorder: read('editorError.foreground', base.colors.status.errorBorder),
-        warning: read('editorWarning.foreground', base.colors.status.warning),
-        warningForeground: read('editorWarning.foreground', base.colors.status.warningForeground),
-        warningBackground: read('editorWarning.background', base.colors.status.warningBackground),
-        warningBorder: read('editorWarning.foreground', base.colors.status.warningBorder),
-        success,
-        successForeground: success,
+        error: errorColor,
+        errorForeground: errorColor,
+        errorBackground: errorBg,
+        errorBorder: applyAlpha(errorColor, isDark ? 0.45 : 0.35),
+        warning: warningColor,
+        warningForeground: warningColor,
+        warningBackground: warningBg,
+        warningBorder: applyAlpha(warningColor, isDark ? 0.45 : 0.35),
+        success: successColor,
+        successForeground: successColor,
         successBackground: successBg,
-        successBorder,
-        info: read('editorInfo.foreground', base.colors.status.info),
-        infoForeground: read('editorInfo.foreground', base.colors.status.infoForeground),
-        infoBackground: read('editorInfo.background', base.colors.status.infoBackground),
-        infoBorder: read('editorInfo.foreground', base.colors.status.infoBorder),
+        successBorder: applyAlpha(successColor, isDark ? 0.45 : 0.35),
+        info: infoColor,
+        infoForeground: infoColor,
+        infoBackground: infoBg,
+        infoBorder: applyAlpha(infoColor, isDark ? 0.45 : 0.35),
       },
       syntax: {
         ...base.colors.syntax,
         base: {
-          ...base.colors.syntax.base,
-          background,
+          background: elevated,
           foreground,
-          comment: read('editor.lineHighlightBackground', base.colors.syntax.base.comment),
-          keyword: accent,
-          string: inlineCode,
-          number: read('terminal.ansiYellow', base.colors.syntax.base.number),
-          function: read('terminal.ansiBlue', base.colors.syntax.base.function),
-          variable: read('terminal.ansiCyan', base.colors.syntax.base.variable),
-          type: read('terminal.ansiCyan', base.colors.syntax.base.type),
+          comment: syntaxComment,
+          keyword: syntaxKeyword,
+          string: syntaxString,
+          number: syntaxNumber,
+          function: syntaxFunction,
+          variable: syntaxVariable,
+          type: syntaxType,
           operator: accent,
         },
       },
+      // Explicit tools section - cssGenerator will use these values directly
+      tools: {
+        background: toolsBackground,
+        border: toolsBorder,
+        headerHover: toolsHeaderHover,
+        icon: mutedForeground,
+        title: foreground,
+        description: applyAlpha(mutedForeground, 0.8),
+        edit: {
+          added: diffAddedColor,
+          addedBackground: diffAddedBg,
+          removed: diffRemovedColor,
+          removedBackground: diffRemovedBg,
+          modified: diffModifiedColor,
+          modifiedBackground: applyAlpha(diffModifiedColor, isDark ? 0.16 : 0.12),
+          lineNumber: syntaxComment,
+        },
+      },
+      // Explicit chat section
+      chat: {
+        userMessage: foreground,
+        userMessageBackground: userMessageBg,
+        assistantMessage: foreground,
+        assistantMessageBackground: background,
+        timestamp: mutedForeground,
+        divider: effectiveBorder,
+      },
+      // Badges
       badges: {
         ...(base.colors.badges || {}),
         default: {
           bg: badgeBg,
           fg: badgeFg,
-          border: border,
+          border: effectiveBorder,
         },
       },
+      // Markdown colors
+      markdown: {
+        heading1: foreground,
+        heading2: foreground,
+        heading3: foreground,
+        heading4: foreground,
+        link: accentMuted,
+        linkHover: read('textLink.activeForeground', accentHover),
+        inlineCode: syntaxString,
+        inlineCodeBackground: subtle,
+        blockquote: mutedForeground,
+        blockquoteBorder: effectiveBorder,
+        listMarker: applyAlpha(accent, 0.6),
+      },
+      // Scrollbar
+      scrollbar: {
+        track: 'transparent',
+        thumb: read('scrollbarSlider.background', applyAlpha(foreground, isDark ? 0.2 : 0.15)),
+        thumbHover: read('scrollbarSlider.hoverBackground', applyAlpha(foreground, isDark ? 0.35 : 0.25)),
+      },
     },
   };
 };
diff --git a/packages/ui/src/stores/useUIStore.ts b/packages/ui/src/stores/useUIStore.ts
index 67685d9c..f803afe7 100644
--- a/packages/ui/src/stores/useUIStore.ts
+++ b/packages/ui/src/stores/useUIStore.ts
@@ -27,6 +27,7 @@ interface UIStore {
   isSessionSwitcherOpen: boolean;
   activeMainTab: MainTab;
   mainTabGuard: MainTabGuard | null;
+  sidebarOpenBeforeFullscreenTab: boolean | null;
   pendingDiffFile: string | null;
   isMobile: boolean;
   isKeyboardOpen: boolean;
@@ -144,6 +145,7 @@ export const useUIStore = create<UIStore>()(
         isSessionSwitcherOpen: false,
         activeMainTab: 'chat',
         mainTabGuard: null,
+        sidebarOpenBeforeFullscreenTab: null,
         pendingDiffFile: null,
         isMobile: false,
         isKeyboardOpen: false,
@@ -238,7 +240,36 @@ export const useUIStore = create<UIStore>()(
           if (guard && !guard(tab)) {
             return;
           }
-          set({ activeMainTab: tab });
+          const state = get();
+          const currentTab = state.activeMainTab;
+          const fullscreenTabs: MainTab[] = ['files', 'diff'];
+          const isEnteringFullscreen = fullscreenTabs.includes(tab) && !fullscreenTabs.includes(currentTab);
+          const isLeavingFullscreen = !fullscreenTabs.includes(tab) && fullscreenTabs.includes(currentTab);
+
+          if (isEnteringFullscreen) {
+            // Save current sidebar state and close it
+            set({
+              activeMainTab: tab,
+              sidebarOpenBeforeFullscreenTab: state.isSidebarOpen,
+              isSidebarOpen: false,
+            });
+          } else if (isLeavingFullscreen) {
+            // Restore sidebar state if it was open before
+            const shouldRestore = state.sidebarOpenBeforeFullscreenTab === true;
+            set({
+              activeMainTab: tab,
+              sidebarOpenBeforeFullscreenTab: null,
+              ...(shouldRestore && typeof window !== 'undefined'
+                ? {
+                    isSidebarOpen: true,
+                    sidebarWidth: Math.floor(window.innerWidth * 0.2),
+                    hasManuallyResizedLeftSidebar: false,
+                  }
+                : {}),
+            });
+          } else {
+            set({ activeMainTab: tab });
+          }
         },
 
         setPendingDiffFile: (filePath) => {
@@ -250,7 +281,21 @@ export const useUIStore = create<UIStore>()(
           if (guard && !guard('diff')) {
             return;
           }
-          set({ pendingDiffFile: filePath, activeMainTab: 'diff' });
+          const state = get();
+          const currentTab = state.activeMainTab;
+          const fullscreenTabs: MainTab[] = ['files', 'diff'];
+          const isEnteringFullscreen = !fullscreenTabs.includes(currentTab);
+
+          if (isEnteringFullscreen) {
+            set({
+              pendingDiffFile: filePath,
+              activeMainTab: 'diff',
+              sidebarOpenBeforeFullscreenTab: state.isSidebarOpen,
+              isSidebarOpen: false,
+            });
+          } else {
+            set({ pendingDiffFile: filePath, activeMainTab: 'diff' });
+          }
         },
 
         consumePendingDiffFile: () => {
diff --git a/packages/ui/src/styles/design-system.css b/packages/ui/src/styles/design-system.css
index f73b3603..9682a6ea 100644
--- a/packages/ui/src/styles/design-system.css
+++ b/packages/ui/src/styles/design-system.css
@@ -134,13 +134,13 @@
     font-family: var(--font-mono, ui-monospace, SFMono-Regular, 'Liberation Mono', Menlo, monospace) !important;
   }
 
-  /* Remove focus rings globally */
-  *:focus {
+  /* Remove focus rings globally (except inputs/textareas/dropdowns/selects) */
+  *:focus:not(input):not(textarea):not([data-slot="dropdown-menu-content"]):not([data-slot="dropdown-menu-sub-content"]):not([data-slot="select-content"]) {
     outline: none !important;
     box-shadow: none !important;
   }
 
-  *:focus-visible {
+  *:focus-visible:not(input):not(textarea):not([data-slot="dropdown-menu-content"]):not([data-slot="dropdown-menu-sub-content"]):not([data-slot="select-content"]) {
     outline: none !important;
     box-shadow: none !important;
   }
@@ -224,6 +224,19 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
+  /* Interactive state tokens (Theme.colors.interactive.*) */
+  --color-interactive-hover: var(--interactive-hover);
+  --color-interactive-active: var(--interactive-active);
+  --color-interactive-selection: var(--interactive-selection);
+  --color-interactive-selection-foreground: var(--interactive-selection-foreground);
+  --color-interactive-border-hover: var(--interactive-border-hover);
+  --color-interactive-border-focus: var(--interactive-border-focus);
+  --color-interactive-focus-ring: var(--interactive-focus-ring);
+
+  /* Short aliases (optional) */
+  --color-border-hover: var(--interactive-border-hover);
+  --color-border-focus: var(--interactive-border-focus);
+
   /* Markdown typography variables */
   --markdown-body-font-size: var(--text-markdown);
   --markdown-body-line-height: var(--markdown-body-line-height);
diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index 6b689a3d..8b51c5d7 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -27,7 +27,7 @@
   .chat-column {
     width: min(100%, 56rem);
     margin-inline: auto;
-    padding-inline: calc(clamp(1rem, 3vw, 1.5rem) * var(--padding-scale, 1));
+    padding-inline: calc(clamp(0.75rem, 2.5vw, 1rem) * var(--padding-scale, 1));
   }
 
   .chat-message-column {
@@ -38,7 +38,7 @@
 
   @media (min-width: 1024px) {
     .chat-column {
-      padding-inline: calc(clamp(1.25rem, 2.5vw, 2rem) * var(--padding-scale, 1));
+      padding-inline: calc(clamp(1rem, 2.5vw, 1.5rem) * var(--padding-scale, 1));
     }
 
     .chat-message-column {
diff --git a/packages/ui/src/types/theme.ts b/packages/ui/src/types/theme.ts
index 1c63f3a6..5fe39063 100644
--- a/packages/ui/src/types/theme.ts
+++ b/packages/ui/src/types/theme.ts
@@ -4,7 +4,7 @@ export interface ThemeMetadata {
   id: string;
   name: string;
   description: string;
-  author: string;
+  author?: string;
   version: string;
   variant: 'light' | 'dark';
   tags: string[];
diff --git a/packages/web/index.html b/packages/web/index.html
index a25c5dfb..288de1de 100644
--- a/packages/web/index.html
+++ b/packages/web/index.html
@@ -105,6 +105,17 @@
           document.documentElement.classList.add(isDark ? 'dark' : 'light');
           document.documentElement.setAttribute('data-splash-variant', isDark ? 'dark' : 'light');
           document.documentElement.style.setProperty('color-scheme', isDark ? 'dark' : 'light');
+
+          // Splash colors persisted by the app theme system
+          var splashBgLight = localStorage.getItem('splashBgLight');
+          var splashFgLight = localStorage.getItem('splashFgLight');
+          var splashBgDark = localStorage.getItem('splashBgDark');
+          var splashFgDark = localStorage.getItem('splashFgDark');
+
+          if (splashBgLight) document.documentElement.style.setProperty('--splash-background-light', splashBgLight);
+          if (splashFgLight) document.documentElement.style.setProperty('--splash-stroke-light', splashFgLight);
+          if (splashBgDark) document.documentElement.style.setProperty('--splash-background-dark', splashBgDark);
+          if (splashFgDark) document.documentElement.style.setProperty('--splash-stroke-dark', splashFgDark);
         } catch (error) {
           console.warn('Failed to apply theme:', error);
         }
@@ -153,18 +164,39 @@
       }
 
       :root {
-        --splash-background: #151313;
-        --splash-stroke: white;
+        --splash-background-dark: #151313;
+        --splash-stroke-dark: white;
+        --splash-background-light: #F6F4EF;
+        --splash-stroke-light: black;
+
+        --splash-background: var(--splash-background-dark);
+        --splash-stroke: var(--splash-stroke-dark);
+
+        /* Fallback fills (overridden below when supported) */
         --splash-face-fill: rgba(255, 255, 255, 0.15);
         --splash-cell-fill: rgba(255, 255, 255, 0.35);
-        --splash-logo-fill: white;
+        --splash-logo-fill: var(--splash-stroke);
       }
+
       html[data-splash-variant='light'] {
-        --splash-background: #F6F4EF;
-        --splash-stroke: black;
+        --splash-background: var(--splash-background-light);
+        --splash-stroke: var(--splash-stroke-light);
         --splash-face-fill: rgba(0, 0, 0, 0.15);
         --splash-cell-fill: rgba(0, 0, 0, 0.4);
-        --splash-logo-fill: black;
+        --splash-logo-fill: var(--splash-stroke);
+      }
+
+      html[data-splash-variant='dark'] {
+        --splash-background: var(--splash-background-dark);
+        --splash-stroke: var(--splash-stroke-dark);
+        --splash-logo-fill: var(--splash-stroke);
+      }
+
+      @supports (color: color-mix(in srgb, white 50%, transparent)) {
+        :root {
+          --splash-face-fill: color-mix(in srgb, var(--splash-stroke) 15%, transparent);
+          --splash-cell-fill: color-mix(in srgb, var(--splash-stroke) 35%, transparent);
+        }
       }
       @keyframes logo-pulse {
         0%, 100% { opacity: 1; }
diff --git a/packages/web/server/index.js b/packages/web/server/index.js
index 8d0ea3a2..4406bc53 100644
--- a/packages/web/server/index.js
+++ b/packages/web/server/index.js
@@ -65,6 +65,163 @@ const normalizeDirectoryPath = (value) => {
 };
 
 const OPENCHAMBER_USER_CONFIG_ROOT = path.join(os.homedir(), '.config', 'openchamber');
+const OPENCHAMBER_USER_THEMES_DIR = path.join(OPENCHAMBER_USER_CONFIG_ROOT, 'themes');
+
+const MAX_THEME_JSON_BYTES = 512 * 1024;
+
+const isNonEmptyString = (value) => typeof value === 'string' && value.trim().length > 0;
+
+const isValidThemeColor = (value) => isNonEmptyString(value);
+
+const normalizeThemeJson = (raw) => {
+  if (!raw || typeof raw !== 'object') {
+    return null;
+  }
+
+  const metadata = raw.metadata && typeof raw.metadata === 'object' ? raw.metadata : null;
+  const colors = raw.colors && typeof raw.colors === 'object' ? raw.colors : null;
+  if (!metadata || !colors) {
+    return null;
+  }
+
+  const id = metadata.id;
+  const name = metadata.name;
+  const variant = metadata.variant;
+  if (!isNonEmptyString(id) || !isNonEmptyString(name) || (variant !== 'light' && variant !== 'dark')) {
+    return null;
+  }
+
+  const primary = colors.primary;
+  const surface = colors.surface;
+  const interactive = colors.interactive;
+  const status = colors.status;
+  const syntax = colors.syntax;
+  const syntaxBase = syntax && typeof syntax === 'object' ? syntax.base : null;
+  const syntaxHighlights = syntax && typeof syntax === 'object' ? syntax.highlights : null;
+
+  if (!primary || !surface || !interactive || !status || !syntaxBase || !syntaxHighlights) {
+    return null;
+  }
+
+  // Minimal fields required by CSSVariableGenerator and diff/syntax rendering.
+  const required = [
+    primary.base,
+    primary.foreground,
+    surface.background,
+    surface.foreground,
+    surface.muted,
+    surface.mutedForeground,
+    surface.elevated,
+    surface.elevatedForeground,
+    surface.subtle,
+    interactive.border,
+    interactive.selection,
+    interactive.selectionForeground,
+    interactive.focusRing,
+    interactive.hover,
+    status.error,
+    status.errorForeground,
+    status.errorBackground,
+    status.errorBorder,
+    status.warning,
+    status.warningForeground,
+    status.warningBackground,
+    status.warningBorder,
+    status.success,
+    status.successForeground,
+    status.successBackground,
+    status.successBorder,
+    status.info,
+    status.infoForeground,
+    status.infoBackground,
+    status.infoBorder,
+    syntaxBase.background,
+    syntaxBase.foreground,
+    syntaxBase.keyword,
+    syntaxBase.string,
+    syntaxBase.number,
+    syntaxBase.function,
+    syntaxBase.variable,
+    syntaxBase.type,
+    syntaxBase.comment,
+    syntaxBase.operator,
+    syntaxHighlights.diffAdded,
+    syntaxHighlights.diffRemoved,
+    syntaxHighlights.lineNumber,
+  ];
+
+  if (!required.every(isValidThemeColor)) {
+    return null;
+  }
+
+  const tags = Array.isArray(metadata.tags)
+    ? metadata.tags.filter((tag) => typeof tag === 'string' && tag.trim().length > 0)
+    : [];
+
+  return {
+    ...raw,
+    metadata: {
+      ...metadata,
+      id: id.trim(),
+      name: name.trim(),
+      description: typeof metadata.description === 'string' ? metadata.description : '',
+      version: typeof metadata.version === 'string' && metadata.version.trim().length > 0 ? metadata.version : '1.0.0',
+      variant,
+      tags,
+    },
+  };
+};
+
+const readCustomThemesFromDisk = async () => {
+  try {
+    const entries = await fsPromises.readdir(OPENCHAMBER_USER_THEMES_DIR, { withFileTypes: true });
+    const themes = [];
+    const seen = new Set();
+
+    for (const entry of entries) {
+      if (!entry.isFile()) continue;
+      if (!entry.name.toLowerCase().endsWith('.json')) continue;
+
+      const filePath = path.join(OPENCHAMBER_USER_THEMES_DIR, entry.name);
+      try {
+        const stat = await fsPromises.stat(filePath);
+        if (!stat.isFile()) continue;
+        if (stat.size > MAX_THEME_JSON_BYTES) {
+          console.warn(`[themes] Skip ${entry.name}: too large (${stat.size} bytes)`);
+          continue;
+        }
+
+        const rawText = await fsPromises.readFile(filePath, 'utf8');
+        const parsed = JSON.parse(rawText);
+        const normalized = normalizeThemeJson(parsed);
+        if (!normalized) {
+          console.warn(`[themes] Skip ${entry.name}: invalid theme JSON`);
+          continue;
+        }
+
+        const id = normalized.metadata.id;
+        if (seen.has(id)) {
+          console.warn(`[themes] Skip ${entry.name}: duplicate theme id "${id}"`);
+          continue;
+        }
+
+        seen.add(id);
+        themes.push(normalized);
+      } catch (error) {
+        console.warn(`[themes] Failed to read ${entry.name}:`, error);
+      }
+    }
+
+    return themes;
+  } catch (error) {
+    // Missing dir is fine.
+    if (error && typeof error === 'object' && error.code === 'ENOENT') {
+      return [];
+    }
+    console.warn('[themes] Failed to list custom themes dir:', error);
+    return [];
+  }
+};
 
 const isPathWithinRoot = (resolvedPath, rootPath) => {
   const resolvedRoot = path.resolve(rootPath || os.homedir());
@@ -1092,13 +1249,58 @@ const migrateSettingsFromLegacyLastDirectory = async (current) => {
   return { settings: merged, changed: true };
 };
 
+const migrateSettingsFromLegacyThemePreferences = async (current) => {
+  const settings = current && typeof current === 'object' ? current : {};
+
+  const themeId = typeof settings.themeId === 'string' ? settings.themeId.trim() : '';
+  const themeVariant = typeof settings.themeVariant === 'string' ? settings.themeVariant.trim() : '';
+
+  const hasLight = typeof settings.lightThemeId === 'string' && settings.lightThemeId.trim().length > 0;
+  const hasDark = typeof settings.darkThemeId === 'string' && settings.darkThemeId.trim().length > 0;
+
+  if (hasLight && hasDark) {
+    return { settings, changed: false };
+  }
+
+  const defaultLight = 'flexoki-light';
+  const defaultDark = 'flexoki-dark';
+
+  let nextLightThemeId = hasLight ? settings.lightThemeId : undefined;
+  let nextDarkThemeId = hasDark ? settings.darkThemeId : undefined;
+
+  if (!hasLight) {
+    if (themeId && themeVariant === 'light') {
+      nextLightThemeId = themeId;
+    } else {
+      nextLightThemeId = defaultLight;
+    }
+  }
+
+  if (!hasDark) {
+    if (themeId && themeVariant === 'dark') {
+      nextDarkThemeId = themeId;
+    } else {
+      nextDarkThemeId = defaultDark;
+    }
+  }
+
+  const merged = mergePersistedSettings(settings, {
+    ...settings,
+    ...(nextLightThemeId ? { lightThemeId: nextLightThemeId } : {}),
+    ...(nextDarkThemeId ? { darkThemeId: nextDarkThemeId } : {}),
+  });
+
+  return { settings: merged, changed: true };
+};
+
 const readSettingsFromDiskMigrated = async () => {
   const current = await readSettingsFromDisk();
-  const { settings, changed } = await migrateSettingsFromLegacyLastDirectory(current);
-  if (changed) {
-    await writeSettingsToDisk(settings);
+  const migration1 = await migrateSettingsFromLegacyLastDirectory(current);
+  const migration2 = await migrateSettingsFromLegacyThemePreferences(migration1.settings);
+  if (migration1.changed || migration2.changed) {
+    await writeSettingsToDisk(migration2.settings);
   }
-  return settings;
+  return migration2.settings;
 };
 
 const getOrCreateVapidKeys = async () => {
@@ -3338,6 +3540,16 @@ async function main(options = {}) {
     }
   });
 
+  app.get('/api/config/themes', async (_req, res) => {
+    try {
+      const customThemes = await readCustomThemesFromDisk();
+      res.json({ themes: customThemes });
+    } catch (error) {
+      console.error('Failed to load custom themes:', error);
+      res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to load custom themes' });
+    }
+  });
+
   app.put('/api/config/settings', async (req, res) => {
     console.log(`[API:PUT /api/config/settings] Received request`);
     console.log(`[API:PUT /api/config/settings] Request body:`, JSON.stringify(req.body, null, 2));
diff --git a/scripts/convert-vscode-theme.cjs b/scripts/convert-vscode-theme.cjs
new file mode 100644
index 00000000..7c6b4bff
--- /dev/null
+++ b/scripts/convert-vscode-theme.cjs
@@ -0,0 +1,497 @@
+#!/usr/bin/env node
+
+/**
+ * VS Code Theme to OpenChamber Theme Converter
+ * 
+ * USAGE:
+ *   node scripts/convert-vscode-theme.cjs <path-to-vscode-theme.json>
+ * 
+ * EXAMPLE:
+ *   node scripts/convert-vscode-theme.cjs \
+ *     /path/to/dune-kaitain-color-theme.json
+ * 
+ * WHAT IT DOES:
+ *   1. Reads a VS Code theme JSON file (with comments support)
+ *   2. Converts it to OpenChamber theme format:
+ *      - Extracts color palette (primary, surface, interactive, status, syntax)
+ *      - Generates derived sections (markdown, chat, tools)
+ *      - Adds default config (fonts, radius, transitions)
+ *   3. Saves the converted theme to:
+ *      packages/ui/src/lib/theme/themes/<theme-id>.json
+ *   4. Auto-registers the theme in presets.ts:
+ *      - Adds import statement
+ *      - Adds to presetThemes array
+ *      - Skips if already registered (no duplicates)
+ * 
+ * OUTPUT:
+ *   - Theme file: packages/ui/src/lib/theme/themes/<theme-name>-<variant>.json
+ *   - Updated: packages/ui/src/lib/theme/themes/presets.ts
+ * 
+ * COMPATIBILITY:
+ *   Works with standard VS Code themes that have:
+ *   - colors (UI colors)
+ *   - tokenColors (TextMate scopes)
+ *   - semanticTokenColors (optional, LSP tokens)
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const REPO_ROOT = path.resolve(__dirname, '..');
+const THEMES_DIR = path.join(
+  REPO_ROOT,
+  'packages',
+  'ui',
+  'src',
+  'lib',
+  'theme',
+  'themes',
+);
+const PRESETS_PATH = path.join(THEMES_DIR, 'presets.ts');
+
+function stripJsonComments(jsonString) {
+  // Remove single-line comments (// ...)
+  jsonString = jsonString.replace(/\/\/.*$/gm, '');
+  // Remove multi-line comments (/* ... */)
+  jsonString = jsonString.replace(/\/\*[\s\S]*?\*\//g, '');
+  return jsonString;
+}
+
+function convertVsCodeTheme(vscodeThemePath) {
+  // Read VS Code theme and strip comments
+  const rawContent = fs.readFileSync(vscodeThemePath, 'utf8');
+  const cleanContent = stripJsonComments(rawContent);
+  const vscodeTheme = JSON.parse(cleanContent);
+  
+  const colors = vscodeTheme.colors || {};
+  const tokenColors = vscodeTheme.tokenColors || [];
+  const semanticTokenColors = vscodeTheme.semanticTokenColors || {};
+  
+  // Determine variant
+  const isDark = vscodeTheme.type === 'dark' || 
+                 colors['editor.background']?.toLowerCase() < '#808080' ||
+                 colors['workbench.colorTheme']?.includes('dark');
+  
+  const variant = isDark ? 'dark' : 'light';
+  
+  // Convert slug-style name to Title Case
+  // e.g., "dune-kaitain" → "Dune Kaitain"
+  const toTitleCase = (str) => {
+    return str
+      .replace(/[-_]+/g, ' ')  // Replace hyphens/underscores with spaces
+      .replace(/\b\w/g, (c) => c.toUpperCase());  // Capitalize each word
+  };
+  
+  const themeName = toTitleCase(vscodeTheme.name || 'Untitled Theme');
+  
+  // Extract color sets for derived sections
+  const primaryColors = extractPrimaryColors(colors, semanticTokenColors);
+  const surfaceColors = extractSurfaceColors(colors);
+  const statusColors = extractStatusColors(colors, tokenColors, semanticTokenColors);
+  const syntaxColors = extractSyntaxColors(tokenColors, semanticTokenColors, colors);
+  
+  // Build OpenChamber theme
+  const openchamberTheme = {
+    metadata: {
+      id: vscodeTheme.name?.toLowerCase().replace(/[^a-z0-9]+/g, '-') + `-${variant}`,
+      name: themeName,
+      description: vscodeTheme.description || `Converted from VS Code theme`,
+      version: vscodeTheme.version || '1.0.0',
+      variant: variant,
+      tags: [variant, 'converted', 'vscode']
+    },
+    colors: {
+      primary: primaryColors,
+      surface: surfaceColors,
+      interactive: extractInteractiveColors(colors),
+      status: statusColors,
+      syntax: syntaxColors,
+      markdown: generateMarkdownColors(primaryColors, surfaceColors, syntaxColors),
+      chat: generateChatColors(surfaceColors),
+      tools: generateToolsColors(surfaceColors, statusColors)
+    },
+    config: generateConfig()
+  };
+  
+  return openchamberTheme;
+}
+
+// Generate markdown colors from theme palette
+function generateMarkdownColors(primary, surface, syntax) {
+  return {
+    heading1: primary.base,
+    heading2: primary.hover,
+    heading3: syntax.base.keyword,
+    heading4: surface.foreground,
+    link: syntax.base.keyword,
+    linkHover: primary.hover,
+    inlineCode: syntax.base.function,
+    inlineCodeBackground: surface.muted,
+    blockquote: surface.mutedForeground,
+    blockquoteBorder: surface.subtle,
+    listMarker: primary.base + '99' // 60% opacity
+  };
+}
+
+// Generate chat colors from surface palette
+function generateChatColors(surface) {
+  return {
+    userMessage: surface.foreground,
+    userMessageBackground: surface.elevated,
+    assistantMessage: surface.foreground,
+    assistantMessageBackground: surface.background,
+    timestamp: surface.mutedForeground,
+    divider: surface.subtle
+  };
+}
+
+// Generate tools colors from theme palette
+function generateToolsColors(surface, status) {
+  return {
+    background: surface.muted + '50',
+    border: surface.subtle + '80',
+    headerHover: surface.subtle + '50',
+    icon: surface.mutedForeground,
+    title: surface.foreground,
+    description: surface.mutedForeground,
+    edit: {
+      added: status.success,
+      addedBackground: status.successBackground,
+      removed: status.error,
+      removedBackground: status.errorBackground,
+      lineNumber: surface.subtle
+    }
+  };
+}
+
+// Generate default config (hardcoded as requested)
+function generateConfig() {
+  return {
+    fonts: {
+      sans: "\"IBM Plex Mono\", monospace",
+      mono: "\"IBM Plex Mono\", monospace",
+      heading: "\"IBM Plex Mono\", monospace"
+    },
+    radius: {
+      none: "0",
+      sm: "0.125rem",
+      md: "0.375rem",
+      lg: "0.5rem",
+      xl: "0.75rem",
+      full: "9999px"
+    },
+    transitions: {
+      fast: "150ms ease",
+      normal: "250ms ease",
+      slow: "350ms ease"
+    }
+  };
+}
+
+function extractPrimaryColors(colors, semanticTokenColors) {
+  // Primary = main accent/action color
+  const primary = colors['button.background'] || 
+                  colors['activityBarBadge.background'] ||
+                  semanticTokenColors['function']?.foreground ||
+                  '#5A96BC';
+  
+  return {
+    base: primary,
+    hover: colors['button.hoverBackground'] || adjustBrightness(primary, -10),
+    active: adjustBrightness(primary, 20),
+    foreground: colors['button.foreground'] || '#FFFFFF',
+    muted: primary + '80', // 50% opacity
+    emphasis: adjustBrightness(primary, 30)
+  };
+}
+
+function extractSurfaceColors(colors) {
+  const bg = colors['editor.background'] || '#151313';
+  const fg = colors['editor.foreground'] || '#CECDC3';
+  
+  return {
+    background: bg,
+    foreground: fg,
+    muted: colors['sideBar.background'] || colors['editor.lineHighlightBackground'] || adjustBrightness(bg, 20),
+    mutedForeground: colors['editorLineNumber.foreground'] || adjustBrightness(fg, -40),
+    elevated: colors['editor.lineHighlightBackground'] || colors['sideBar.background'] || adjustBrightness(bg, 10),
+    elevatedForeground: fg,
+    overlay: bg + '80',
+    subtle: colors['editorWhitespace.foreground'] || adjustBrightness(bg, 30)
+  };
+}
+
+function extractInteractiveColors(colors) {
+  const selection = colors['editor.selectionBackground'] || '#403E3C';
+  const border = colors['input.border'] || colors['editorWhitespace.foreground'] || '#343331';
+  
+  return {
+    border: border,
+    borderHover: colors['inputOption.activeBorder'] || adjustBrightness(border, 20),
+    borderFocus: colors['focusBorder'] || colors['inputOption.activeBorder'] || '#5A96BC',
+    selection: selection,
+    selectionForeground: colors['editor.foreground'] || '#CECDC3',
+    focus: colors['focusBorder'] || '#5A96BC',
+    focusRing: (colors['focusBorder'] || '#5A96BC') + '50',
+    cursor: colors['editorCursor.foreground'] || '#CECDC3',
+    hover: selection + '80',
+    active: selection
+  };
+}
+
+function extractStatusColors(colors, tokenColors, semanticTokenColors) {
+  const error = colors['editorError.foreground'] || 
+                semanticTokenColors['variable.defaultLibrary']?.foreground ||
+                '#D14D41';
+  const warning = colors['editorWarning.foreground'] || '#DA702C';
+  const success = colors['gitDecoration.addedResourceForeground'] || '#879A39';
+  const info = colors['editorInfo.foreground'] || '#4385BE';
+  
+  const bg = colors['editor.background'] || '#151313';
+  
+  return {
+    error: error,
+    errorForeground: bg,
+    errorBackground: error + '20',
+    errorBorder: error + '50',
+    warning: warning,
+    warningForeground: bg,
+    warningBackground: warning + '20',
+    warningBorder: warning + '50',
+    success: success,
+    successForeground: bg,
+    successBackground: success + '20',
+    successBorder: success + '50',
+    info: info,
+    infoForeground: bg,
+    infoBackground: info + '20',
+    infoBorder: info + '50'
+  };
+}
+
+function extractSyntaxColors(tokenColors, semanticTokenColors, colors) {
+  // Map TextMate scopes to our syntax tokens
+  const scopeMap = {};
+  
+  tokenColors.forEach(tc => {
+    const scopes = Array.isArray(tc.scope) ? tc.scope : [tc.scope];
+    const color = tc.settings?.foreground;
+    if (color) {
+      scopes.forEach(scope => {
+        scopeMap[scope] = color;
+      });
+    }
+  });
+  
+  // Get semantic token colors with fallback to TextMate
+  const getColor = (semantic, textmateScopes, fallback) => {
+    // Check semantic first
+    if (semanticTokenColors[semantic]) {
+      const stc = semanticTokenColors[semantic];
+      return typeof stc === 'string' ? stc : stc.foreground;
+    }
+    // Check TextMate scopes
+    for (const scope of textmateScopes) {
+      if (scopeMap[scope]) return scopeMap[scope];
+    }
+    return fallback;
+  };
+  
+  const editorBg = colors['editor.background'] || '#1C1B1A';
+  const editorFg = colors['editor.foreground'] || '#CECDC3';
+  
+  const syntax = {
+    base: {
+      background: editorBg,
+      foreground: editorFg,
+      comment: getColor('comment', ['comment', 'punctuation.definition.comment'], '#878580'),
+      keyword: getColor('keyword', ['keyword', 'keyword.control', 'storage'], '#CC6B49'),
+      string: getColor('string', ['string', 'string.quoted'], '#7FB069'),
+      number: getColor('number', ['constant.numeric'], '#e2ad4a'),
+      function: getColor('function', ['entity.name.function', 'support.function'], '#5A96BC'),
+      variable: getColor('variable', ['variable'], '#CECDC3'),
+      type: getColor('type', ['entity.name.type', 'support.type'], '#e0a98eff'),
+      operator: getColor('operator', ['keyword.operator'], '#CC6B49')
+    },
+    tokens: {
+      // Extended tokens
+      commentDoc: getColor('comment', ['comment.documentation'], '#575653'),
+      stringEscape: getColor('string', ['constant.character.escape'], editorFg),
+      keywordImport: getColor('keyword', ['keyword.control.import'], '#D14D41'),
+      storageModifier: getColor('keyword', ['storage.modifier'], '#4385BE'),
+      functionCall: getColor('function', ['entity.name.function'], '#5A96BC'),
+      method: getColor('method', ['entity.name.function.method'], '#879A39'),
+      variableProperty: getColor('property', ['variable.other.object.property'], '#de956a'),
+      variableOther: getColor('variable', ['variable.other'], '#879A39'),
+      class: getColor('class', ['entity.name.type.class'], '#e0a98eff'),
+      className: getColor('class', ['entity.name.type.class'], '#e0a98eff'),
+      interface: getColor('interface', ['entity.name.type.interface'], '#e0a98eff'),
+      tag: getColor('function', ['entity.name.tag'], '#4385BE'),
+      boolean: getColor('enumMember', ['constant.language.boolean'], '#e2ad4a'),
+      url: getColor('string', ['string.other.link'], '#4385BE'),
+      key: getColor('property', ['meta.object-literal.key'], '#DA702C')
+    },
+    highlights: {
+      diffAdded: colors['gitDecoration.addedResourceForeground'] || '#879A39',
+      diffAddedBackground: (colors['gitDecoration.addedResourceForeground'] || '#879A39') + '20',
+      diffRemoved: colors['gitDecoration.deletedResourceForeground'] || '#D14D41',
+      diffRemovedBackground: (colors['gitDecoration.deletedResourceForeground'] || '#D14D41') + '20',
+      lineNumber: colors['editorLineNumber.foreground'] || '#878580',
+      lineNumberActive: colors['editorLineNumber.activeForeground'] || editorFg
+    }
+  };
+  
+  return syntax;
+}
+
+// Helper: adjust brightness of hex color
+function adjustBrightness(hex, percent) {
+  // Remove # if present
+  hex = hex.replace('#', '');
+  
+  // Parse RGB
+  let r = parseInt(hex.substring(0, 2), 16);
+  let g = parseInt(hex.substring(2, 4), 16);
+  let b = parseInt(hex.substring(4, 6), 16);
+  
+  // Adjust brightness
+  r = Math.min(255, Math.max(0, r + (r * percent / 100)));
+  g = Math.min(255, Math.max(0, g + (g * percent / 100)));
+  b = Math.min(255, Math.max(0, b + (b * percent / 100)));
+  
+  // Convert back to hex
+  return '#' + 
+    Math.round(r).toString(16).padStart(2, '0') +
+    Math.round(g).toString(16).padStart(2, '0') +
+    Math.round(b).toString(16).padStart(2, '0');
+}
+
+function escapeRegExp(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function makeImportVariableName(themeId) {
+  const base = themeId
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '_')
+    .replace(/^_+|_+$/g, '');
+
+  const safeBase = /^[a-z_]/.test(base) ? base : `_${base}`;
+  return `${safeBase}_Raw`;
+}
+
+function registerThemeInPresets(themeId) {
+  if (!fs.existsSync(PRESETS_PATH)) {
+    throw new Error(`presets.ts not found at: ${PRESETS_PATH}`);
+  }
+
+  const importPath = `./${themeId}.json`;
+  const presetsSource = fs.readFileSync(PRESETS_PATH, 'utf8');
+  const importVar = makeImportVariableName(themeId);
+  const importLine = `import ${importVar} from '${importPath}';`;
+  const arrayEntry = `${importVar} as Theme`;
+
+  // Check if already imported
+  const importExists = presetsSource.includes(importLine);
+  
+  // Check if already in array
+  const arrayEntryExists = presetsSource.includes(arrayEntry);
+
+  // If both exist, nothing to do
+  if (importExists && arrayEntryExists) {
+    console.log(`   Theme already registered: ${themeId}`);
+    return { updated: false, importVar, alreadyInArray: true, source: presetsSource };
+  }
+
+  let nextSource = presetsSource;
+  let updated = false;
+
+  // Add import if missing
+  if (!importExists) {
+    const lines = presetsSource.split(/\r?\n/);
+    let lastImportLine = -1;
+    for (let i = 0; i < lines.length; i++) {
+      if (/^\s*import\s/.test(lines[i])) lastImportLine = i;
+    }
+
+    if (lastImportLine === -1) {
+      throw new Error('Unable to find import block in presets.ts');
+    }
+
+    lines.splice(lastImportLine + 1, 0, importLine);
+    nextSource = lines.join('\n');
+    updated = true;
+  }
+
+  // Add to array if missing
+  if (!arrayEntryExists) {
+    const lines = nextSource.split(/\r?\n/);
+    const arrayStartIndex = lines.findIndex((line) => /^\s*export\s+const\s+presetThemes\b/.test(line));
+    if (arrayStartIndex === -1) {
+      throw new Error('Unable to find presetThemes declaration in presets.ts');
+    }
+
+    const arrayEndIndex = lines.findIndex(
+      (line, index) => index > arrayStartIndex && /^\s*\];\s*$/.test(line),
+    );
+    if (arrayEndIndex === -1) {
+      throw new Error('Unable to find presetThemes array end (];) in presets.ts');
+    }
+
+    lines.splice(arrayEndIndex, 0, `  ${arrayEntry},`);
+    nextSource = lines.join('\n');
+    updated = true;
+  }
+
+  return { updated, importVar, source: nextSource, alreadyInArray: arrayEntryExists };
+}
+
+function writeThemeToDisk(theme) {
+  if (!fs.existsSync(THEMES_DIR)) {
+    throw new Error(`Themes directory not found: ${THEMES_DIR}`);
+  }
+
+  const outputName = `${theme.metadata.id}.json`;
+  const outputPath = path.join(THEMES_DIR, outputName);
+  fs.writeFileSync(outputPath, JSON.stringify(theme, null, 2));
+  return outputPath;
+}
+
+function convertWriteAndRegisterTheme(inputPath) {
+  const theme = convertVsCodeTheme(inputPath);
+  const outputPath = writeThemeToDisk(theme);
+
+  const registration = registerThemeInPresets(theme.metadata.id);
+  if (registration.updated) fs.writeFileSync(PRESETS_PATH, registration.source);
+
+  return { theme, outputPath, registration };
+}
+
+// Main execution
+if (process.argv.length < 3) {
+  console.error('Usage: node convert-vscode-theme.js <path-to-vscode-theme.json>');
+  process.exit(1);
+}
+
+const inputPath = process.argv[2];
+
+if (!fs.existsSync(inputPath)) {
+  console.error(`File not found: ${inputPath}`);
+  process.exit(1);
+}
+
+try {
+  const { theme, outputPath, registration } = convertWriteAndRegisterTheme(inputPath);
+
+  console.log(`✅ Converted: ${inputPath}`);
+  console.log(`📄 Output: ${outputPath}`);
+  console.log(`\nTheme ID: ${theme.metadata.id}`);
+  console.log(`Variant: ${theme.metadata.variant}`);
+
+  if (registration?.importVar) {
+    console.log(`Preset import: ${registration.importVar}`);
+  }
+} catch (err) {
+  console.error('❌ Conversion failed:', err.message);
+  process.exit(1);
+}