diff --git a/webui/DARK_MODE.md b/webui/DARK_MODE.md
new file mode 100644
index 0000000..82bd65b
--- /dev/null
+++ b/webui/DARK_MODE.md
@@ -0,0 +1,300 @@
+# Dark Mode Implementation Plan
+
+## Overview
+
+This document outlines the plan to implement dark mode for Sketch's web UI using Tailwind CSS's built-in dark mode capabilities.
+
+## Current State Analysis
+
+Sketch's web UI currently uses:
+
+- Tailwind CSS with basic configuration
+- Lit web components extending `SketchTailwindElement`
+- Components avoid Shadow DOM (`createRenderRoot() { return this; }`)
+- Standard Tailwind classes like `bg-white`, `text-gray-600`, `border-gray-200`
+- Global CSS approach, making dark mode implementation straightforward
+
+## Implementation Strategy: Class-Based Dark Mode
+
+### Phase 1: Foundation
+
+#### 1. Update Tailwind Configuration
+
+```javascript
+// tailwind.config.js
+export default {
+  content: ["./src/**/*.{js,ts,jsx,tsx,html}"],
+  darkMode: "class", // Enable class-based dark mode
+  plugins: ["@tailwindcss/container-queries"],
+  theme: {
+    extend: {
+      // Custom colors for better dark mode support
+      colors: {
+        // Define semantic color tokens
+        surface: {
+          DEFAULT: "#ffffff",
+          dark: "#1f2937",
+        },
+        "surface-secondary": {
+          DEFAULT: "#f9fafb",
+          dark: "#374151",
+        },
+      },
+      animation: {
+        "fade-in": "fadeIn 0.3s ease-in-out",
+      },
+      keyframes: {
+        fadeIn: {
+          "0%": {
+            opacity: "0",
+            transform: "translateX(-50%) translateY(10px)",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translateX(-50%) translateY(0)",
+          },
+        },
+      },
+    },
+  },
+};
+```
+
+#### 2. Create Theme Management Service
+
+```typescript
+// src/web-components/theme-service.ts
+export class ThemeService {
+  private static instance: ThemeService;
+
+  static getInstance(): ThemeService {
+    if (!this.instance) {
+      this.instance = new ThemeService();
+    }
+    return this.instance;
+  }
+
+  toggleTheme(): void {
+    const isDark = document.documentElement.classList.contains("dark");
+    this.setTheme(isDark ? "light" : "dark");
+  }
+
+  setTheme(theme: "light" | "dark"): void {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    localStorage.setItem("theme", theme);
+
+    // Dispatch event for components that need to react
+    document.dispatchEvent(
+      new CustomEvent("theme-changed", {
+        detail: { theme },
+      }),
+    );
+  }
+
+  getTheme(): "light" | "dark" {
+    return document.documentElement.classList.contains("dark")
+      ? "dark"
+      : "light";
+  }
+
+  initializeTheme(): void {
+    const saved = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    ).matches;
+    const theme = saved || (prefersDark ? "dark" : "light");
+    this.setTheme(theme as "light" | "dark");
+
+    // Listen for system theme changes
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (e) => {
+        if (!localStorage.getItem("theme")) {
+          this.setTheme(e.matches ? "dark" : "light");
+        }
+      });
+  }
+}
+```
+
+#### 3. Theme Toggle Component
+
+```typescript
+// src/web-components/theme-toggle.ts
+import { html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { SketchTailwindElement } from "./sketch-tailwind-element.js";
+import { ThemeService } from "./theme-service.js";
+
+@customElement("theme-toggle")
+export class ThemeToggle extends SketchTailwindElement {
+  @state() private isDark = false;
+
+  private themeService = ThemeService.getInstance();
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.isDark = document.documentElement.classList.contains("dark");
+
+    // Listen for theme changes from other sources
+    document.addEventListener("theme-changed", this.handleThemeChange);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("theme-changed", this.handleThemeChange);
+  }
+
+  private handleThemeChange = (e: CustomEvent) => {
+    this.isDark = e.detail.theme === "dark";
+  };
+
+  private toggleTheme() {
+    this.themeService.toggleTheme();
+  }
+
+  render() {
+    return html`
+      <button
+        @click=${this.toggleTheme}
+        class="p-2 rounded-md border border-gray-300 dark:border-gray-600 
+               bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200
+               hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors
+               focus:outline-none focus:ring-2 focus:ring-blue-500"
+        title="Toggle theme"
+        aria-label="Toggle between light and dark mode"
+      >
+        ${this.isDark ? "☀️" : "🌙"}
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "theme-toggle": ThemeToggle;
+  }
+}
+```
+
+#### 4. Initialize Theme in App Shell
+
+Add theme initialization to the main app shell component:
+
+```typescript
+// In sketch-app-shell.ts or similar
+import { ThemeService } from "./theme-service.js";
+
+connectedCallback() {
+  super.connectedCallback();
+  ThemeService.getInstance().initializeTheme();
+}
+```
+
+### Phase 2: Component Updates
+
+#### Systematic Component Audit
+
+1. **Identify all components using color classes**
+
+   - Search for `bg-`, `text-`, `border-`, `ring-`, `divide-` classes
+   - Document current color usage patterns
+
+2. **Add dark mode variants systematically**
+
+   - Start with core components (app shell, chat input, etc.)
+   - Update classes following the pattern:
+
+     ```typescript
+     // Before:
+     class="bg-white text-gray-900 border-gray-200"
+
+     // After:
+     class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 border-gray-200 dark:border-gray-700"
+     ```
+
+3. **Priority order for component updates:**
+   1. `sketch-app-shell` - Main container
+   2. `sketch-chat-input` - Primary interaction component
+   3. `sketch-container-status` - Status indicators
+   4. `sketch-call-status` - Call indicators
+   5. Demo components and other secondary components
+
+#### Common Dark Mode Color Mappings
+
+```scss
+// Light -> Dark mappings
+bg-white -> bg-gray-900
+bg-gray-50 -> bg-gray-800
+bg-gray-100 -> bg-gray-800
+bg-gray-200 -> bg-gray-700
+
+text-gray-900 -> text-gray-100
+text-gray-800 -> text-gray-200
+text-gray-700 -> text-gray-300
+text-gray-600 -> text-gray-400
+text-gray-500 -> text-gray-500 (neutral)
+
+border-gray-200 -> border-gray-700
+border-gray-300 -> border-gray-600
+
+ring-gray-300 -> ring-gray-600
+```
+
+### Phase 3: Polish and Testing
+
+#### 1. Smooth Transitions
+
+- Add `transition-colors` to interactive elements
+- Consider adding a global transition class for theme changes
+
+#### 2. Accessibility
+
+- Ensure sufficient contrast ratios in both modes
+- Test with screen readers
+- Verify focus indicators work in both themes
+- Add proper ARIA labels to theme toggle
+
+#### 3. Testing Checklist
+
+- [ ] Theme persists across page reloads
+- [ ] System preference detection works
+- [ ] All components render correctly in both modes
+- [ ] Interactive states (hover, focus, active) work in both themes
+- [ ] No flash of unstyled content (FOUC)
+- [ ] Works across different screen sizes
+- [ ] Performance impact is minimal
+
+## File Structure
+
+```
+src/web-components/
+├── theme-service.ts          # Theme management service
+├── theme-toggle.ts           # Theme toggle component
+├── sketch-tailwind-element.ts # Base class (existing)
+└── [other components].ts     # Updated with dark mode variants
+```
+
+## Benefits of This Approach
+
+- **Incremental**: Can be implemented component by component
+- **Standard**: Uses Tailwind's built-in dark mode features
+- **Performant**: Class-based approach is efficient
+- **Maintainable**: Clear separation of concerns with theme service
+- **Accessible**: Respects system preferences by default
+- **Consistent**: Follows Sketch's existing component patterns
+
+## Implementation Timeline
+
+1. **Week 1**: Phase 1 - Foundation (config, service, toggle)
+2. **Week 2**: Phase 2 - Core component updates
+3. **Week 3**: Phase 2 - Secondary component updates
+4. **Week 4**: Phase 3 - Polish, testing, and accessibility
+
+## Notes
+
+- Components extend `SketchTailwindElement` (not `LitElement`)
+- No Shadow DOM usage allows for global Tailwind classes
+- Theme service uses singleton pattern for consistency
+- Event system allows components to react to theme changes
+- LocalStorage preserves user preference across sessions
diff --git a/webui/src/global.css b/webui/src/global.css
index f1d8c73..57c0010 100644
--- a/webui/src/global.css
+++ b/webui/src/global.css
@@ -1 +1,28 @@
 @import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Override dark mode classes to use .dark selector instead of prefers-color-scheme */
+.dark .dark\:bg-gray-900 {
+  background-color: var(--color-gray-900);
+}
+.dark .dark\:bg-gray-800 {
+  background-color: var(--color-gray-800);
+}
+.dark .dark\:text-gray-100 {
+  color: var(--color-gray-100);
+}
+.dark .dark\:text-gray-200 {
+  color: var(--color-gray-200);
+}
+.dark .dark\:text-gray-300 {
+  color: var(--color-gray-300);
+}
+.dark .dark\:border-gray-600 {
+  border-color: var(--color-gray-600);
+}
+.dark .dark\:border-gray-700 {
+  border-color: var(--color-gray-700);
+}
+.dark .dark\:hover\:bg-gray-700:hover {
+  background-color: var(--color-gray-700);
+}
diff --git a/webui/src/web-components/demo/demo-framework/demo-runner.ts b/webui/src/web-components/demo/demo-framework/demo-runner.ts
index 85b8b5f..0e08af5 100644
--- a/webui/src/web-components/demo/demo-framework/demo-runner.ts
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -100,6 +100,7 @@
       "sketch-todo-panel",
       "sketch-tool-calls",
       "sketch-view-mode-select",
+      "sketch-theme-toggle",
     ];
 
     // Filter to only components that actually have demo files
diff --git a/webui/src/web-components/demo/sketch-theme-toggle.demo.ts b/webui/src/web-components/demo/sketch-theme-toggle.demo.ts
new file mode 100644
index 0000000..5cf304a
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-theme-toggle.demo.ts
@@ -0,0 +1,118 @@
+/**
+ * Demo module for theme-toggle component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils } from "./demo-fixtures/index";
+import { ThemeService } from "../theme-service.js";
+
+const demo: DemoModule = {
+  title: "Theme Toggle Demo",
+  description:
+    "Three-way theme toggle: light mode, dark mode, and system preference",
+  imports: ["../sketch-theme-toggle"],
+  styles: ["/dist/tailwind.css"],
+
+  setup: async (container: HTMLElement) => {
+    // Initialize the theme service
+    const themeService = ThemeService.getInstance();
+    themeService.initializeTheme();
+    // Create demo sections
+    const basicSection = demoUtils.createDemoSection(
+      "Three-Way Theme Toggle",
+      "Click the toggle button to cycle through: light → dark → system → light",
+    );
+
+    const toggleContainer = document.createElement("div");
+    toggleContainer.className =
+      "flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700";
+    toggleContainer.innerHTML = `
+      <sketch-theme-toggle></sketch-theme-toggle>
+      <div class="text-sm text-gray-600 dark:text-gray-400">
+        <div class="font-medium mb-1">Theme modes:</div>
+        <div class="space-y-1">
+          <div>☀️ Light mode - Always light theme</div>
+          <div>🌙 Dark mode - Always dark theme</div>
+          <div>💻 System theme - Follows OS preference</div>
+        </div>
+      </div>
+    `;
+    basicSection.appendChild(toggleContainer);
+
+    // Visual test elements section
+    const visualSection = demoUtils.createDemoSection(
+      "Visual Test Elements",
+      "Elements that demonstrate the theme switching behavior",
+    );
+
+    const visualContainer = document.createElement("div");
+    visualContainer.className = "space-y-4";
+    visualContainer.innerHTML = `
+      <div class="bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-600">
+        <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Test Card</h4>
+        <p class="text-gray-600 dark:text-gray-300">
+          This card should switch between light and dark styling when you toggle the theme.
+        </p>
+      </div>
+      
+      <div class="flex gap-3">
+        <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded transition-colors">
+          Primary Button
+        </button>
+        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 rounded transition-colors">
+          Secondary Button
+        </button>
+      </div>
+      
+      <div class="grid grid-cols-3 gap-4">
+        <div class="bg-white dark:bg-gray-800 p-3 rounded border border-gray-200 dark:border-gray-600">
+          <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Light Background</div>
+          <div class="text-xs text-gray-500 dark:text-gray-400">Should be dark in dark mode</div>
+        </div>
+        <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded border border-gray-200 dark:border-gray-600">
+          <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Gray Background</div>
+          <div class="text-xs text-gray-500 dark:text-gray-400">Should be darker in dark mode</div>
+        </div>
+        <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded border border-gray-200 dark:border-gray-600">
+          <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Darker Background</div>
+          <div class="text-xs text-gray-500 dark:text-gray-400">Should be lighter in dark mode</div>
+        </div>
+      </div>
+    `;
+    visualSection.appendChild(visualContainer);
+
+    // Features section
+    const featuresSection = demoUtils.createDemoSection(
+      "Features",
+      "Key capabilities of the theme toggle component",
+    );
+
+    const featuresContainer = document.createElement("div");
+    featuresContainer.className =
+      "bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg border border-blue-200 dark:border-blue-800";
+    featuresContainer.innerHTML = `
+      <ul class="space-y-2 text-sm text-blue-800 dark:text-blue-200">
+        <li>• Three-way toggle: light → dark → system → light</li>
+        <li>• Icons: ☀️ (light), 🌙 (dark), 💻 (system)</li>
+        <li>• System mode follows OS dark/light preference</li>
+        <li>• Theme preference persists across page reloads</li>
+        <li>• Emits theme-changed events for component coordination</li>
+        <li>• Smooth transitions between themes</li>
+        <li>• Uses localStorage for preference storage</li>
+      </ul>
+    `;
+    featuresSection.appendChild(featuresContainer);
+
+    // Add all sections to container
+    container.appendChild(basicSection);
+    container.appendChild(visualSection);
+    container.appendChild(featuresSection);
+  },
+
+  cleanup: async () => {
+    // Clean up any event listeners or resources if needed
+    // The theme toggle component handles its own cleanup
+  },
+};
+
+export default demo;
diff --git a/webui/src/web-components/sketch-theme-toggle.ts b/webui/src/web-components/sketch-theme-toggle.ts
new file mode 100644
index 0000000..7e428fa
--- /dev/null
+++ b/webui/src/web-components/sketch-theme-toggle.ts
@@ -0,0 +1,100 @@
+import { html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { SketchTailwindElement } from "./sketch-tailwind-element.js";
+import { ThemeService, ThemeMode } from "./theme-service.js";
+
+@customElement("sketch-theme-toggle")
+export class SketchThemeToggle extends SketchTailwindElement {
+  @state() private currentTheme: ThemeMode = "system";
+  @state() private effectiveTheme: "light" | "dark" = "light";
+
+  private themeService = ThemeService.getInstance();
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateThemeState();
+
+    // Listen for theme changes from other sources
+    document.addEventListener("theme-changed", this.handleThemeChange);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("theme-changed", this.handleThemeChange);
+  }
+
+  private handleThemeChange = (e: CustomEvent) => {
+    this.currentTheme = e.detail.theme;
+    this.effectiveTheme = e.detail.effectiveTheme;
+  };
+
+  private updateThemeState() {
+    this.currentTheme = this.themeService.getTheme();
+    this.effectiveTheme = this.themeService.getEffectiveTheme();
+  }
+
+  private toggleTheme() {
+    this.themeService.toggleTheme();
+  }
+
+  private getThemeIcon(): string {
+    switch (this.currentTheme) {
+      case "light":
+        return "\u2600\ufe0f"; // Sun
+      case "dark":
+        return "\ud83c\udf19"; // Moon
+      case "system":
+        return "\ud83d\udcbb"; // Computer/Laptop
+      default:
+        return "\ud83d\udcbb";
+    }
+  }
+
+  private getThemeLabel(): string {
+    switch (this.currentTheme) {
+      case "light":
+        return "Light mode";
+      case "dark":
+        return "Dark mode";
+      case "system":
+        return `System theme (${this.effectiveTheme})`;
+      default:
+        return "System theme";
+    }
+  }
+
+  private getNextThemeLabel(): string {
+    switch (this.currentTheme) {
+      case "light":
+        return "Switch to dark mode";
+      case "dark":
+        return "Switch to system theme";
+      case "system":
+        return "Switch to light mode";
+      default:
+        return "Switch theme";
+    }
+  }
+
+  render() {
+    return html`
+      <button
+        @click=${this.toggleTheme}
+        class="p-2 rounded-md border border-gray-300 dark:border-gray-600 
+               bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200
+               hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors
+               focus:outline-none focus:ring-2 focus:ring-blue-500"
+        title="${this.getThemeLabel()} - ${this.getNextThemeLabel()}"
+        aria-label="${this.getNextThemeLabel()}"
+      >
+        ${this.getThemeIcon()}
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-theme-toggle": SketchThemeToggle;
+  }
+}
diff --git a/webui/src/web-components/theme-service.ts b/webui/src/web-components/theme-service.ts
new file mode 100644
index 0000000..f002572
--- /dev/null
+++ b/webui/src/web-components/theme-service.ts
@@ -0,0 +1,126 @@
+export type ThemeMode = "light" | "dark" | "system";
+
+export class ThemeService {
+  private static instance: ThemeService;
+  private systemPrefersDark = false;
+  private systemMediaQuery: MediaQueryList;
+
+  private constructor() {
+    this.systemMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    this.systemPrefersDark = this.systemMediaQuery.matches;
+
+    // Listen for system theme changes
+    this.systemMediaQuery.addEventListener("change", (e) => {
+      this.systemPrefersDark = e.matches;
+      // If current theme is 'system', update the applied theme
+      if (this.getTheme() === "system") {
+        this.applyTheme();
+      }
+    });
+  }
+
+  static getInstance(): ThemeService {
+    if (!this.instance) {
+      this.instance = new ThemeService();
+    }
+    return this.instance;
+  }
+
+  /**
+   * Cycle through theme modes: light -> dark -> system -> light
+   */
+  toggleTheme(): void {
+    const currentTheme = this.getTheme();
+    let nextTheme: ThemeMode;
+
+    switch (currentTheme) {
+      case "light":
+        nextTheme = "dark";
+        break;
+      case "dark":
+        nextTheme = "system";
+        break;
+      case "system":
+        nextTheme = "light";
+        break;
+      default:
+        nextTheme = "light";
+    }
+
+    this.setTheme(nextTheme);
+  }
+
+  /**
+   * Set the theme mode
+   */
+  setTheme(theme: ThemeMode): void {
+    // Store the theme preference
+    if (theme === "system") {
+      localStorage.removeItem("theme");
+    } else {
+      localStorage.setItem("theme", theme);
+    }
+
+    // Apply the theme
+    this.applyTheme();
+
+    // Dispatch event for components that need to react
+    document.dispatchEvent(
+      new CustomEvent("theme-changed", {
+        detail: {
+          theme,
+          effectiveTheme: this.getEffectiveTheme(),
+          systemPrefersDark: this.systemPrefersDark,
+        },
+      }),
+    );
+  }
+
+  /**
+   * Get the current theme preference (light, dark, or system)
+   */
+  getTheme(): ThemeMode {
+    const saved = localStorage.getItem("theme");
+    if (saved === "light" || saved === "dark") {
+      return saved;
+    }
+    return "system";
+  }
+
+  /**
+   * Get the effective theme (what is actually applied: light or dark)
+   */
+  getEffectiveTheme(): "light" | "dark" {
+    const theme = this.getTheme();
+    if (theme === "system") {
+      return this.systemPrefersDark ? "dark" : "light";
+    }
+    return theme;
+  }
+
+  /**
+   * Check if dark mode is currently active
+   */
+  isDarkMode(): boolean {
+    return this.getEffectiveTheme() === "dark";
+  }
+
+  /**
+   * Apply the current theme to the DOM
+   */
+  private applyTheme(): void {
+    const effectiveTheme = this.getEffectiveTheme();
+    document.documentElement.classList.toggle(
+      "dark",
+      effectiveTheme === "dark",
+    );
+  }
+
+  /**
+   * Initialize the theme system
+   */
+  initializeTheme(): void {
+    // Apply the initial theme
+    this.applyTheme();
+  }
+}
diff --git a/webui/tailwind.config.js b/webui/tailwind.config.js
index f51be72..6d7ccf5 100644
--- a/webui/tailwind.config.js
+++ b/webui/tailwind.config.js
@@ -1,9 +1,22 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ["./src/**/*.{js,ts,jsx,tsx,html}"],
+  content: ["./src/**/*.{js,ts,jsx,tsx,html}", "./src/test-theme.html"],
+  darkMode: "selector", // Enable class-based dark mode
   plugins: ["@tailwindcss/container-queries"],
   theme: {
     extend: {
+      // Custom colors for better dark mode support
+      colors: {
+        // Define semantic color tokens
+        surface: {
+          DEFAULT: "#ffffff",
+          dark: "#1f2937",
+        },
+        "surface-secondary": {
+          DEFAULT: "#f9fafb",
+          dark: "#374151",
+        },
+      },
       animation: {
         "fade-in": "fadeIn 0.3s ease-in-out",
       },