diff --git a/docs/design/dark-mode/README.md b/docs/design/dark-mode/README.md
new file mode 100644
index 000000000..f8481e3f9
--- /dev/null
+++ b/docs/design/dark-mode/README.md
@@ -0,0 +1,30 @@
+# Dark Mode Feature Planning
+
+This workspace contains planning documents for adding dark mode support to Agenta.
+
+## Documents
+
+| File | Description |
+|------|-------------|
+| [context.md](./context.md) | Background, motivation, goals, and non-goals |
+| [research.md](./research.md) | Current state analysis, codebase findings, technical discoveries |
+| [plan.md](./plan.md) | High-level execution plan with phases |
+| [designer-requirements.md](./designer-requirements.md) | What the designer needs to provide |
+| [status.md](./status.md) | Living progress tracker (update as work progresses) |
+
+## Quick Summary
+
+**Current State:** Agenta has partial dark mode infrastructure (theme context, localStorage persistence, system detection) but it's disabled. There are 100+ hardcoded colors throughout the codebase that would need refactoring.
+
+**Estimated Effort:** 3-5 weeks for full implementation
+
+**Designer Required:** Yes - must provide dark mode color palette and component tokens before implementation can proceed.
+
+## Key Files Reference
+
+| Purpose | File Path |
+|---------|-----------|
+| Theme Provider | `web/oss/src/components/Layout/ThemeContextProvider.tsx` |
+| Ant Design Tokens | `web/oss/src/styles/tokens/antd-themeConfig.json` |
+| Tailwind Tokens | `web/oss/src/styles/tokens/antd-tailwind.json` |
+| Tailwind Config | `web/oss/tailwind.config.ts` |
diff --git a/docs/design/dark-mode/context.md b/docs/design/dark-mode/context.md
new file mode 100644
index 000000000..a0eb333d4
--- /dev/null
+++ b/docs/design/dark-mode/context.md
@@ -0,0 +1,51 @@
+# Dark Mode - Context
+
+## Background
+
+Dark mode has become a standard feature in modern web applications. Users expect the ability to switch between light and dark themes based on their preferences or system settings, especially for tools they use for extended periods.
+
+Agenta is a developer-focused platform where users spend significant time reviewing traces, evaluations, and building prompts. Dark mode support would improve:
+- User comfort during extended use
+- Accessibility for users with light sensitivity
+- Professional appearance and feature parity with competing tools
+
+## Motivation
+
+1. **User Request:** Dark mode is a commonly requested feature
+2. **Existing Infrastructure:** We already have partial dark mode infrastructure that's currently disabled
+3. **Developer Tool Standard:** Most developer tools (VS Code, GitHub, etc.) offer dark mode
+
+## Goals
+
+1. **Full Dark Mode Support:** Users can switch between light/dark/system themes
+2. **Consistent Experience:** All components, pages, and UI elements respect the theme
+3. **System Preference Detection:** Auto-detect and respect OS-level dark mode preference
+4. **Persistence:** Remember user's theme choice across sessions
+5. **Smooth Transitions:** Theme switches should not cause jarring visual changes
+
+## Non-Goals
+
+1. **Custom Themes:** We're not building a theme builder - just light/dark modes
+2. **Per-Component Theming:** Users won't be able to theme individual sections differently
+3. **High Contrast Mode:** Accessibility-specific high contrast is out of scope (could be future enhancement)
+4. **Immediate Full Coverage:** Some third-party components may have limited dark mode support initially
+
+## Risks & Considerations
+
+| Risk | Mitigation |
+|------|------------|
+| Large number of hardcoded colors | Phase the work, start with most visible components |
+| Designer availability | Get all tokens upfront before starting implementation |
+| Third-party library compatibility | Audit libraries, some may need CSS overrides |
+| Testing coverage | Manual visual QA across all pages |
+| Breaking existing styles | Careful review, feature flag for gradual rollout |
+
+## Success Criteria
+
+- [ ] User can toggle between Light/Dark/System themes
+- [ ] Theme persists across browser sessions
+- [ ] All Ant Design components render correctly in both modes
+- [ ] Custom components and pages look correct in both modes
+- [ ] Charts and visualizations are readable in dark mode
+- [ ] No jarring white flashes during page navigation
+- [ ] Documentation updated for future theming contributions
diff --git a/docs/design/dark-mode/designer-requirements.md b/docs/design/dark-mode/designer-requirements.md
new file mode 100644
index 000000000..8def48421
--- /dev/null
+++ b/docs/design/dark-mode/designer-requirements.md
@@ -0,0 +1,204 @@
+# Dark Mode - Designer Requirements
+
+This document outlines what the designer needs to provide before dark mode implementation can begin.
+
+## Overview
+
+We use Ant Design's token system for theming. The designer needs to provide dark mode values for all semantic tokens. These values will be used to generate:
+1. Ant Design theme configuration
+2. Tailwind CSS color utilities
+3. CSS-in-JS theme tokens
+
+---
+
+## Required Deliverables
+
+### 1. Core Color Palette
+
+Provide hex values for each:
+
+#### Background Colors
+| Token | Description | Light Value | Dark Value |
+|-------|-------------|-------------|------------|
+| `colorBgBase` | Base background | `#ffffff` | ??? |
+| `colorBgContainer` | Container/card background | `#ffffff` | ??? |
+| `colorBgElevated` | Elevated surfaces (dropdowns, modals) | `#ffffff` | ??? |
+| `colorBgLayout` | Page layout background | `#ffffff` | ??? |
+| `colorBgSpotlight` | Spotlight/highlight areas | `#f5f7fa` | ??? |
+| `colorBgMask` | Overlay/mask background | `rgba(0,0,0,0.45)` | ??? |
+
+#### Text Colors
+| Token | Description | Light Value | Dark Value |
+|-------|-------------|-------------|------------|
+| `colorText` | Primary text | `#1c2c3d` | ??? |
+| `colorTextSecondary` | Secondary text | `#586673` | ??? |
+| `colorTextTertiary` | Tertiary/muted text | `#758391` | ??? |
+| `colorTextQuaternary` | Placeholder text | `#a3b3c2` | ??? |
+| `colorTextDisabled` | Disabled text | `#bdc7d1` | ??? |
+
+#### Border Colors
+| Token | Description | Light Value | Dark Value |
+|-------|-------------|-------------|------------|
+| `colorBorder` | Default border | `#bdc7d1` | ??? |
+| `colorBorderSecondary` | Secondary/subtle border | `#eaeff5` | ??? |
+
+#### Fill/Hover Colors
+| Token | Description | Light Value | Dark Value |
+|-------|-------------|-------------|------------|
+| `colorFill` | Default fill | `rgba(0,0,0,0.15)` | ??? |
+| `colorFillSecondary` | Secondary fill | `rgba(0,0,0,0.06)` | ??? |
+| `colorFillTertiary` | Tertiary fill | `rgba(0,0,0,0.04)` | ??? |
+| `colorFillQuaternary` | Quaternary fill | `rgba(0,0,0,0.02)` | ??? |
+
+---
+
+### 2. Brand & Status Colors
+
+These may need adjustment for visibility on dark backgrounds:
+
+#### Primary Brand
+| Token | Light Value | Dark Value |
+|-------|-------------|------------|
+| `colorPrimary` | `#1c2c3d` | ??? |
+| `colorPrimaryBg` | `#e6f4ff` | ??? |
+| `colorPrimaryBgHover` | `#bae0ff` | ??? |
+| `colorPrimaryBorder` | `#91caff` | ??? |
+| `colorPrimaryBorderHover` | `#69b1ff` | ??? |
+| `colorPrimaryHover` | `#4096ff` | ??? |
+| `colorPrimaryActive` | `#0958d9` | ??? |
+| `colorPrimaryText` | `#1c2c3d` | ??? |
+| `colorPrimaryTextHover` | `#4096ff` | ??? |
+| `colorPrimaryTextActive` | `#0958d9` | ??? |
+
+#### Success (Green)
+| Token | Light Value | Dark Value |
+|-------|-------------|------------|
+| `colorSuccess` | `#52c41a` | ??? |
+| `colorSuccessBg` | `#f6ffed` | ??? |
+| `colorSuccessBorder` | `#b7eb8f` | ??? |
+
+#### Warning (Yellow/Orange)
+| Token | Light Value | Dark Value |
+|-------|-------------|------------|
+| `colorWarning` | `#faad14` | ??? |
+| `colorWarningBg` | `#fffbe6` | ??? |
+| `colorWarningBorder` | `#ffe58f` | ??? |
+
+#### Error (Red)
+| Token | Light Value | Dark Value |
+|-------|-------------|------------|
+| `colorError` | `#d61010` | ??? |
+| `colorErrorBg` | `#fff2f0` | ??? |
+| `colorErrorBorder` | `#ffccc7` | ??? |
+
+#### Info (Blue)
+| Token | Light Value | Dark Value |
+|-------|-------------|------------|
+| `colorInfo` | `#1677ff` | ??? |
+| `colorInfoBg` | `#e6f4ff` | ??? |
+| `colorInfoBorder` | `#91caff` | ??? |
+
+---
+
+### 3. Zinc Gray Scale
+
+We use a custom zinc palette for grays. Provide dark mode versions:
+
+| Token | Light Value | Dark Value | Usage |
+|-------|-------------|------------|-------|
+| `zinc.1` | `#f5f7fa` | ??? | Lightest background |
+| `zinc.2` | `#eaeff5` | ??? | Light borders |
+| `zinc.3` | `#dfe6ed` | ??? | Borders |
+| `zinc.4` | `#bdc7d1` | ??? | Disabled |
+| `zinc.5` | `#a3b3c2` | ??? | Placeholder |
+| `zinc.6` | `#8898a8` | ??? | Secondary text |
+| `zinc.7` | `#758391` | ??? | Tertiary text |
+| `zinc.8` | `#586673` | ??? | Secondary text |
+| `zinc.9` | `#1c2c3d` | ??? | Primary text |
+| `zinc.10` | `#051729` | ??? | Darkest text |
+
+---
+
+### 4. Component-Specific Tokens (Optional but Helpful)
+
+If you want specific component styling in dark mode:
+
+#### Table
+| Token | Light Value | Dark Value |
+|-------|-------------|------------|
+| `Table.headerBg` | `#fafafa` | ??? |
+| `Table.rowHoverBg` | `#fafafa` | ??? |
+| `Table.borderColor` | `#f0f0f0` | ??? |
+
+#### Card
+| Token | Light Value | Dark Value |
+|-------|-------------|------------|
+| `Card.colorBgContainer` | `#ffffff` | ??? |
+
+#### Input
+| Token | Light Value | Dark Value |
+|-------|-------------|------------|
+| `Input.colorBgContainer` | `#ffffff` | ??? |
+| `Input.activeBorderColor` | `#1c2c3d` | ??? |
+
+---
+
+## Delivery Format
+
+Please provide as JSON file (`antd-themeConfig-dark.json`):
+
+```json
+{
+  "token": {
+    "colorBgBase": "#0d0d0d",
+    "colorBgContainer": "#141414",
+    "colorBgElevated": "#1f1f1f",
+    "colorBgLayout": "#0d0d0d",
+    "colorText": "rgba(255, 255, 255, 0.85)",
+    "colorTextSecondary": "rgba(255, 255, 255, 0.65)",
+    "colorTextTertiary": "rgba(255, 255, 255, 0.45)",
+    "colorBorder": "#424242",
+    "colorBorderSecondary": "#303030",
+    "colorPrimary": "#4096ff",
+    "zinc": {
+      "1": "#1f1f1f",
+      "2": "#303030",
+      "9": "rgba(255, 255, 255, 0.85)",
+      "10": "#ffffff"
+    }
+  },
+  "components": {
+    "Table": {
+      "headerBg": "#1f1f1f"
+    }
+  }
+}
+```
+
+---
+
+## Design Considerations
+
+### Contrast Requirements
+- Text on backgrounds should meet WCAG AA contrast ratio (4.5:1 for normal text)
+- Interactive elements should be clearly distinguishable
+- Status colors should remain meaningful in dark mode
+
+### Common Patterns to Consider
+1. **Inverted hierarchy:** In light mode, elevation often means lighter. In dark mode, elevation often means lighter too (slightly)
+2. **Reduced saturation:** Bright colors on dark backgrounds can be harsh - consider slightly muted versions
+3. **Border visibility:** Borders may need to be slightly lighter in dark mode to be visible
+
+### Reference Examples
+- [GitHub Dark Mode](https://github.com/settings/appearance)
+- [Ant Design Dark Theme](https://ant.design/docs/react/customize-theme#use-dark-algorithm)
+- [VS Code Dark Theme](https://code.visualstudio.com/docs/getstarted/themes)
+
+---
+
+## Questions for Designer
+
+1. Should the primary brand color (`#1c2c3d`) change in dark mode? (It's very dark)
+2. Do we want a "pure black" dark mode or a "soft dark" (dark gray) mode?
+3. Should code editor backgrounds be darker than surrounding UI?
+4. Any specific areas of the app that need special attention?
diff --git a/docs/design/dark-mode/plan.md b/docs/design/dark-mode/plan.md
new file mode 100644
index 000000000..471be45fb
--- /dev/null
+++ b/docs/design/dark-mode/plan.md
@@ -0,0 +1,210 @@
+# Dark Mode - Execution Plan
+
+## Overview
+
+This plan is divided into phases to allow incremental delivery and minimize risk.
+
+**Total Estimated Effort:** 3-5 weeks
+
+---
+
+## Phase 0: Designer Deliverables (Blocker)
+
+**Owner:** Designer  
+**Duration:** 1-2 weeks  
+**Status:** Not Started
+
+Before any implementation can begin, the designer must provide:
+
+1. [ ] Dark mode color palette (see [designer-requirements.md](./designer-requirements.md))
+2. [ ] Component token overrides for dark mode
+3. [ ] Review of any custom UI patterns that need special handling
+
+**Deliverable:** `antd-themeConfig-dark.json` file with all dark mode tokens
+
+---
+
+## Phase 1: Infrastructure Setup
+
+**Owner:** Frontend Developer  
+**Duration:** 2-3 days  
+**Dependencies:** Phase 0 complete
+
+### Tasks
+
+1. [ ] **Enable dark mode in ThemeContextProvider**
+   - Remove hardcoded `val = ThemeMode.Light`
+   - Use `getAppTheme(themeMode)` instead
+   - Update ConfigProvider to use `theme.darkAlgorithm` conditionally
+
+2. [ ] **Create dark mode token loading**
+   - Load appropriate token file based on theme
+   - Or: Create combined token structure with light/dark variants
+
+3. [ ] **Update Tailwind configuration**
+   - Add dark mode variant support
+   - Generate dark mode Tailwind tokens
+   - Update `generate:tailwind-tokens` script
+
+4. [ ] **Add theme toggle UI**
+   - Add toggle in settings or header
+   - Support Light / Dark / System options
+   - Ensure persistence works
+
+### Deliverable
+- Theme toggle works
+- Ant Design components switch between light/dark
+- Custom components may look broken (expected)
+
+---
+
+## Phase 2: Core Layout & Navigation
+
+**Owner:** Frontend Developer  
+**Duration:** 3-4 days  
+**Dependencies:** Phase 1 complete
+
+### Tasks
+
+1. [ ] **Fix Layout components**
+   - `Layout.tsx` - Main container backgrounds
+   - `Sidebar.tsx` - Navigation styling
+   - `Header.tsx` - Top bar styling
+   - `Breadcrumb` - Navigation breadcrumbs
+
+2. [ ] **Fix global styles**
+   - `globals.css` - Base element styles
+   - Scrollbar styling for dark mode
+   - Selection highlight colors
+
+3. [ ] **Fix CSS-in-JS in layout**
+   - `web/oss/src/components/Layout/assets/styles.ts`
+   - Replace hardcoded colors with theme tokens
+
+### Deliverable
+- Navigation and layout look correct in dark mode
+- Users can navigate the app without visual issues
+
+---
+
+## Phase 3: Feature Areas (Parallel Work Possible)
+
+**Owner:** Frontend Developer(s)  
+**Duration:** 1-2 weeks  
+**Dependencies:** Phase 2 complete
+
+Work on these areas can be parallelized across multiple developers:
+
+### 3a. Playground
+- [ ] Prompt input areas
+- [ ] Parameter panels
+- [ ] Output displays
+- [ ] Monaco editor theme switching
+
+### 3b. Evaluations
+- [ ] Evaluation run list/table
+- [ ] Result displays
+- [ ] Score visualizations
+- [ ] Comparison views
+
+### 3c. Observability (Traces)
+- [ ] Trace list table
+- [ ] Span detail panels
+- [ ] Attribute displays
+- [ ] Timeline views
+
+### 3d. Settings & Configuration
+- [ ] Settings pages
+- [ ] API key displays
+- [ ] Environment configuration
+
+### 3e. Charts & Visualizations
+- [ ] Tremor chart components
+- [ ] Custom data visualizations
+- [ ] Status indicators
+
+---
+
+## Phase 4: Polish & Edge Cases
+
+**Owner:** Frontend Developer  
+**Duration:** 3-4 days  
+**Dependencies:** Phase 3 complete
+
+### Tasks
+
+1. [ ] **Fix remaining hardcoded colors**
+   - Audit for any remaining hex values
+   - Update modal dialogs
+   - Fix tooltip styling
+   - Empty states and error pages
+
+2. [ ] **Third-party component styling**
+   - Monaco editor dark theme
+   - ReactFlow dark styling
+   - Markdown code block themes
+
+3. [ ] **Transition smoothing**
+   - Add CSS transitions for theme changes
+   - Prevent flash of wrong theme on load
+   - Handle SSR/hydration correctly
+
+4. [ ] **Visual QA**
+   - Test all pages in both themes
+   - Check charts and data visualizations
+   - Verify accessibility contrast ratios
+
+---
+
+## Phase 5: Documentation & Cleanup
+
+**Owner:** Frontend Developer  
+**Duration:** 1-2 days  
+**Dependencies:** Phase 4 complete
+
+### Tasks
+
+1. [ ] **Update AGENTS.md**
+   - Add theming guidelines
+   - Document how to use theme tokens
+   - Add lint rules or conventions for colors
+
+2. [ ] **Create theming documentation**
+   - How to add new themed components
+   - Token reference guide
+   - Dark mode testing checklist
+
+3. [ ] **Code cleanup**
+   - Remove any temporary workarounds
+   - Clean up unused styles
+   - Add TypeScript types for theme tokens
+
+---
+
+## Milestones
+
+| Milestone | Target | Criteria |
+|-----------|--------|----------|
+| M1: Infrastructure Ready | Phase 1 done | Theme toggle works, Ant Design switches |
+| M2: Layout Complete | Phase 2 done | Navigation usable in dark mode |
+| M3: Features Complete | Phase 3 done | All major features themed |
+| M4: Release Candidate | Phase 4 done | All visual issues resolved |
+| M5: Release | Phase 5 done | Documentation complete, merged to main |
+
+---
+
+## Risk Mitigation
+
+1. **Feature flag:** Consider adding a feature flag to enable dark mode only for testing initially
+2. **Gradual rollout:** Can release with "beta" label to gather feedback
+3. **Fallback:** Users can always switch back to light mode if issues found
+4. **Regression testing:** Visual regression tests for critical components
+
+---
+
+## Resource Requirements
+
+- **Designer:** 1-2 weeks upfront (Phase 0)
+- **Frontend Developer:** 3-4 weeks implementation
+- **QA:** Visual testing throughout Phase 3-4
+- **Optional:** Second frontend developer to parallelize Phase 3
diff --git a/docs/design/dark-mode/research.md b/docs/design/dark-mode/research.md
new file mode 100644
index 000000000..f0cb7fdd9
--- /dev/null
+++ b/docs/design/dark-mode/research.md
@@ -0,0 +1,238 @@
+# Dark Mode - Research & Findings
+
+## Current Theming Infrastructure
+
+### Theme Context Provider
+**Location:** `web/oss/src/components/Layout/ThemeContextProvider.tsx`
+
+The infrastructure for dark mode **already exists** but is disabled:
+
+```typescript
+// ThemeMode enum supports all modes
+export enum ThemeMode {
+    Light = "light",
+    Dark = "dark",
+    System = "system"
+}
+
+// System detection is implemented
+const getDeviceTheme = () => {
+    if (typeof window !== "undefined" && window.matchMedia) {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? ThemeMode.Dark
+            : ThemeMode.Light
+    }
+    return ThemeMode.Light
+}
+
+// BUT: Line 67 hardcodes light mode, ignoring user preference
+const val = ThemeMode.Light  // <-- This disables dark mode
+```
+
+**Why it's disabled:** The variable `val` is hardcoded to `ThemeMode.Light` instead of using the stored preference. This is likely because dark mode tokens weren't fully implemented.
+
+### Theme Context Bridge (react-jss)
+**Location:** `web/oss/src/ThemeContextBridge.tsx`
+
+Bridges Ant Design tokens to react-jss, providing `isDark` flag:
+```typescript
+<ThemeProvider theme={{...token, isDark: appTheme === "dark"}}>
+```
+
+This means CSS-in-JS can access `theme.isDark` for conditional styling.
+
+---
+
+## Token System
+
+### Ant Design Tokens
+**Location:** `web/oss/src/styles/tokens/antd-themeConfig.json`
+
+A ~1400 line JSON file containing:
+- Color palette (blue, cyan, red, green, etc. with 10 shades)
+- Semantic colors (colorPrimary, colorError, colorText, etc.)
+- Component-specific tokens (Button, Input, Table, etc.)
+- Custom `zinc` palette for grays
+
+**Current primary colors:**
+```json
+{
+  "colorPrimary": "#1c2c3d",
+  "colorText": "#1c2c3d",
+  "colorTextSecondary": "#586673",
+  "colorTextTertiary": "#758391",
+  "colorBgContainer": "#ffffff",
+  "colorBgLayout": "#ffffff",
+  "colorBorder": "#bdc7d1",
+  "colorBorderSecondary": "#eaeff5"
+}
+```
+
+### Tailwind Token Integration
+**Location:** `web/oss/src/styles/tokens/antd-tailwind.json`
+
+Maps Ant Design tokens to Tailwind-compatible format. Used in `tailwind.config.ts`:
+```typescript
+import antdTailwind from "./src/styles/tokens/antd-tailwind.json"
+// ...
+colors: {
+    ...antdTailwind,
+}
+```
+
+### Token Generation
+**Command:** `pnpm generate:tailwind-tokens` (defined in package.json)
+
+This script generates the Tailwind token file from Ant Design config. Will need updating for dark mode.
+
+---
+
+## Color Usage Patterns Analysis
+
+### Problem: Hardcoded Colors
+
+Found **100+ occurrences** of hardcoded hex colors in TSX files:
+
+```typescript
+// Examples of problematic patterns
+<div className="bg-[#FAFAFB]">
+<div className="text-[#344054]">
+<div className="border-[#E4E7EC]">
+<Tag className="!bg-[#EEF2FF] !border-[#E0EAFF]">
+className="border-[rgba(5,23,41,0.06)]"
+```
+
+**Files with most hardcoded colors:**
+- Playground components
+- Evaluation result displays
+- Table cell renderers
+- Status indicators and tags
+
+### CSS-in-JS Hardcoded Colors
+
+**Location:** `web/oss/src/components/Layout/assets/styles.ts` (and ~30 other files)
+
+```typescript
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    layout: ({themeMode}: StyleProps) => ({
+        background: themeMode === "dark" ? "#141414" : "#ffffff",  // Hardcoded
+    }),
+    breadcrumbContainer: {
+        borderBottom: "1px solid #eaeff5",  // Hardcoded
+    },
+}))
+```
+
+### Good Patterns (Already Theme-Aware)
+
+Some components properly use theme tokens:
+
+```typescript
+// Using react-jss theme tokens - GOOD
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    title: {
+        fontSize: theme.fontSizeLG,
+        color: theme.colorText,  // Token reference
+    },
+}))
+
+// Using Tailwind semantic classes - GOOD
+className="text-colorText"
+className="bg-colorBgContainer"
+className="border-colorBorder"
+
+// Using CSS variables - GOOD
+className="border-[var(--ant-color-border)]"
+```
+
+---
+
+## Components Using Theme
+
+Files that import `useAppTheme`:
+- `Layout.tsx` - Main layout
+- `Sidebar.tsx` - Navigation sidebar
+- `Logo.tsx` - Logo component
+- `ChatInputs.tsx` - Chat interface
+- `CompareOutputDiff.tsx` - Diff viewer
+- Several EE components
+
+These components are already theme-aware and will work once dark mode is enabled.
+
+---
+
+## Third-Party Library Considerations
+
+### Tremor (Charts)
+**Good news:** Tailwind config already has `dark-tremor` colors defined:
+```typescript
+colors: {
+    tremor: { /* light mode */ },
+    "dark-tremor": { /* dark mode - already configured */ },
+}
+```
+
+### Monaco Editor
+Used in playground for code editing. Has built-in dark theme support (`vs-dark`).
+
+### ReactFlow
+Used for workflow visualization. Supports theming via CSS variables.
+
+### Markdown Renderers
+May need custom styling for code blocks in dark mode.
+
+---
+
+## Audit Summary
+
+| Category | Count | Effort |
+|----------|-------|--------|
+| Files with hardcoded hex in className | ~50 | High |
+| Files with hardcoded CSS-in-JS colors | ~30 | Medium |
+| CSS files with hardcoded colors | ~5 | Low |
+| Already theme-aware components | ~15 | None |
+| Third-party libraries needing dark support | ~4 | Medium |
+
+---
+
+## Quick Win: Enable Basic Dark Mode
+
+To immediately test dark mode with Ant Design components:
+
+1. In `ThemeContextProvider.tsx`, change line 67:
+```typescript
+// From:
+const val = ThemeMode.Light
+
+// To:
+const val = getAppTheme(themeMode)
+```
+
+2. Update ConfigProvider to use dark algorithm:
+```typescript
+algorithm: val === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm,
+```
+
+This will make all Ant Design components dark-mode aware immediately, revealing which custom components need work.
+
+---
+
+## Files Requiring Updates
+
+### High Priority (Most Visible)
+1. `ThemeContextProvider.tsx` - Enable dark mode
+2. `antd-themeConfig.json` - Add dark mode token values
+3. `globals.css` - Dark mode base styles
+4. Layout components - Header, Sidebar, Main content areas
+
+### Medium Priority (Feature Areas)
+1. Playground components
+2. Evaluation displays
+3. Trace/Observability views
+4. Settings pages
+
+### Low Priority (Less Visible)
+1. Modal dialogs
+2. Tooltips
+3. Empty states
+4. Error pages
diff --git a/docs/design/dark-mode/status.md b/docs/design/dark-mode/status.md
new file mode 100644
index 000000000..483424162
--- /dev/null
+++ b/docs/design/dark-mode/status.md
@@ -0,0 +1,78 @@
+# Dark Mode - Status
+
+> Last Updated: 2026-01-15
+
+## Current Phase: Planning & Research
+
+### Overall Progress
+
+| Phase | Status | Notes |
+|-------|--------|-------|
+| Phase 0: Designer Deliverables | **Not Started** | Blocker - need dark mode tokens |
+| Phase 1: Infrastructure Setup | Not Started | Waiting on Phase 0 |
+| Phase 2: Core Layout | Not Started | - |
+| Phase 3: Feature Areas | Not Started | - |
+| Phase 4: Polish | Not Started | - |
+| Phase 5: Documentation | Not Started | - |
+
+### Blockers
+
+1. **Designer input required** - Cannot proceed without dark mode token values
+   - See [designer-requirements.md](./designer-requirements.md) for what's needed
+
+---
+
+## Research Complete
+
+- [x] Analyzed current theming infrastructure
+- [x] Identified existing dark mode code (disabled)
+- [x] Audited hardcoded colors (~100+ occurrences)
+- [x] Documented token system and Tailwind integration
+- [x] Created designer requirements document
+- [x] Created implementation plan
+
+---
+
+## Key Findings Summary
+
+1. **Dark mode infrastructure exists** - Just disabled at line 67 in ThemeContextProvider.tsx
+2. **~100+ hardcoded colors** - Will need gradual refactoring
+3. **Tremor charts already have dark tokens** - Less work for charts
+4. **react-jss bridge provides `isDark` flag** - Some components already theme-aware
+
+---
+
+## Next Steps
+
+1. [ ] Share designer requirements with designer
+2. [ ] Schedule meeting to discuss color palette
+3. [ ] Get timeline estimate from designer
+4. [ ] Once tokens received, begin Phase 1
+
+---
+
+## Decisions Made
+
+| Date | Decision | Rationale |
+|------|----------|-----------|
+| 2026-01-15 | Phased approach instead of big bang | Reduces risk, allows incremental delivery |
+| 2026-01-15 | Designer tokens required first | Can't implement without color palette |
+
+---
+
+## Open Questions
+
+1. Should primary brand color change in dark mode? (Currently `#1c2c3d` which is very dark)
+2. Pure black or soft dark background?
+3. Feature flag for initial rollout?
+
+---
+
+## Activity Log
+
+### 2026-01-15
+- Created planning workspace
+- Completed codebase research
+- Documented current state and requirements
+- Identified ~100+ hardcoded colors needing refactoring
+- Created designer requirements document