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;
     }
   `,