diff --git a/webui/src/web-components/demo/demo-fixtures/index.ts b/webui/src/web-components/demo/demo-fixtures/index.ts
index 0bfcc9d..87b0b87 100644
--- a/webui/src/web-components/demo/demo-fixtures/index.ts
+++ b/webui/src/web-components/demo/demo-fixtures/index.ts
@@ -42,6 +42,49 @@
 } from "./call-status";
 export type { CallStatusState } from "./call-status";
 
+// Ensure dark mode CSS variables are available
+if (
+  typeof document !== "undefined" &&
+  !document.getElementById("demo-fixtures-dark-mode-styles")
+) {
+  const style = document.createElement("style");
+  style.id = "demo-fixtures-dark-mode-styles";
+  style.textContent = `
+    :root {
+      --demo-fixture-section-border: #e1e5e9;
+      --demo-fixture-section-bg: #f8f9fa;
+      --demo-fixture-header-color: #24292f;
+      --demo-fixture-text-color: #656d76;
+      --demo-fixture-button-bg: #0969da;
+      --demo-fixture-button-hover-bg: #0860ca;
+      --demo-label-color: #24292f;
+      --demo-secondary-text: #666;
+      --demo-light-bg: #f6f8fa;
+      --demo-card-bg: #ffffff;
+      --demo-border: #d1d9e0;
+      --demo-instruction-bg: #e3f2fd;
+      --demo-control-bg: #f0f0f0;
+    }
+    
+    .dark {
+      --demo-fixture-section-border: #30363d;
+      --demo-fixture-section-bg: #21262d;
+      --demo-fixture-header-color: #e6edf3;
+      --demo-fixture-text-color: #8b949e;
+      --demo-fixture-button-bg: #4493f8;
+      --demo-fixture-button-hover-bg: #539bf5;
+      --demo-label-color: #e6edf3;
+      --demo-secondary-text: #8b949e;
+      --demo-light-bg: #21262d;
+      --demo-card-bg: #0d1117;
+      --demo-border: #30363d;
+      --demo-instruction-bg: #1c2128;
+      --demo-control-bg: #21262d;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
 // Common demo utilities
 export const demoStyles = {
   container: `
@@ -54,16 +97,18 @@
   demoSection: `
     margin: 20px 0;
     padding: 15px;
-    border: 1px solid #e1e5e9;
+    border: 1px solid var(--demo-fixture-section-border);
     border-radius: 8px;
-    background: #f8f9fa;
+    background: var(--demo-fixture-section-bg);
+    transition: background-color 0.2s, border-color 0.2s;
   `,
 
   demoHeader: `
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 10px;
-    color: #24292f;
+    color: var(--demo-fixture-header-color);
+    transition: color 0.2s;
   `,
 };
 
@@ -86,7 +131,8 @@
     if (description) {
       const desc = document.createElement("p");
       desc.textContent = description;
-      desc.style.cssText = "color: #656d76; margin-bottom: 15px;";
+      desc.style.cssText =
+        "color: var(--demo-fixture-text-color); margin-bottom: 15px; transition: color 0.2s;";
       section.appendChild(desc);
     }
 
@@ -109,13 +155,20 @@
     button.style.cssText = `
       padding: 8px 16px;
       margin: 5px;
-      background: #0969da;
+      background: var(--demo-fixture-button-bg);
       color: white;
       border: none;
       border-radius: 6px;
       cursor: pointer;
       font-size: 14px;
+      transition: background-color 0.2s;
     `;
+    button.addEventListener("mouseenter", () => {
+      button.style.background = "var(--demo-fixture-button-hover-bg)";
+    });
+    button.addEventListener("mouseleave", () => {
+      button.style.background = "var(--demo-fixture-button-bg)";
+    });
     button.addEventListener("click", onClick);
     return button;
   },
diff --git a/webui/src/web-components/demo/demo.html b/webui/src/web-components/demo/demo.html
index fe12f18..a239142 100644
--- a/webui/src/web-components/demo/demo.html
+++ b/webui/src/web-components/demo/demo.html
@@ -11,6 +11,34 @@
         --demo-secondary: #656d76;
         --demo-background: #f6f8fa;
         --demo-border: #d1d9e0;
+        --demo-text-primary: #24292f;
+        --demo-hover-bg: #ffffff;
+        --demo-container-bg: #ffffff;
+        --demo-error-bg: #ffeaea;
+        --demo-error-border: #ffcccc;
+        --demo-error-text: #d73a49;
+      }
+
+      .dark {
+        --demo-primary: #4493f8;
+        --demo-secondary: #8b949e;
+        --demo-background: #21262d;
+        --demo-border: #30363d;
+        --demo-text-primary: #e6edf3;
+        --demo-hover-bg: #30363d;
+        --demo-container-bg: #0d1117;
+        --demo-error-bg: #3c1e1e;
+        --demo-error-border: #6a2c2c;
+        --demo-error-text: #f85149;
+      }
+
+      body {
+        background: var(--demo-container-bg);
+        color: var(--demo-text-primary);
+        transition:
+          background-color 0.2s,
+          color 0.2s;
+        margin: 0;
       }
 
       .demo-runner {
@@ -27,12 +55,17 @@
         border-right: 1px solid var(--demo-border);
         padding: 20px;
         overflow-y: auto;
+        transition:
+          background-color 0.2s,
+          border-color 0.2s;
       }
 
       .demo-content {
         flex: 1;
         padding: 20px;
         overflow-y: auto;
+        background: var(--demo-container-bg);
+        transition: background-color 0.2s;
       }
 
       .demo-nav {
@@ -59,7 +92,7 @@
       }
 
       .demo-nav button:hover {
-        background: #ffffff;
+        background: var(--demo-hover-bg);
         border-color: var(--demo-border);
         color: var(--demo-primary);
       }
@@ -79,7 +112,7 @@
         font-size: 24px;
         font-weight: 600;
         margin: 0 0 8px 0;
