Skip to content

Commit aedfffa

Browse files
dranovdranov
committed
fix: dark mode and theme following in widgets
1 parent 8c67c8f commit aedfffa

File tree

2 files changed

+101
-65
lines changed

2 files changed

+101
-65
lines changed

‎widget/src/traceDisplay.tsx‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -393,15 +393,15 @@ const ModelCheckerView: React.FC<ModelCheckerViewProps> = ({
393393
.mc-summary {
394394
margin: 12px 8px;
395395
padding: 8px 12px;
396-
background: #f8f9fa;
397-
border: 1px solid #dee2e6;
396+
background: var(--vscode-editorWidget-background);
397+
border: 1px solid var(--vscode-panel-border);
398398
border-radius: 4px;
399399
}
400400
.state-card {
401-
--border: #bfbfbf;
402-
--header: #e6e6e6;
401+
--border: var(--vscode-panel-border);
402+
--header: var(--vscode-editorGroupHeader-tabsBackground);
403403
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
404-
background: #fff;
404+
background: var(--vscode-editorWidget-background);
405405
border: 1px solid var(--border);
406406
border-radius: 6px;
407407
min-width: 320px;
@@ -410,8 +410,8 @@ const ModelCheckerView: React.FC<ModelCheckerViewProps> = ({
410410
overflow: hidden;
411411
}
412412
.state-card.is-highlighted {
413-
outline: 2px solid #ffc107;
414-
box-shadow: 0 0 0 3px rgba(255,193,7,.25);
413+
outline: 2px solid var(--vscode-editor-selectionHighlightBorder);
414+
box-shadow: 0 0 0 3px var(--vscode-editor-selectionBackground);
415415
}
416416
.state-header {
417417
background: var(--header);
@@ -428,16 +428,16 @@ const ModelCheckerView: React.FC<ModelCheckerViewProps> = ({
428428
gap: 6px;
429429
align-items: baseline;
430430
}
431-
.state-id { font-size: 12px; color: #666; }
432-
.state-toggle { font-size: 12px; color: #666; user-select: none; }
431+
.state-id { font-size: 12px; color: var(--vscode-descriptionForeground); }
432+
.state-toggle { font-size: 12px; color: var(--vscode-descriptionForeground); user-select: none; }
433433
.action-chip {
434434
display: inline-block;
435435
font-family: var(--mono);
436436
font-size: 11px;
437437
font-weight: normal;
438-
background: #eaf2ff;
439-
color: #3b3b3dff;
440-
border: 1px solid #a9c3feff;
438+
background: var(--vscode-activityBarBadge-background);
439+
color: var(--vscode-activityBarBadge-foreground);
440+
border: 1px solid var(--vscode-activityBarBadge-foreground);
441441
border-radius: 999px;
442442
padding: 2px 8px;
443443
line-height: 1.4;
@@ -454,33 +454,31 @@ const ModelCheckerView: React.FC<ModelCheckerViewProps> = ({
454454
gap: 8px;
455455
padding: 4px 10px;
456456
align-items: baseline;
457-
border-bottom: 1px solid #eee;
458-
background: white;
457+
border-bottom: 1px solid var(--vscode-panel-border);
458+
background: var(--vscode-editor-background);
459459
transition: background-color .15s ease, border-left-color .15s ease;
460460
border-left: 3px solid transparent;
461461
}
462462
.kv-row:last-child { border-bottom: none; }
463463
.kv-row.changed {
464-
background: #fff7e6;
465-
border-left: 3px solid #faad14;
464+
background: var(--vscode-editor-findMatchHighlightBackground);
465+
border-left: 3px solid var(--vscode-editor-findMatchHighlightBorder);
466+
color: var(--vscode-editor-foreground);
466467
}
467-
.kv-row.changed code { background: #fff1d6; }
468468
.changed-element {
469-
background: #ffeaa7 !important;
469+
background: var(--vscode-editor-findMatchBackground);
470470
border-radius: 3px;
471471
padding: 2px 4px;
472-
box-shadow: 0 0 0 2px #fdcb6e;
473-
}
474-
.changed-element code {
475-
background: #ffeaa7 !important;
472+
box-shadow: 0 0 0 2px var(--vscode-editor-findMatchBorder);
473+
color: var(--vscode-editor-foreground);
476474
}
477475
.kv-key {
478476
font-family: var(--mono);
479477
background: transparent;
480478
word-break: break-all;
481479
font-size: 11px;
482480
}
483-
.kv-sep { color: #888; background: transparent; }
481+
.kv-sep { color: var(--vscode-descriptionForeground); background: transparent; }
484482
.kv-val {
485483
font-family: var(--mono);
486484
font-size: 11px;
@@ -490,7 +488,7 @@ const ModelCheckerView: React.FC<ModelCheckerViewProps> = ({
490488
}
491489
.kv-toggle {
492490
border: none; background: transparent; font-size: 12px; line-height: 1;
493-
cursor: pointer; color: #666; padding: 0 2px;
491+
cursor: pointer; color: var(--vscode-descriptionForeground); padding: 0 2px;
494492
}
495493
.kv-val.collapsed .kv-content code {
496494
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
@@ -506,12 +504,12 @@ const ModelCheckerView: React.FC<ModelCheckerViewProps> = ({
506504
font-size: 11px;
507505
line-height: 1.4;
508506
background: transparent;
509-
color: #333;
507+
color: var(--vscode-foreground);
510508
margin: 2px 0;
511509
}
512510
code {
513511
background: transparent;
514-
color: #333;
512+
color: var(--vscode-foreground);
515513
padding: 2px 4px;
516514
border-radius: 3px;
517515
font-family: var(--mono);

‎widget/src/verificationResults.tsx‎

Lines changed: 77 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,42 @@ const ActionSection: React.FC<{
141141
const VerificationResultsView: React.FC<VerificationResultsProps> = ({ results }) => {
142142
const [statusFilter, setStatusFilter] = React.useState<StatusFilter>('all');
143143

144+
// Compute status colors with consistent semantic colors across all themes
145+
const statusColors = React.useMemo(() => {
146+
const withOpacity = (color: string, opacity: number): string => {
147+
// Parse hex color to rgba
148+
const hex = color.replace('#', '');
149+
const r = parseInt(hex.substring(0, 2), 16);
150+
const g = parseInt(hex.substring(2, 4), 16);
151+
const b = parseInt(hex.substring(4, 6), 16);
152+
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
153+
}
154+
155+
// Use consistent semantic colors across all themes
156+
return {
157+
proven: {
158+
border: '#52c41a', // green
159+
bg: withOpacity('#52c41a', 0.1),
160+
},
161+
disproven: {
162+
border: '#ff4d4f', // red
163+
bg: withOpacity('#ff4d4f', 0.1),
164+
},
165+
error: {
166+
border: '#fa8c16', // orange
167+
bg: withOpacity('#fa8c16', 0.1),
168+
},
169+
unknown: {
170+
border: '#1890ff', // blue
171+
bg: withOpacity('#1890ff', 0.1),
172+
},
173+
pending: {
174+
border: '#d9d9d9', // gray
175+
bg: withOpacity('#d9d9d9', 0.05),
176+
},
177+
}
178+
}, []);
179+
144180
// Compute counts for each status
145181
const statusCounts = React.useMemo(() => {
146182
const counts = {
@@ -185,12 +221,12 @@ const VerificationResultsView: React.FC<VerificationResultsProps> = ({ results }
185221
([action]) => action !== 'initializer'
186222
);
187223

188-
const styles = `
224+
const styles = React.useMemo(() => `
189225
.vr-root {
190226
font-family: system-ui, -apple-system, sans-serif;
191227
max-width: 100%;
192228
padding: 16px;
193-
background: #fafafa;
229+
background: var(--vscode-editor-background);
194230
border-radius: 8px;
195231
}
196232
@@ -199,8 +235,8 @@ const VerificationResultsView: React.FC<VerificationResultsProps> = ({ results }
199235
gap: 8px;
200236
margin-bottom: 16px;
201237
padding: 12px;
202-
background: white;
203-
border: 1px solid #e0e0e0;
238+
background: var(--vscode-editorWidget-background);
239+
border: 1px solid var(--vscode-panel-border);
204240
border-radius: 6px;
205241
flex-wrap: wrap;
206242
align-items: center;
@@ -209,34 +245,35 @@ const VerificationResultsView: React.FC<VerificationResultsProps> = ({ results }
209245
.vr-filter-label {
210246
font-weight: 600;
211247
font-size: 14px;
212-
color: #333;
248+
color: var(--vscode-foreground);
213249
}
214250
215251
.vr-filter-button {
216252
padding: 6px 12px;
217-
border: 1px solid #d0d0d0;
218-
background: white;
253+
border: 1px solid var(--vscode-panel-border);
254+
background: var(--vscode-editorWidget-background);
255+
color: var(--vscode-foreground);
219256
border-radius: 4px;
220257
cursor: pointer;
221258
font-size: 13px;
222259
transition: all 0.2s;
223260
}
224261
225262
.vr-filter-button:hover {
226-
background: #f5f5f5;
227-
border-color: #999;
263+
background: var(--vscode-list-hoverBackground);
264+
border-color: var(--vscode-panel-border);
228265
}
229266
230267
.vr-filter-button.active {
231-
background: #1890ff;
232-
color: white;
233-
border-color: #1890ff;
268+
background: var(--vscode-button-background);
269+
color: var(--vscode-button-foreground);
270+
border-color: var(--vscode-button-background);
234271
}
235272
236273
.vr-section {
237274
margin-bottom: 24px;
238-
background: white;
239-
border: 1px solid #e0e0e0;
275+
background: var(--vscode-editorWidget-background);
276+
border: 1px solid var(--vscode-panel-border);
240277
border-radius: 6px;
241278
overflow: hidden;
242279
}
@@ -245,9 +282,9 @@ const VerificationResultsView: React.FC<VerificationResultsProps> = ({ results }
245282
font-weight: 600;
246283
font-size: 16px;
247284
padding: 12px 16px;
248-
background: #f0f0f0;
249-
border-bottom: 1px solid #e0e0e0;
250-
color: #333;
285+
background: var(--vscode-editorGroupHeader-tabsBackground);
286+
border-bottom: 1px solid var(--vscode-panel-border);
287+
color: var(--vscode-foreground);
251288
}
252289
253290
.vr-section-content {
@@ -256,7 +293,7 @@ const VerificationResultsView: React.FC<VerificationResultsProps> = ({ results }
256293
257294
.action-section {
258295
margin-bottom: 12px;
259-
border: 1px solid #e8e8e8;
296+
border: 1px solid var(--vscode-panel-border);
260297
border-radius: 4px;
261298
overflow: hidden;
262299
}
@@ -266,30 +303,30 @@ const VerificationResultsView: React.FC<VerificationResultsProps> = ({ results }
266303
align-items: center;
267304
gap: 8px;
268305
padding: 10px 12px;
269-
background: #fafafa;
306+
background: var(--vscode-editorWidget-background);
270307
cursor: pointer;
271308
user-select: none;
272309
transition: background 0.2s;
273310
}
274311
275312
.action-header:hover {
276-
background: #f0f0f0;
313+
background: var(--vscode-list-hoverBackground);
277314
}
278315
279316
.action-toggle {
280317
font-size: 12px;
281-
color: #666;
318+
color: var(--vscode-descriptionForeground);
282319
}
283320
284321
.action-name {
285322
font-weight: 600;
286323
font-size: 14px;
287-
color: #333;
324+
color: var(--vscode-foreground);
288325
}
289326
290327
.action-properties {
291328
padding: 8px 12px 8px 32px;
292-
background: white;
329+
background: var(--vscode-editorWidget-background);
293330
}
294331
295332
.property-row {
@@ -303,7 +340,7 @@ const VerificationResultsView: React.FC<VerificationResultsProps> = ({ results }
303340
}
304341
305342
.property-row:hover {
306-
background: #f9f9f9;
343+
background: var(--vscode-list-hoverBackground);
307344
}
308345
309346
.property-icon {
@@ -314,44 +351,45 @@ const VerificationResultsView: React.FC<VerificationResultsProps> = ({ results }
314351
.property-name {
315352
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
316353
font-size: 13px;
317-
color: #333;
354+
color: var(--vscode-editor-foreground);
318355
flex-grow: 1;
319356
}
320357
321358
.property-time {
322359
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
323360
font-size: 12px;
324-
color: #666;
325361
margin-left: auto;
326362
padding: 2px 6px;
327-
background: #f5f5f5;
363+
background: var(--vscode-editorWidget-background);
364+
color: var(--vscode-descriptionForeground);
365+
border: 1px solid var(--vscode-panel-border);
328366
border-radius: 3px;
329367
white-space: nowrap;
330368
}
331369
332370
.property-row.status-proven {
333-
background: #f6ffed;
334-
border-left: 3px solid #52c41a;
371+
background: ${statusColors.proven.bg};
372+
border-left: 3px solid ${statusColors.proven.border};
335373
}
336374
337375
.property-row.status-disproven {
338-
background: #fff1f0;
339-
border-left: 3px solid #ff4d4f;
376+
background: ${statusColors.disproven.bg};
377+
border-left: 3px solid ${statusColors.disproven.border};
340378
}
341379
342380
.property-row.status-error {
343-
background: #fff7e6;
344-
border-left: 3px solid #fa8c16;
381+
background: ${statusColors.error.bg};
382+
border-left: 3px solid ${statusColors.error.border};
345383
}
346384
347385
.property-row.status-unknown {
348-
background: #f0f5ff;
349-
border-left: 3px solid #1890ff;
386+
background: ${statusColors.unknown.bg};
387+
border-left: 3px solid ${statusColors.unknown.border};
350388
}
351389
352390
.property-row.status-pending {
353-
background: #fefefe;
354-
border-left: 3px solid #d9d9d9;
391+
background: ${statusColors.pending.bg};
392+
border-left: 3px solid ${statusColors.pending.border};
355393
}
356394
357395
.spinner {
@@ -372,10 +410,10 @@ const VerificationResultsView: React.FC<VerificationResultsProps> = ({ results }
372410
.vr-empty {
373411
padding: 24px;
374412
text-align: center;
375-
color: #999;
413+
color: var(--vscode-disabledForeground);
376414
font-style: italic;
377415
}
378-
`;
416+
`, [statusColors]);
379417

380418
return (
381419
<>

0 commit comments

Comments
 (0)