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/demo-framework/demo-runner.ts b/webui/src/web-components/demo/demo-framework/demo-runner.ts
index 6b59c38..680651b 100644
--- a/webui/src/web-components/demo/demo-framework/demo-runner.ts
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -195,19 +195,12 @@
*/
private showError(message: string, error: any): void {
this.container.innerHTML = `
- <div style="
- padding: 20px;
- background: #fee;
- border: 1px solid #fcc;
- border-radius: 4px;
- color: #800;
- font-family: monospace;
- ">
- <h3>Demo Error</h3>
- <p><strong>${message}</strong></p>
- <details>
- <summary>Error Details</summary>
- <pre>${error.stack || error.message || error}</pre>
+ <div class="p-5 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded text-red-800 dark:text-red-200 font-mono">
+ <h3 class="text-lg font-semibold mb-2">Demo Error</h3>
+ <p class="mb-4"><strong>${message}</strong></p>
+ <details class="text-sm">
+ <summary class="cursor-pointer hover:text-red-600 dark:hover:text-red-300">Error Details</summary>
+ <pre class="mt-2 p-2 bg-red-100 dark:bg-red-800/30 rounded text-xs overflow-auto">${error.stack || error.message || error}</pre>
</details>
</div>
`;