-        color: #24292f;
+        color: var(--demo-text-primary);
       }
 
       .demo-description {
@@ -89,7 +122,7 @@
       }
 
       .demo-container {
-        background: white;
+        background: var(--demo-container-bg);
         border: 1px solid var(--demo-border);
         border-radius: 8px;
         min-height: 400px;
@@ -112,7 +145,7 @@
 
       .demo-welcome h2 {
         margin-bottom: 10px;
-        color: #24292f;
+        color: var(--demo-text-primary);
       }
 
       .search-box {
@@ -122,6 +155,16 @@
         border: 1px solid var(--demo-border);
         border-radius: 6px;
         font-size: 14px;
+        background: var(--demo-container-bg);
+        color: var(--demo-text-primary);
+        transition:
+          background-color 0.2s,
+          border-color 0.2s,
+          color 0.2s;
+      }
+
+      .search-box::placeholder {
+        color: var(--demo-secondary);
       }
 
       .search-box:focus {
@@ -131,20 +174,40 @@
 
       .demo-error {
         padding: 20px;
-        background: #ffeaea;
-        border: 1px solid #ffcccc;
+        background: var(--demo-error-bg);
+        border: 1px solid var(--demo-error-border);
         border-radius: 6px;
-        color: #d73a49;
+        color: var(--demo-error-text);
       }
     </style>
   </head>
   <body>
     <div class="demo-runner">
       <nav class="demo-sidebar">
-        <h1 style="font-size: 18px; margin: 0 0 20px 0; color: #24292f">
+        <h1
+          style="
+            font-size: 18px;
+            margin: 0 0 20px 0;
+            color: var(--demo-text-primary);
+          "
+        >
           Component Demos
         </h1>
 
+        <div
+          style="
+            margin-bottom: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
+        >
+          <span style="font-size: 12px; color: var(--demo-secondary)"
+            >Theme:</span
+          >
+          <sketch-theme-toggle></sketch-theme-toggle>
+        </div>
+
         <input
           type="text"
           class="search-box"
@@ -174,6 +237,8 @@
 
     <script type="module">
       import { DemoRunner } from "./demo-framework/demo-runner.ts";
+      import "../sketch-theme-toggle.ts";
+      import "../theme-service.ts";
 
       class DemoRunnerApp {
         constructor() {
@@ -191,9 +256,20 @@
           this.currentComponent = null;
           this.availableComponents = [];
 
+          // Initialize theme service
+          this.initTheme();
+
           this.init();
         }
 
+        initTheme() {
+          // Import and initialize the theme service
+          import("../theme-service.ts").then(({ ThemeService }) => {
+            const themeService = ThemeService.getInstance();
+            themeService.initializeTheme();
+          });
+        }
+
         async init() {
           try {
             // Load available components
diff --git a/webui/src/web-components/demo/sketch-call-status.demo.ts b/webui/src/web-components/demo/sketch-call-status.demo.ts
index f01b190..f3a5ff2 100644
--- a/webui/src/web-components/demo/sketch-call-status.demo.ts
+++ b/webui/src/web-components/demo/sketch-call-status.demo.ts
@@ -46,7 +46,7 @@
       const labelEl = document.createElement("h4");
       labelEl.textContent = label;
       labelEl.style.cssText =
-        "margin: 0 0 10px 0; color: #24292f; font-size: 14px; font-weight: 600;";
+        "margin: 0 0 10px 0; color: var(--demo-label-color); font-size: 14px; font-weight: 600;";
 
       const statusComponent = document.createElement(
         "sketch-call-status",
diff --git a/webui/src/web-components/demo/sketch-chat-input.demo.ts b/webui/src/web-components/demo/sketch-chat-input.demo.ts
index ac5f756..b33fd49 100644
--- a/webui/src/web-components/demo/sketch-chat-input.demo.ts
+++ b/webui/src/web-components/demo/sketch-chat-input.demo.ts
@@ -34,7 +34,7 @@
       border-radius: 6px;
       padding: 10px;
       margin-bottom: 10px;
-      background: #f6f8fa;
+      background: var(--demo-light-bg);
     `;
 
     // Create chat input
@@ -48,7 +48,7 @@
         padding: 8px 12px;
         margin: 4px 0;
         border-radius: 6px;
-        background: ${isUser ? "#0969da" : "#f1f3f4"};
+        background: ${isUser ? "var(--demo-fixture-button-bg)" : "var(--demo-light-bg)"};
         color: ${isUser ? "white" : "#24292f"};
         max-width: 80%;
         margin-left: ${isUser ? "auto" : "0"};
diff --git a/webui/src/web-components/demo/sketch-container-status.demo.ts b/webui/src/web-components/demo/sketch-container-status.demo.ts
index da0e435..0b49f21 100644
--- a/webui/src/web-components/demo/sketch-container-status.demo.ts
+++ b/webui/src/web-components/demo/sketch-container-status.demo.ts
@@ -45,7 +45,8 @@
 
     const lightLabel = document.createElement("h4");
     lightLabel.textContent = "Light Usage";
-    lightLabel.style.cssText = "margin: 20px 0 10px 0; color: #24292f;";
+    lightLabel.style.cssText =
+      "margin: 20px 0 10px 0; color: var(--demo-label-color);";
 
     // Heavy usage status
     const heavyStatus = document.createElement(
@@ -59,7 +60,8 @@
     };
     const heavyLabel = document.createElement("h4");
     heavyLabel.textContent = "Heavy Usage";
-    heavyLabel.style.cssText = "margin: 20px 0 10px 0; color: #24292f;";
+    heavyLabel.style.cssText =
+      "margin: 20px 0 10px 0; color: var(--demo-label-color);";
 
     // Control buttons for interaction
     const controlsDiv = document.createElement("div");
diff --git a/webui/src/web-components/demo/sketch-diff-range-picker.demo.ts b/webui/src/web-components/demo/sketch-diff-range-picker.demo.ts
index cf05379..4833715 100644
--- a/webui/src/web-components/demo/sketch-diff-range-picker.demo.ts
+++ b/webui/src/web-components/demo/sketch-diff-range-picker.demo.ts
@@ -49,7 +49,7 @@
     statusDisplay.style.cssText = `
       padding: 12px;
       margin: 16px 0;
-      background: #f8f9fa;
+      background: var(--demo-fixture-section-bg);
       border-radius: 6px;
       border: 1px solid #e9ecef;
       font-family: monospace;
@@ -88,7 +88,7 @@
     instructionsDiv.style.cssText = `
       margin: 20px 0;
       padding: 16px;
-      background: #e3f2fd;
+      background: var(--demo-instruction-bg);
       border-radius: 6px;
       border-left: 4px solid #2196f3;
     `;
diff --git a/webui/src/web-components/demo/sketch-diff2-view.demo.ts b/webui/src/web-components/demo/sketch-diff2-view.demo.ts
index 6a7cda8..3b4b05d 100644
--- a/webui/src/web-components/demo/sketch-diff2-view.demo.ts
+++ b/webui/src/web-components/demo/sketch-diff2-view.demo.ts
@@ -37,7 +37,7 @@
     controlPanel.className = "control-panel";
     controlPanel.style.marginBottom = "1rem";
     controlPanel.style.padding = "1rem";
-    controlPanel.style.backgroundColor = "#f0f0f0";
+    controlPanel.style.backgroundColor = "var(--demo-control-bg);";
     controlPanel.style.borderRadius = "4px";
     controlPanel.innerHTML = `
       <p><strong>Features:</strong></p>
diff --git a/webui/src/web-components/demo/sketch-monaco-view.demo.ts b/webui/src/web-components/demo/sketch-monaco-view.demo.ts
index b15865a..04b9942 100644
--- a/webui/src/web-components/demo/sketch-monaco-view.demo.ts
+++ b/webui/src/web-components/demo/sketch-monaco-view.demo.ts
@@ -39,7 +39,7 @@
     const controlPanel = document.createElement("div");
     controlPanel.style.marginBottom = "2rem";
     controlPanel.style.padding = "1rem";
-    controlPanel.style.backgroundColor = "#f0f0f0";
+    controlPanel.style.backgroundColor = "var(--demo-control-bg);";
     controlPanel.style.borderRadius = "4px";
 
     const buttonsContainer = document.createElement("div");
diff --git a/webui/src/web-components/demo/sketch-timeline-message.demo.ts b/webui/src/web-components/demo/sketch-timeline-message.demo.ts
index fef3d9f..6439e51 100644
--- a/webui/src/web-components/demo/sketch-timeline-message.demo.ts
+++ b/webui/src/web-components/demo/sketch-timeline-message.demo.ts
@@ -52,7 +52,7 @@
       const labelEl = document.createElement("h4");
       labelEl.textContent = label;
       labelEl.style.cssText =
-        "margin: 0 0 10px 0; color: #24292f; font-size: 14px; font-weight: 600;";
+        "margin: 0 0 10px 0; color: var(--demo-label-color); font-size: 14px; font-weight: 600;";
 
       const messageComponent = document.createElement(
         "sketch-timeline-message",
diff --git a/webui/src/web-components/demo/sketch-timeline-viewport.demo.ts b/webui/src/web-components/demo/sketch-timeline-viewport.demo.ts
index cc4b519..e8d4a8f 100644
--- a/webui/src/web-components/demo/sketch-timeline-viewport.demo.ts
+++ b/webui/src/web-components/demo/sketch-timeline-viewport.demo.ts
@@ -21,8 +21,8 @@
     }
     .demo-header {
       padding: 20px;
-      border-bottom: 1px solid #eee;
-      background: #f8f9fa;
+      border-bottom: 1px solid var(--demo-border);
+      background: var(--demo-fixture-section-bg);
       border-radius: 8px 8px 0 0;
     }
     .demo-timeline {
@@ -31,8 +31,8 @@
     }
     .controls {
       padding: 10px 20px;
-      border-top: 1px solid #eee;
-      background: #f8f9fa;
+      border-top: 1px solid var(--demo-border);
+      background: var(--demo-fixture-section-bg);
       display: flex;
       gap: 10px;
       align-items: center;
@@ -50,7 +50,7 @@
     }
     .info {
       font-size: 12px;
-      color: #666;
+      color: var(--demo-secondary-text);
       margin-left: auto;
     }
   `,
diff --git a/webui/src/web-components/demo/sketch-timeline.demo.ts b/webui/src/web-components/demo/sketch-timeline.demo.ts
index 845967b..f41eeaa 100644
--- a/webui/src/web-components/demo/sketch-timeline.demo.ts
+++ b/webui/src/web-components/demo/sketch-timeline.demo.ts
@@ -110,7 +110,7 @@
     const loadingLabel = document.createElement("h4");
     loadingLabel.textContent = "Loading State (No messages)";
     loadingLabel.style.cssText =
-      "margin: 0 0 10px 0; color: #24292f; font-size: 14px; font-weight: 600;";
+      "margin: 0 0 10px 0; color: var(--demo-label-color); font-size: 14px; font-weight: 600;";
 
     loadingWrapper.appendChild(loadingLabel);
     loadingWrapper.appendChild(loadingTimeline);
@@ -138,7 +138,7 @@
     const thinkingLabel = document.createElement("h4");
     thinkingLabel.textContent = "Thinking State (Agent is active)";
     thinkingLabel.style.cssText =
-      "margin: 0 0 10px 0; color: #24292f; font-size: 14px; font-weight: 600;";
+      "margin: 0 0 10px 0; color: var(--demo-label-color); font-size: 14px; font-weight: 600;";
 
     const thinkingScrollContainer = document.createElement("div");
     thinkingScrollContainer.style.cssText = "height: 300px; overflow-y: auto;";
diff --git a/webui/src/web-components/demo/sketch-tool-calls.demo.ts b/webui/src/web-components/demo/sketch-tool-calls.demo.ts
index 80eda26..9bfabe4 100644
--- a/webui/src/web-components/demo/sketch-tool-calls.demo.ts
+++ b/webui/src/web-components/demo/sketch-tool-calls.demo.ts
@@ -78,7 +78,8 @@
     multipleToolCallGroups.forEach((group, index) => {
       const groupHeader = document.createElement("h4");
       groupHeader.textContent = `Group ${index + 1}`;
-      groupHeader.style.cssText = "margin: 20px 0 10px 0; color: #24292f;";
+      groupHeader.style.cssText =
+        "margin: 20px 0 10px 0; color: var(--demo-label-color);";
 
       const groupToolCalls = document.createElement("sketch-tool-calls") as any;
       groupToolCalls.toolCalls = group;
diff --git a/webui/src/web-components/demo/sketch-tool-card.demo.ts b/webui/src/web-components/demo/sketch-tool-card.demo.ts
index 413c83b..6b499f1 100644
--- a/webui/src/web-components/demo/sketch-tool-card.demo.ts
+++ b/webui/src/web-components/demo/sketch-tool-card.demo.ts
@@ -5,7 +5,22 @@
   title: "Sketch Tool Card Demo",
   description:
     "Demonstration of different tool card components for various tool types",
-  imports: ["../sketch-tool-card.ts"],
+  imports: [
+    "../sketch-tool-card.ts",
+    "../sketch-tool-card-about-sketch.ts",
+    "../sketch-tool-card-browser-clear-console-logs.ts",
+    "../sketch-tool-card-browser-click.ts",
+    "../sketch-tool-card-browser-eval.ts",
+    "../sketch-tool-card-browser-get-text.ts",
+    "../sketch-tool-card-browser-navigate.ts",
+    "../sketch-tool-card-browser-recent-console-logs.ts",
+    "../sketch-tool-card-browser-resize.ts",
+    "../sketch-tool-card-browser-scroll-into-view.ts",
+    "../sketch-tool-card-browser-type.ts",
+    "../sketch-tool-card-browser-wait-for.ts",
+    "../sketch-tool-card-read-image.ts",
+    "../sketch-tool-card-take-screenshot.ts",
+  ],
 
   setup: async (container: HTMLElement) => {
     const section = demoUtils.createDemoSection(
@@ -162,6 +177,153 @@
           tool_call_id: "toolu_01HPgWQJF1aF9LUqkdDKWeES",
         },
       },
+      // About Sketch tool
+      {
+        name: "about_sketch",
+        input: "{}",
+        tool_call_id: "toolu_about_sketch",
+        result_message: {
+          type: "tool",
+          tool_result:
+            "# Welcome to Sketch\n\nSketch is an AI-powered coding assistant that helps you implement features, debug issues, and understand codebases.\n\n## Key Features\n\n- **Autonomous coding**: I can read, write, and modify code files\n- **Command execution**: I can run shell commands and scripts\n- **Testing**: I can run tests and interpret results\n- **Code review**: I can analyze code quality and suggest improvements\n\n## Getting Started\n\n1. Describe what you want to build or fix\n2. I'll analyze your codebase and create a plan\n3. I'll implement the changes step by step\n4. You can review and provide feedback at any time",
+          tool_call_id: "toolu_about_sketch",
+        },
+      },
+      // Browser navigation
+      {
+        name: "browser_navigate",
+        input: JSON.stringify({ url: "https://example.com" }),
+        tool_call_id: "toolu_navigate",
+        result_message: {
+          type: "tool",
+          tool_result: "Navigated to https://example.com",
+          tool_call_id: "toolu_navigate",
+        },
+      },
+      // Browser click
+      {
+        name: "browser_click",
+        input: JSON.stringify({ selector: ".login-button" }),
+        tool_call_id: "toolu_click",
+        result_message: {
+          type: "tool",
+          tool_result: "Clicked element: .login-button",
+          tool_call_id: "toolu_click",
+        },
+      },
+      // Browser type
+      {
+        name: "browser_type",
+        input: JSON.stringify({ selector: "#username", text: "testuser" }),
+        tool_call_id: "toolu_type",
+        result_message: {
+          type: "tool",
+          tool_result: "Typed 'testuser' into #username",
+          tool_call_id: "toolu_type",
+        },
+      },
+      // Browser get text
+      {
+        name: "browser_get_text",
+        input: JSON.stringify({ selector: ".welcome-message" }),
+        tool_call_id: "toolu_get_text",
+        result_message: {
+          type: "tool",
+          tool_result: "Welcome to our application! Please log in to continue.",
+          tool_call_id: "toolu_get_text",
+        },
+      },
+      // Browser eval
+      {
+        name: "browser_eval",
+        input: JSON.stringify({ expression: "document.title" }),
+        tool_call_id: "toolu_eval",
+        result_message: {
+          type: "tool",
+          tool_result: "Example Domain",
+          tool_call_id: "toolu_eval",
+        },
+      },
+      // Browser wait for
+      {
+        name: "browser_wait_for",
+        input: JSON.stringify({ selector: ".loading-complete" }),
+        tool_call_id: "toolu_wait",
+        result_message: {
+          type: "tool",
+          tool_result: "Element .loading-complete is now present",
+          tool_call_id: "toolu_wait",
+        },
+      },
+      // Browser resize
+      {
+        name: "browser_resize",
+        input: JSON.stringify({ width: 1024, height: 768 }),
+        tool_call_id: "toolu_resize",
+        result_message: {
+          type: "tool",
+          tool_result: "Browser resized to 1024x768",
+          tool_call_id: "toolu_resize",
+        },
+      },
+      // Browser scroll into view
+      {
+        name: "browser_scroll_into_view",
+        input: JSON.stringify({ selector: "#bottom-section" }),
+        tool_call_id: "toolu_scroll",
+        result_message: {
+          type: "tool",
+          tool_result: "Scrolled element #bottom-section into view",
+          tool_call_id: "toolu_scroll",
+        },
+      },
+      // Browser clear console logs
+      {
+        name: "browser_clear_console_logs",
+        input: "{}",
+        tool_call_id: "toolu_clear_logs",
+        result_message: {
+          type: "tool",
+          tool_result: "Console logs cleared",
+          tool_call_id: "toolu_clear_logs",
+        },
+      },
+      // Browser recent console logs
+      {
+        name: "browser_recent_console_logs",
+        input: "{}",
+        tool_call_id: "toolu_recent_logs",
+        result_message: {
+          type: "tool",
+          tool_result:
+            "[INFO] Page loaded successfully\n[WARN] Deprecated API usage detected\n[ERROR] Failed to load resource: net::ERR_FAILED",
+          tool_call_id: "toolu_recent_logs",
+        },
+      },
+      // Read image
+      {
+        name: "read_image",
+        input: JSON.stringify({ path: "/tmp/screenshot.png" }),
+        tool_call_id: "toolu_read_image",
+        result_message: {
+          type: "tool",
+          tool_result:
+            "Image read successfully: /tmp/screenshot.png (1024x768, 245KB)",
+          tool_call_id: "toolu_read_image",
+        },
+      },
+      // Take screenshot
+      {
+        name: "browser_take_screenshot",
+        input: JSON.stringify({ selector: ".main-content" }),
+        tool_call_id: "toolu_screenshot",
+        result_message: {
+          type: "tool",
+          tool_result:
+            "Screenshot taken (saved as /tmp/sketch-screenshots/demo-123.png)",
+          tool_call_id: "toolu_screenshot",
+        },
+      },
     ];
 
     // Create tool cards for each tool call
@@ -205,6 +367,61 @@
             "sketch-tool-card-multiple-choice",
           );
           break;
+        case "about_sketch":
+          toolCardEl = document.createElement("sketch-tool-card-about-sketch");
+          break;
+        case "browser_navigate":
+          toolCardEl = document.createElement(
+            "sketch-tool-card-browser-navigate",
+          );
+          break;
+        case "browser_click":
+          toolCardEl = document.createElement("sketch-tool-card-browser-click");
+          break;
+        case "browser_type":
+          toolCardEl = document.createElement("sketch-tool-card-browser-type");
+          break;
+        case "browser_get_text":
+          toolCardEl = document.createElement(
+            "sketch-tool-card-browser-get-text",
+          );
+          break;
+        case "browser_eval":
+          toolCardEl = document.createElement("sketch-tool-card-browser-eval");
+          break;
+        case "browser_wait_for":
+          toolCardEl = document.createElement(
+            "sketch-tool-card-browser-wait-for",
+          );
+          break;
+        case "browser_resize":
+          toolCardEl = document.createElement(
+            "sketch-tool-card-browser-resize",
+          );
+          break;
+        case "browser_scroll_into_view":
+          toolCardEl = document.createElement(
+            "sketch-tool-card-browser-scroll-into-view",
+          );
+          break;
+        case "browser_clear_console_logs":
+          toolCardEl = document.createElement(
+            "sketch-tool-card-browser-clear-console-logs",
+          );
+          break;
+        case "browser_recent_console_logs":
+          toolCardEl = document.createElement(
+            "sketch-tool-card-browser-recent-console-logs",
+          );
+          break;
+        case "read_image":
+          toolCardEl = document.createElement("sketch-tool-card-read-image");
+          break;
+        case "browser_take_screenshot":
+          toolCardEl = document.createElement(
+            "sketch-tool-card-take-screenshot",
+          );
+          break;
         default:
           toolCardEl = document.createElement("sketch-tool-card-generic");
           break;
diff --git a/webui/src/web-components/demo/sketch-view-mode-select.demo.ts b/webui/src/web-components/demo/sketch-view-mode-select.demo.ts
index 523f371..befdc58 100644
--- a/webui/src/web-components/demo/sketch-view-mode-select.demo.ts
+++ b/webui/src/web-components/demo/sketch-view-mode-select.demo.ts
@@ -96,12 +96,13 @@
 
       const scenarioTitle = document.createElement("h4");
       scenarioTitle.textContent = scenario.name;
-      scenarioTitle.style.cssText = "margin: 0 0 5px 0; color: #24292f;";
+      scenarioTitle.style.cssText =
+        "margin: 0 0 5px 0; color: var(--demo-label-color);";
 
       const scenarioDesc = document.createElement("p");
       scenarioDesc.textContent = scenario.description;
       scenarioDesc.style.cssText =
-        "margin: 0 0 10px 0; color: #656d76; font-size: 14px;";
+        "margin: 0 0 10px 0; color: var(--demo-fixture-text-color); font-size: 14px;";
 
       const scenarioWrapper = document.createElement("div");
       scenarioWrapper.className = "@container";
@@ -223,7 +224,8 @@
 
     // Create explanation text
     const explanation = document.createElement("p");
-    explanation.style.cssText = "margin: 10px 0; color: #666; font-size: 14px;";
+    explanation.style.cssText =
+      "margin: 10px 0; color: var(--demo-secondary-text); font-size: 14px;";
     explanation.innerHTML = `
       <strong>Container Queries:</strong> The component now uses Tailwind <code>@container</code> queries instead of viewport media queries.<br>
       This allows different sized containers to show different responsive behaviors simultaneously.
@@ -269,8 +271,8 @@
       const header = document.createElement("div");
       header.style.cssText = "margin-bottom: 10px;";
       header.innerHTML = `
-        <h4 style="margin: 0 0 5px 0; font-weight: 600; color: #333;">${example.title}</h4>
-        <p style="margin: 0; font-size: 14px; color: #666;">${example.description}</p>
+        <h4 style="margin: 0 0 5px 0; font-weight: 600; color: var(--demo-label-color);">${example.title}</h4>
+        <p style="margin: 0; font-size: 14px; color: var(--demo-secondary-text);">${example.description}</p>
       `;
       wrapper.appendChild(header);
 
@@ -311,7 +313,7 @@
     interactiveDesc.textContent =
       "Use the buttons below to change the container size and see the responsive behavior in real-time.";
     interactiveDesc.style.cssText =
-      "margin: 0 0 15px 0; color: #666; font-size: 14px;";
+      "margin: 0 0 15px 0; color: var(--demo-secondary-text); font-size: 14px;";
 
     // Create interactive container
     const interactiveContainer = document.createElement("div");
@@ -334,7 +336,7 @@
     // Size info display
     const sizeInfo = document.createElement("div");
     sizeInfo.style.cssText =
-      "margin-bottom: 10px; font-family: monospace; font-size: 12px; color: #333;";
+      "margin-bottom: 10px; font-family: monospace; font-size: 12px; color: var(--demo-label-color);";
     sizeInfo.textContent = "Current container width: 700px";
 
     interactiveContainer.appendChild(sizeInfo);
diff --git a/webui/src/web-components/demo/status-indicators.demo.ts b/webui/src/web-components/demo/status-indicators.demo.ts
index d0cd438..20c8a17 100644
--- a/webui/src/web-components/demo/status-indicators.demo.ts
+++ b/webui/src/web-components/demo/status-indicators.demo.ts
@@ -18,7 +18,7 @@
       padding: 20px;
       border: 1px solid #ccc;
       border-radius: 5px;
-      background-color: #f9f9f9;
+      background-color: var(--demo-fixture-section-bg);
     }
     .label {
       font-weight: bold;
@@ -43,7 +43,7 @@
     }
     .description {
       margin-top: 10px;
-      color: #666;
+      color: var(--demo-secondary-text);
       font-size: 14px;
     }
   `,
diff --git a/webui/src/web-components/sketch-timeline.ts b/webui/src/web-components/sketch-timeline.ts
index d6928c7..926c0d2 100644
--- a/webui/src/web-components/sketch-timeline.ts
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -811,31 +811,39 @@
             class="overflow-y-auto overflow-x-hidden pl-4 max-w-full w-full h-full ${compactClass} scroll-container print:h-auto print:max-h-none print:overflow-visible"
           >
             <div
-              class="my-8 mx-auto max-w-[90%] w-[90%] p-8 border-2 border-gray-300 rounded-lg shadow-sm bg-white text-center print:break-inside-avoid"
+              class="my-8 mx-auto max-w-[90%] w-[90%] p-8 border-2 border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-800 text-center print:break-inside-avoid"
               data-testid="welcome-box"
             >
               <h2
-                class="text-2xl font-semibold mb-6 text-center text-gray-800"
+                class="text-2xl font-semibold mb-6 text-center text-gray-800 dark:text-gray-100"
                 data-testid="welcome-box-title"
               >
                 How to use Sketch
               </h2>
-              <p class="text-gray-600 leading-relaxed text-base text-left">
+              <p
+                class="text-gray-600 dark:text-gray-300 leading-relaxed text-base text-left"
+              >
                 Sketch is an agentic coding assistant.
               </p>
 
-              <p class="text-gray-600 leading-relaxed text-base text-left">
+              <p
+                class="text-gray-600 dark:text-gray-300 leading-relaxed text-base text-left"
+              >
                 Sketch has created a container with your repo.
               </p>
 
-              <p class="text-gray-600 leading-relaxed text-base text-left">
+              <p
+                class="text-gray-600 dark:text-gray-300 leading-relaxed text-base text-left"
+              >
                 Ask it to implement a task or answer a question in the chat box
                 below. It can edit and run your code, all in the container.
                 Sketch will create commits in a newly created git branch, which
                 you can look at and comment on in the Diff tab. Once you're
                 done, you'll find that branch available in your (original) repo.
               </p>
-              <p class="text-gray-600 leading-relaxed text-base text-left">
+              <p
+                class="text-gray-600 dark:text-gray-300 leading-relaxed text-base text-left"
+              >
                 Because Sketch operates a container per session, you can run
                 Sketch in parallel to work on multiple ideas or even the same
                 idea with different approaches.
@@ -871,11 +879,11 @@
             ${!this.isInitialLoadComplete
               ? html`
                   <div
-                    class="flex items-center justify-center p-5 text-gray-600 text-sm gap-2.5 opacity-100 print:hidden"
+                    class="flex items-center justify-center p-5 text-gray-600 dark:text-gray-400 text-sm gap-2.5 opacity-100 print:hidden"
                     data-testid="loading-indicator"
                   >
                     <div
-                      class="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full loading-spinner"
+                      class="w-5 h-5 border-2 border-gray-300 dark:border-gray-600 border-t-gray-600 dark:border-t-gray-300 rounded-full loading-spinner"
                       data-testid="loading-spinner"
                     ></div>
                     <span>Loading conversation...</span>
@@ -885,11 +893,11 @@
             ${this.isLoadingOlderMessages
               ? html`
                   <div
-                    class="flex items-center justify-center p-5 text-gray-600 text-sm gap-2.5 opacity-100 print:hidden"
+                    class="flex items-center justify-center p-5 text-gray-600 dark:text-gray-400 text-sm gap-2.5 opacity-100 print:hidden"
                     data-testid="loading-indicator"
                   >
                     <div
-                      class="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full loading-spinner"
+                      class="w-5 h-5 border-2 border-gray-300 dark:border-gray-600 border-t-gray-600 dark:border-t-gray-300 rounded-full loading-spinner"
                       data-testid="loading-spinner"
                     ></div>
                     <span>Loading older messages...</span>
@@ -930,7 +938,7 @@
                     style="display: flex; padding-left: 85px; margin-top: 6px; margin-bottom: 16px;"
                   >
                     <div
-                      class="bg-gray-100 rounded-2xl px-4 py-2.5 max-w-20 text-black relative rounded-bl-[5px]"
+                      class="bg-gray-100 dark:bg-gray-700 rounded-2xl px-4 py-2.5 max-w-20 text-black dark:text-white relative rounded-bl-[5px]"
                       data-testid="thinking-bubble"
                     >
                       <div
@@ -938,15 +946,15 @@
                         data-testid="thinking-dots"
                       >
                         <div
-                          class="w-1.5 h-1.5 bg-gray-500 rounded-full opacity-60 thinking-dot-1"
+                          class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-300 rounded-full opacity-60 thinking-dot-1"
                           data-testid="thinking-dot"
                         ></div>
                         <div
-                          class="w-1.5 h-1.5 bg-gray-500 rounded-full opacity-60 thinking-dot-2"
+                          class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-300 rounded-full opacity-60 thinking-dot-2"
                           data-testid="thinking-dot"
                         ></div>
                         <div
-                          class="w-1.5 h-1.5 bg-gray-500 rounded-full opacity-60 thinking-dot-3"
+                          class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-300 rounded-full opacity-60 thinking-dot-3"
                           data-testid="thinking-dot"
                         ></div>
                       </div>
@@ -960,7 +968,7 @@
           id="jump-to-latest"
           class="${this.scrollingState === "floating"
             ? "block floating"
-            : "hidden"} fixed bottom-20 left-1/2 -translate-x-1/2 bg-black/60 text-white border-none rounded-xl px-2 py-1 text-xs font-normal cursor-pointer shadow-md z-[1000] transition-all duration-150 ease-out whitespace-nowrap opacity-80 hover:bg-black/80 hover:-translate-y-0.5 hover:opacity-100 hover:shadow-lg active:translate-y-0 print:hidden"
+            : "hidden"} fixed bottom-20 left-1/2 -translate-x-1/2 bg-black/60 dark:bg-gray-700/80 text-white border-none rounded-xl px-2 py-1 text-xs font-normal cursor-pointer shadow-md z-[1000] transition-all duration-150 ease-out whitespace-nowrap opacity-80 hover:bg-black/80 dark:hover:bg-gray-600/90 hover:-translate-y-0.5 hover:opacity-100 hover:shadow-lg active:translate-y-0 print:hidden"
           @click=${this.scrollToBottomWithRetry}
         >
           ↓ Jump to bottom
diff --git a/webui/src/web-components/sketch-tool-card-about-sketch.ts b/webui/src/web-components/sketch-tool-card-about-sketch.ts
index acd9a78..2327caa 100644
--- a/webui/src/web-components/sketch-tool-card-about-sketch.ts
+++ b/webui/src/web-components/sketch-tool-card-about-sketch.ts
@@ -34,11 +34,11 @@
       <span class="mr-1.5">📚</span> About Sketch
     </span>`;
     const inputContent = html`<div>
-      <span class="font-bold text-gray-800"></span>
+      <span class="font-bold text-gray-800 dark:text-gray-200"></span>
     </div>`;
     const resultContent = this.toolCall?.result_message?.tool_result
       ? html`<div
-          class="bg-gray-50 rounded-md p-3 mt-2.5 max-h-[300px] overflow-y-auto border border-gray-200"
+          class="bg-gray-50 dark:bg-gray-700 rounded-md p-3 mt-2.5 max-h-[300px] overflow-y-auto border border-gray-200 dark:border-gray-600 text-gray-900 dark:text-gray-100"
         >
           ${unsafeHTML(renderMarkdown(resultText))}
         </div>`
diff --git a/webui/src/web-components/sketch-tool-card-base.ts b/webui/src/web-components/sketch-tool-card-base.ts
index 1bfdbe1..8dcc887 100644
--- a/webui/src/web-components/sketch-tool-card-base.ts
+++ b/webui/src/web-components/sketch-tool-card-base.ts
@@ -48,11 +48,11 @@
     if (this.toolCall?.result_message) {
       statusIcon = this.toolCall?.result_message.tool_error
         ? html`<span
-            class="flex items-center justify-center text-sm text-gray-500"
+            class="flex items-center justify-center text-sm text-gray-500 dark:text-gray-400"
             >〰️</span
           >`
         : html`<span
-            class="flex items-center justify-center text-sm text-green-600"
+            class="flex items-center justify-center text-sm text-green-600 dark:text-green-400"
             >✓</span
           >`;
     }
@@ -77,11 +77,11 @@
     // Elapsed time display
     const elapsed = this.toolCall?.result_message?.elapsed
       ? html`<span
-          class="text-xs text-gray-600 whitespace-nowrap min-w-[40px] text-right"
+          class="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap min-w-[40px] text-right"
           >${(this.toolCall?.result_message?.elapsed / 1e9).toFixed(1)}s</span
         >`
       : html`<span
-          class="text-xs text-gray-600 whitespace-nowrap min-w-[40px] text-right"
+          class="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap min-w-[40px] text-right"
         ></span>`;
 
     // Initialize details visibility based on open property
@@ -92,15 +92,15 @@
     return html`<div class="block max-w-full w-full box-border overflow-hidden">
       <div class="flex flex-col w-full">
         <div
-          class="flex w-full box-border py-1.5 px-2 pl-3 items-center gap-2 cursor-pointer rounded relative overflow-hidden flex-wrap hover:bg-black/[0.02]"
+          class="flex w-full box-border py-1.5 px-2 pl-3 items-center gap-2 cursor-pointer rounded relative overflow-hidden flex-wrap hover:bg-black/[0.02] dark:hover:bg-white/[0.05]"
           @click=${this._toggleDetails}
         >
           <span
-            class="font-mono font-medium text-gray-700 bg-black/[0.05] rounded px-1.5 py-0.5 flex-shrink-0 min-w-[45px] text-xs text-center whitespace-nowrap"
+            class="font-mono font-medium text-gray-700 dark:text-gray-300 bg-black/[0.05] dark:bg-white/[0.1] rounded px-1.5 py-0.5 flex-shrink-0 min-w-[45px] text-xs text-center whitespace-nowrap"
             >${this.toolCall?.name}</span
           >
           <span
-            class="whitespace-normal break-words flex-grow flex-shrink text-gray-700 font-mono text-xs px-1 min-w-[50px] max-w-[calc(100%-150px)] inline-block"
+            class="whitespace-normal break-words flex-grow flex-shrink text-gray-700 dark:text-gray-300 font-mono text-xs px-1 min-w-[50px] max-w-[calc(100%-150px)] inline-block"
             >${this.summaryContent}</span
           >
           <div
@@ -112,7 +112,7 @@
         <div
           class="${this.detailsVisible
             ? "block"
-            : "hidden"} p-2 bg-black/[0.02] mt-px border-t border-black/[0.05] font-mono text-xs text-gray-800 rounded-b max-w-full w-full box-border overflow-hidden"
+            : "hidden"} p-2 bg-black/[0.02] dark:bg-white/[0.05] mt-px border-t border-black/[0.05] dark:border-white/[0.1] font-mono text-xs text-gray-800 dark:text-gray-200 rounded-b max-w-full w-full box-border overflow-hidden"
         >
           ${this.inputContent
             ? html`<div class="mb-2">${this.inputContent}</div>`
diff --git a/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts b/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts
index a924b52..a861a07 100644
--- a/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-clear-console-logs.ts
@@ -13,13 +13,15 @@
   open: boolean;
 
   render() {
-    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+    const summaryContent = html`<span
+      class="font-mono text-gray-700 dark:text-gray-300 break-all"
+    >
       🧹 Clear console logs
     </span>`;
     const inputContent = html`<div>Clear all console logs</div>`;
     const resultContent = this.toolCall?.result_message?.tool_result
       ? html`<pre
-          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+          class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
         >
 ${this.toolCall.result_message.tool_result}</pre
         >`
diff --git a/webui/src/web-components/sketch-tool-card-browser-click.ts b/webui/src/web-components/sketch-tool-card-browser-click.ts
index 928dd28..ea1a0c4 100644
--- a/webui/src/web-components/sketch-tool-card-browser-click.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-click.ts
@@ -24,19 +24,21 @@
       console.error("Error parsing click input:", e);
     }
 
-    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+    const summaryContent = html`<span
+      class="font-mono text-gray-700 dark:text-gray-300 break-all"
+    >
       🖱️ ${selector}
     </span>`;
     const inputContent = html`<div>
       Click:
       <span
-        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        class="font-mono bg-black/[0.05] dark:bg-white/[0.1] dark:bg-white/[0.1] px-2 py-1 rounded inline-block break-all"
         >${selector}</span
       >
     </div>`;
     const resultContent = this.toolCall?.result_message?.tool_result
       ? html`<pre
-          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+          class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
         >
 ${this.toolCall.result_message.tool_result}</pre
         >`
diff --git a/webui/src/web-components/sketch-tool-card-browser-eval.ts b/webui/src/web-components/sketch-tool-card-browser-eval.ts
index 4030b02..935b5e2 100644
--- a/webui/src/web-components/sketch-tool-card-browser-eval.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-eval.ts
@@ -28,19 +28,21 @@
     const displayExpression =
       expression.length > 50 ? expression.substring(0, 50) + "..." : expression;
 
-    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+    const summaryContent = html`<span
+      class="font-mono text-gray-700 dark:text-gray-300 break-all"
+    >
       📱 ${displayExpression}
     </span>`;
     const inputContent = html`<div>
       Evaluate:
       <span
-        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        class="font-mono bg-black/[0.05] dark:bg-white/[0.1] dark:bg-white/[0.1] px-2 py-1 rounded inline-block break-all"
         >${expression}</span
       >
     </div>`;
     const resultContent = this.toolCall?.result_message?.tool_result
       ? html`<pre
-          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+          class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
         >
 ${this.toolCall.result_message.tool_result}</pre
         >`
diff --git a/webui/src/web-components/sketch-tool-card-browser-get-text.ts b/webui/src/web-components/sketch-tool-card-browser-get-text.ts
index 8b5df2f..8fa9aec 100644
--- a/webui/src/web-components/sketch-tool-card-browser-get-text.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-get-text.ts
@@ -24,19 +24,21 @@
       console.error("Error parsing get text input:", e);
     }
 
-    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+    const summaryContent = html`<span
+      class="font-mono text-gray-700 dark:text-gray-300 break-all"
+    >
       📖 ${selector}
     </span>`;
     const inputContent = html`<div>
       Get text from:
       <span
-        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        class="font-mono bg-black/[0.05] dark:bg-white/[0.1] px-2 py-1 rounded inline-block break-all"
         >${selector}</span
       >
     </div>`;
     const resultContent = this.toolCall?.result_message?.tool_result
       ? html`<pre
-          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+          class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
         >
 ${this.toolCall.result_message.tool_result}</pre
         >`
diff --git a/webui/src/web-components/sketch-tool-card-browser-navigate.ts b/webui/src/web-components/sketch-tool-card-browser-navigate.ts
index 730274e..295a895 100644
--- a/webui/src/web-components/sketch-tool-card-browser-navigate.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-navigate.ts
@@ -24,19 +24,21 @@
       console.error("Error parsing navigate input:", e);
     }
 
-    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+    const summaryContent = html`<span
+      class="font-mono text-gray-700 dark:text-gray-300 break-all"
+    >
       🌐 ${url}
     </span>`;
     const inputContent = html`<div>
       Navigate to:
       <span
-        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        class="font-mono bg-black/[0.05] dark:bg-white/[0.1] px-2 py-1 rounded inline-block break-all"
         >${url}</span
       >
     </div>`;
     const resultContent = this.toolCall?.result_message?.tool_result
       ? html`<pre
-          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+          class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
         >
 ${this.toolCall.result_message.tool_result}</pre
         >`
diff --git a/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts b/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts
index dee496e..4d9f17a 100644
--- a/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-recent-console-logs.ts
@@ -24,19 +24,21 @@
       console.error("Error parsing recent console logs input:", e);
     }
 
-    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+    const summaryContent = html`<span
+      class="font-mono text-gray-700 dark:text-gray-300 break-all"
+    >
       📜 Console logs (${limit})
     </span>`;
     const inputContent = html`<div>
       Get recent console logs:
       <span
-        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        class="font-mono bg-black/[0.05] dark:bg-white/[0.1] px-2 py-1 rounded inline-block break-all"
         >limit ${limit}</span
       >
     </div>`;
     const resultContent = this.toolCall?.result_message?.tool_result
       ? html`<pre
-          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+          class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
         >
 ${this.toolCall.result_message.tool_result}</pre
         >`
diff --git a/webui/src/web-components/sketch-tool-card-browser-resize.ts b/webui/src/web-components/sketch-tool-card-browser-resize.ts
index ebbc5e3..f76f792 100644
--- a/webui/src/web-components/sketch-tool-card-browser-resize.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-resize.ts
@@ -26,19 +26,21 @@
       console.error("Error parsing resize input:", e);
     }
 
