diff --git a/webui/src/web-components/sketch-app-shell-base.ts b/webui/src/web-components/sketch-app-shell-base.ts
index 8e777eb..4b88f89 100644
--- a/webui/src/web-components/sketch-app-shell-base.ts
+++ b/webui/src/web-components/sketch-app-shell-base.ts
@@ -5,6 +5,7 @@
 import { AgentMessage, State, Usage } from "../types";
 import { aggregateAgentMessages } from "./aggregateAgentMessages";
 import { SketchTailwindElement } from "./sketch-tailwind-element";
+import { ThemeService } from "./theme-service";
 
 import "./sketch-chat-input";
 import "./sketch-container-status";
@@ -180,6 +181,9 @@
   connectedCallback() {
     super.connectedCallback();
 
+    // Initialize theme system
+    ThemeService.getInstance().initializeTheme();
+
     // Get reference to the container status element
     setTimeout(() => {
       this.containerStatusElement = this.querySelector("#container-status");
@@ -880,7 +884,7 @@
       <!-- Top banner: flex row, space between, border bottom, shadow -->
       <div
         id="top-banner"
-        class="flex self-stretch justify-between items-center px-5 pr-8 mb-0 border-b border-gray-200 gap-5 bg-white shadow-md w-full h-12"
+        class="flex self-stretch justify-between items-center px-5 pr-8 mb-0 border-b border-gray-200 dark:border-gray-700 gap-5 bg-white dark:bg-gray-800 shadow-md w-full h-12"
       >
         <!-- Title container -->
         <div
@@ -906,7 +910,7 @@
               : html`sketch`}
           </h1>
           <h2
-            class="m-0 p-0 text-gray-600 text-sm font-normal italic whitespace-nowrap overflow-hidden text-ellipsis"
+            class="m-0 p-0 text-gray-600 dark:text-gray-400 text-sm font-normal italic whitespace-nowrap overflow-hidden text-ellipsis"
           >
             ${this.slug}
           </h2>
@@ -1059,8 +1063,8 @@
       <div
         class="${this._todoPanelVisible && this.viewMode === "chat"
           ? "block"
-          : "hidden"} fixed top-12 right-4 max-lg:hidden xl:w-[350px] lg:w-[300px] z-[100] transition-[bottom] duration-200 ease-in-out"
-        style="bottom: var(--chat-input-height, 90px); background: linear-gradient(to bottom, #fafafa 0%, #fafafa 90%, rgba(250, 250, 250, 0.5) 95%, rgba(250, 250, 250, 0.2) 100%); border-left: 1px solid #e0e0e0;"
+          : "hidden"} fixed top-12 right-4 max-lg:hidden xl:w-[350px] lg:w-[300px] z-[100] transition-[bottom] duration-200 ease-in-out bg-gradient-to-b from-gray-50 to-gray-50/20 dark:from-gray-800 dark:to-gray-800/20 border-l border-gray-300 dark:border-gray-600"
+        style="bottom: var(--chat-input-height, 90px);"
       >
         <sketch-todo-panel
           .visible=${this._todoPanelVisible && this.viewMode === "chat"}
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index 9d0f2f6..facbba2 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -9,7 +9,7 @@
     return html`
       <!-- Main container: flex column, full height, system font, hidden overflow-x -->
       <div
-        class="block font-sans text-gray-800 leading-relaxed h-screen w-full relative overflow-x-hidden flex flex-col"
+        class="block font-sans text-gray-800 dark:text-gray-200 leading-relaxed h-screen w-full relative overflow-x-hidden flex flex-col bg-white dark:bg-gray-900"
       >
         ${this.renderTopBanner()}
 
diff --git a/webui/src/web-components/sketch-call-status.ts b/webui/src/web-components/sketch-call-status.ts
index d9e14b1..dbc5d57 100644
--- a/webui/src/web-components/sketch-call-status.ts
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -70,8 +70,8 @@
           <div
             class="llm-indicator flex justify-center items-center w-8 h-8 rounded transition-all duration-200 relative ${this
               .llmCalls > 0
-              ? "bg-yellow-100 text-amber-500 animate-gentle-pulse active"
-              : "bg-transparent text-gray-400"}"
+              ? "bg-yellow-100 dark:bg-yellow-900 text-amber-500 dark:text-amber-400 animate-gentle-pulse active"
+              : "bg-transparent text-gray-400 dark:text-gray-500"}"
             title="${this.llmCalls > 0
               ? `${this.llmCalls} LLM ${this.llmCalls === 1 ? "call" : "calls"} in progress`
               : "No LLM calls in progress"}${agentState}"
@@ -81,8 +81,8 @@
           <div
             class="tool-indicator flex justify-center items-center w-8 h-8 rounded transition-all duration-200 relative ${this
               .toolCalls.length > 0
-              ? "bg-blue-100 text-blue-500 animate-gentle-pulse active"
-              : "bg-transparent text-gray-400"}"
+              ? "bg-blue-100 dark:bg-blue-900 text-blue-500 dark:text-blue-400 animate-gentle-pulse active"
+              : "bg-transparent text-gray-400 dark:text-gray-500"}"
             title="${this.toolCalls.length > 0
               ? `${this.toolCalls.length} tool ${this.toolCalls.length === 1 ? "call" : "calls"} in progress: ${this.toolCalls.join(", ")}`
               : "No tool calls in progress"}${agentState}"
@@ -93,10 +93,10 @@
         <div
           class="status-banner absolute py-0.5 px-1.5 rounded text-xs font-bold text-center tracking-wider w-26 left-1/2 transform -translate-x-1/2 top-3/5 z-10 opacity-90 ${statusClass} ${this
             .isDisconnected
-            ? "bg-red-50 text-red-600"
+            ? "bg-red-50 dark:bg-red-900 text-red-600 dark:text-red-400"
             : !this.isIdle
-              ? "bg-orange-50 text-orange-600"
-              : "bg-green-50 text-green-700"}"
+              ? "bg-orange-50 dark:bg-orange-900 text-orange-600 dark:text-orange-400"
+              : "bg-green-50 dark:bg-green-900 text-green-700 dark:text-green-400"}"
           title="${this.isDisconnected
             ? "Connection lost or container shut down"
             : !this.isIdle
diff --git a/webui/src/web-components/sketch-chat-input.ts b/webui/src/web-components/sketch-chat-input.ts
index 6ccdb32..ae6ec86 100644
--- a/webui/src/web-components/sketch-chat-input.ts
+++ b/webui/src/web-components/sketch-chat-input.ts
@@ -300,7 +300,9 @@
 
   render() {
     return html`
