webui: add dark mode support to demo server
Core Component Dark Mode Support:
- sketch-timeline.ts: Welcome box, loading indicators, thinking bubbles, navigation
- sketch-tool-card-base.ts: Status icons, elapsed time, hover states, details panel
- All 14 sketch-tool-card-* components: Consistent dark styling for tool results
Demo System Infrastructure:
- Enhanced demo runner (demo.html) with complete dark theme CSS variables
- Added sketch-theme-toggle integration in sidebar for easy theme switching
- Extended demo-fixtures utilities with semantic color system (8 new CSS variables)
- Comprehensive color mappings: backgrounds, text, borders, controls, buttons
Demo File Compatibility (13 files updated):
- Fixed 60+ instances of hardcoded colors across all demo components
- Replaced light-mode-only colors (#24292f, #f6f8fa, etc.) with CSS variables
- Updated text colors, backgrounds, borders for proper contrast in both themes
- Maintained visual hierarchy while ensuring accessibility
Technical Implementation:
- CSS custom properties system with automatic :root/.dark theme switching
- GitHub-inspired dark color palette for professional appearance
- Smooth 0.2s transitions for seamless theme changes
- Semantic variable naming for maintainability and consistency
Key Features Added:
- Theme toggle accessible from any demo (no need to navigate to Theme Toggle demo)
- Complete visual consistency between light and dark modes
- Proper contrast ratios throughout for accessibility
- Tool card demos showcase dark mode styling with realistic content
Components Updated:
Timeline: Welcome messages, loading states, thinking indicators, jump button
Tool Cards: Status icons, input/output display, hover states, detailed views
Demos: Labels, backgrounds, instruction panels, control elements, text content
The demo system now provides a complete, professional dark mode experience
that matches modern development tool standards with excellent usability
and visual consistency across all components and demonstrations.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s97589e2fe2fdeeb3k
diff --git a/webui/src/web-components/sketch-tool-card-take-screenshot.ts b/webui/src/web-components/sketch-tool-card-take-screenshot.ts
index 8e03b94..4b0215b 100644
--- a/webui/src/web-components/sketch-tool-card-take-screenshot.ts
+++ b/webui/src/web-components/sketch-tool-card-take-screenshot.ts
@@ -65,7 +65,7 @@
Screenshot of ${selector}
</span>`;
const inputContent = html`<div
- class="px-2 py-1 bg-gray-100 rounded font-mono my-1.5 inline-block"
+ class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded font-mono my-1.5 inline-block"
>
${selector !== "(full page)"
? `Taking screenshot of element: ${selector}`
@@ -75,24 +75,26 @@
? html`
<div class="my-2.5 flex flex-col items-center">
${!this.imageLoaded && !this.loadError
- ? html`<div class="m-5 text-gray-600 italic">
+ ? html`<div class="m-5 text-gray-600 dark:text-gray-400 italic">
Loading screenshot...
</div>`
: ""}
${this.loadError
- ? html`<div class="text-red-700 italic my-2.5">
+ ? html`<div class="text-red-700 dark:text-red-400 italic my-2.5">
Failed to load screenshot
</div>`
: html`
<img
- class="max-w-full max-h-[500px] rounded shadow-md border border-gray-300"
+ class="max-w-full max-h-[500px] rounded shadow-md border border-gray-300 dark:border-gray-600"
src="${screenshotUrl}"
@load=${() => (this.imageLoaded = true)}
@error=${() => (this.loadError = true)}
?hidden=${!this.imageLoaded}
/>
${this.imageLoaded
- ? html`<div class="mt-2 text-xs text-gray-600">
+ ? html`<div
+ class="mt-2 text-xs text-gray-600 dark:text-gray-400"
+ >
Screenshot saved and displayed
</div>`
: ""}