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-diff-range-picker.demo.ts b/webui/src/web-components/demo/sketch-diff-range-picker.demo.ts
index 0ce1358..f70f72f 100644
--- a/webui/src/web-components/demo/sketch-diff-range-picker.demo.ts
+++ b/webui/src/web-components/demo/sketch-diff-range-picker.demo.ts
@@ -30,14 +30,9 @@
const rangePickerElement = document.createElement(
"sketch-diff-range-picker",
);
- rangePickerElement.style.cssText = `
- width: 100%;
- max-width: 800px;
- margin: 20px 0;
- padding: 16px;
- border: 1px solid #e0e0e0;
- border-radius: 8px;
- background: white;
+ rangePickerElement.className = `
+ w-full max-w-3xl my-5 p-4 border border-gray-300 dark:border-gray-600
+ rounded-lg bg-white dark:bg-gray-800
`;
// Set up the git service
@@ -45,15 +40,9 @@
// Create status display
const statusDisplay = document.createElement("div");
- statusDisplay.style.cssText = `
- padding: 12px;
- margin: 16px 0;
- background: var(--demo-fixture-section-bg);
- border-radius: 6px;
- border: 1px solid #e9ecef;
- font-family: monospace;
- font-size: 14px;
- line-height: 1.4;
+ statusDisplay.className = `
+ p-3 my-4 bg-gray-50 dark:bg-gray-800 rounded border
+ border-gray-200 dark:border-gray-700 font-mono text-sm leading-relaxed
`;
statusDisplay.innerHTML = `
<div><strong>Status:</strong> No range selected</div>
@@ -84,12 +73,9 @@
// Add some demo instructions
const instructionsDiv = document.createElement("div");
- instructionsDiv.style.cssText = `
- margin: 20px 0;
- padding: 16px;
- background: var(--demo-instruction-bg);
- border-radius: 6px;
- border-left: 4px solid #2196f3;
+ instructionsDiv.className = `
+ my-5 p-4 bg-blue-50 dark:bg-blue-900/20 rounded
+ border-l-4 border-blue-500 dark:border-blue-400
`;
instructionsDiv.innerHTML = `
<h3 style="margin: 0 0 8px 0; color: #1976d2;">Demo Instructions:</h3>