-      <div class="chat-container w-full bg-gray-100 p-4 min-h-[40px] relative">
+      <div
+        class="chat-container w-full bg-gray-100 dark:bg-gray-800 p-4 min-h-[40px] relative"
+      >
         <div class="chat-input-wrapper flex max-w-6xl mx-auto gap-2.5">
           <textarea
             id="chatInput"
@@ -309,13 +311,13 @@
             @keydown="${this._chatInputKeyDown}"
             @input="${this._chatInputChanged}"
             .value=${this.content || ""}
-            class="flex-1 p-3 border border-gray-300 rounded resize-y font-mono text-xs min-h-[40px] max-h-[300px] bg-gray-50 overflow-y-auto box-border leading-relaxed"
+            class="flex-1 p-3 border border-gray-300 dark:border-gray-600 rounded resize-y font-mono text-xs min-h-[40px] max-h-[300px] bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 overflow-y-auto box-border leading-relaxed"
           ></textarea>
           <button
             @click="${this._sendChatClicked}"
             id="sendChatButton"
             ?disabled=${this.uploadsInProgress > 0}
-            class="bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed text-white border-none rounded px-5 cursor-pointer font-semibold self-center h-10"
+            class="bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed text-white border-none rounded px-5 cursor-pointer font-semibold self-center h-10"
           >
             ${this.uploadsInProgress > 0 ? "Uploading..." : "Send"}
           </button>
@@ -326,7 +328,7 @@
                 class="drop-zone-overlay absolute inset-0 bg-blue-500/10 border-2 border-dashed border-blue-500 rounded flex justify-center items-center z-10 pointer-events-none"
               >
                 <div
-                  class="drop-zone-message bg-white p-4 rounded font-semibold shadow-lg"
+                  class="drop-zone-message bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-4 rounded font-semibold shadow-lg"
                 >
                   Drop files here
                 </div>
@@ -336,7 +338,7 @@
         ${this.showUploadInProgressMessage
           ? html`
               <div
-                class="upload-progress-message absolute bottom-[70px] left-1/2 transform -translate-x-1/2 bg-yellow-50 border border-yellow-400 z-20 text-sm px-5 py-4 rounded font-semibold shadow-lg animate-fade-in"
+                class="upload-progress-message absolute bottom-[70px] left-1/2 transform -translate-x-1/2 bg-yellow-50 dark:bg-yellow-900 border border-yellow-400 dark:border-yellow-600 text-yellow-900 dark:text-yellow-100 z-20 text-sm px-5 py-4 rounded font-semibold shadow-lg animate-fade-in"
               >
                 Please wait for file upload to complete before sending
               </div>
diff --git a/webui/src/web-components/sketch-container-status.ts b/webui/src/web-components/sketch-container-status.ts
index bd9524b..b7b0602 100644
--- a/webui/src/web-components/sketch-container-status.ts
+++ b/webui/src/web-components/sketch-container-status.ts
@@ -380,10 +380,12 @@
 
     if (!this.state?.ssh_available) {
       return html`
-        <div class="mt-2.5 pt-2.5 border-t border-gray-300">
+        <div
+          class="mt-2.5 pt-2.5 border-t border-gray-300 dark:border-gray-600"
+        >
           <h3>Connect to Container</h3>
           <div
-            class="bg-orange-50 border-l-4 border-orange-500 p-3 mt-2 text-xs text-orange-800"
+            class="bg-orange-50 dark:bg-orange-900 border-l-4 border-orange-500 dark:border-orange-400 p-3 mt-2 text-xs text-orange-800 dark:text-orange-200"
           >
             SSH connections are not available:
             ${this.state?.ssh_error || "SSH configuration is missing"}
@@ -393,16 +395,16 @@
     }
 
     return html`
-      <div class="mt-2.5 pt-2.5 border-t border-gray-300">
+      <div class="mt-2.5 pt-2.5 border-t border-gray-300 dark:border-gray-600">
         <h3>Connect to Container</h3>
         <div class="flex items-center mb-2 gap-2.5">
           <div
-            class="font-mono text-xs bg-gray-100 px-2 py-1 rounded border border-gray-300 flex-grow"
+            class="font-mono text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 flex-grow"
           >
             ${sshCommand}
           </div>
           <button
-            class="bg-gray-100 border border-gray-300 rounded px-1.5 py-0.5 text-xs cursor-pointer transition-colors hover:bg-gray-200"
+            class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-1.5 py-0.5 text-xs text-gray-900 dark:text-gray-100 cursor-pointer transition-colors hover:bg-gray-200 dark:hover:bg-gray-600"
             @click=${() => this.copyToClipboard(sshCommand)}
           >
             Copy
@@ -410,12 +412,12 @@
         </div>
         <div class="flex items-center mb-2 gap-2.5">
           <div
-            class="font-mono text-xs bg-gray-100 px-2 py-1 rounded border border-gray-300 flex-grow"
+            class="font-mono text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 flex-grow"
           >
             ${vscodeCommand}
           </div>
           <button
-            class="bg-gray-100 border border-gray-300 rounded px-1.5 py-0.5 text-xs cursor-pointer transition-colors hover:bg-gray-200"
+            class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-1.5 py-0.5 text-xs text-gray-900 dark:text-gray-100 cursor-pointer transition-colors hover:bg-gray-200 dark:hover:bg-gray-600"
             @click=${() => this.copyToClipboard(vscodeCommand)}
           >
             Copy
@@ -654,10 +656,10 @@
           class="info-toggle ml-2 w-6 h-6 rounded-full flex items-center justify-center ${this
             .showDetails
             ? "bg-blue-500 text-white border-blue-600"
-            : "bg-gray-100 text-gray-600 border-gray-300"} border cursor-pointer font-bold italic transition-all hover:${this
+            : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600"} border cursor-pointer font-bold italic transition-all hover:${this
             .showDetails
             ? "bg-blue-600"
-            : "bg-gray-200"}"
+            : "bg-gray-200 dark:bg-gray-600"}"
           @click=${this._toggleInfoDetails}
           title="Show/hide details"
         >
@@ -668,7 +670,7 @@
         <div
           class="${this.showDetails
             ? "block"
-            : "hidden"} absolute min-w-max top-full z-100 bg-white rounded-lg p-4 shadow-lg mt-1.5"
+            : "hidden"} absolute min-w-max top-full z-100 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-4 shadow-lg mt-1.5"
           style="left: 50%; transform: translateX(-50%);"
         >
           <!-- Last Commit section moved to main grid -->
@@ -678,34 +680,46 @@
             style="grid-template-columns: auto auto"
           >
             <div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
-              <span class="text-xs text-gray-600 mr-1 font-medium"
+              <span
+                class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
                 >Commit:</span
               >
-              <span id="initialCommit" class="text-xs font-semibold break-all"
+              <span
+                id="initialCommit"
+                class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
                 >${this.state?.initial_commit?.substring(0, 8)}</span
               >
             </div>
             <div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
-              <span class="text-xs text-gray-600 mr-1 font-medium">Msgs:</span>
-              <span id="messageCount" class="text-xs font-semibold break-all"
+              <span
+                class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
+                >Msgs:</span
+              >
+              <span
+                id="messageCount"
+                class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
                 >${this.state?.message_count}</span
               >
             </div>
             <div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
-              <span class="text-xs text-gray-600 mr-1 font-medium"
+              <span
+                class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
                 >Session ID:</span
               >
-              <span id="sessionId" class="text-xs font-semibold break-all"
+              <span
+                id="sessionId"
+                class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
                 >${this.state?.session_id || "N/A"}</span
               >
             </div>
             <div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
-              <span class="text-xs text-gray-600 mr-1 font-medium"
+              <span
+                class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
                 >Hostname:</span
               >
               <span
                 id="hostnameDetail"
-                class="text-xs font-semibold break-all cursor-default"
+                class="text-xs font-semibold break-all cursor-default text-gray-900 dark:text-gray-100"
                 title="${this.getHostnameTooltip()}"
               >
                 ${this.formatHostname()}
@@ -716,22 +730,26 @@
                   <div
                     class="flex items-center whitespace-nowrap mr-2.5 text-xs"
                   >
-                    <span class="text-xs text-gray-600 mr-1 font-medium"
+                    <span
+                      class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
                       >Agent State:</span
                     >
                     <span
                       id="agentState"
-                      class="text-xs font-semibold break-all"
+                      class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
                       >${this.state?.agent_state}</span
                     >
                   </div>
                 `
               : ""}
             <div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
