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-push-button.demo.ts b/webui/src/web-components/demo/sketch-push-button.demo.ts
index f7b83fd..4405a9e 100644
--- a/webui/src/web-components/demo/sketch-push-button.demo.ts
+++ b/webui/src/web-components/demo/sketch-push-button.demo.ts
@@ -12,18 +12,20 @@
render() {
return html`
<div
- class="p-4 bg-white rounded-lg shadow-sm border border-gray-200 max-w-md mx-auto"
+ class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 max-w-md mx-auto"
>
- <h2 class="text-lg font-semibold mb-4">Push Button Demo</h2>
+ <h2 class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
+ Push Button Demo
+ </h2>
<div class="mb-4">
- <p class="text-sm text-gray-600 mb-2">
+ <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">
Test the push button component:
</p>
<sketch-push-button></sketch-push-button>
</div>
- <div class="text-xs text-gray-500">
+ <div class="text-xs text-gray-500 dark:text-gray-400">
<p>Click the push button to test:</p>
<ul class="list-disc list-inside mt-1">
<li>Modal opens with git information</li>