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/demo/sketch-view-mode-select.demo.ts b/webui/src/web-components/demo/sketch-view-mode-select.demo.ts
index 523f371..befdc58 100644
--- a/webui/src/web-components/demo/sketch-view-mode-select.demo.ts
+++ b/webui/src/web-components/demo/sketch-view-mode-select.demo.ts
@@ -96,12 +96,13 @@
const scenarioTitle = document.createElement("h4");
scenarioTitle.textContent = scenario.name;
- scenarioTitle.style.cssText = "margin: 0 0 5px 0; color: #24292f;";
+ scenarioTitle.style.cssText =
+ "margin: 0 0 5px 0; color: var(--demo-label-color);";
const scenarioDesc = document.createElement("p");
scenarioDesc.textContent = scenario.description;
scenarioDesc.style.cssText =
- "margin: 0 0 10px 0; color: #656d76; font-size: 14px;";
+ "margin: 0 0 10px 0; color: var(--demo-fixture-text-color); font-size: 14px;";
const scenarioWrapper = document.createElement("div");
scenarioWrapper.className = "@container";
@@ -223,7 +224,8 @@
// Create explanation text
const explanation = document.createElement("p");
- explanation.style.cssText = "margin: 10px 0; color: #666; font-size: 14px;";
+ explanation.style.cssText =
+ "margin: 10px 0; color: var(--demo-secondary-text); font-size: 14px;";
explanation.innerHTML = `
<strong>Container Queries:</strong> The component now uses Tailwind <code>@container</code> queries instead of viewport media queries.<br>
This allows different sized containers to show different responsive behaviors simultaneously.
@@ -269,8 +271,8 @@
const header = document.createElement("div");
header.style.cssText = "margin-bottom: 10px;";
header.innerHTML = `
- <h4 style="margin: 0 0 5px 0; font-weight: 600; color: #333;">${example.title}</h4>
- <p style="margin: 0; font-size: 14px; color: #666;">${example.description}</p>
+ <h4 style="margin: 0 0 5px 0; font-weight: 600; color: var(--demo-label-color);">${example.title}</h4>
+ <p style="margin: 0; font-size: 14px; color: var(--demo-secondary-text);">${example.description}</p>
`;
wrapper.appendChild(header);
@@ -311,7 +313,7 @@
interactiveDesc.textContent =
"Use the buttons below to change the container size and see the responsive behavior in real-time.";
interactiveDesc.style.cssText =
- "margin: 0 0 15px 0; color: #666; font-size: 14px;";
+ "margin: 0 0 15px 0; color: var(--demo-secondary-text); font-size: 14px;";
// Create interactive container
const interactiveContainer = document.createElement("div");
@@ -334,7 +336,7 @@
// Size info display
const sizeInfo = document.createElement("div");
sizeInfo.style.cssText =
- "margin-bottom: 10px; font-family: monospace; font-size: 12px; color: #333;";
+ "margin-bottom: 10px; font-family: monospace; font-size: 12px; color: var(--demo-label-color);";
sizeInfo.textContent = "Current container width: 700px";
interactiveContainer.appendChild(sizeInfo);