-              <span class="text-xs text-gray-600 mr-1 font-medium"
+              <span
+                class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
                 >Input tokens:</span
               >
-              <span id="inputTokens" class="text-xs font-semibold break-all"
+              <span
+                id="inputTokens"
+                class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
                 >${formatNumber(
                   (this.state?.total_usage?.input_tokens || 0) +
                     (this.state?.total_usage?.cache_read_input_tokens || 0) +
@@ -740,10 +758,13 @@
               >
             </div>
             <div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
-              <span class="text-xs text-gray-600 mr-1 font-medium"
+              <span
+                class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
                 >Context Window:</span
               >
-              <span id="contextWindow" class="text-xs font-semibold break-all"
+              <span
+                id="contextWindow"
+                class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
                 >${formatNumber(
                   (this.latestUsage?.input_tokens || 0) +
                     (this.latestUsage?.cache_read_input_tokens || 0) +
@@ -752,10 +773,13 @@
               >
             </div>
             <div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
-              <span class="text-xs text-gray-600 mr-1 font-medium"
+              <span
+                class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
                 >Output tokens:</span
               >
-              <span id="outputTokens" class="text-xs font-semibold break-all"
+              <span
+                id="outputTokens"
+                class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
                 >${formatNumber(this.state?.total_usage?.output_tokens)}</span
               >
             </div>
@@ -764,10 +788,13 @@
                   <div
                     class="flex items-center whitespace-nowrap mr-2.5 text-xs"
                   >
-                    <span class="text-xs text-gray-600 mr-1 font-medium"
+                    <span
+                      class="text-xs text-gray-600 dark:text-gray-400 mr-1 font-medium"
                       >Total cost:</span
                     >
-                    <span id="totalCost" class="text-xs font-semibold break-all"
+                    <span
+                      id="totalCost"
+                      class="text-xs font-semibold break-all text-gray-900 dark:text-gray-100"
                       >$${(
                         this.state?.total_usage?.total_cost_usd ?? 0
                       ).toFixed(2)}</span
@@ -776,7 +803,7 @@
                 `
               : ""}
             <div
-              class="flex items-center whitespace-nowrap mr-2.5 text-xs col-span-full mt-1.5 border-t border-gray-300 pt-1.5"
+              class="flex items-center whitespace-nowrap mr-2.5 text-xs col-span-full mt-1.5 border-t border-gray-300 dark:border-gray-600 pt-1.5"
             >
               <a href="logs" class="text-blue-600">Logs</a> (<a
                 href="download"
diff --git a/webui/src/web-components/sketch-diff-range-picker.ts b/webui/src/web-components/sketch-diff-range-picker.ts
index 5c51de4..0e20636 100644
--- a/webui/src/web-components/sketch-diff-range-picker.ts
+++ b/webui/src/web-components/sketch-diff-range-picker.ts
@@ -104,12 +104,16 @@
 
   render() {
     return html`
-      <div class="block w-full font-system text-gray-800">
+      <div class="block w-full font-system text-gray-800 dark:text-gray-200">
         <div class="flex flex-col gap-3 w-full">
           ${this.loading
-            ? html`<div class="italic text-gray-500">Loading commits...</div>`
+            ? html`<div class="italic text-gray-500 dark:text-gray-400">
+                Loading commits...
+              </div>`
             : this.error
-              ? html`<div class="text-red-600 text-sm">${this.error}</div>`
+              ? html`<div class="text-red-600 dark:text-red-400 text-sm">
+                  ${this.error}
+                </div>`
               : this.renderRangePicker()}
         </div>
       </div>
@@ -134,7 +138,9 @@
 
     return html`
       <div class="flex items-center gap-2 flex-1 relative">
-        <label for="fromCommit" class="font-medium text-sm text-gray-700"
+        <label
+          for="fromCommit"
+          class="font-medium text-sm text-gray-700 dark:text-gray-300"
           >Diff from:</label
         >
         <div
@@ -142,9 +148,9 @@
           @click=${this.toggleDropdown}
         >
           <button
-            class="w-full py-2 px-3 pr-8 border rounded text-left min-h-[36px] text-sm relative cursor-pointer bg-white ${isDefaultCommit
-              ? "border-blue-500 bg-blue-50"
-              : "border-gray-300 hover:border-gray-400"} focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+            class="w-full py-2 px-3 pr-8 border rounded text-left min-h-[36px] text-sm relative cursor-pointer bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${isDefaultCommit
+              ? "border-blue-500 bg-blue-50 dark:bg-blue-900/30"
+              : "border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500"} focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800"
             @click=${this.toggleDropdown}
             @blur=${this.handleBlur}
           >
@@ -168,16 +174,16 @@
           ${this.dropdownOpen
             ? html`
                 <div
-                  class="absolute top-full left-0 right-0 bg-white border border-gray-300 rounded shadow-lg z-50 max-h-[300px] overflow-y-auto mt-0.5"
+                  class="absolute top-full left-0 right-0 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded shadow-lg z-50 max-h-[300px] overflow-y-auto mt-0.5"
                 >
                   ${this.commits.map(
                     (commit) => html`
                       <div
-                        class="px-3 py-2.5 cursor-pointer border-b border-gray-100 last:border-b-0 flex items-start gap-2 text-sm leading-5 hover:bg-gray-50 ${commit.hash ===
+                        class="px-3 py-2.5 cursor-pointer border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-start gap-2 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-700 ${commit.hash ===
                         this.fromCommit
-                          ? "bg-blue-50"
+                          ? "bg-blue-50 dark:bg-blue-900/30"
                           : ""} ${this.isSketchBaseCommit(commit)
-                          ? "bg-blue-50 border-l-4 border-l-blue-500 pl-2"
+                          ? "bg-blue-50 dark:bg-blue-900/30 border-l-4 border-l-blue-500 pl-2"
                           : ""}"
                         @click=${() => this.selectCommit(commit.hash)}
                       >
@@ -362,8 +368,12 @@
     }
 
     return html`
-      <span class="font-mono text-gray-600 text-xs">${shortHash}</span>
-      <span class="text-gray-800 text-xs truncate">${subject}</span>
+      <span class="font-mono text-gray-600 dark:text-gray-400 text-xs"
+        >${shortHash}</span
+      >
+      <span class="text-gray-800 dark:text-gray-200 text-xs truncate"
+        >${subject}</span
+      >
       ${this.isSketchBaseCommit(commit)
         ? html`
             <span
@@ -386,8 +396,11 @@
     }
 
     return html`
-      <span class="font-mono text-gray-600 text-xs">${shortHash}</span>
-      <span class="text-gray-800 text-xs flex-1 truncate min-w-[200px]"
+      <span class="font-mono text-gray-600 dark:text-gray-400 text-xs"
+        >${shortHash}</span
+      >
+      <span
+        class="text-gray-800 dark:text-gray-200 text-xs flex-1 truncate min-w-[200px]"
         >${subject}</span
       >
       ${commit.refs && commit.refs.length > 0
@@ -412,8 +425,8 @@
           const refClass = isSketchBase
             ? "bg-blue-600 text-white font-semibold"
             : ref.includes("tag")
-              ? "bg-amber-100 text-amber-800"
-              : "bg-green-100 text-green-800";
+              ? "bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-200"
+              : "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200";
           return html`<span
             class="px-1.5 py-0.5 rounded-full text-xs font-medium ${refClass}"
             >${shortRef}</span
diff --git a/webui/src/web-components/sketch-push-button.ts b/webui/src/web-components/sketch-push-button.ts
index c6e2ad7..e13049b 100644
--- a/webui/src/web-components/sketch-push-button.ts
+++ b/webui/src/web-components/sketch-push-button.ts
@@ -177,7 +177,7 @@
       // Clean up URL (remove trailing punctuation)
       const cleanURL = match.replace(/[.,!?;]+$/, "");
       const trailingPunctuation = match.substring(cleanURL.length);
-      return `<a href="${cleanURL}" target="_blank" class="text-blue-600 hover:text-blue-800 underline">${cleanURL}</a>${trailingPunctuation}`;
+      return `<a href="${cleanURL}" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline">${cleanURL}</a>${trailingPunctuation}`;
     });
   }
 
@@ -206,8 +206,13 @@
       }
       return html`
         <div class="mb-3">
-          <label class="block text-xs font-medium mb-1">Remote:</label>
-          <div class="p-2 bg-gray-50 rounded text-xs text-gray-700">
+          <label
+            class="block text-xs font-medium mb-1 text-gray-900 dark:text-gray-100"
+            >Remote:</label
+          >
+          <div
+            class="p-2 bg-gray-50 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300"
+          >
             ${this._renderRemoteDisplay(remote)}
           </div>
         </div>
@@ -218,7 +223,10 @@
       // Two remotes - use radio buttons
       return html`
         <div class="mb-3">
-          <label class="block text-xs font-medium mb-1">Remote:</label>
+          <label
+            class="block text-xs font-medium mb-1 text-gray-900 dark:text-gray-100"
+            >Remote:</label
+          >
           <div class="space-y-2">
             ${this._remotes.map(
               (remote) => html`
@@ -234,9 +242,9 @@
                         e.target as HTMLInputElement
                       ).value;
                     }}
-                    class="text-blue-600 focus:ring-blue-500"
+                    class="text-blue-600 focus:ring-blue-500 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600"
                   />
-                  <span class="text-xs text-gray-700"
+                  <span class="text-xs text-gray-700 dark:text-gray-300"
                     >${this._renderRemoteDisplay(remote)}</span
                   >
                 </label>
@@ -250,14 +258,17 @@
     // Three or more remotes - use dropdown
     return html`
       <div class="mb-3">
-        <label class="block text-xs font-medium mb-1">Remote:</label>
+        <label
+          class="block text-xs font-medium mb-1 text-gray-900 dark:text-gray-100"
+          >Remote:</label
+        >
         <select
           .value=${this._selectedRemote}
           ?disabled=${this._loading}
           @change=${(e: Event) => {
             this._selectedRemote = (e.target as HTMLSelectElement).value;
           }}
-          class="w-full p-2 border border-gray-300 rounded text-xs focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded text-xs bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
         >
           <option value="">Select a remote...</option>
           ${this._remotes.map(
@@ -300,14 +311,16 @@
         <div
           class="${this._modalOpen
             ? "block"
-            : "hidden"} absolute top-full z-50 bg-white rounded-lg p-4 shadow-lg mt-1.5 border border-gray-200"
+            : "hidden"} absolute top-full z-50 bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg mt-1.5 border border-gray-200 dark:border-gray-600"
           style="width: 420px; left: 50%; transform: translateX(-50%);"
         >
           <div class="flex justify-between items-center mb-3">
-            <h3 class="text-sm font-semibold">Push to Remote</h3>
+            <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+              Push to Remote
+            </h3>
             <button
               @click=${this._closeModal}
-              class="text-gray-500 hover:text-gray-700 transition-colors"
+              class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
             >
               <svg
                 class="w-4 h-4"
@@ -327,19 +340,22 @@
                   <div
                     class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto"
                   ></div>
-                  <p class="mt-2 text-gray-600 text-xs">Loading...</p>
+                  <p class="mt-2 text-gray-600 dark:text-gray-400 text-xs">
+                    Loading...
+                  </p>
                 </div>
               `
             : html`
                 <!-- Current HEAD info -->
                 ${this._headCommit
                   ? html`
-                      <div class="mb-3 p-2 bg-gray-50 rounded">
+                      <div class="mb-3 p-2 bg-gray-50 dark:bg-gray-700 rounded">
                         <p class="text-xs">
-                          <span class="text-gray-600 font-mono"
+                          <span
+                            class="text-gray-600 dark:text-gray-400 font-mono"
                             >${this._headCommit.hash.substring(0, 7)}</span
                           >
-                          <span class="text-gray-800 ml-2"
+                          <span class="text-gray-800 dark:text-gray-200 ml-2"
                             >${this._headCommit.subject}</span
                           >
                         </p>
@@ -352,7 +368,10 @@
 
                 <!-- Branch input -->
                 <div class="mb-3">
-                  <label class="block text-xs font-medium mb-1">Branch:</label>
+                  <label
+                    class="block text-xs font-medium mb-1 text-gray-900 dark:text-gray-100"
+                    >Branch:</label
+                  >
                   <input
                     type="text"
                     .value=${this._branch}
@@ -361,7 +380,7 @@
                       this._branch = (e.target as HTMLInputElement).value;
                     }}
                     placeholder="Enter branch name..."
-                    class="w-full p-2 border border-gray-300 rounded text-xs focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded text-xs bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                   />
                 </div>
 
@@ -408,16 +427,16 @@
                   ? html`
                       <div
                         class="p-3 rounded ${this._pushResult.success
-                          ? "bg-green-50 border border-green-200"
-                          : "bg-red-50 border border-red-200"} relative"
+                          ? "bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800"
+                          : "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800"} relative"
                       >
                         ${this._loading
                           ? html`
                               <div
-                                class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center rounded"
+                                class="absolute inset-0 bg-white dark:bg-gray-800 bg-opacity-75 dark:bg-opacity-75 flex items-center justify-center rounded"
                               >
                                 <div
-                                  class="flex items-center text-xs text-gray-600"
+                                  class="flex items-center text-xs text-gray-600 dark:text-gray-400"
                                 >
                                   <div
                                     class="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-600 mr-2"
@@ -432,8 +451,8 @@
                           <p
                             class="text-xs font-medium ${this._pushResult
                               .success
-                              ? "text-green-800"
-                              : "text-red-800"}"
+                              ? "text-green-800 dark:text-green-400"
+                              : "text-red-800 dark:text-red-400"}"
                           >
                             ${this._pushResult.dry_run ? "Dry Run" : "Push"}
                             ${this._pushResult.success
@@ -449,7 +468,7 @@
                                       <a
                                         href="${branchURL}"
                                         target="_blank"
-                                        class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-900 hover:bg-gray-800 text-white rounded transition-colors"
+                                        class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-900 dark:bg-gray-700 hover:bg-gray-800 dark:hover:bg-gray-600 text-white rounded transition-colors"
                                       >
                                         <svg
                                           class="w-3 h-3"
@@ -470,7 +489,7 @@
                         ${this._pushResult.output
                           ? html`
                               <pre
-                                class="text-xs text-gray-700 whitespace-pre-wrap font-mono mb-2 break-words"
+                                class="text-xs text-gray-700 dark:text-gray-300 whitespace-pre-wrap font-mono mb-2 break-words"
                                 .innerHTML="${this._makeLinksClickable(
                                   this._pushResult.output,
                                 )}"
@@ -479,7 +498,9 @@
                           : ""}
                         ${this._pushResult.error
                           ? html`
-                              <p class="text-xs text-red-700 mb-2">
+                              <p
+                                class="text-xs text-red-700 dark:text-red-400 mb-2"
+                              >
                                 ${this._pushResult.error}
                               </p>
                             `
diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index a45ed5c..7ea378d 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -403,6 +403,40 @@
     text-align: center;
   }
 
+  /* Dark mode styles */
+  .dark .markdown-content pre,
+  .dark .markdown-content code {
+    background: rgba(255, 255, 255, 0.1);
+    color: #e5e7eb;
+  }
+
+  .dark .markdown-content blockquote {
+    border-left: 3px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .dark .markdown-content hr {
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .dark .code-block-container {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .dark .code-block-header {
+    background: rgba(255, 255, 255, 0.15);
+    color: #e5e7eb;
+  }
+
+  .dark .code-copy-button:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .dark .mermaid-container {
+    background-color: #374151;
+    border: 1px solid #4b5563;
+  }
+
   /* Print styles */
   @media print {
     .floating-message,
@@ -899,7 +933,7 @@
       this.message?.type === "user"
         ? "bg-blue-500 text-white rounded-br-sm"
         : // Agent/tool/error message styling
-          "bg-gray-100 text-black rounded-bl-sm",
+          "bg-gray-100 dark:bg-gray-800 text-black dark:text-gray-100 rounded-bl-sm",
     ]
       .filter(Boolean)
       .join(" ");
@@ -911,7 +945,7 @@
           <div
             class="${this.compactPadding
               ? "hidden"
-              : "flex-none w-20 px-1 py-0.5 text-right text-xs text-gray-500 self-start"}"
+              : "flex-none w-20 px-1 py-0.5 text-right text-xs text-gray-500 dark:text-gray-400 self-start"}"
           ></div>
 
           <!-- Message bubble -->
@@ -935,7 +969,7 @@
                     class="bg-transparent border-none ${this.message?.type ===
                     "user"
                       ? "text-white/80 hover:bg-white/15"
-                      : "text-black/60 hover:bg-black/8"} cursor-pointer p-0.5 rounded-full flex items-center justify-center w-6 h-6 transition-all duration-150"
+                      : "text-black/60 dark:text-gray-400 hover:bg-black/8 dark:hover:bg-white/10"} cursor-pointer p-0.5 rounded-full flex items-center justify-center w-6 h-6 transition-all duration-150"
                     title="Show message details"
                     @click=${this._toggleInfo}
                   >
@@ -977,7 +1011,7 @@
                       <div
                         class="block text-xs ${this.message?.type === "user"
                           ? "text-white/70"
-                          : "text-gray-500"} py-0.5 mt-2 text-right italic"
+                          : "text-gray-500 dark:text-gray-400"} py-0.5 mt-2 text-right italic"
                       >
                         end of turn
                         (${this._formatDuration(this.message?.elapsed)})
