webui: dark mode support to demo fmwk, tool cards
Demo framework fixes:
- sketch-push-button.demo.ts: add dark variants for bg, border, text colors
- chat-input.ts: add dark variants for message containers and status sections
- demo-runner.ts: replace inline error styles with Tailwind dark mode classes
- sketch-call-status.demo.ts: fix hardcoded white backgrounds in status cards
- sketch-diff-range-picker.demo.ts: add dark variants to picker and status displays
- sketch-timeline-message.demo.ts: fix message container backgrounds
- sketch-view-mode-select.demo.ts: comprehensive dark mode for all scenarios
Tool card fixes:
- Update shared createPreElement function with dark:bg-gray-700/dark:text-gray-100
- bash tool: fix command display and result areas
- think tool: fix input content area with proper dark background
- patch tool: comprehensive diff rendering with dark variants for added/removed/context lines
- codereview tool: inherits dark mode through shared utilities
All components now use consistent dark mode patterns with proper contrast:
bg-white dark:bg-gray-800, border-gray-200 dark:border-gray-700,
text-gray-600 dark:text-gray-300, matching existing components.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s8ac5253d0cbaa3ack
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))}