diff --git a/AGENTS.md b/AGENTS.md
index 08e22157..b78cd24b 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -14,6 +14,7 @@
 - Lint: `pnpm lint`; Type-check: `pnpm typecheck` (runs per package). The root lint command is the single entry point for blocking Oxlint and Knip checks, residual ESLint, and advisory anti-slop checks.
 - Detailed advisory output: `pnpm lint:ox:extra:details`; accessibility scan: `pnpm a11y:scan` (install Chromium once with `pnpm exec playwright install chromium`); opt-in render evidence: `pnpm perf:scan`.
 - Tests (E2E): `pnpm test`, `pnpm test:ui`, CI configs in `playwright.ci*.config.ts`.
+- Themes: `pnpm check:theme-contrast` gates every theme in `frontend/src/styles/tokens/colors.css` (AA text/UI pairs, terminal ANSI palette, high-contrast overlay); `THEME_SCREENSHOTS=1 pnpm test -- tests/theme-screenshots.spec.ts` regenerates `screenshots/themes/`.
 - Main unit tests (if added): `pnpm --filter main test`, coverage: `pnpm --filter main run test:coverage`.
 - Releases must follow `docs/RELEASE_INSTRUCTIONS.md` and run from a clean `main` checkout whose `HEAD` matches `origin/main`.
 
diff --git a/frontend/index.html b/frontend/index.html
index a8a8d31e..199eef5f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -11,7 +11,7 @@
     <script>
       // Apply theme class before React loads to prevent flash
       const savedTheme = localStorage.getItem('theme');
-      const validThemes = ['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta'];
+      const validThemes = ['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta', 'haar', 'abyss', 'understory'];
       const themeClasses = {
         'light': ['light'],
         'light-rounded': ['light', 'light-rounded'],
@@ -25,6 +25,9 @@
         'night-owl': ['dark', 'night-owl'],
         'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
         'terracotta': ['dark', 'terracotta'],
+        'haar': ['light', 'haar'],
+        'abyss': ['dark', 'abyss'],
+        'understory': ['dark', 'understory'],
       };
       const theme = validThemes.includes(savedTheme) ? savedTheme : 'light-rounded';
       document.documentElement.classList.add(...themeClasses[theme]);
@@ -37,7 +40,7 @@
     <script>
       // Also apply to body (mirrors the head script logic)
       const t = localStorage.getItem('theme');
-      const vt = ['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta'];
+      const vt = ['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta', 'haar', 'abyss', 'understory'];
       const tc = {
         'light': ['light'],
         'light-rounded': ['light', 'light-rounded'],
@@ -51,6 +54,9 @@
         'night-owl': ['dark', 'night-owl'],
         'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
         'terracotta': ['dark', 'terracotta'],
+        'haar': ['light', 'haar'],
+        'abyss': ['dark', 'abyss'],
+        'understory': ['dark', 'understory'],
       };
       const bt = vt.includes(t) ? t : 'light-rounded';
       document.body.classList.add(...tc[bt]);
diff --git a/frontend/src/components/HomePage.tsx b/frontend/src/components/HomePage.tsx
index 8b821a88..a97892fc 100644
--- a/frontend/src/components/HomePage.tsx
+++ b/frontend/src/components/HomePage.tsx
@@ -11,6 +11,7 @@ import { Toggle } from './ui/Toggle';
 import { AddProjectDialog } from './AddProjectDialog';
 import { CloneFromGitHubDialog } from './CloneFromGitHubDialog';
 import { formatDistanceToNow, isValidTimestamp } from '../utils/timestampUtils';
+import { THEME_OPTIONS, getThemeLabel } from '../utils/themeOptions';
 import type { Project } from '../types/project';
 import type { Session } from '../types/session';
 
@@ -314,27 +315,19 @@ export function HomePage() {
                     type="button"
                     className="flex cursor-pointer items-center gap-2 rounded-md border border-border-secondary bg-surface-tertiary px-3 py-1.5 text-sm text-text-primary hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-interactive"
                   >
-                    <span>{{ light: 'Light (sharp)', 'light-rounded': 'Light (rounded)', dark: 'Dark (sharp)', oled: 'OLED Black (sharp)', dusk: 'Dusk', 'dusk-oled': 'Dusk (OLED)', forge: 'Forge', ember: 'Ember', aurora: 'Aurora', 'night-owl': 'Night Owl', 'night-owl-oled': 'Night Owl (OLED)', terracotta: 'Terracotta' }[theme]}</span>
+                    <span>{getThemeLabel(theme)}</span>
                     <ChevronDown className="w-3 h-3 text-text-tertiary" />
                   </button>
                 }
-                items={[
-                  { id: 'light-rounded', label: 'Light (rounded)', onClick: () => setTheme('light-rounded') },
-                  { id: 'forge', label: 'Forge', onClick: () => setTheme('forge') },
-                  { id: 'night-owl', label: 'Night Owl', onClick: () => setTheme('night-owl') },
-                  { id: 'night-owl-oled', label: 'Night Owl (OLED)', onClick: () => setTheme('night-owl-oled') },
-                  { id: 'dusk-oled', label: 'Dusk (OLED)', onClick: () => setTheme('dusk-oled') },
-                  { id: 'dusk', label: 'Dusk', onClick: () => setTheme('dusk') },
-                  { id: 'ember', label: 'Ember', onClick: () => setTheme('ember') },
-                  { id: 'aurora', label: 'Aurora', onClick: () => setTheme('aurora') },
-                  { id: 'terracotta', label: 'Terracotta', onClick: () => setTheme('terracotta') },
-                  { id: 'light', label: 'Light (sharp)', onClick: () => setTheme('light') },
-                  { id: 'dark', label: 'Dark (sharp)', onClick: () => setTheme('dark') },
-                  { id: 'oled', label: 'OLED Black (sharp)', onClick: () => setTheme('oled') },
-                ]}
+                items={THEME_OPTIONS.map((option) => ({
+                  id: option.id,
+                  label: option.label,
+                  description: option.description,
+                  onClick: () => setTheme(option.id),
+                }))}
                 selectedId={theme}
                 position="bottom-right"
-                width="sm"
+                width="lg"
               />
             </div>
 
diff --git a/frontend/src/components/panels/diff/DiffViewer.tsx b/frontend/src/components/panels/diff/DiffViewer.tsx
index d77bbe33..8b0bfc05 100644
--- a/frontend/src/components/panels/diff/DiffViewer.tsx
+++ b/frontend/src/components/panels/diff/DiffViewer.tsx
@@ -4,7 +4,7 @@ import type { DiffHighlighter } from '@git-diff-view/shiki';
 import { getDiffViewHighlighter } from '@git-diff-view/shiki';
 import { FileText, ChevronRight, ChevronDown, ExternalLink, ChevronsUpDown, ChevronsDownUp } from 'lucide-react';
 import type { DiffViewerProps, FileDiff } from '../../../types/diff';
-import { useTheme } from '../../../contexts/ThemeContext';
+import { isLightTheme, useTheme } from '../../../contexts/ThemeContext';
 import { useScrollSurface } from '../../../hooks/useScrollSurface';
 import "@git-diff-view/react/styles/diff-view.css";
 