@@ -991,7 +1025,7 @@
                       <div
                         class="mt-2 p-2 ${this.message?.type === "user"
                           ? "bg-white/15 border-l-2 border-white/20"
-                          : "bg-black/5 border-l-2 border-black/10"} rounded-md text-xs transition-all duration-200"
+                          : "bg-black/5 dark:bg-white/5 border-l-2 border-black/10 dark:border-white/20"} rounded-md text-xs transition-all duration-200"
                       >
                         <div class="mb-1 flex">
                           <span class="font-bold mr-1 min-w-[60px]">Type:</span>
@@ -1116,7 +1150,7 @@
                       ${this.message.commits.map((commit) => {
                         return html`
                           <div
-                            class="text-sm bg-gray-100 rounded-lg overflow-hidden mb-1.5 shadow-sm p-1.5 px-2 flex items-center gap-2"
+                            class="text-sm bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden mb-1.5 shadow-sm p-1.5 px-2 flex items-center gap-2"
                           >
                             <span
                               class="text-blue-600 font-bold font-mono cursor-pointer no-underline bg-blue-600/10 py-0.5 px-1 rounded hover:bg-blue-600/20"
@@ -1187,7 +1221,7 @@
                                               href="${githubLink}"
                                               target="_blank"
                                               rel="noopener noreferrer"
-                                              class="text-gray-600 no-underline flex items-center transition-colors duration-200 hover:text-blue-600"
+                                              class="text-gray-600 dark:text-gray-400 no-underline flex items-center transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-400"
                                               title="Open ${commit.pushed_branch} on GitHub"
                                               @click=${(e) =>
                                                 e.stopPropagation()}
@@ -1211,7 +1245,7 @@
                                 })()
                               : ``}
                             <span
-                              class="text-sm text-gray-700 flex-grow truncate"
+                              class="text-sm text-gray-700 dark:text-gray-300 flex-grow truncate"
                             >
                               ${commit.subject}
                             </span>
@@ -1234,7 +1268,7 @@
           <div
             class="${this.compactPadding
               ? "hidden"
-              : "flex-none w-20 px-1 py-0.5 text-left text-xs text-gray-500 self-start"}"
+              : "flex-none w-20 px-1 py-0.5 text-left text-xs text-gray-500 dark:text-gray-400 self-start"}"
           ></div>
         </div>
 
@@ -1246,7 +1280,9 @@
                   ? ""
                   : "pr-20"}"
               >
-                <div class="text-xs text-gray-600 italic text-right">
+                <div
+                  class="text-xs text-gray-600 dark:text-gray-400 italic text-right"
+                >
                   ${this.state?.link_to_github
                     ? html`@<a
                           class="no-underline hover:underline"
diff --git a/webui/src/web-components/sketch-todo-panel.ts b/webui/src/web-components/sketch-todo-panel.ts
index e76de46..c752b5a 100644
--- a/webui/src/web-components/sketch-todo-panel.ts
+++ b/webui/src/web-components/sketch-todo-panel.ts
@@ -56,12 +56,14 @@
 
     return html`
       <div
-        class="flex items-start p-2 mb-1.5 rounded bg-white border border-gray-300 gap-2 min-h-6 border-l-[3px] border-l-gray-300"
+        class="flex items-start p-2 mb-1.5 rounded bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 gap-2 min-h-6 border-l-[3px] border-l-gray-300 dark:border-l-gray-600"
       >
         <div class="text-sm mt-0.5 flex-shrink-0">${statusIcon}</div>
         <div class="flex items-start justify-between w-full min-h-5">
           <div class="flex-1 min-w-0 pr-2">
-            <div class="text-xs leading-snug text-gray-800 break-words">
+            <div
+              class="text-xs leading-snug text-gray-800 dark:text-gray-200 break-words"
+            >
               ${item.task}
             </div>
           </div>
@@ -69,7 +71,7 @@
             ${showCommentButton
               ? html`
                   <button
-                    class="bg-transparent border-none cursor-pointer text-sm p-0.5 text-gray-500 opacity-70 transition-opacity duration-200 w-5 h-5 flex items-center justify-center hover:opacity-100 hover:bg-black/5 hover:bg-opacity-5 hover:rounded-sm"
+                    class="bg-transparent border-none cursor-pointer text-sm p-0.5 text-gray-500 dark:text-gray-400 opacity-70 transition-opacity duration-200 w-5 h-5 flex items-center justify-center hover:opacity-100 hover:bg-black/5 dark:hover:bg-white/10 hover:bg-opacity-5 hover:rounded-sm"
                     @click="${() => this.openCommentBox(item)}"
                     title="Add comment about this TODO item"
                   >
@@ -90,7 +92,7 @@
 
     const todoIcon = html`
       <svg
-        class="w-3.5 h-3.5 text-gray-500"
+        class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
         fill="none"
@@ -108,10 +110,10 @@
     if (this.loading) {
       contentElement = html`
         <div
-          class="flex-1 overflow-y-auto p-2 pb-5 text-xs leading-relaxed min-h-0 flex items-center justify-center text-gray-500"
+          class="flex-1 overflow-y-auto p-2 pb-5 text-xs leading-relaxed min-h-0 flex items-center justify-center text-gray-500 dark:text-gray-400"
         >
           <div
-            class="w-5 h-5 border-2 border-gray-200 border-t-blue-500 rounded-full animate-spin mr-2"
+            class="w-5 h-5 border-2 border-gray-200 dark:border-gray-600 border-t-blue-500 rounded-full animate-spin mr-2"
           ></div>
           Loading todos...
         </div>
@@ -119,7 +121,7 @@
     } else if (this.error) {
       contentElement = html`
         <div
-          class="flex-1 overflow-y-auto p-2 pb-5 text-xs leading-relaxed min-h-0 text-red-600 flex items-center justify-center"
+          class="flex-1 overflow-y-auto p-2 pb-5 text-xs leading-relaxed min-h-0 text-red-600 dark:text-red-400 flex items-center justify-center"
         >
           Error: ${this.error}
         </div>
@@ -131,7 +133,7 @@
     ) {
       contentElement = html`
         <div
-          class="flex-1 overflow-y-auto p-2 pb-5 text-xs leading-relaxed min-h-0 text-gray-400 italic flex items-center justify-center"
+          class="flex-1 overflow-y-auto p-2 pb-5 text-xs leading-relaxed min-h-0 text-gray-400 dark:text-gray-500 italic flex items-center justify-center"
         >
           No todos available
         </div>
@@ -147,13 +149,13 @@
 
       contentElement = html`
         <div
-          class="py-2 px-3 border-b border-gray-300 bg-gray-100 font-semibold text-xs text-gray-800 flex items-center gap-1.5"
+          class="py-2 px-3 border-b border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 font-semibold text-xs text-gray-800 dark:text-gray-200 flex items-center gap-1.5"
         >
           <div class="flex items-center gap-1.5">
             ${todoIcon}
             <span>Sketching...</span>
             <span
-              class="bg-gray-300 text-gray-500 px-1.5 py-0.5 rounded-full text-xs font-normal"
+              class="bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 px-1.5 py-0.5 rounded-full text-xs font-normal"
               >${completedCount}/${totalCount}</span
             >
           </div>
@@ -199,17 +201,21 @@
         }
       </style>
       <div
-        class="fixed inset-0 bg-black/30 z-[10000] flex items-center justify-center animate-fade-in"
+        class="fixed inset-0 bg-black/30 dark:bg-black/50 z-[10000] flex items-center justify-center animate-fade-in"
         @click="${this.handleOverlayClick}"
       >
         <div
-          class="bg-white border border-gray-300 rounded-md shadow-lg p-4 w-96 max-w-[90vw] max-h-[80vh] overflow-y-auto"
+          class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg p-4 w-96 max-w-[90vw] max-h-[80vh] overflow-y-auto"
           @click="${this.stopPropagation}"
         >
           <div class="flex justify-between items-center mb-3">
-            <h3 class="m-0 text-sm font-medium">Comment on TODO Item</h3>
+            <h3
+              class="m-0 text-sm font-medium text-gray-900 dark:text-gray-100"
+            >
+              Comment on TODO Item
+            </h3>
             <button
-              class="bg-transparent border-none cursor-pointer text-lg text-gray-500 px-1.5 py-0.5 hover:text-gray-800"
+              class="bg-transparent border-none cursor-pointer text-lg text-gray-500 dark:text-gray-400 px-1.5 py-0.5 hover:text-gray-800 dark:hover:text-gray-200"
               @click="${this.closeCommentBox}"
             >
               ×
@@ -217,16 +223,18 @@
           </div>
 
           <div
-            class="bg-gray-50 border border-gray-200 rounded p-2 mb-3 text-xs"
+            class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded p-2 mb-3 text-xs"
           >
-            <div class="font-medium text-gray-500 mb-1">
+            <div class="font-medium text-gray-500 dark:text-gray-400 mb-1">
               Status: ${statusText}
             </div>
-            <div class="text-gray-800">${this.commentingItem.task}</div>
+            <div class="text-gray-800 dark:text-gray-200">
+              ${this.commentingItem.task}
+            </div>
           </div>
 
           <textarea
-            class="w-full min-h-20 p-2 border border-gray-300 rounded resize-y text-xs mb-3 box-border"
+            class="w-full min-h-20 p-2 border border-gray-300 dark:border-gray-600 rounded resize-y text-xs mb-3 box-border bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
             placeholder="Type your comment about this TODO item..."
             .value="${this.commentText}"
             @input="${this.handleCommentInput}"
@@ -234,7 +242,7 @@
 
           <div class="flex justify-end gap-2">
             <button
-              class="px-3 py-1.5 rounded cursor-pointer text-xs bg-transparent border border-gray-300 text-gray-500 hover:bg-gray-100"
+              class="px-3 py-1.5 rounded cursor-pointer text-xs bg-transparent border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
               @click="${this.closeCommentBox}"
             >
               Cancel
diff --git a/webui/src/web-components/sketch-view-mode-select.ts b/webui/src/web-components/sketch-view-mode-select.ts
index 0264f87..8498f55 100644
--- a/webui/src/web-components/sketch-view-mode-select.ts
+++ b/webui/src/web-components/sketch-view-mode-select.ts
@@ -74,14 +74,14 @@
   render() {
     return html`
       <div
-        class="flex mr-2.5 bg-gray-100 rounded border border-gray-300 overflow-hidden"
+        class="flex mr-2.5 bg-gray-100 dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-600 overflow-hidden"
       >
         <button
           id="showConversationButton"
-          class="px-3 py-2 bg-none border-0 border-b-2 cursor-pointer text-xs flex items-center gap-1.5 text-gray-600 border-transparent transition-all whitespace-nowrap ${this
+          class="px-3 py-2 bg-none border-0 border-b-2 cursor-pointer text-xs flex items-center gap-1.5 text-gray-600 dark:text-gray-400 border-transparent transition-all whitespace-nowrap ${this
             .activeMode === "chat"
-            ? "!border-b-blue-600 text-blue-600 font-medium bg-blue-50"
-            : "hover:bg-gray-200"} @xl:px-3 @xl:py-2 @max-xl:px-2.5 @max-xl:[&>span:not(.tab-icon):not(.diff-stats)]:hidden @max-xl:[&>.diff-stats]:inline @max-xl:[&>.diff-stats]:text-xs @max-xl:[&>.diff-stats]:ml-0.5 border-r border-gray-200 last-of-type:border-r-0"
+            ? "border-b-blue-600 dark:border-b-gray-500 text-blue-600 font-medium bg-blue-50 dark:bg-gray-700"
+            : "hover:bg-gray-200 dark:hover:bg-gray-700"} @xl:px-3 @xl:py-2 @max-xl:px-2.5 @max-xl:[&>span:not(.tab-icon):not(.diff-stats)]:hidden @max-xl:[&>.diff-stats]:inline @max-xl:[&>.diff-stats]:text-xs @max-xl:[&>.diff-stats]:ml-0.5 border-r border-gray-200 dark:border-gray-600 last-of-type:border-r-0"
           title="Conversation View"
           @click=${() => this._handleViewModeClick("chat")}
         >
@@ -90,10 +90,10 @@
         </button>
         <button
           id="showDiff2Button"
-          class="px-3 py-2 bg-none border-0 border-b-2 cursor-pointer text-xs flex items-center gap-1.5 text-gray-600 border-transparent transition-all whitespace-nowrap ${this
+          class="px-3 py-2 bg-none border-0 border-b-2 cursor-pointer text-xs flex items-center gap-1.5 text-gray-600 dark:text-gray-400 border-transparent transition-all whitespace-nowrap ${this
             .activeMode === "diff2"
-            ? "!border-b-blue-600 text-blue-600 font-medium bg-blue-50"
-            : "hover:bg-gray-200"} @xl:px-3 @xl:py-2 @max-xl:px-2.5 @max-xl:[&>span:not(.tab-icon):not(.diff-stats)]:hidden @max-xl:[&>.diff-stats]:inline @max-xl:[&>.diff-stats]:text-xs @max-xl:[&>.diff-stats]:ml-0.5 border-r border-gray-200 last-of-type:border-r-0"
+            ? "border-b-blue-600 dark:border-b-gray-500 text-blue-600 font-medium bg-blue-50 dark:bg-gray-700"
+            : "hover:bg-gray-200 dark:hover:bg-gray-700"} @xl:px-3 @xl:py-2 @max-xl:px-2.5 @max-xl:[&>span:not(.tab-icon):not(.diff-stats)]:hidden @max-xl:[&>.diff-stats]:inline @max-xl:[&>.diff-stats]:text-xs @max-xl:[&>.diff-stats]:ml-0.5 border-r border-gray-200 dark:border-gray-600 last-of-type:border-r-0"
           title="Diff View - ${this.diffLinesAdded > 0 ||
           this.diffLinesRemoved > 0
             ? `+${this.diffLinesAdded} -${this.diffLinesRemoved}`