-    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+    const summaryContent = html`<span
+      class="font-mono text-gray-700 dark:text-gray-300 break-all"
+    >
       🖼️ ${width}x${height}
     </span>`;
     const inputContent = html`<div>
       Resize to:
       <span
-        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        class="font-mono bg-black/[0.05] dark:bg-white/[0.1] px-2 py-1 rounded inline-block break-all"
         >${width}x${height}</span
       >
     </div>`;
     const resultContent = this.toolCall?.result_message?.tool_result
       ? html`<pre
-          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+          class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
         >
 ${this.toolCall.result_message.tool_result}</pre
         >`
diff --git a/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts b/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts
index 2bafcd2..4d01af1 100644
--- a/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-scroll-into-view.ts
@@ -24,19 +24,21 @@
       console.error("Error parsing scroll into view input:", e);
     }
 
-    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+    const summaryContent = html`<span
+      class="font-mono text-gray-700 dark:text-gray-300 break-all"
+    >
       🔄 ${selector}
     </span>`;
     const inputContent = html`<div>
       Scroll into view:
       <span
-        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        class="font-mono bg-black/[0.05] dark:bg-white/[0.1] px-2 py-1 rounded inline-block break-all"
         >${selector}</span
       >
     </div>`;
     const resultContent = this.toolCall?.result_message?.tool_result
       ? html`<pre
-          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+          class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
         >
 ${this.toolCall.result_message.tool_result}</pre
         >`
