Skip to content

Commit 3d1308e

Browse files
bankseansketch
authored and
Autoformatter
committed
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 <[email protected]> Change-ID: s8ac5253d0cbaa3ack
1 parent 5c86165 commit 3d1308e

File tree

8 files changed

+67
-95
lines changed

8 files changed

+67
-95
lines changed

‎webui/src/web-components/demo/chat-input.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const demo: DemoModule = {
2626
const messagesDiv = document.createElement("div");
2727
messagesDiv.id = "chat-messages";
2828
messagesDiv.className =
29-
"min-h-[100px] max-h-[200px] overflow-y-auto border border-gray-300 rounded-md p-3 mb-3 bg-gray-50";
29+
"min-h-[100px] max-h-[200px] overflow-y-auto border border-gray-300 dark:border-gray-600 rounded-md p-3 mb-3 bg-gray-50 dark:bg-gray-900";
3030

3131
// Create chat input
3232
const chatInput = document.createElement("sketch-chat-input") as any;
@@ -41,7 +41,7 @@ const demo: DemoModule = {
4141
messageDiv.className = `p-2 my-1 rounded max-w-xs ${
4242
isUser
4343
? "bg-blue-500 text-white ml-auto"
44-
: "bg-gray-200 text-gray-900 mr-auto"
44+
: "bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 mr-auto"
4545
}`;
4646

4747
const timeStr = timestamp
@@ -113,7 +113,7 @@ const demo: DemoModule = {
113113

114114
const statusDiv = document.createElement("div");
115115
statusDiv.className =
116-
"bg-blue-50 border border-blue-200 rounded p-3 text-sm";
116+
"bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded p-3 text-sm text-blue-800 dark:text-blue-200";
117117
statusDiv.innerHTML = `
118118
<div>✓ Drag and drop files onto the chat input</div>
119119
<div>✓ Paste images from clipboard</div>

‎webui/src/web-components/demo/demo-framework/demo-runner.ts‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -195,19 +195,12 @@ export class DemoRunner {
195195
*/
196196
private showError(message: string, error: any): void {
197197
this.container.innerHTML = `
198-
<div style="
199-
padding: 20px;
200-
background: #fee;
201-
border: 1px solid #fcc;
202-
border-radius: 4px;
203-
color: #800;
204-
font-family: monospace;
205-
">
206-
<h3>Demo Error</h3>
207-
<p><strong>${message}</strong></p>
208-
<details>
209-
<summary>Error Details</summary>
210-
<pre>${error.stack || error.message || error}</pre>
198+
<div class="p-5 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded text-red-800 dark:text-red-200 font-mono">
199+
<h3 class="text-lg font-semibold mb-2">Demo Error</h3>
200+
<p class="mb-4"><strong>${message}</strong></p>
201+
<details class="text-sm">
202+
<summary class="cursor-pointer hover:text-red-600 dark:hover:text-red-300">Error Details</summary>
203+
<pre class="mt-2 p-2 bg-red-100 dark:bg-red-800/30 rounded text-xs overflow-auto">${error.stack || error.message || error}</pre>
211204
</details>
212205
</div>
213206
`;

‎webui/src/web-components/demo/sketch-call-status.demo.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ const demo: DemoModule = {
3939
label: string,
4040
) => {
4141
const wrapper = document.createElement("div");
42-
wrapper.style.cssText =
43-
"margin: 15px 0; padding: 10px; border: 1px solid #e1e5e9; border-radius: 6px; background: white;";
42+
wrapper.className =
43+
"my-4 p-3 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-800";
4444

4545
const labelEl = document.createElement("h4");
4646
labelEl.textContent = label;
@@ -215,8 +215,8 @@ const demo: DemoModule = {
215215
statusVariationsSection.appendChild(workingDisconnectedStatus);
216216

217217
const interactiveWrapper = document.createElement("div");
218-
interactiveWrapper.style.cssText =
219-
"padding: 10px; border: 1px solid #e1e5e9; border-radius: 6px; background: white;";
218+
interactiveWrapper.className =
219+
"p-3 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-800";
220220
interactiveWrapper.appendChild(interactiveStatus);
221221
interactiveWrapper.appendChild(controlsDiv);
222222
interactiveSection.appendChild(interactiveWrapper);

‎webui/src/web-components/demo/sketch-diff-range-picker.demo.ts‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -30,30 +30,19 @@ const demo: DemoModule = {
3030
const rangePickerElement = document.createElement(
3131
"sketch-diff-range-picker",
3232
);
33-
rangePickerElement.style.cssText = `
34-
width: 100%;
35-
max-width: 800px;
36-
margin: 20px 0;
37-
padding: 16px;
38-
border: 1px solid #e0e0e0;
39-
border-radius: 8px;
40-
background: white;
33+
rangePickerElement.className = `
34+
w-full max-w-3xl my-5 p-4 border border-gray-300 dark:border-gray-600
35+
rounded-lg bg-white dark:bg-gray-800
4136
`;
4237

4338
// Set up the git service
4439
(rangePickerElement as any).gitService = mockGitService;
4540

4641
// Create status display
4742
const statusDisplay = document.createElement("div");
48-
statusDisplay.style.cssText = `
49-
padding: 12px;
50-
margin: 16px 0;
51-
background: var(--demo-fixture-section-bg);
52-
border-radius: 6px;
53-
border: 1px solid #e9ecef;
54-
font-family: monospace;
55-
font-size: 14px;
56-
line-height: 1.4;
43+
statusDisplay.className = `
44+
p-3 my-4 bg-gray-50 dark:bg-gray-800 rounded border
45+
border-gray-200 dark:border-gray-700 font-mono text-sm leading-relaxed
5746
`;
5847
statusDisplay.innerHTML = `
5948
<div><strong>Status:</strong> No range selected</div>
@@ -84,12 +73,9 @@ const demo: DemoModule = {
8473

8574
// Add some demo instructions
8675
const instructionsDiv = document.createElement("div");
87-
instructionsDiv.style.cssText = `
88-
margin: 20px 0;
89-
padding: 16px;
90-
background: var(--demo-instruction-bg);
91-
border-radius: 6px;
92-
border-left: 4px solid #2196f3;
76+
instructionsDiv.className = `
77+
my-5 p-4 bg-blue-50 dark:bg-blue-900/20 rounded
78+
border-l-4 border-blue-500 dark:border-blue-400
9379
`;
9480
instructionsDiv.innerHTML = `
9581
<h3 style="margin: 0 0 8px 0; color: #1976d2;">Demo Instructions:</h3>

‎webui/src/web-components/demo/sketch-push-button.demo.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,20 @@ export class SketchPushButtonDemo extends SketchTailwindElement {
1212
render() {
1313
return html`
1414
<div
15-
class="p-4 bg-white rounded-lg shadow-sm border border-gray-200 max-w-md mx-auto"
15+
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"
1616
>
17-
<h2 class="text-lg font-semibold mb-4">Push Button Demo</h2>
17+
<h2 class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
18+
Push Button Demo
19+
</h2>
1820
1921
<div class="mb-4">
20-
<p class="text-sm text-gray-600 mb-2">
22+
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">
2123
Test the push button component:
2224
</p>
2325
<sketch-push-button></sketch-push-button>
2426
</div>
2527
26-
<div class="text-xs text-gray-500">
28+
<div class="text-xs text-gray-500 dark:text-gray-400">
2729
<p>Click the push button to test:</p>
2830
<ul class="list-disc list-inside mt-1">
2931
<li>Modal opens with git information</li>

‎webui/src/web-components/demo/sketch-timeline-message.demo.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ const demo: DemoModule = {
4545
state = mockState,
4646
) => {
4747
const wrapper = document.createElement("div");
48-
wrapper.style.cssText =
49-
"margin: 15px 0; padding: 15px; border: 1px solid #e1e5e9; border-radius: 6px; background: white;";
48+
wrapper.className =
49+
"my-4 p-4 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-800";
5050

5151
const labelEl = document.createElement("h4");
5252
labelEl.textContent = label;
@@ -178,8 +178,8 @@ const demo: DemoModule = {
178178
interactiveMessage.open = true;
179179

180180
const interactiveWrapper = document.createElement("div");
181-
interactiveWrapper.style.cssText =
182-
"padding: 15px; border: 1px solid #e1e5e9; border-radius: 6px; background: white;";
181+
interactiveWrapper.className =
182+
"p-4 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-800";
183183
interactiveWrapper.appendChild(interactiveMessage);
184184

185185
// Control buttons for interactive demo

‎webui/src/web-components/demo/sketch-view-mode-select.demo.ts‎

Lines changed: 17 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,9 @@ const demo: DemoModule = {
5050
// Status display for basic selector
5151
const basicStatus = document.createElement("div");
5252
basicStatus.id = "basic-status";
53-
basicStatus.style.cssText = `
54-
margin-top: 15px;
55-
padding: 10px;
56-
background: #f6f8fa;
57-
border-radius: 6px;
58-
font-family: monospace;
59-
font-size: 14px;
53+
basicStatus.className = `
54+
mt-4 p-3 bg-gray-50 dark:bg-gray-800 rounded font-mono text-sm
55+
text-gray-900 dark:text-gray-100
6056
`;
6157

6258
const updateBasicStatus = () => {
@@ -86,11 +82,9 @@ const demo: DemoModule = {
8682

8783
viewModeScenarios.forEach((scenario) => {
8884
const scenarioCard = document.createElement("div");
89-
scenarioCard.style.cssText = `
90-
padding: 15px;
91-
border: 1px solid #d0d7de;
92-
border-radius: 8px;
93-
background: white;
85+
scenarioCard.className = `
86+
p-4 border border-gray-300 dark:border-gray-600 rounded-lg
87+
bg-white dark:bg-gray-800
9488
`;
9589

9690
const scenarioTitle = document.createElement("h4");
@@ -134,7 +128,7 @@ const demo: DemoModule = {
134128
// Status display for interactive selector
135129
const interactiveStatus = document.createElement("div");
136130
interactiveStatus.id = "interactive-status";
137-
interactiveStatus.style.cssText = basicStatus.style.cssText;
131+
interactiveStatus.className = basicStatus.className;
138132

139133
const updateInteractiveStatus = () => {
140134
interactiveStatus.innerHTML = `
@@ -159,11 +153,8 @@ const demo: DemoModule = {
159153

160154
// Custom controls for interactive testing
161155
const customControls = document.createElement("div");
162-
customControls.style.cssText = `
163-
margin: 15px 0;
164-
padding: 15px;
165-
background: #f6f8fa;
166-
border-radius: 6px;
156+
customControls.className = `
157+
my-4 p-4 bg-gray-50 dark:bg-gray-800 rounded
167158
`;
168159

169160
const addLinesButton = demoUtils.createButton("Add +5 Lines", () => {
@@ -258,11 +249,8 @@ const demo: DemoModule = {
258249
containerExamples.forEach((example) => {
259250
// Create container wrapper
260251
const wrapper = document.createElement("div");
261-
wrapper.style.cssText = `
262-
border: 2px solid;
263-
border-radius: 8px;
264-
padding: 15px;
265-
background: #f9f9f9;
252+
wrapper.className = `
253+
border-2 rounded-lg p-4 bg-gray-50 dark:bg-gray-800 ${example.borderColor}
266254
`;
267255
wrapper.className = example.borderColor;
268256

@@ -278,12 +266,9 @@ const demo: DemoModule = {
278266
// Create constrained container for the component
279267
const componentContainer = document.createElement("div");
280268
componentContainer.className = "@container";
281-
componentContainer.style.cssText = `
282-
width: ${example.width};
283-
border: 1px dashed #ccc;
284-
padding: 10px;
285-
background: white;
286-
border-radius: 4px;
269+
componentContainer.className = `
270+
border border-dashed border-gray-400 dark:border-gray-600 p-3
271+
bg-white dark:bg-gray-800 rounded ${example.containerClass}
287272
`;
288273

289274
// Create the component
@@ -317,13 +302,9 @@ const demo: DemoModule = {
317302
// Create interactive container
318303
const interactiveContainer = document.createElement("div");
319304
interactiveContainer.className = "@container";
320-
interactiveContainer.style.cssText = `
321-
border: 2px solid #007acc;
322-
border-radius: 8px;
323-
padding: 15px;
324-
background: #f0f8ff;
325-
transition: width 0.3s ease;
326-
width: 700px;
305+
interactiveContainer.className = `
306+
@container border-2 border-blue-600 dark:border-blue-400 rounded-lg p-4
307+
bg-blue-50 dark:bg-blue-900/20 transition-all duration-300 w-[700px]
327308
`;
328309

329310
// Create interactive component

‎webui/src/web-components/sketch-tool-card.ts‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function renderMarkdown(markdownContent: string): string {
6363
// Shared utility function for creating Tailwind pre elements
6464
function createPreElement(content: string, additionalClasses: string = "") {
6565
return html`<pre
66-
class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-wrap-break-word ${additionalClasses}"
66+
class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-wrap-break-word ${additionalClasses}"
6767
>
6868
${content}</pre
6969
>`;
@@ -101,7 +101,7 @@ export class SketchToolCardBash extends SketchTailwindElement {
101101
>
102102
<div class="w-full relative">
103103
<pre
104-
class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-wrap-break-word w-full mb-0 rounded-t rounded-b-none box-border"
104+
class="bg-gray-200 dark:bg-gray-700 text-black dark:text-gray-100 p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-wrap-break-word w-full mb-0 rounded-t rounded-b-none box-border"
105105
>
106106
${backgroundIcon}${slowIcon}${inputData?.command}</pre
107107
>
@@ -211,19 +211,29 @@ export class SketchToolCardPatch extends SketchTailwindElement {
211211

212212
const coloredLines = lines.map((line) => {
213213
if (line.startsWith("+")) {
214-
return html`<div class="text-green-600 bg-green-50">${line}</div>`;
214+
return html`<div
215+
class="text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20"
216+
>
217+
${line}
218+
</div>`;
215219
} else if (line.startsWith("-")) {
216-
return html`<div class="text-red-600 bg-red-50">${line}</div>`;
220+
return html`<div
221+
class="text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20"
222+
>
223+
${line}
224+
</div>`;
217225
} else if (line.startsWith("@@")) {
218226
// prettier-ignore
219-
return html`<div class="text-cyan-600 bg-cyan-50 font-semibold">${line}</div>`;
227+
return html`<div class="text-cyan-600 dark:text-cyan-400 bg-cyan-50 dark:bg-cyan-900/20 font-semibold">${line}</div>`;
220228
} else {
221-
return html`<div class="text-gray-800">${line}</div>`;
229+
return html`<div class="text-gray-800 dark:text-gray-200">
230+
${line}
231+
</div>`;
222232
}
223233
});
224234

225235
return html`<pre
226-
class="bg-gray-100 text-xs p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-x-auto font-mono"
236+
class="bg-gray-100 dark:bg-gray-800 text-xs p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-x-auto font-mono text-gray-900 dark:text-gray-100"
227237
>
228238
${coloredLines}
229239
</pre
@@ -285,7 +295,7 @@ export class SketchToolCardThink extends SketchTailwindElement {
285295
</span>`;
286296

287297
const inputContent = html`<div
288-
class="overflow-x-auto mb-1 font-mono px-2 py-1 bg-gray-200 rounded select-text cursor-text text-sm leading-relaxed"
298+
class="overflow-x-auto mb-1 font-mono px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded select-text cursor-text text-sm leading-relaxed text-gray-900 dark:text-gray-100"
289299
>
290300
<div class="markdown-content">
291301
${unsafeHTML(renderMarkdown(thoughts))}

0 commit comments

Comments
 (0)