diff --git a/webui/src/web-components/sketch-tool-card.ts b/webui/src/web-components/sketch-tool-card.ts
index c96d8e0..881285a 100644
--- a/webui/src/web-components/sketch-tool-card.ts
+++ b/webui/src/web-components/sketch-tool-card.ts
@@ -63,7 +63,7 @@
 // Shared utility function for creating Tailwind pre elements
 function createPreElement(content: string, additionalClasses: string = "") {
   return html`<pre
-    class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-wrap-break-word ${additionalClasses}"
+    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 overflow-wrap-break-word ${additionalClasses}"
   >
 ${content}</pre
   >`;
@@ -101,7 +101,7 @@
     >
       <div class="w-full relative">
         <pre
-          class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-wrap-break-word w-full mb-0 rounded-t rounded-b-none 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 overflow-wrap-break-word w-full mb-0 rounded-t rounded-b-none box-border"
         >
 ${backgroundIcon}${slowIcon}${inputData?.command}</pre
         >
@@ -211,19 +211,29 @@
 
     const coloredLines = lines.map((line) => {
       if (line.startsWith("+")) {
-        return html`<div class="text-green-600 bg-green-50">${line}</div>`;
+        return html`<div
+          class="text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20"
+        >
+          ${line}
+        </div>`;
       } else if (line.startsWith("-")) {
-        return html`<div class="text-red-600 bg-red-50">${line}</div>`;
+        return html`<div
+          class="text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20"
+        >
+          ${line}
+        </div>`;
       } else if (line.startsWith("@@")) {
         // prettier-ignore
-        return html`<div class="text-cyan-600 bg-cyan-50 font-semibold">${line}</div>`;
+        return html`<div class="text-cyan-600 dark:text-cyan-400 bg-cyan-50 dark:bg-cyan-900/20 font-semibold">${line}</div>`;
       } else {
-        return html`<div class="text-gray-800">${line}</div>`;
+        return html`<div class="text-gray-800 dark:text-gray-200">
+          ${line}
+        </div>`;
       }
     });
 
     return html`<pre
-      class="bg-gray-100 text-xs p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-x-auto font-mono"
+      class="bg-gray-100 dark:bg-gray-800 text-xs p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-x-auto font-mono text-gray-900 dark:text-gray-100"
     >
       ${coloredLines}
     </pre
@@ -285,7 +295,7 @@
     </span>`;
 
     const inputContent = html`<div
-      class="overflow-x-auto mb-1 font-mono px-2 py-1 bg-gray-200 rounded select-text cursor-text text-sm leading-relaxed"
+      class="overflow-x-auto mb-1 font-mono px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded select-text cursor-text text-sm leading-relaxed text-gray-900 dark:text-gray-100"
     >
       <div class="markdown-content">
         ${unsafeHTML(renderMarkdown(thoughts))}