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/demo/sketch-call-status.demo.ts b/webui/src/web-components/demo/sketch-call-status.demo.ts
index d17e2f0..91502dd 100644
--- a/webui/src/web-components/demo/sketch-call-status.demo.ts
+++ b/webui/src/web-components/demo/sketch-call-status.demo.ts
@@ -39,8 +39,8 @@
label: string,
) => {
const wrapper = document.createElement("div");
- wrapper.style.cssText =
- "margin: 15px 0; padding: 10px; border: 1px solid #e1e5e9; border-radius: 6px; background: white;";
+ wrapper.className =
+ "my-4 p-3 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-800";
const labelEl = document.createElement("h4");
labelEl.textContent = label;
@@ -215,8 +215,8 @@
statusVariationsSection.appendChild(workingDisconnectedStatus);
const interactiveWrapper = document.createElement("div");
- interactiveWrapper.style.cssText =
- "padding: 10px; border: 1px solid #e1e5e9; border-radius: 6px; background: white;";
+ interactiveWrapper.className =
+ "p-3 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-800";
interactiveWrapper.appendChild(interactiveStatus);
interactiveWrapper.appendChild(controlsDiv);
interactiveSection.appendChild(interactiveWrapper);