@@ -115,10 +115,10 @@
 
         <button
           id="showTerminalButton"
-          class="px-3 py-2 bg-none border-0 border-b-2 cursor-pointer text-xs flex items-center gap-1.5 text-gray-600 border-transparent transition-all whitespace-nowrap ${this
+          class="px-3 py-2 bg-none border-0 border-b-2 cursor-pointer text-xs flex items-center gap-1.5 text-gray-600 dark:text-gray-400 border-transparent transition-all whitespace-nowrap ${this
             .activeMode === "terminal"
-            ? "!border-b-blue-600 text-blue-600 font-medium bg-blue-50"
-            : "hover:bg-gray-200"} @xl:px-3 @xl:py-2 @max-xl:px-2.5 @max-xl:[&>span:not(.tab-icon):not(.diff-stats)]:hidden @max-xl:[&>.diff-stats]:inline @max-xl:[&>.diff-stats]:text-xs @max-xl:[&>.diff-stats]:ml-0.5 border-r border-gray-200 last-of-type:border-r-0"
+            ? "border-b-blue-600 !dark:border-b-gray-500 text-blue-600 font-medium bg-blue-50 dark:bg-gray-700"
+            : "hover:bg-gray-200 dark:hover:bg-gray-700"} @xl:px-3 @xl:py-2 @max-xl:px-2.5 @max-xl:[&>span:not(.tab-icon):not(.diff-stats)]:hidden @max-xl:[&>.diff-stats]:inline @max-xl:[&>.diff-stats]:text-xs @max-xl:[&>.diff-stats]:ml-0.5 border-r border-gray-200 dark:border-gray-600 last-of-type:border-r-0"
           title="Terminal View"
           @click=${() => this._handleViewModeClick("terminal")}
         >