diff --git a/webui/src/web-components/sketch-tool-card-browser-type.ts b/webui/src/web-components/sketch-tool-card-browser-type.ts
index cb947e9..5f37407 100644
--- a/webui/src/web-components/sketch-tool-card-browser-type.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-type.ts
@@ -26,28 +26,30 @@
       console.error("Error parsing type input:", e);
     }
 
-    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+    const summaryContent = html`<span
+      class="font-mono text-gray-700 dark:text-gray-300 break-all"
+    >
       ⌨️ ${selector}: "${text}"
     </span>`;
     const inputContent = html`<div>
       <div>
         Type into:
         <span
-          class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+          class="font-mono bg-black/[0.05] dark:bg-white/[0.1] px-2 py-1 rounded inline-block break-all"
           >${selector}</span
         >
       </div>
       <div>
         Text:
         <span
-          class="font-mono bg-green-50 px-2 py-1 rounded inline-block break-all"
+          class="font-mono bg-green-50 dark:bg-green-900 px-2 py-1 rounded inline-block break-all"
           >${text}</span
         >
       </div>
     </div>`;
     const resultContent = this.toolCall?.result_message?.tool_result
       ? html`<pre
-          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+          class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
         >
 ${this.toolCall.result_message.tool_result}</pre
         >`
