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-view-mode-select.demo.ts b/webui/src/web-components/demo/sketch-view-mode-select.demo.ts
index 3688b30..71354bc 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
@@ -50,13 +50,9 @@
// Status display for basic selector
const basicStatus = document.createElement("div");
basicStatus.id = "basic-status";
- basicStatus.style.cssText = `
- margin-top: 15px;
- padding: 10px;
- background: #f6f8fa;
- border-radius: 6px;
- font-family: monospace;
- font-size: 14px;
+ basicStatus.className = `
+ mt-4 p-3 bg-gray-50 dark:bg-gray-800 rounded font-mono text-sm
+ text-gray-900 dark:text-gray-100
`;
const updateBasicStatus = () => {
@@ -86,11 +82,9 @@
viewModeScenarios.forEach((scenario) => {
const scenarioCard = document.createElement("div");
- scenarioCard.style.cssText = `
- padding: 15px;
- border: 1px solid #d0d7de;
- border-radius: 8px;
- background: white;
+ scenarioCard.className = `
+ p-4 border border-gray-300 dark:border-gray-600 rounded-lg
+ bg-white dark:bg-gray-800
`;
const scenarioTitle = document.createElement("h4");
@@ -134,7 +128,7 @@
// Status display for interactive selector
const interactiveStatus = document.createElement("div");
interactiveStatus.id = "interactive-status";
- interactiveStatus.style.cssText = basicStatus.style.cssText;
+ interactiveStatus.className = basicStatus.className;
const updateInteractiveStatus = () => {
interactiveStatus.innerHTML = `
@@ -159,11 +153,8 @@
// Custom controls for interactive testing
const customControls = document.createElement("div");
- customControls.style.cssText = `
- margin: 15px 0;
- padding: 15px;
- background: #f6f8fa;
- border-radius: 6px;
+ customControls.className = `
+ my-4 p-4 bg-gray-50 dark:bg-gray-800 rounded
`;
const addLinesButton = demoUtils.createButton("Add +5 Lines", () => {
@@ -258,11 +249,8 @@
containerExamples.forEach((example) => {
// Create container wrapper
const wrapper = document.createElement("div");
- wrapper.style.cssText = `
- border: 2px solid;
- border-radius: 8px;
- padding: 15px;
- background: #f9f9f9;
+ wrapper.className = `
+ border-2 rounded-lg p-4 bg-gray-50 dark:bg-gray-800 ${example.borderColor}
`;
wrapper.className = example.borderColor;
@@ -278,12 +266,9 @@
// Create constrained container for the component
const componentContainer = document.createElement("div");
componentContainer.className = "@container";
- componentContainer.style.cssText = `
- width: ${example.width};
- border: 1px dashed #ccc;
- padding: 10px;
- background: white;
- border-radius: 4px;
+ componentContainer.className = `
+ border border-dashed border-gray-400 dark:border-gray-600 p-3
+ bg-white dark:bg-gray-800 rounded ${example.containerClass}
`;
// Create the component
@@ -317,13 +302,9 @@
// Create interactive container
const interactiveContainer = document.createElement("div");
interactiveContainer.className = "@container";
- interactiveContainer.style.cssText = `
- border: 2px solid #007acc;
- border-radius: 8px;
- padding: 15px;
- background: #f0f8ff;
- transition: width 0.3s ease;
- width: 700px;
+ interactiveContainer.className = `
+ @container border-2 border-blue-600 dark:border-blue-400 rounded-lg p-4
+ bg-blue-50 dark:bg-blue-900/20 transition-all duration-300 w-[700px]
`;
// Create interactive component