@@ -141,7 +141,7 @@ export interface DiffViewerHandle {
 
 const DiffViewer = memo(forwardRef<DiffViewerHandle, DiffViewerProps>(({ files, className = '', sessionId, onOpenInEditor }, ref) => {
   const { theme } = useTheme();
-  const isDarkMode = theme !== 'light' && theme !== 'light-rounded';
+  const isDarkMode = !isLightTheme(theme);
   const [expandedFiles, setExpandedFiles] = useState<Set<number>>(new Set());
   const [highlighter, setHighlighter] = useState<DiffHighlighter | null>(null);
   const viewerRef = useRef<HTMLDivElement>(null);
diff --git a/frontend/src/components/panels/editor/FileEditor.tsx b/frontend/src/components/panels/editor/FileEditor.tsx
index 027b036e..22d3e9ae 100644
--- a/frontend/src/components/panels/editor/FileEditor.tsx
+++ b/frontend/src/components/panels/editor/FileEditor.tsx
@@ -6,7 +6,7 @@ import { useTree } from '@headless-tree/react';
 import { asyncDataLoaderFeature, selectionFeature, hotkeysCoreFeature, expandAllFeature } from '@headless-tree/core';
 import type { ItemInstance } from '@headless-tree/core';
 import { MonacoErrorBoundary } from '../../MonacoErrorBoundary';
-import { useTheme } from '../../../contexts/ThemeContext';
+import { isLightTheme, useTheme } from '../../../contexts/ThemeContext';
 import { debounce } from '../../../utils/debounce';
 import { devLog } from '../../../utils/console';
 import { MarkdownPreview } from '../../MarkdownPreview';
@@ -1233,7 +1233,7 @@ export function FileEditor({
   }, [binaryBlobUrl]);
 
   const { theme } = useTheme();
-  const isDarkMode = theme !== 'light' && theme !== 'light-rounded';
+  const isDarkMode = !isLightTheme(theme);
   const hasUnsavedChanges = fileContent !== originalContent;
   
   // Wrap onResize callback to avoid recreating
diff --git a/frontend/src/components/panels/logPanel/LogsView.tsx b/frontend/src/components/panels/logPanel/LogsView.tsx
index c55622eb..10778569 100644
--- a/frontend/src/components/panels/logPanel/LogsView.tsx
+++ b/frontend/src/components/panels/logPanel/LogsView.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 import { Search, X, Download, Trash2, ChevronUp, ChevronDown, Filter, Copy, Check } from 'lucide-react';
 import { cn } from '../../../utils/cn';
 import AnsiToHtml from 'ansi-to-html';
-import { useTheme } from '../../../contexts/ThemeContext';
+import { isLightTheme, useTheme } from '../../../contexts/ThemeContext';
 import { LiveRegion } from '../../ui/LiveRegion';
 import { areKeyboardShortcutsEnabled, useConfigStore } from '../../../stores/configStore';
 import { useScrollSurface } from '../../../hooks/useScrollSurface';
@@ -48,7 +48,7 @@ export const LogsView: React.FC<LogsViewProps> = ({ sessionId, isVisible }) => {
 
   // Create ANSI to HTML converter with theme-aware colors
   const ansiConverter = useMemo(() => {
-    const isLight = theme === 'light' || theme === 'light-rounded';
+    const isLight = isLightTheme(theme);
     return new AnsiToHtml({
       fg: isLight ? '#1f2328' : '#e5e7eb',
       bg: isLight ? '#ffffff' : '#0a0a0a',
diff --git a/frontend/src/components/settings/categories/AppearanceSettings.tsx b/frontend/src/components/settings/categories/AppearanceSettings.tsx
index 7b80f621..ddea3a5d 100644
--- a/frontend/src/components/settings/categories/AppearanceSettings.tsx
+++ b/frontend/src/components/settings/categories/AppearanceSettings.tsx
@@ -12,21 +12,7 @@ import { SettingRow, SettingsPage } from '../SettingRow';
 import { ImmediateToggle, SegmentedControl } from '../SettingsControls';
 import type { SettingsPersistence } from '../useSettingsPersistence';
 import type { AppConfig } from '../../../types/config';
-
-const THEMES: Array<{ id: NonNullable<AppConfig['theme']>; label: string }> = [
-  { id: 'light-rounded', label: 'Light (rounded)' },
-  { id: 'light', label: 'Light (sharp)' },
-  { id: 'forge', label: 'Forge' },
-  { id: 'night-owl', label: 'Night Owl' },
-  { id: 'night-owl-oled', label: 'Night Owl (OLED)' },
-  { id: 'dusk', label: 'Dusk' },
-  { id: 'dusk-oled', label: 'Dusk (OLED)' },
-  { id: 'ember', label: 'Ember' },
-  { id: 'aurora', label: 'Aurora' },
-  { id: 'terracotta', label: 'Terracotta' },
-  { id: 'dark', label: 'Dark (sharp)' },
-  { id: 'oled', label: 'OLED Black (sharp)' },
-];
+import { THEME_OPTIONS } from '../../../utils/themeOptions';
 
 export function AppearanceSettings({ persistence }: { persistence: SettingsPersistence }) {
   const config = persistence.config!;
@@ -34,7 +20,7 @@ export function AppearanceSettings({ persistence }: { persistence: SettingsPersi
 
   const saveScale = (value: number) => persistence.saveConfig('ui-scale', { uiScale: value });
   const saveTheme = (value: string) => {
-    // SAFETY: Theme values come from the THEMES list, whose ids match AppConfig.theme.
+    // SAFETY: Theme values come from THEME_OPTIONS, whose ids match AppConfig.theme.
     return persistence.saveConfig('theme', { theme: value as AppConfig['theme'] });
   };
 
@@ -54,7 +40,11 @@ export function AppearanceSettings({ persistence }: { persistence: SettingsPersi
             >
               <SelectTrigger aria-label="Theme"><SelectValue /></SelectTrigger>
               <SelectContent>
-                {THEMES.map((theme) => <SelectItem key={theme.id} value={theme.id}>{theme.label}</SelectItem>)}
+                {THEME_OPTIONS.map((theme) => (
+                  <SelectItem key={theme.id} value={theme.id} description={theme.description}>
+                    {theme.label}
+                  </SelectItem>
+                ))}
               </SelectContent>
             </Select>
           </div>
diff --git a/frontend/src/components/ui/Select.tsx b/frontend/src/components/ui/Select.tsx
index 56ee4862..e4ebcd38 100644
--- a/frontend/src/components/ui/Select.tsx
+++ b/frontend/src/components/ui/Select.tsx
@@ -133,12 +133,16 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
+    /** Optional secondary line rendered under the label inside the list only (not in the trigger). */
+    description?: string;
+  }
+>(({ className, children, description, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none',
+      'relative flex w-full cursor-default select-none rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none',
+      description ? 'flex-col items-start gap-0.5' : 'items-center',
       'text-text-primary',
       'hover:bg-surface-secondary hover:text-text-primary',
       'focus:bg-surface-secondary focus:text-text-primary',
@@ -148,12 +152,13 @@ const SelectItem = forwardRef<
     )}
     {...props}
   >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className={cn('absolute right-2 flex h-3.5 w-3.5 items-center justify-center', description && 'top-2')}>
       <SelectPrimitive.ItemIndicator>
         <Check className="h-4 w-4 text-interactive" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    {description && <span className="text-xs leading-snug text-text-muted">{description}</span>}
   </SelectPrimitive.Item>
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
diff --git a/frontend/src/contexts/ThemeContext.ts b/frontend/src/contexts/ThemeContext.ts
index 0834f014..c8f7f003 100644
--- a/frontend/src/contexts/ThemeContext.ts
+++ b/frontend/src/contexts/ThemeContext.ts
@@ -1,2 +1,3 @@
 export { ThemeProvider } from './ThemeProvider';
 export { useTheme } from './useTheme';
+export { isLightTheme } from './themeContextValue';
diff --git a/frontend/src/contexts/ThemeProvider.tsx b/frontend/src/contexts/ThemeProvider.tsx
index 8179969b..0bc4e140 100644
--- a/frontend/src/contexts/ThemeProvider.tsx
+++ b/frontend/src/contexts/ThemeProvider.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useConfigStore } from '../stores/configStore';
 import { ThemeContext, type Theme } from './themeContextValue';
 
-const VALID_THEMES = new Set<string>(['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta']);
+const VALID_THEMES = new Set<string>(['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta', 'haar', 'abyss', 'understory']);
 const THEME_CLASSES = {
   'light': ['light'],
   'light-rounded': ['light', 'light-rounded'],
@@ -16,6 +16,9 @@ const THEME_CLASSES = {
   'night-owl': ['dark', 'night-owl'],
   'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
   'terracotta': ['dark', 'terracotta'],
+  'haar': ['light', 'haar'],
+  'abyss': ['dark', 'abyss'],
+  'understory': ['dark', 'understory'],
 } satisfies Record<Theme, string[]>;
 const isValidTheme = (theme: string): theme is Theme => VALID_THEMES.has(theme);
 
@@ -51,8 +54,8 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     const body = document.body;
 
     // Remove ALL theme classes from both root and body
-    root.classList.remove('light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta');
-    body.classList.remove('light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta');
+    root.classList.remove('light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta', 'haar', 'abyss', 'understory');
+    body.classList.remove('light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta', 'haar', 'abyss', 'understory');
 
     const themeClasses = THEME_CLASSES[theme];
     root.classList.add(...themeClasses);
diff --git a/frontend/src/contexts/themeContextValue.ts b/frontend/src/contexts/themeContextValue.ts
index 69b51e5e..a21fde0b 100644
--- a/frontend/src/contexts/themeContextValue.ts
+++ b/frontend/src/contexts/themeContextValue.ts
@@ -1,6 +1,11 @@
 import { createContext } from 'react';
 
-export type Theme = 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta';
+export type Theme = 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta' | 'haar' | 'abyss' | 'understory';
+
+const LIGHT_THEMES: ReadonlySet<Theme> = new Set<Theme>(['light', 'light-rounded', 'haar']);
+
+// Themes composed on the `light` base class (see THEME_CLASSES in ThemeProvider).
+export const isLightTheme = (theme: Theme): boolean => LIGHT_THEMES.has(theme);
 
 export interface ThemeContextType {
   theme: Theme;
diff --git a/frontend/src/hooks/usePaneLogo.ts b/frontend/src/hooks/usePaneLogo.ts
index ea25fbb6..1fc57057 100644
--- a/frontend/src/hooks/usePaneLogo.ts
+++ b/frontend/src/hooks/usePaneLogo.ts
@@ -1,8 +1,8 @@
 import paneLogoDark from '../assets/pane-logo-dark.svg';
 import paneLogoLight from '../assets/pane-logo-light.svg';
-import { useTheme } from '../contexts/ThemeContext';
+import { isLightTheme, useTheme } from '../contexts/ThemeContext';
 
 export function usePaneLogo(): string {
   const { theme } = useTheme();
-  return theme === 'light' || theme === 'light-rounded' ? paneLogoLight : paneLogoDark;
+  return isLightTheme(theme) ? paneLogoLight : paneLogoDark;
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 328a51a8..44d1f5a0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -62,6 +62,27 @@ body.light-rounded {
     linear-gradient(180deg, #f7fafc 0%, #eef3f7 100%);
 }
 
+/* Haar — a fog bank thins toward the top of the frame */
+body.haar {
+  background:
+    radial-gradient(circle at top center, rgba(255, 255, 255, 0.55), transparent 34%),
+    linear-gradient(180deg, #f1f4f7 0%, #e6ebf0 100%);
+}
+
+/* Abyss — faint bioluminescent bloom rising from the deep */
+body.abyss {
+  background:
+    radial-gradient(circle at bottom center, rgba(77, 184, 171, 0.10), transparent 36%),
+    linear-gradient(180deg, #07111c 0%, #050c15 100%);
+}
+
+/* Understory — light filtering down through a canopy onto bark */
+body.understory {
+  background:
+    radial-gradient(circle at top center, rgba(211, 221, 168, 0.07), transparent 32%),
+    linear-gradient(180deg, #1e1914 0%, #131911 100%);
+}
+
 /* Scrollbars stay functional but visually hidden */
 ::-webkit-scrollbar {
   width: 0;
@@ -98,7 +119,9 @@ body.light-rounded {
 :root.ember .panel-tab-bar [aria-selected="true"],
 :root.night-owl .panel-tab-bar [aria-selected="true"],
 :root.night-owl-oled .panel-tab-bar [aria-selected="true"],
-:root.terracotta .panel-tab-bar [aria-selected="true"] {
+:root.terracotta .panel-tab-bar [aria-selected="true"],
+:root.abyss .panel-tab-bar [aria-selected="true"],
+:root.understory .panel-tab-bar [aria-selected="true"] {
   background-color: transparent;
   box-shadow: inset 0 calc(-1 * var(--tab-indicator-height, 4px)) 0 0 var(--tab-indicator-color, #3574F0);
 }
@@ -129,6 +152,9 @@ body.light-rounded {
 :root.night-owl .pane-sidebar-shell,
 :root.night-owl-oled .pane-sidebar-shell,
 :root.terracotta .pane-sidebar-shell,
+:root.haar .pane-sidebar-shell,
+:root.abyss .pane-sidebar-shell,
+:root.understory .pane-sidebar-shell,
 :root.light-rounded .pane-sidebar-shell {
   border: 3px solid var(--color-border-primary);
   border-radius: var(--app-shell-radius);
@@ -143,6 +169,9 @@ body.light-rounded {
 :root.night-owl .pane-session-shell,
 :root.night-owl-oled .pane-session-shell,
 :root.terracotta .pane-session-shell,
+:root.haar .pane-session-shell,
+:root.abyss .pane-session-shell,
+:root.understory .pane-session-shell,
 :root.light-rounded .pane-session-shell {
   gap: var(--panel-shell-gap);
 }
@@ -154,6 +183,9 @@ body.light-rounded {
 :root.night-owl .panel-tab-bar,
 :root.night-owl-oled .panel-tab-bar,
 :root.terracotta .panel-tab-bar,
+:root.haar .panel-tab-bar,
+:root.abyss .panel-tab-bar,
+:root.understory .panel-tab-bar,
 :root.light-rounded .panel-tab-bar {
   border: 1px solid var(--color-border-primary);
   border-radius: var(--panel-shell-radius);
@@ -168,6 +200,9 @@ body.light-rounded {
 :root.night-owl .pane-editor-stage,
 :root.night-owl-oled .pane-editor-stage,
 :root.terracotta .pane-editor-stage,
+:root.haar .pane-editor-stage,
+:root.abyss .pane-editor-stage,
+:root.understory .pane-editor-stage,
 :root.light-rounded .pane-editor-stage {
   border: 1px solid var(--color-border-primary);
   border-radius: var(--panel-shell-radius);
@@ -182,6 +217,9 @@ body.light-rounded {
 :root.night-owl .pane-terminal-dock,
 :root.night-owl-oled .pane-terminal-dock,
 :root.terracotta .pane-terminal-dock,
+:root.haar .pane-terminal-dock,
+:root.abyss .pane-terminal-dock,
+:root.understory .pane-terminal-dock,
 :root.light-rounded .pane-terminal-dock {
   margin-top: var(--panel-shell-gap);
   border: 1px solid var(--color-border-primary);
@@ -197,6 +235,9 @@ body.light-rounded {
 :root.night-owl .pane-terminal-rail,
 :root.night-owl-oled .pane-terminal-rail,
 :root.terracotta .pane-terminal-rail,
+:root.haar .pane-terminal-rail,
+:root.abyss .pane-terminal-rail,
+:root.understory .pane-terminal-rail,
 :root.light-rounded .pane-terminal-rail,
 :root.dusk .pane-detail-panel,
 :root.forge .pane-detail-panel,
@@ -205,6 +246,9 @@ body.light-rounded {
 :root.night-owl .pane-detail-panel,
 :root.night-owl-oled .pane-detail-panel,
 :root.terracotta .pane-detail-panel,
+:root.haar .pane-detail-panel,
+:root.abyss .pane-detail-panel,
+:root.understory .pane-detail-panel,
 :root.light-rounded .pane-detail-panel {
   border-color: transparent !important;
   background: transparent;
@@ -217,6 +261,9 @@ body.light-rounded {
 :root.night-owl .pane-terminal-rail-shell,
 :root.night-owl-oled .pane-terminal-rail-shell,
 :root.terracotta .pane-terminal-rail-shell,
+:root.haar .pane-terminal-rail-shell,
+:root.abyss .pane-terminal-rail-shell,
+:root.understory .pane-terminal-rail-shell,
 :root.light-rounded .pane-terminal-rail-shell,
 :root.dusk .pane-detail-panel-inner,
 :root.forge .pane-detail-panel-inner,
@@ -225,6 +272,9 @@ body.light-rounded {
 :root.night-owl .pane-detail-panel-inner,
 :root.night-owl-oled .pane-detail-panel-inner,
 :root.terracotta .pane-detail-panel-inner,
+:root.haar .pane-detail-panel-inner,
+:root.abyss .pane-detail-panel-inner,
+:root.understory .pane-detail-panel-inner,
 :root.light-rounded .pane-detail-panel-inner {
   border: 1px solid var(--color-border-primary);
   border-radius: var(--panel-shell-radius);
@@ -239,6 +289,9 @@ body.light-rounded {
 :root.night-owl .pane-terminal-rail-shell,
 :root.night-owl-oled .pane-terminal-rail-shell,
 :root.terracotta .pane-terminal-rail-shell,
+:root.haar .pane-terminal-rail-shell,
+:root.abyss .pane-terminal-rail-shell,
+:root.understory .pane-terminal-rail-shell,
 :root.light-rounded .pane-terminal-rail-shell,
 :root.dusk .pane-detail-panel-vertical .pane-detail-panel-inner,
 :root.forge .pane-detail-panel-vertical .pane-detail-panel-inner,
@@ -247,6 +300,9 @@ body.light-rounded {
 :root.night-owl .pane-detail-panel-vertical .pane-detail-panel-inner,
 :root.night-owl-oled .pane-detail-panel-vertical .pane-detail-panel-inner,
 :root.terracotta .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.haar .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.abyss .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.understory .pane-detail-panel-vertical .pane-detail-panel-inner,
 :root.light-rounded .pane-detail-panel-vertical .pane-detail-panel-inner {
   margin-left: var(--panel-shell-gap);
 }
@@ -258,6 +314,9 @@ body.light-rounded {
 :root.night-owl .pane-detail-panel-horizontal .pane-detail-panel-inner,
 :root.night-owl-oled .pane-detail-panel-horizontal .pane-detail-panel-inner,
 :root.terracotta .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.haar .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.abyss .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.understory .pane-detail-panel-horizontal .pane-detail-panel-inner,
 :root.light-rounded .pane-detail-panel-horizontal .pane-detail-panel-inner {
   margin-top: var(--panel-shell-gap);
 }
@@ -319,6 +378,45 @@ body.light-rounded {
     inset 0 1px 0 rgba(192, 112, 80, 0.06);
 }
 
+:root.haar .panel-tab-bar,
+:root.haar .pane-editor-stage,
+:root.haar .pane-terminal-dock,
+:root.haar .pane-terminal-rail-shell,
+:root.haar .pane-detail-panel-inner {
+  border-width: 1.25px;
+  border-color: rgba(37, 45, 54, 0.12);
+  box-shadow:
+    0 8px 20px rgba(21, 27, 33, 0.07),
+    0 0 0 1px rgba(255, 255, 255, 0.55),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+:root.abyss .panel-tab-bar,
+:root.abyss .pane-editor-stage,
+:root.abyss .pane-terminal-dock,
+:root.abyss .pane-terminal-rail-shell,
+:root.abyss .pane-detail-panel-inner {
+  border-width: 1.25px;
+  border-color: rgba(77, 184, 171, 0.16);
+  box-shadow:
+    0 12px 26px rgba(1, 4, 8, 0.4),
+    0 0 0 1px rgba(77, 184, 171, 0.04),
+    inset 0 1px 0 rgba(159, 227, 216, 0.05);
+}
+
+:root.understory .panel-tab-bar,
+:root.understory .pane-editor-stage,
+:root.understory .pane-terminal-dock,
+:root.understory .pane-terminal-rail-shell,
+:root.understory .pane-detail-panel-inner {
+  border-width: 1.25px;
+  border-color: rgba(70, 57, 46, 0.7);
+  box-shadow:
+    0 10px 22px rgba(4, 6, 3, 0.3),
+    0 0 0 1px rgba(166, 181, 109, 0.03),
+    inset 0 1px 0 rgba(211, 221, 168, 0.04);
+}
+
 :root.ember .panel-tab-bar,
 :root.ember .pane-editor-stage,
 :root.ember .pane-terminal-dock,
@@ -376,6 +474,12 @@ body.light-rounded {
   border-radius: var(--panel-shell-radius);
 }
 
+:root.haar .xterm,
+:root.abyss .xterm,
+:root.understory .xterm {
+  border-radius: var(--panel-shell-radius);
+}
+
 :root.ember .xterm,
 :root.aurora .xterm,
 :root.light-rounded .xterm {
@@ -798,6 +902,30 @@ body.light-rounded {
   --vscode-editorWidget-foreground: #1f2328 !important;
 }
 
+/* Abyss theme overrides — trench editor colors */
+:root.abyss {
+  --vscode-editor-background: #04090f !important;
+  --vscode-editor-foreground: #dbeaf1 !important;
+  --vscode-editorWidget-background: #04090f !important;
+  --vscode-editorWidget-foreground: #dbeaf1 !important;
+}
+
+/* Understory theme overrides — moss floor editor colors */
+:root.understory {
+  --vscode-editor-background: #0d110c !important;
+  --vscode-editor-foreground: #e4e9d9 !important;
+  --vscode-editorWidget-background: #0d110c !important;
+  --vscode-editorWidget-foreground: #e4e9d9 !important;
+}
+
+/* Haar theme overrides — fog editor colors (after .light so the theme wins) */
+:root.haar {
+  --vscode-editor-background: #f5f7f9 !important;
+  --vscode-editor-foreground: #252d36 !important;
+  --vscode-editorWidget-background: #f5f7f9 !important;
+  --vscode-editorWidget-foreground: #252d36 !important;
+}
+
 /* Additional Monaco editor style overrides */
 .monaco-editor,
 .monaco-editor-background,
diff --git a/frontend/src/styles/monaco-overrides.css b/frontend/src/styles/monaco-overrides.css
index 3343f4b0..b69e12a1 100644
--- a/frontend/src/styles/monaco-overrides.css
+++ b/frontend/src/styles/monaco-overrides.css
@@ -24,6 +24,30 @@
   --vscode-editorWidget-foreground: #1e2026 !important;
 }
 
+/* Abyss theme overrides — trench editor colors */
+:root.abyss {
+  --vscode-editor-background: #04090f !important;
+  --vscode-editor-foreground: #dbeaf1 !important;
+  --vscode-editorWidget-background: #04090f !important;
+  --vscode-editorWidget-foreground: #dbeaf1 !important;
+}
+
+/* Understory theme overrides — moss floor editor colors */
+:root.understory {
+  --vscode-editor-background: #0d110c !important;
+  --vscode-editor-foreground: #e4e9d9 !important;
+  --vscode-editorWidget-background: #0d110c !important;
+  --vscode-editorWidget-foreground: #e4e9d9 !important;
+}
+
+/* Haar theme overrides — fog editor colors (after .light so the theme wins) */
+:root.haar {
+  --vscode-editor-background: #f5f7f9 !important;
+  --vscode-editor-foreground: #252d36 !important;
+  --vscode-editorWidget-background: #f5f7f9 !important;
+  --vscode-editorWidget-foreground: #252d36 !important;
+}
+
 /* Additional Monaco editor style overrides */
 .monaco-editor,
 .monaco-editor-background,
diff --git a/frontend/src/styles/tokens/colors.css b/frontend/src/styles/tokens/colors.css
index 18692991..348ed9bc 100644
--- a/frontend/src/styles/tokens/colors.css
+++ b/frontend/src/styles/tokens/colors.css
@@ -156,6 +156,68 @@
   --terra-accent8: #d68e6e;
   --terra-accent9: #dea080;
   --terra-accent10: #e6b498;
+
+  /* Haar primitives — cold pre-dawn sea fog (light ramp, blue-grey neutrals) */
+  --haar-50: #f5f7f9;
+  --haar-100: #eceff3;
+  --haar-150: #e2e7ec;
+  --haar-200: #d5dce3;
+  --haar-300: #c1cad3;
+  --haar-400: #93a1ad;
+  --haar-500: #66727e;
+  --haar-600: #505c68;
+  --haar-700: #3a4550;
+  --haar-800: #252d36;
+  --haar-900: #151b21;
+
+  /* Haar accent ramp — steel blue seen through fog */
+  --haar-steel-300: #a9bccf;
+  --haar-steel-400: #7c96ad;
+  --haar-steel-500: #4f6d8a;
+  --haar-steel-600: #3e5a75;
+  --haar-steel-700: #304a62;
+
+  /* Abyss primitives — deep-ocean navy ramp */
+  --abyss-950: #04090f;
+  --abyss-900: #07111c;
+  --abyss-850: #0b1826;
+  --abyss-800: #102030;
+  --abyss-700: #172d40;
+  --abyss-600: #203c52;
+  --abyss-500: #325670;
+  --abyss-400: #6389a2;
+  --abyss-300: #8fb0c5;
+  --abyss-200: #b6cedb;
+  --abyss-100: #dbeaf1;
+
+  /* Abyss accent ramp — bioluminescent sea-glass teal */
+  --abyss-glow-300: #9fe3d8;
+  --abyss-glow-400: #6fcfc1;
+  --abyss-glow-500: #4db8ab;
+
+  /* Understory primitives — moss floor ramp (green-black neutrals) */
+  --under-950: #0d110c;
+  --under-900: #131911;
+  --under-850: #192117;
+  --under-800: #20291d;
+  --under-700: #2a3626;
+  --under-600: #374532;
+  --under-500: #55654c;
+  --under-400: #7f8f73;
+  --under-300: #a4b297;
+  --under-200: #c5ceb8;
+  --under-100: #e4e9d9;
+
+  /* Understory bark ramp — warm brown chrome */
+  --under-bark-850: #1e1914;
+  --under-bark-800: #27201a;
+  --under-bark-700: #352c23;
+  --under-bark-600: #46392e;
+
+  /* Understory accent ramp — pale lichen */
+  --under-lichen-300: #d3dda8;
+  --under-lichen-400: #bfcc8b;
+  --under-lichen-500: #a6b56d;
 }
 
 /* Dark Theme - Pure Black OLED */
@@ -1719,6 +1781,485 @@
   --color-terminal-bright-white: #F2E4D6;
 }
 
+/* Haar Theme — cold pre-dawn sea fog: blue-white surfaces, ink text (light base) */
+:root.haar {
+  /* Backgrounds — fog bank (chrome) vs. clearing (editor) */
+  --color-bg-primary: var(--haar-100);
+  --color-bg-secondary: var(--haar-150);
+  --color-bg-tertiary: var(--haar-200);
+  --color-bg-hover: var(--haar-200);
+  --color-bg-active: var(--haar-300);
+  --color-bg-chrome: var(--haar-150);
+  --color-bg-editor: var(--haar-50);   /* brightest — the clearing */
+
+  /* Surfaces */
+  --color-surface-primary: var(--haar-50);
+  --color-surface-secondary: var(--haar-100);
+  --color-surface-tertiary: var(--haar-150);
+  --color-surface-hover: var(--haar-200);
+
+  /* Text — ink on fog */
+  --color-text-primary: var(--haar-800);
+  --color-text-secondary: var(--haar-700);
+  --color-text-tertiary: var(--haar-600);
+  --color-text-muted: #5b6874;  /* 4.95:1 on --haar-100 (AA) */
+  --color-text-disabled: var(--haar-400);
+
+  /* Borders — cold, visible like frost lines */
+  --color-border-primary: rgba(37, 45, 54, 0.16);
+  --color-border-secondary: rgba(37, 45, 54, 0.10);
+  --color-border-tertiary: rgba(37, 45, 54, 0.06);
+  --color-border-hover: rgba(37, 45, 54, 0.24);
+  --color-border-focus: var(--haar-steel-500);
+
+  /* Interactive — steel blue through fog */
+  --color-interactive: var(--haar-steel-500);
+  --color-interactive-primary: var(--haar-steel-500);
+  --color-interactive-hover: var(--haar-steel-600);
+  --color-interactive-active: var(--haar-steel-700);
+  --color-interactive-text: var(--haar-steel-700);
+  --color-focus-ring: var(--haar-steel-500);
+  --color-interactive-rgb: 79 109 138;
+
+  /* Interactive on dark (used by dark-surface accents inside a light theme) */
+  --color-text-interactive-on-dark: var(--haar-steel-300);
+  --color-text-interactive-on-dark-hover: var(--haar-steel-400);
+  --color-text-interactive-on-dark-active: var(--haar-steel-300);
+  --color-text-interactive-on-dark-focus: var(--haar-steel-300);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--haar-100);
+  --color-surface-interactive-hover: var(--haar-150);
+  --color-interactive-surface: rgba(79, 109, 138, 0.14);
+  --color-interactive-surface-hover: rgba(79, 109, 138, 0.22);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(37, 45, 54, 0.08);
+  --color-border-interactive: rgba(37, 45, 54, 0.16);
+  --color-interactive-border: var(--haar-steel-500);
+  --color-interactive-border-hover: var(--haar-steel-600);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: #5b6874;  /* 4.95:1 on --haar-100 (AA) */
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(79, 109, 138, 0.4);
+
+  /* Status — muted, photographic */
+  --color-status-success: #2f7a45;
+  --color-status-success-hover: #276638;
+  --color-status-warning: #85611a;
+  --color-status-warning-hover: #6f5013;
+  --color-status-error: #b23b3b;
+  --color-status-error-hover: #952f2f;
+  --color-status-info: var(--haar-steel-600);
+  --color-status-neutral: var(--haar-500);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--haar-800);
+  --color-text-on-secondary: var(--haar-800);
+  --color-text-on-tertiary: var(--haar-700);
+  --color-text-on-surface: var(--haar-800);
+  --color-text-on-interactive: rgb(255 255 255);
+  --color-text-on-status-success: rgb(255 255 255);
+  --color-text-on-status-warning: rgb(255 255 255);
+  --color-text-on-status-error: rgb(255 255 255);
+  --color-text-on-status-info: rgb(255 255 255);
+  --color-text-on-navigation: var(--haar-800);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--haar-steel-500);
+  --color-button-primary-hover: var(--haar-steel-600);
+  --color-button-primary-text: rgb(255 255 255);
+  --color-button-secondary-bg: var(--haar-150);
+  --color-button-secondary-hover: var(--haar-200);
+  --color-button-secondary-text: var(--haar-800);
+  --color-button-ghost-hover: var(--haar-200);
+  --color-button-ghost-text: var(--haar-700);
+
+  /* Cards */
+  --color-card-bg: var(--haar-50);
+  --color-card-border: rgba(37, 45, 54, 0.14);
+  --color-card-nested-bg: var(--haar-100);
+
+  /* Forms */
+  --color-input-bg: var(--haar-50);
+  --color-input-border: rgba(37, 45, 54, 0.18);
+  --color-input-focus: var(--haar-steel-500);
+  --color-input-text: var(--haar-800);
+  --color-input-placeholder: #5b6874;
+
+  /* Modal */
+  --color-modal-overlay: rgba(21, 27, 33, 0.45);
+  --color-modal-bg: var(--haar-50);
+
+  /* Navigation — denser fog in the sidebar */
+  --color-surface-navigation: var(--haar-150);
+  --color-surface-navigation-hover: var(--haar-200);
+  --color-surface-navigation-active: var(--haar-300);
+  --color-surface-navigation-selected: rgba(79, 109, 138, 0.16);
+  --color-surface-navigation-selected-hover: rgba(79, 109, 138, 0.24);
+  --color-text-navigation-primary: var(--haar-800);
+  --color-text-navigation-secondary: var(--haar-700);
+  --color-text-navigation-muted: #57636f;  /* 4.9:1 on --haar-150 (AA) */
+  --color-text-navigation-selected: var(--haar-900);
+  --color-text-navigation-hover: var(--haar-900);
+  --color-text-navigation-section: #57636f;  /* 4.9:1 on --haar-150 (AA) */
+  --color-text-navigation-brand: var(--haar-600);
+  --color-border-navigation: rgba(37, 45, 54, 0.12);
+  --color-divider-navigation: rgba(37, 45, 54, 0.10);
+  --color-divider-navigation-subtle: rgba(37, 45, 54, 0.06);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--haar-150);
+  --color-scrollbar-thumb: var(--haar-300);
+  --color-scrollbar-thumb-hover: var(--haar-400);
+
+  /* Tab indicator (fill mode) */
+  --tab-indicator-color: transparent;
+  --tab-indicator-height: 0px;
+
+  /* Terminal — ink on fog, desaturated ANSI (all >= 3:1, normal set >= 4.5:1) */
+  --color-terminal-bg: #e6ebef;
+  --color-terminal-fg: #1d252d;
+  --color-terminal-cursor: var(--haar-steel-600);
+  --color-terminal-black: #e6ebef;
+  --color-terminal-red: #a63b3b;
+  --color-terminal-green: #3b7448;
+  --color-terminal-yellow: #82611a;
+  --color-terminal-blue: #35618c;
+  --color-terminal-magenta: #7a4f8e;
+  --color-terminal-cyan: #24707a;
+  --color-terminal-white: #1d252d;
+  --color-terminal-bright-black: #5b6874;
+  --color-terminal-bright-red: #bd4a45;
+  --color-terminal-bright-green: #4a8b58;
+  --color-terminal-bright-yellow: #986f1e;
+  --color-terminal-bright-blue: #4373a5;
+  --color-terminal-bright-magenta: #8d60a2;
+  --color-terminal-bright-cyan: #2c8590;
+  --color-terminal-bright-white: #0b0f13;
+  --color-terminal-selection-bg: #4f6d8a40;
+}
+
+/* Abyss Theme — deep ocean: near-black navy, bioluminescent teal accent (dark base) */
+:root.abyss {
+  /* Backgrounds — TWO-TONE: navy chrome, deeper editor */
+  --color-bg-primary: var(--abyss-900);
+  --color-bg-secondary: var(--abyss-850);
+  --color-bg-tertiary: var(--abyss-700);
+  --color-bg-hover: var(--abyss-700);
+  --color-bg-active: var(--abyss-600);
+  --color-bg-chrome: var(--abyss-900);
+  --color-bg-editor: var(--abyss-950);   /* SUNKEN — the trench */
+
+  /* Surfaces */
+  --color-surface-primary: var(--abyss-850);
+  --color-surface-secondary: var(--abyss-800);
+  --color-surface-tertiary: var(--abyss-700);
+  --color-surface-hover: rgba(159, 227, 216, 0.05);
+
+  /* Text — cold water whites */
+  --color-text-primary: var(--abyss-100);
+  --color-text-secondary: var(--abyss-200);
+  --color-text-tertiary: var(--abyss-300);
+  --color-text-muted: #7897ab;  /* 6.2:1 on --abyss-900 (AA) */
+  --color-text-disabled: var(--abyss-500);
+
+  /* Borders — faint, lit by the accent */
+  --color-border-primary: rgba(159, 227, 216, 0.10);
+  --color-border-secondary: rgba(159, 227, 216, 0.06);
+  --color-border-hover: rgba(159, 227, 216, 0.16);
+  --color-border-focus: var(--abyss-glow-500);
+
+  /* Interactive — single bioluminescent teal accent */
+  --color-interactive-primary: var(--abyss-glow-500);
+  --color-interactive-hover: var(--abyss-glow-400);
+  --color-interactive-active: var(--abyss-glow-300);
+  --color-interactive-text: var(--abyss-glow-400);
+  --color-focus-ring: var(--abyss-glow-500);
+  --color-interactive-rgb: 77 184 171;
+
+  /* Interactive on dark */
+  --color-text-interactive-on-dark: var(--abyss-glow-400);
+  --color-text-interactive-on-dark-hover: var(--abyss-glow-300);
+  --color-text-interactive-on-dark-active: var(--abyss-glow-400);
+  --color-text-interactive-on-dark-focus: var(--abyss-glow-400);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--abyss-850);
+  --color-surface-interactive-hover: var(--abyss-700);
+  --color-interactive-surface: rgba(77, 184, 171, 0.14);
+  --color-interactive-surface-hover: rgba(77, 184, 171, 0.24);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(159, 227, 216, 0.06);
+  --color-border-interactive: rgba(159, 227, 216, 0.10);
+  --color-interactive-border: rgba(77, 184, 171, 0.5);
+  --color-interactive-border-hover: rgba(77, 184, 171, 0.7);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: #7897ab;  /* 6.2:1 on --abyss-900 (AA) */
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(77, 184, 171, 0.4);
+
+  /* Status — sea-life tones, dark text on fills */
+  --color-status-success: #6cbf8a;
+  --color-status-success-hover: #57a976;
+  --color-status-warning: #d9b567;
+  --color-status-warning-hover: #c4a052;
+  --color-status-error: #e07a6e;
+  --color-status-error-hover: #cc6559;
+  --color-status-info: var(--abyss-glow-400);
+  --color-status-neutral: var(--abyss-400);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--abyss-100);
+  --color-text-on-secondary: var(--abyss-200);
+  --color-text-on-tertiary: var(--abyss-200);
+  --color-text-on-surface: var(--abyss-200);
+  --color-text-on-interactive: var(--abyss-950);
+  --color-text-on-status-success: var(--abyss-950);
+  --color-text-on-status-warning: var(--abyss-950);
+  --color-text-on-status-error: var(--abyss-950);
+  --color-text-on-status-info: var(--abyss-950);
+  --color-text-on-navigation: var(--abyss-200);
+
+  /* Buttons — glowing teal fill carries ink text (8:1) */
+  --color-button-primary-bg: var(--abyss-glow-500);
+  --color-button-primary-hover: var(--abyss-glow-400);
+  --color-button-primary-text: var(--abyss-950);
+  --color-button-secondary-bg: var(--abyss-700);
+  --color-button-secondary-hover: var(--abyss-600);
+  --color-button-secondary-text: var(--abyss-100);
+  --color-button-ghost-hover: var(--abyss-800);
+  --color-button-ghost-text: var(--abyss-300);
+
+  /* Cards */
+  --color-card-bg: var(--abyss-850);
+  --color-card-border: rgba(159, 227, 216, 0.10);
+  --color-card-nested-bg: var(--abyss-800);
+
+  /* Forms */
+  --color-input-bg: var(--abyss-950);
+  --color-input-border: rgba(159, 227, 216, 0.14);
+  --color-input-focus: var(--abyss-glow-500);
+  --color-input-text: var(--abyss-100);
+  --color-input-placeholder: #7b9aae;  /* 6.7:1 on --abyss-950 (AA) */
+
+  /* Modal */
+  --color-modal-overlay: rgba(2, 6, 12, 0.7);
+  --color-modal-bg: var(--abyss-850);
+
+  /* Navigation */
+  --color-surface-navigation: var(--abyss-900);
+  --color-surface-navigation-hover: var(--abyss-850);
+  --color-surface-navigation-active: var(--abyss-700);
+  --color-surface-navigation-selected: rgba(77, 184, 171, 0.14);
+  --color-surface-navigation-selected-hover: rgba(77, 184, 171, 0.20);
+  --color-text-navigation-primary: var(--abyss-200);
+  --color-text-navigation-secondary: var(--abyss-300);
+  --color-text-navigation-muted: #7897ab;  /* 6.2:1 on --abyss-900 (AA) */
+  --color-text-navigation-selected: var(--abyss-100);
+  --color-text-navigation-hover: var(--abyss-100);
+  --color-text-navigation-section: #7897ab;  /* 6.2:1 on --abyss-900 (AA) */
+  --color-text-navigation-brand: var(--abyss-300);
+  --color-border-navigation: rgba(159, 227, 216, 0.08);
+  --color-divider-navigation: rgba(159, 227, 216, 0.06);
+  --color-divider-navigation-subtle: rgba(159, 227, 216, 0.03);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--abyss-900);
+  --color-scrollbar-thumb: rgba(159, 227, 216, 0.14);
+  --color-scrollbar-thumb-hover: rgba(159, 227, 216, 0.28);
+
+  /* Tab indicator — UNDERLINE mode (glow line) */
+  --tab-indicator-color: var(--abyss-glow-500);
+  --tab-indicator-height: 3px;
+
+  /* Terminal — trench black, sea-life ANSI (all >= 3:1 on bg) */
+  --color-terminal-bg: var(--abyss-950);
+  --color-terminal-fg: var(--abyss-100);
+  --color-terminal-cursor: var(--abyss-glow-400);
+  --color-terminal-black: var(--abyss-950);
+  --color-terminal-red: #d9776b;
+  --color-terminal-green: #6dbf8d;
+  --color-terminal-yellow: #d6b56c;
+  --color-terminal-blue: #6ea3d4;
+  --color-terminal-magenta: #b391c8;
+  --color-terminal-cyan: #5fcabf;
+  --color-terminal-white: var(--abyss-100);
+  --color-terminal-bright-black: var(--abyss-400);
+  --color-terminal-bright-red: #ea9084;
+  --color-terminal-bright-green: #8dd3a6;
+  --color-terminal-bright-yellow: #e5c98a;
+  --color-terminal-bright-blue: #8ebae2;
+  --color-terminal-bright-magenta: #c9abd9;
+  --color-terminal-bright-cyan: #8ce0d6;
+  --color-terminal-bright-white: #f2f9fb;
+  --color-terminal-selection-bg: #4db8ab40;
+}
+
+/* Understory Theme — forest floor: moss greens, bark-brown chrome, lichen accent (dark base) */
+:root.understory {
+  /* Backgrounds — TWO-TONE: bark chrome, moss floor editor */
+  --color-bg-primary: var(--under-900);
+  --color-bg-secondary: var(--under-850);
+  --color-bg-tertiary: var(--under-700);
+  --color-bg-hover: var(--under-700);
+  --color-bg-active: var(--under-600);
+  --color-bg-chrome: var(--under-bark-850);   /* bark */
+  --color-bg-editor: var(--under-950);        /* SUNKEN — moss floor */
+
+  /* Surfaces */
+  --color-surface-primary: var(--under-850);
+  --color-surface-secondary: var(--under-800);
+  --color-surface-tertiary: var(--under-700);
+  --color-surface-hover: rgba(211, 221, 168, 0.05);
+
+  /* Text — pale lichen-cream */
+  --color-text-primary: var(--under-100);
+  --color-text-secondary: var(--under-200);
+  --color-text-tertiary: var(--under-300);
+  --color-text-muted: #85937a;  /* 5.5:1 on --under-900 (AA) */
+  --color-text-disabled: var(--under-500);
+
+  /* Borders — bark lines */
+  --color-border-primary: var(--under-bark-700);
+  --color-border-secondary: var(--under-bark-800);
+  --color-border-hover: var(--under-bark-600);
+  --color-border-focus: var(--under-lichen-500);
+
+  /* Interactive — single lichen accent */
+  --color-interactive-primary: var(--under-lichen-500);
+  --color-interactive-hover: var(--under-lichen-400);
+  --color-interactive-active: var(--under-lichen-300);
+  --color-interactive-text: var(--under-lichen-400);
+  --color-focus-ring: var(--under-lichen-500);
+  --color-interactive-rgb: 166 181 109;
+
+  /* Interactive on dark */
+  --color-text-interactive-on-dark: var(--under-lichen-400);
+  --color-text-interactive-on-dark-hover: var(--under-lichen-300);
+  --color-text-interactive-on-dark-active: var(--under-lichen-400);
+  --color-text-interactive-on-dark-focus: var(--under-lichen-400);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--under-850);
+  --color-surface-interactive-hover: var(--under-700);
+  --color-interactive-surface: rgba(166, 181, 109, 0.14);
+  --color-interactive-surface-hover: rgba(166, 181, 109, 0.24);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(211, 221, 168, 0.06);
+  --color-border-interactive: rgba(211, 221, 168, 0.10);
+  --color-interactive-border: rgba(166, 181, 109, 0.5);
+  --color-interactive-border-hover: rgba(166, 181, 109, 0.7);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: #85937a;  /* 5.5:1 on --under-900 (AA) */
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(166, 181, 109, 0.4);
+
+  /* Status — moss, lichen gold, rust; dark text on fills */
+  --color-status-success: #8bb56e;
+  --color-status-success-hover: #78a25c;
+  --color-status-warning: #d1b35c;
+  --color-status-warning-hover: #bd9f49;
+  --color-status-error: #d0705b;
+  --color-status-error-hover: #bb5c48;
+  --color-status-info: var(--under-lichen-400);
+  --color-status-neutral: var(--under-400);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--under-100);
+  --color-text-on-secondary: var(--under-200);
+  --color-text-on-tertiary: var(--under-200);
+  --color-text-on-surface: var(--under-200);
+  --color-text-on-interactive: var(--under-950);
+  --color-text-on-status-success: var(--under-950);
+  --color-text-on-status-warning: var(--under-950);
+  --color-text-on-status-error: var(--under-950);
+  --color-text-on-status-info: var(--under-950);
+  --color-text-on-navigation: var(--under-200);
+
+  /* Buttons — lichen fill carries moss-black text (9:1) */
+  --color-button-primary-bg: var(--under-lichen-500);
+  --color-button-primary-hover: var(--under-lichen-400);
+  --color-button-primary-text: var(--under-950);
+  --color-button-secondary-bg: var(--under-700);
+  --color-button-secondary-hover: var(--under-600);
+  --color-button-secondary-text: var(--under-100);
+  --color-button-ghost-hover: var(--under-800);
+  --color-button-ghost-text: var(--under-300);
+
+  /* Cards */
+  --color-card-bg: var(--under-850);
+  --color-card-border: var(--under-bark-700);
+  --color-card-nested-bg: var(--under-800);
+
+  /* Forms */
+  --color-input-bg: var(--under-950);
+  --color-input-border: var(--under-bark-600);
+  --color-input-focus: var(--under-lichen-500);
+  --color-input-text: var(--under-100);
+  --color-input-placeholder: #88967d;  /* 6.1:1 on --under-950 (AA) */
+
+  /* Modal */
+  --color-modal-overlay: rgba(6, 8, 5, 0.65);
+  --color-modal-bg: var(--under-850);
+
+  /* Navigation — bark sidebar */
+  --color-surface-navigation: var(--under-bark-850);
+  --color-surface-navigation-hover: var(--under-bark-800);
+  --color-surface-navigation-active: var(--under-bark-700);
+  --color-surface-navigation-selected: rgba(166, 181, 109, 0.14);
+  --color-surface-navigation-selected-hover: rgba(166, 181, 109, 0.20);
+  --color-text-navigation-primary: var(--under-200);
+  --color-text-navigation-secondary: var(--under-300);
+  --color-text-navigation-muted: #85937a;  /* 5.4:1 on --under-bark-850 (AA) */
+  --color-text-navigation-selected: var(--under-100);
+  --color-text-navigation-hover: var(--under-100);
+  --color-text-navigation-section: #85937a;  /* 5.4:1 on --under-bark-850 (AA) */
+  --color-text-navigation-brand: var(--under-300);
+  --color-border-navigation: var(--under-bark-700);
+  --color-divider-navigation: var(--under-bark-800);
+  --color-divider-navigation-subtle: rgba(211, 221, 168, 0.03);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--under-900);
+  --color-scrollbar-thumb: rgba(211, 221, 168, 0.14);
+  --color-scrollbar-thumb-hover: rgba(211, 221, 168, 0.28);
+
+  /* Tab indicator — UNDERLINE mode (lichen line) */
+  --tab-indicator-color: var(--under-lichen-500);
+  --tab-indicator-height: 3px;
+
+  /* Terminal — moss floor, woodland ANSI (all >= 3:1 on bg) */
+  --color-terminal-bg: var(--under-950);
+  --color-terminal-fg: var(--under-100);
+  --color-terminal-cursor: var(--under-lichen-400);
+  --color-terminal-black: var(--under-950);
+  --color-terminal-red: #d0705b;
+  --color-terminal-green: #8bb56e;
+  --color-terminal-yellow: #cdb35c;
+  --color-terminal-blue: #7d9fb3;
+  --color-terminal-magenta: #b48ea6;
+  --color-terminal-cyan: #78b3a2;
+  --color-terminal-white: var(--under-100);
+  --color-terminal-bright-black: var(--under-400);
+  --color-terminal-bright-red: #e08b78;
+  --color-terminal-bright-green: #a6cb8a;
+  --color-terminal-bright-yellow: #dcc57e;
+  --color-terminal-bright-blue: #9ab7c8;
+  --color-terminal-bright-magenta: #c9a9bd;
+  --color-terminal-bright-cyan: #98c9ba;
+  --color-terminal-bright-white: #f3f5ec;
+  --color-terminal-selection-bg: #a6b56d40;
+}
+
 /* Light Rounded — inherits light tokens, overrides shell/chrome behavior */
 :root.light-rounded {
   --color-bg-chrome: var(--gh-light-50);
@@ -1828,3 +2369,27 @@
   --color-text-navigation-muted: #b59888;
   --color-text-navigation-section: #b59888;
 }
+
+/* Haar */
+:root.high-contrast.haar {
+  --color-text-muted: #414b55;              /* 7.7:1 on --haar-100 */
+  --color-text-interactive-muted: #414b55;
+  --color-text-navigation-muted: #414b55;   /* 7.1:1 on --haar-150 */
+  --color-text-navigation-section: #414b55;
+}
+
+/* Abyss */
+:root.high-contrast.abyss {
+  --color-text-muted: #8aa7ba;              /* 7.5:1 on --abyss-900 */
+  --color-text-interactive-muted: #8aa7ba;
+  --color-text-navigation-muted: #8aa7ba;
+  --color-text-navigation-section: #8aa7ba;
+}
+
+/* Understory */
+:root.high-contrast.understory {
+  --color-text-muted: #a8b59b;              /* 8.3:1 on --under-900 */
+  --color-text-interactive-muted: #a8b59b;
+  --color-text-navigation-muted: #a8b59b;   /* 8.1:1 on --under-bark-850 */
+  --color-text-navigation-section: #a8b59b;
+}
diff --git a/frontend/src/styles/tokens/effects.css b/frontend/src/styles/tokens/effects.css
index 5694de9b..c63544af 100644
--- a/frontend/src/styles/tokens/effects.css
+++ b/frontend/src/styles/tokens/effects.css
@@ -207,3 +207,42 @@
   --panel-shell-radius: var(--radius-xl);
   --panel-shell-shadow: var(--shadow-sm);
 }
+
+/* Haar — soft fog radii, whisper shadows */
+:root.haar {
+  --button-radius: var(--radius-lg);
+  --card-radius: var(--radius-xl);
+  --input-radius: var(--radius-lg);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-sm);
+  --app-shell-radius: var(--radius-2xl);
+  --panel-shell-radius: var(--radius-xl);
+  --panel-shell-shadow: var(--shadow-sm);
+}
+
+/* Abyss — deep, rounded shells with pressure-depth shadows */
+:root.abyss {
+  --button-radius: var(--radius-lg);
+  --card-radius: var(--radius-xl);
+  --input-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-sm);
+  --app-shell-radius: var(--radius-xl);
+  --panel-shell-radius: var(--radius-lg);
+  --panel-shell-shadow: var(--shadow-sm);
+}
+
+/* Understory — organic radii, matte surfaces */
+:root.understory {
+  --button-radius: var(--radius-lg);
+  --card-radius: var(--radius-xl);
+  --input-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-xs);
+  --app-shell-radius: var(--radius-xl);
+  --panel-shell-radius: var(--radius-lg);
+  --panel-shell-shadow: var(--shadow-xs);
+}
diff --git a/frontend/src/styles/tokens/spacing.css b/frontend/src/styles/tokens/spacing.css
index 2de487e1..7caf3478 100644
--- a/frontend/src/styles/tokens/spacing.css
+++ b/frontend/src/styles/tokens/spacing.css
@@ -131,3 +131,36 @@
   --app-frame-gap: var(--space-2-5);
   --panel-shell-gap: var(--space-2-5);
 }
+
+/* Haar — airy fog spacing, islanded shells */
+:root.haar {
+  --panel-tab-height: 2.5rem;
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --card-padding: var(--space-3);
+  --app-frame-padding: var(--space-2-5);
+  --app-frame-gap: var(--space-2-5);
+  --panel-shell-gap: var(--space-2-5);
+}
+
+/* Abyss — medium density, islanded shells */
+:root.abyss {
+  --panel-tab-height: 2.25rem;
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --card-padding: var(--space-3);
+  --app-frame-padding: var(--space-2-5);
+  --app-frame-gap: var(--space-2-5);
+  --panel-shell-gap: var(--space-2-5);
+}
+
+/* Understory — medium density, islanded shells */
+:root.understory {
+  --panel-tab-height: 2.25rem;
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --card-padding: var(--space-3);
+  --app-frame-padding: var(--space-2-5);
+  --app-frame-gap: var(--space-2-5);
+  --panel-shell-gap: var(--space-2-5);
+}
diff --git a/frontend/src/types/config.ts b/frontend/src/types/config.ts
index 1b7b33f0..0ebbdf83 100644
--- a/frontend/src/types/config.ts
+++ b/frontend/src/types/config.ts
@@ -81,7 +81,7 @@ export interface AppConfig {
   stravuApiKey?: string;
   stravuServerUrl?: string;
   // Theme preference
-  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta';
+  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta' | 'haar' | 'abyss' | 'understory';
   // Opt-in high contrast mode: raises muted chrome text to AAA and the terminal's
   // minimumContrastRatio so dim CLI output stays legible
   highContrast?: boolean;
diff --git a/frontend/src/utils/themeOptions.ts b/frontend/src/utils/themeOptions.ts
new file mode 100644
index 00000000..fbe9b35c
--- /dev/null
+++ b/frontend/src/utils/themeOptions.ts
@@ -0,0 +1,40 @@
+import type { Theme } from '../contexts/themeContextValue';
+
+export interface ThemeOption {
+  id: Theme;
+  label: string;
+  /** One-line vibe shown under the label in theme pickers. */
+  description: string;
+}
+
+// Picker order: light themes first, then the atmosphere set (Haar, Abyss,
+// Understory), the other dark families, and finally the sharp GitHub-style
+// defaults. Every Theme id must appear here exactly once.
+export const THEME_OPTIONS = [
+  { id: 'light-rounded', label: 'Light (rounded)', description: 'Clean white with rounded, islanded panels' },
+  { id: 'light', label: 'Light (sharp)', description: 'Clean white, flat edge-to-edge chrome' },
+  { id: 'haar', label: 'Haar', description: 'Pre-dawn sea fog — cold blue-white surfaces, ink text' },
+  { id: 'abyss', label: 'Abyss', description: 'Deep ocean — near-black navy, bioluminescent teal accent' },
+  { id: 'understory', label: 'Understory', description: 'Forest floor — moss greens, bark-brown chrome, lichen accent' },
+  { id: 'forge', label: 'Forge', description: 'IntelliJ-style two-tone graphite with a blue accent' },
+  { id: 'night-owl', label: 'Night Owl', description: 'Warm rose and crimson, no blue light' },
+  { id: 'night-owl-oled', label: 'Night Owl (OLED)', description: 'Night Owl on pure-black foundations' },
+  { id: 'dusk', label: 'Dusk', description: 'Achromatic navy-gray with soft radii' },
+  { id: 'dusk-oled', label: 'Dusk (OLED)', description: 'Dusk on pure-black foundations' },
+  { id: 'ember', label: 'Ember', description: 'Synthwave graphite with a copper-pink glow' },
+  { id: 'aurora', label: 'Aurora', description: 'Rosé Pine-inspired romantic dark' },
+  { id: 'terracotta', label: 'Terracotta', description: 'Warm dusty earth tones, no blue light' },
+  { id: 'dark', label: 'Dark (sharp)', description: 'GitHub-style dark, flat edge-to-edge chrome' },
+  { id: 'oled', label: 'OLED Black (sharp)', description: 'True black for OLED displays' },
+] as const satisfies readonly ThemeOption[];
+
+type CoveredTheme = (typeof THEME_OPTIONS)[number]['id'];
+
+// SAFETY: the cast narrows Object.fromEntries' string-keyed result to the ids that are
+// literally present in THEME_OPTIONS; assigning that to Record<Theme, string> is a
+// compile-time check that every Theme id has an entry (a missing id fails typecheck).
+const THEME_LABELS: Record<Theme, string> = Object.fromEntries(
+  THEME_OPTIONS.map((option) => [option.id, option.label]),
+) as Record<CoveredTheme, string>;
+
+export const getThemeLabel = (theme: Theme): string => THEME_LABELS[theme];
diff --git a/main/src/types/config.ts b/main/src/types/config.ts
index dffa889c..e920bd8d 100644
--- a/main/src/types/config.ts
+++ b/main/src/types/config.ts
@@ -67,7 +67,7 @@ export interface AppConfig {
   stravuApiKey?: string;
   stravuServerUrl?: string;
   // Theme preference
-  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta';
+  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta' | 'haar' | 'abyss' | 'understory';
   // Opt-in high contrast mode: raises muted chrome text to AAA and the terminal's
   // minimumContrastRatio so dim CLI output stays legible
   highContrast?: boolean;
@@ -167,7 +167,7 @@ export interface UpdateConfigRequest {
   keepAwakeWhileSessionsActive?: boolean;
   stravuApiKey?: string;
   stravuServerUrl?: string;
-  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta';
+  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta' | 'haar' | 'abyss' | 'understory';
   highContrast?: boolean;
   uiScale?: number;
   notifications?: {
diff --git a/package.json b/package.json
index 051be44e..2b8f653a 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "deadcode": "knip --reporter compact",
     "perf:scan": "node scripts/pane-run-script.js --react-scan",
     "a11y:scan": "playwright test tests/accessibility.spec.ts",
+    "check:theme-contrast": "node scripts/check-theme-contrast.mjs",
     "typecheck": "pnpm run -r typecheck",
     "postinstall": "electron-builder install-app-deps",
     "electron:rebuild": "pnpm exec electron-rebuild -f -w better-sqlite3-multiple-ciphers -m ./main",
diff --git a/screenshots/themes/abyss.png b/screenshots/themes/abyss.png
new file mode 100644
index 00000000..ed8e5da0
Binary files /dev/null and b/screenshots/themes/abyss.png differ
diff --git a/screenshots/themes/appearance-picker.png b/screenshots/themes/appearance-picker.png
new file mode 100644
index 00000000..98add8ad
Binary files /dev/null and b/screenshots/themes/appearance-picker.png differ
diff --git a/screenshots/themes/haar.png b/screenshots/themes/haar.png
new file mode 100644
index 00000000..08ce0279
Binary files /dev/null and b/screenshots/themes/haar.png differ
diff --git a/screenshots/themes/understory.png b/screenshots/themes/understory.png
new file mode 100644
index 00000000..421b34a9
Binary files /dev/null and b/screenshots/themes/understory.png differ
diff --git a/scripts/check-theme-contrast.mjs b/scripts/check-theme-contrast.mjs
new file mode 100644
index 00000000..66720c6f
--- /dev/null
+++ b/scripts/check-theme-contrast.mjs
@@ -0,0 +1,252 @@
+#!/usr/bin/env node
+// Checks WCAG contrast for every theme defined in frontend/src/styles/tokens/colors.css.
+//
+// Resolves `var()` chains the same way the browser cascade would for a given
+// theme class list (base :root → parent theme blocks → own block), then checks
+// the token pairs that matter most: body text on its background, navigation
+// text on the sidebar, button text on button fills, status/focus colors, and
+// the terminal foreground plus 16-color ANSI palette on the terminal
+// background. Alpha colors are composited over the paired background.
+//
+// Every theme is checked twice: as-is, and with the additive `high-contrast`
+// class, where the muted text family must reach AAA (7:1).
+//
+// Usage: node scripts/check-theme-contrast.mjs [theme-id ...]   (pnpm check:theme-contrast)
+//   No arguments checks every theme. VERBOSE=1 prints passing pairs too.
+//   Exit code 1 if any pair fails.
+
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const cssPath = resolve(here, '../frontend/src/styles/tokens/colors.css');
+const css = readFileSync(cssPath, 'utf8');
+
+// Mirrors THEME_CLASSES in frontend/src/contexts/ThemeProvider.tsx.
+const THEME_CLASSES = {
+  'light': ['light'],
+  'light-rounded': ['light', 'light-rounded'],
+  'dark': ['dark'],
+  'oled': ['dark', 'oled'],
+  'dusk': ['dark', 'dusk'],
+  'dusk-oled': ['dark', 'dusk', 'dusk-oled'],
+  'forge': ['dark', 'forge'],
+  'ember': ['dark', 'ember'],
+  'aurora': ['dark', 'aurora'],
+  'night-owl': ['dark', 'night-owl'],
+  'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
+  'terracotta': ['dark', 'terracotta'],
+  'haar': ['light', 'haar'],
+  'abyss': ['dark', 'abyss'],
+  'understory': ['dark', 'understory'],
+};
+
+const AA_TEXT = 4.5;
+const AA_UI = 3;
+const AAA_TEXT = 7;
+
+// [foreground token, background token, minimum ratio]
+const CHECKS = [
+  ['--color-text-primary', '--color-bg-primary', AA_TEXT],
+  ['--color-text-secondary', '--color-bg-primary', AA_TEXT],
+  ['--color-text-tertiary', '--color-bg-primary', AA_TEXT],
+  ['--color-text-muted', '--color-bg-primary', AA_TEXT],
+  ['--color-text-primary', '--color-bg-editor', AA_TEXT],
+  ['--color-text-primary', '--color-surface-primary', AA_TEXT],
+  ['--color-text-on-surface', '--color-surface-primary', AA_TEXT],
+  ['--color-text-secondary', '--color-surface-secondary', AA_TEXT],
+  ['--color-text-interactive-muted', '--color-bg-primary', AA_TEXT],
+  ['--color-interactive-text', '--color-bg-primary', AA_TEXT],
+  ['--color-text-navigation-primary', '--color-surface-navigation', AA_TEXT],
+  ['--color-text-navigation-secondary', '--color-surface-navigation', AA_TEXT],
+  ['--color-text-navigation-muted', '--color-surface-navigation', AA_TEXT],
+  ['--color-text-navigation-section', '--color-surface-navigation', AA_TEXT],
+  ['--color-text-navigation-selected', '--color-surface-navigation', AA_TEXT],
+  ['--color-button-primary-text', '--color-button-primary-bg', AA_TEXT],
+  ['--color-button-primary-text', '--color-button-primary-hover', AA_TEXT],
+  ['--color-button-secondary-text', '--color-button-secondary-bg', AA_TEXT],
+  ['--color-button-secondary-text', '--color-button-secondary-hover', AA_TEXT],
+  ['--color-button-ghost-text', '--color-bg-primary', AA_TEXT],
+  ['--color-input-text', '--color-input-bg', AA_TEXT],
+  ['--color-input-placeholder', '--color-input-bg', AA_TEXT],
+  ['--color-status-success', '--color-bg-primary', AA_UI],
+  ['--color-status-warning', '--color-bg-primary', AA_UI],
+  ['--color-status-error', '--color-bg-primary', AA_UI],
+  ['--color-status-info', '--color-bg-primary', AA_UI],
+  ['--color-focus-ring', '--color-bg-primary', AA_UI],
+  ['--color-terminal-fg', '--color-terminal-bg', AA_TEXT],
+  ['--color-terminal-cursor', '--color-terminal-bg', AA_UI],
+  ...[
+    'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white',
+    'bright-black', 'bright-red', 'bright-green', 'bright-yellow', 'bright-blue',
+    'bright-magenta', 'bright-cyan', 'bright-white',
+  ].map((name) => [`--color-terminal-${name}`, '--color-terminal-bg', AA_UI]),
+];
+
+// Checked again with the additive `high-contrast` class (Settings → Appearance).
+const HIGH_CONTRAST_CHECKS = [
+  ['--color-text-muted', '--color-bg-primary', AAA_TEXT],
+  ['--color-text-interactive-muted', '--color-bg-primary', AAA_TEXT],
+  ['--color-text-navigation-muted', '--color-surface-navigation', AAA_TEXT],
+  ['--color-text-navigation-section', '--color-surface-navigation', AAA_TEXT],
+];
+
+// --- CSS parsing -----------------------------------------------------------
+
+function stripComments(text) {
+  return text.replace(/\/\*[\s\S]*?\*\//g, '');
+}
+
+// Returns an array of { selector, declarations: Map }.
+function parseBlocks(text) {
+  const blocks = [];
+  const re = /([^{}]+)\{([^{}]*)\}/g;
+  let match;
+  while ((match = re.exec(text)) !== null) {
+    const selector = match[1].trim();
+    const declarations = new Map();
+    for (const decl of match[2].split(';')) {
+      const idx = decl.indexOf(':');
+      if (idx === -1) continue;
+      const name = decl.slice(0, idx).trim();
+      const value = decl.slice(idx + 1).trim();
+      if (name.startsWith('--')) declarations.set(name, value);
+    }
+    blocks.push({ selector, declarations });
+  }
+  return blocks;
+}
+
+const blocks = parseBlocks(stripComments(css));
+
+function tokensForClasses(classes, highContrast = false) {
+  const map = new Map();
+  const apply = (block) => { for (const [k, v] of block.declarations) map.set(k, v); };
+  for (const block of blocks) if (block.selector === ':root') apply(block);
+  for (const cls of classes) {
+    for (const block of blocks) if (block.selector === `:root.${cls}`) apply(block);
+  }
+  if (highContrast) {
+    // `.high-contrast` is additive; its blocks are ordered like the theme blocks so
+    // derived variants (oled, dusk-oled, ...) win over their parent.
+    for (const cls of classes) {
+      for (const block of blocks) if (block.selector === `:root.high-contrast.${cls}`) apply(block);
+    }
+  }
+  return map;
+}
+
+// --- Color math -------------------------------------------------------------
+
+function parseColor(raw) {
+  const value = raw.trim();
+  let m = value.match(/^#([0-9a-f]{3,8})$/i);
+  if (m) {
+    let hex = m[1];
+    if (hex.length === 3 || hex.length === 4) hex = hex.split('').map((c) => c + c).join('');
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
+    return { r, g, b, a };
+  }
+  m = value.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.]+%?))?\s*\)$/i);
+  if (m) {
+    let a = 1;
+    if (m[4] !== undefined) a = m[4].endsWith('%') ? parseFloat(m[4]) / 100 : parseFloat(m[4]);
+    return { r: Number(m[1]), g: Number(m[2]), b: Number(m[3]), a };
+  }
+  if (value === 'transparent') return { r: 0, g: 0, b: 0, a: 0 };
+  return null;
+}
+
+function resolveToken(tokens, name, seen = new Set()) {
+  if (seen.has(name)) return null;
+  seen.add(name);
+  const raw = tokens.get(name);
+  if (raw === undefined) return null;
+  const varMatch = raw.match(/^var\((--[\w-]+)\)$/);
+  if (varMatch) return resolveToken(tokens, varMatch[1], seen);
+  // rgba(var(--x-rgb), a)
+  const rgbVar = raw.match(/^rgba?\(\s*var\((--[\w-]+)\)\s*,\s*([\d.]+)\s*\)$/);
+  if (rgbVar) {
+    const triple = tokens.get(rgbVar[1]);
+    if (!triple) return null;
+    const [r, g, b] = triple.trim().split(/[\s,]+/).map(Number);
+    return { r, g, b, a: Number(rgbVar[2]) };
+  }
+  return parseColor(raw);
+}
+
+function composite(fg, bg) {
+  if (fg.a >= 1) return fg;
+  const a = fg.a;
+  return {
+    r: fg.r * a + bg.r * (1 - a),
+    g: fg.g * a + bg.g * (1 - a),
+    b: fg.b * a + bg.b * (1 - a),
+    a: 1,
+  };
+}
+
+function luminance({ r, g, b }) {
+  const chan = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * chan(r) + 0.7152 * chan(g) + 0.0722 * chan(b);
+}
+
+function contrast(fg, bg) {
+  const l1 = luminance(fg);
+  const l2 = luminance(bg);
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+
+// --- Run --------------------------------------------------------------------
+
+function evaluate(tokens, checks) {
+  const bgPrimary = resolveToken(tokens, '--color-bg-primary');
+  return checks.map(([fgName, bgName, min]) => {
+    const bgRaw = resolveToken(tokens, bgName);
+    const fgRaw = resolveToken(tokens, fgName);
+    if (!bgRaw || !fgRaw) return { fgName, bgName, min, ratio: null };
+    const bg = composite(bgRaw, bgPrimary ?? { r: 0, g: 0, b: 0, a: 1 });
+    const fg = composite(fgRaw, bg);
+    return { fgName, bgName, min, ratio: contrast(fg, bg) };
+  });
+}
+
+function report(label, results) {
+  const failed = results.filter((r) => r.ratio === null || r.ratio < r.min);
+  const status = failed.length === 0 ? 'PASS' : 'FAIL';
+  console.log(`${status} ${label} (${results.length - failed.length}/${results.length})`);
+  for (const r of failed) {
+    const ratio = r.ratio === null ? 'unresolved' : `${r.ratio.toFixed(2)}:1`;
+    console.log(`  ✗ ${r.fgName} on ${r.bgName}: ${ratio} (min ${r.min}:1)`);
+  }
+  if (process.env.VERBOSE) {
+    for (const r of results.filter((x) => x.ratio !== null && x.ratio >= x.min)) {
+      console.log(`  ✓ ${r.fgName} on ${r.bgName}: ${r.ratio.toFixed(2)}:1`);
+    }
+  }
+  return failed.length;
+}
+
+const requested = process.argv.slice(2);
+const themeIds = requested.length > 0 ? requested : Object.keys(THEME_CLASSES);
+let failures = 0;
+
+for (const id of themeIds) {
+  const classes = THEME_CLASSES[id];
+  if (!classes) {
+    console.error(`Unknown theme: ${id}`);
+    failures += 1;
+    continue;
+  }
+  failures += report(id, evaluate(tokensForClasses(classes), CHECKS));
+  failures += report(`${id} + high-contrast`, evaluate(tokensForClasses(classes, true), HIGH_CONTRAST_CHECKS));
+}
+
+process.exit(failures > 0 ? 1 : 0);
diff --git a/tests/accessibility.spec.ts b/tests/accessibility.spec.ts
index 0a4f8f22..d18d0684 100644
--- a/tests/accessibility.spec.ts
+++ b/tests/accessibility.spec.ts
@@ -250,7 +250,7 @@ test('Home and About are axe-clean and the modal contains and restores focus', a
   await expect(dialog).toBeHidden();
   await expect(aboutButton).toBeFocused();
 
-  const themeTrigger = page.getByRole('button', { name: /\(sharp\)|\(rounded\)|OLED|Dusk|Forge|Ember|Aurora|Night Owl|Terracotta/ }).last();
+  const themeTrigger = page.getByRole('button', { name: /\(sharp\)|\(rounded\)|OLED|Dusk|Forge|Ember|Aurora|Night Owl|Terracotta|Haar|Abyss|Understory/ }).last();
   await themeTrigger.focus();
   await page.keyboard.press('Enter');
   await expect(page.getByRole('menu')).toBeVisible();
@@ -262,9 +262,10 @@ test('Home and About are axe-clean and the modal contains and restores focus', a
 test('Night Owl recent-pane metadata remains axe-clean', async ({ page }) => {
   await openDesktop(page);
 
-  const themeTrigger = page.getByRole('button', { name: /\(sharp\)|\(rounded\)|OLED|Dusk|Forge|Ember|Aurora|Night Owl|Terracotta/ }).last();
+  const themeTrigger = page.getByRole('button', { name: /\(sharp\)|\(rounded\)|OLED|Dusk|Forge|Ember|Aurora|Night Owl|Terracotta|Haar|Abyss|Understory/ }).last();
   await themeTrigger.click();
-  await page.getByRole('menuitemradio', { name: 'Night Owl', exact: true }).click();
+  // Item names include the picker description, so match the label prefix (and not the OLED variant).
+  await page.getByRole('menuitemradio', { name: /^Night Owl(?! \(OLED\))/ }).click();
   await expect(themeTrigger).toHaveText(/Night Owl/);
   await expectNoAxeViolations(page);
 });
diff --git a/tests/dropdown-keyboard-nav.spec.ts b/tests/dropdown-keyboard-nav.spec.ts
index 393f9009..f2d18d31 100644
--- a/tests/dropdown-keyboard-nav.spec.ts
+++ b/tests/dropdown-keyboard-nav.spec.ts
@@ -60,24 +60,26 @@ test.describe('Dropdown keyboard navigation', () => {
     const focusedItem = page.locator('[role="menuitemradio"]:focus');
     await expect(focusedItem).toHaveText(/Light \(rounded\)/);
 
-    // ArrowDown moves to the next item (Forge), ArrowUp moves back.
+    // ArrowDown moves to the next item (Light (sharp)), ArrowUp moves back.
+    // Item order comes from THEME_OPTIONS in frontend/src/utils/themeOptions.ts.
     await page.keyboard.press('ArrowDown');
-    await expect(focusedItem).toHaveText(/Forge/);
+    await expect(focusedItem).toHaveText(/Light \(sharp\)/);
     await page.keyboard.press('ArrowUp');
     await expect(focusedItem).toHaveText(/Light \(rounded\)/);
 
-    // Navigate to Forge and select it with Enter.
+    // Navigate to Haar (third item) and select it with Enter.
     await page.keyboard.press('ArrowDown');
-    await expect(focusedItem).toHaveText(/Forge/);
+    await page.keyboard.press('ArrowDown');
+    await expect(focusedItem).toHaveText(/Haar/);
     await page.keyboard.press('Enter');
 
     // Menu closes and the theme is applied.
     await expect(page.getByRole('menu')).toHaveCount(0);
     await expect(
-      page.getByRole('button', { name: /Forge/ }),
+      page.getByRole('button', { name: /Haar/ }),
     ).toBeVisible();
     await expect.poll(async () =>
-      page.evaluate(() => document.documentElement.classList.contains('forge')),
+      page.evaluate(() => document.documentElement.classList.contains('haar')),
     ).toBe(true);
 
     await expect(page.getByText('Something went wrong')).toHaveCount(0);
@@ -96,17 +98,15 @@ test.describe('Dropdown keyboard navigation', () => {
 
     await expect(page.getByRole('menu')).toBeVisible({ timeout: 5000 });
 
-    await page.keyboard.press('ArrowDown'); // move highlight to Forge
+    await page.keyboard.press('ArrowDown'); // move highlight to Light (sharp)
     await page.keyboard.press('Escape');
 
     await expect(page.getByRole('menu')).toHaveCount(0);
-    // Highlighting Forge then pressing Escape must NOT commit the theme:
+    // Highlighting another item then pressing Escape must NOT commit the theme:
     // the document still carries the original light-rounded theme classes.
     const themeClasses = await page.evaluate(() => ({
-      forge: document.documentElement.classList.contains('forge'),
       lightRounded: document.documentElement.classList.contains('light-rounded'),
     }));
-    expect(themeClasses.forge).toBe(false);
     expect(themeClasses.lightRounded).toBe(true);
   });
 });
diff --git a/tests/settings.spec.ts b/tests/settings.spec.ts
index f7e32fe0..4e9d5a2b 100644
--- a/tests/settings.spec.ts
+++ b/tests/settings.spec.ts
@@ -344,7 +344,8 @@ test.describe('Settings', () => {
     await bootSettings(page, { initialConfig: { theme: 'light-rounded' } });
     await page.getByRole('button', { name: 'Appearance', exact: true }).click();
     await page.getByRole('combobox', { name: 'Theme' }).click();
-    await page.getByRole('option', { name: 'Night Owl', exact: true }).click();
+    // Options carry their picker description in the accessible name; match the label prefix (not the OLED variant).
+    await page.getByRole('option', { name: /^Night Owl(?! \(OLED\))/ }).click();
     await expect(page.locator('html')).toHaveClass(/night-owl/);
     await expect(page.getByRole('dialog', { name: 'Pane Settings' })).toBeVisible();
     await page.screenshot({ path: 'test-results/settings-dark.png' });
diff --git a/tests/theme-screenshots.spec.ts b/tests/theme-screenshots.spec.ts
new file mode 100644
index 00000000..bf5e4bc5
--- /dev/null
+++ b/tests/theme-screenshots.spec.ts
@@ -0,0 +1,221 @@
+import { mkdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { expect, test, type Page } from '@playwright/test';
+import { installElectronApiMock } from './electronApiMock';
+
+// Opt-in evidence generator, not a regression test. It writes theme screenshots
+// into screenshots/themes/ for PR review:
+//
+//   THEME_SCREENSHOTS=1 pnpm test -- tests/theme-screenshots.spec.ts
+//   THEME_SCREENSHOTS=1 THEMES=haar,abyss pnpm test -- tests/theme-screenshots.spec.ts
+//
+// Each theme gets one capture of the main app view (sidebar + a pane showing the
+// diff panel with the terminal dock open) and the run ends with one capture of the
+// Appearance settings theme picker.
+
+const enabled = process.env.THEME_SCREENSHOTS === '1';
+const DEFAULT_THEMES = ['haar', 'abyss', 'understory'];
+const envThemes = (process.env.THEMES ?? '').split(',').map((s) => s.trim()).filter(Boolean);
+const requestedThemes = envThemes.length > 0 ? envThemes : DEFAULT_THEMES;
+const outputDir = resolve(__dirname, '../screenshots/themes');
+
+const project = {
+  id: 501,
+  name: 'pane',
+  path: '/tmp/theme-fixture',
+  active: true,
+  created_at: new Date(0).toISOString(),
+  updated_at: new Date(0).toISOString(),
+};
+
+const session = {
+  id: 'theme-session',
+  name: 'themes-nature',
+  worktreePath: '/tmp/theme-fixture/themes-nature',
+  prompt: 'Add three atmosphere themes',
+  status: 'stopped',
+  createdAt: new Date(0).toISOString(),
+  lastActivity: new Date(0).toISOString(),
+  output: [],
+  jsonMessages: [],
+  isRunning: false,
+  permissionMode: 'ignore',
+  projectId: project.id,
+  displayOrder: 0,
+  isFavorite: false,
+  toolType: 'none',
+  archived: false,
+  gitStatus: {
+    state: 'ahead',
+    ahead: 1,
+    behind: 0,
+    hasUncommittedChanges: true,
+    hasUntrackedFiles: false,
+    filesChanged: 2,
+    additions: 21,
+    deletions: 4,
+    totalCommits: 1,
+  },
+};
+
+const panels = [
+  {
+    id: 'theme-terminal',
+    sessionId: session.id,
+    type: 'terminal',
+    title: 'Terminal',
+    state: { isActive: false, hasBeenViewed: true, customState: { isInitialized: true } },
+    metadata: { createdAt: new Date(0).toISOString(), lastActiveAt: new Date(0).toISOString(), position: 0, permanent: true },
+  },
+  {
+    id: 'theme-explorer',
+    sessionId: session.id,
+    type: 'explorer',
+    title: 'Explorer',
+    state: { isActive: false, hasBeenViewed: true },
+    metadata: { createdAt: new Date(0).toISOString(), lastActiveAt: new Date(0).toISOString(), position: 1, permanent: true },
+  },
+  {
+    id: 'theme-diff',
+    sessionId: session.id,
+    type: 'diff',
+    title: 'Diff',
+    state: { isActive: true, hasBeenViewed: true },
+    metadata: { createdAt: new Date(0).toISOString(), lastActiveAt: new Date(0).toISOString(), position: 2, permanent: true },
+  },
+];
+
+const executions = [{
+  id: 1,
+  session_id: session.id,
+  execution_sequence: 1,
+  after_commit_hash: '9c1f2ab7e4d3',
+  commit_message: 'Add Haar, Abyss and Understory themes',
+  timestamp: '2026-08-17T09:00:00.000Z',
+  stats_additions: 21,
+  stats_deletions: 4,
+  stats_files_changed: 2,
+  author: 'Pane',
+  comparison_branch: 'origin/main',
+  history_source: 'branch',
+}];
+
+const combinedDiff = {
+  diff: [
+    'diff --git a/frontend/src/utils/themeOptions.ts b/frontend/src/utils/themeOptions.ts',
+    'index 1111111..2222222 100644',
+    '--- a/frontend/src/utils/themeOptions.ts',
+    '+++ b/frontend/src/utils/themeOptions.ts',
+    '@@ -12,7 +12,10 @@ export const THEME_OPTIONS: readonly ThemeOption[] = [',
+    "   { id: 'light-rounded', label: 'Light (rounded)', description: 'Clean white with rounded panels' },",
+    "   { id: 'light', label: 'Light (sharp)', description: 'Clean white, flat chrome' },",
+    "-  { id: 'forge', label: 'Forge', description: 'IntelliJ-style two-tone graphite' },",
+    "+  { id: 'haar', label: 'Haar', description: 'Pre-dawn sea fog — cold blue-white surfaces, ink text' },",
+    "+  { id: 'forge', label: 'Forge', description: 'IntelliJ-style two-tone graphite with a blue accent' },",
+    "+  { id: 'abyss', label: 'Abyss', description: 'Deep ocean — near-black navy, bioluminescent teal' },",
+    "+  { id: 'understory', label: 'Understory', description: 'Forest floor — moss, bark, lichen' },",
+    "   { id: 'night-owl', label: 'Night Owl', description: 'Warm rose and crimson, no blue light' },",
+    'diff --git a/frontend/src/contexts/themeContextValue.ts b/frontend/src/contexts/themeContextValue.ts',
+    'index 3333333..4444444 100644',
+    '--- a/frontend/src/contexts/themeContextValue.ts',
+    '+++ b/frontend/src/contexts/themeContextValue.ts',
+    '@@ -1,6 +1,11 @@',
+    " import { createContext } from 'react';",
+    ' ',
+    "-export type Theme = 'light' | 'light-rounded' | 'dark' | 'oled';",
+    "+export type Theme = 'light' | 'light-rounded' | 'dark' | 'oled' | 'haar' | 'abyss' | 'understory';",
+    '+',
+    "+const LIGHT_THEMES: ReadonlySet<Theme> = new Set<Theme>(['light', 'light-rounded', 'haar']);",
+    '+',
+    '+export const isLightTheme = (theme: Theme): boolean => LIGHT_THEMES.has(theme);',
+  ].join('\n'),
+  stats: { additions: 21, deletions: 4, filesChanged: 2 },
+  changedFiles: ['frontend/src/utils/themeOptions.ts', 'frontend/src/contexts/themeContextValue.ts'],
+};
+
+// Sample shell session exercising the normal + bright ANSI palette.
+const TERMINAL_SAMPLE = [
+  '\x1b[1;32m➜\x1b[0m \x1b[1;34mthemes-nature\x1b[0m \x1b[36mgit:(\x1b[31mthemes-nature\x1b[36m)\x1b[0m pnpm check:theme-contrast',
+  '',
+  '\x1b[32mPASS\x1b[0m haar (44/44)',
+  '\x1b[32mPASS\x1b[0m abyss (44/44)',
+  '\x1b[32mPASS\x1b[0m understory (44/44)',
+  '',
+  '\x1b[1;32m➜\x1b[0m \x1b[1;34mthemes-nature\x1b[0m git status --short',
+  '\x1b[32mM\x1b[0m  frontend/src/styles/tokens/colors.css',
+  '\x1b[32mM\x1b[0m  frontend/src/index.css',
+  '\x1b[31m??\x1b[0m screenshots/themes/',
+  '',
+  '\x1b[1;32m➜\x1b[0m \x1b[1;34mthemes-nature\x1b[0m pnpm lint',
+  '\x1b[33mwarn\x1b[0m  advisory anti-slop findings: \x1b[1mnone\x1b[0m',
+  '\x1b[35minfo\x1b[0m  knip: \x1b[90m0 unused files, 0 unused exports\x1b[0m',
+  '\x1b[91m ●\x1b[92m ●\x1b[93m ●\x1b[94m ●\x1b[95m ●\x1b[96m ●\x1b[97m ●\x1b[0m   \x1b[31m ●\x1b[32m ●\x1b[33m ●\x1b[34m ●\x1b[35m ●\x1b[36m ●\x1b[37m ●\x1b[0m',
+  '',
+  '\x1b[1;32m➜\x1b[0m \x1b[1;34mthemes-nature\x1b[0m ',
+].join('\r\n');
+
+async function openThemedSession(page: Page, theme: string): Promise<void> {
+  await page.addInitScript((value) => {
+    window.localStorage.setItem('theme', value);
+    window.localStorage.setItem('pane-detail-panel-visible', 'false');
+    window.localStorage.setItem('pane-bottom-terminal-height', '330');
+  }, theme);
+  await installElectronApiMock(page, {
+    initialProjects: [project],
+    initialSessions: [session],
+    initialPanels: panels,
+    initialExecutions: executions,
+    initialCombinedDiff: combinedDiff,
+    initialTerminalStates: { 'theme-terminal': { scrollbackBuffer: TERMINAL_SAMPLE } },
+    activeProjectId: project.id,
+    initialConfig: { theme },
+  });
+  await page.goto('/', { waitUntil: 'domcontentloaded', timeout: 30_000 });
+  await expect(page.locator('[data-testid="sidebar"]').first()).toBeVisible({ timeout: 15_000 });
+  await page.getByRole('button', { name: /^Expand repository pane$/ }).click();
+  await page.getByRole('button', { name: session.name, exact: true }).click();
+  await expect(page.getByRole('tab', { name: 'Review', exact: true })).toBeVisible();
+  await expect(page.locator('html')).toHaveClass(new RegExp(`\\b${theme}\\b`));
+}
+
+test.describe('theme screenshots', () => {
+  test.skip(!enabled, 'Set THEME_SCREENSHOTS=1 to regenerate screenshots/themes/*.png');
+  test.use({ viewport: { width: 1440, height: 900 } });
+
+  for (const theme of requestedThemes) {
+    test(`captures ${theme}`, async ({ page }) => {
+      mkdirSync(outputDir, { recursive: true });
+      await openThemedSession(page, theme);
+      const dock = page.locator('.pane-terminal-dock');
+      await expect(dock).toBeVisible();
+      const expandTerminal = page.getByRole('button', { name: 'Expand terminal', exact: true });
+      if (await expandTerminal.isVisible().catch(() => false)) await expandTerminal.click();
+      await expect(dock.locator('.xterm-screen')).toBeVisible({ timeout: 15_000 });
+      await expect(page.getByRole('status', { name: 'Loading terminal' })).toHaveCount(0, { timeout: 15_000 });
+      // Expand the first changed file so the diff view shows real hunks.
+      await page.getByRole('button', { name: /^Expand diff for / }).first().click();
+      await page.mouse.move(1_400, 880);
+      await page.waitForTimeout(500);
+      await page.screenshot({ path: resolve(outputDir, `${theme}.png`) });
+    });
+  }
+
+  test('captures the Appearance theme picker', async ({ page }) => {
+    mkdirSync(outputDir, { recursive: true });
+    await openThemedSession(page, requestedThemes[0]);
+    const collapse = page.getByRole('button', { name: 'Collapse sidebar' });
+    if (await collapse.isVisible().catch(() => false)) await collapse.click();
+    await page.getByRole('button', { name: 'Settings' }).first().click();
+    const dialog = page.getByRole('dialog', { name: 'Pane Settings' });
+    await expect(dialog).toBeVisible();
+    await page.getByRole('button', { name: 'Appearance', exact: true }).click();
+    const trigger = page.getByRole('combobox', { name: 'Theme' });
+    await expect(trigger).toBeVisible();
+    await trigger.click();
+    await expect(page.getByRole('option', { name: /Haar/ })).toBeVisible();
+    await expect(page.getByRole('option', { name: /Abyss/ })).toBeVisible();
+    await expect(page.getByRole('option', { name: /Understory/ })).toBeVisible();
+    await page.waitForTimeout(300);
+    await page.screenshot({ path: resolve(outputDir, 'appearance-picker.png') });
+  });
+});