diff --git a/webui/src/web-components/sketch-tool-card-browser-wait-for.ts b/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
index f35daf6..fb651f0 100644
--- a/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
+++ b/webui/src/web-components/sketch-tool-card-browser-wait-for.ts
@@ -24,19 +24,21 @@
       console.error("Error parsing wait for input:", e);
     }
 
-    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+    const summaryContent = html`<span
+      class="font-mono text-gray-700 dark:text-gray-300 break-all"
+    >
       ⏳ ${selector}
     </span>`;
     const inputContent = html`<div>
       Wait for:
       <span
-        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        class="font-mono bg-black/[0.05] dark:bg-white/[0.1] px-2 py-1 rounded inline-block break-all"
         >${selector}</span
       >
     </div>`;
     const resultContent = this.toolCall?.result_message?.tool_result
       ? html`<pre
-          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+          class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
         >
 ${this.toolCall.result_message.tool_result}</pre
         >`
diff --git a/webui/src/web-components/sketch-tool-card-read-image.ts b/webui/src/web-components/sketch-tool-card-read-image.ts
index e0e9286..3afd973 100644
--- a/webui/src/web-components/sketch-tool-card-read-image.ts
+++ b/webui/src/web-components/sketch-tool-card-read-image.ts
@@ -27,19 +27,21 @@
     // Show just the filename in summary
     const filename = path.split("/").pop() || path;
 
-    const summaryContent = html`<span class="font-mono text-gray-700 break-all">
+    const summaryContent = html`<span
+      class="font-mono text-gray-700 dark:text-gray-300 break-all"
+    >
       🖼️ ${filename}
     </span>`;
     const inputContent = html`<div>
       Read image:
       <span
-        class="font-mono bg-black/[0.05] px-2 py-1 rounded inline-block break-all"
+        class="font-mono bg-black/[0.05] dark:bg-white/[0.1] px-2 py-1 rounded inline-block break-all"
         >${path}</span
       >
     </div>`;
     const resultContent = this.toolCall?.result_message?.tool_result
       ? html`<pre
-          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
+          class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border"
         >
 ${this.toolCall.result_message.tool_result}</pre
         >`
diff --git a/webui/src/web-components/sketch-tool-card-take-screenshot.ts b/webui/src/web-components/sketch-tool-card-take-screenshot.ts
index 8e03b94..4b0215b 100644
--- a/webui/src/web-components/sketch-tool-card-take-screenshot.ts
+++ b/webui/src/web-components/sketch-tool-card-take-screenshot.ts
@@ -65,7 +65,7 @@
       Screenshot of ${selector}
     </span>`;
     const inputContent = html`<div
-      class="px-2 py-1 bg-gray-100 rounded font-mono my-1.5 inline-block"
+      class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded font-mono my-1.5 inline-block"
     >
       ${selector !== "(full page)"
         ? `Taking screenshot of element: ${selector}`
@@ -75,24 +75,26 @@
       ? html`
           <div class="my-2.5 flex flex-col items-center">
             ${!this.imageLoaded && !this.loadError
-              ? html`<div class="m-5 text-gray-600 italic">
+              ? html`<div class="m-5 text-gray-600 dark:text-gray-400 italic">
                   Loading screenshot...
                 </div>`
               : ""}
             ${this.loadError
-              ? html`<div class="text-red-700 italic my-2.5">
+              ? html`<div class="text-red-700 dark:text-red-400 italic my-2.5">
                   Failed to load screenshot
                 </div>`
               : html`
                   <img
-                    class="max-w-full max-h-[500px] rounded shadow-md border border-gray-300"
+                    class="max-w-full max-h-[500px] rounded shadow-md border border-gray-300 dark:border-gray-600"
                     src="${screenshotUrl}"
                     @load=${() => (this.imageLoaded = true)}
                     @error=${() => (this.loadError = true)}
                     ?hidden=${!this.imageLoaded}
                   />
                   ${this.imageLoaded
-                    ? html`<div class="mt-2 text-xs text-gray-600">
+                    ? html`<div
+                        class="mt-2 text-xs text-gray-600 dark:text-gray-400"
+                      >
                         Screenshot saved and displayed
                       </div>`
                     : ""}