experiments in a post-browser web
fix(theme): make HUD, cmd palette, and page panels respond to light/dark theme
Replace hardcoded dark-mode colors with theme-aware CSS variables and
color-mix() expressions so these UI components properly switch between
light and dark when the system color scheme changes.
- cmd panel: Add --cmd-surface-* CSS custom properties with light/dark
@media overrides for translucent surfaces, replace hardcoded rgba()
text/bg colors with var(--theme-text), var(--base0X) references
- HUD: Use color-mix(var(--base00)) for container bg, replace widget
text colors with var(--theme-text-*) semantic variables
- page panels: Use color-mix(var(--base00)) for panel backgrounds,
theme-aware borders/scrollbars via var(--theme-border)
- chain-editor: Use color-mix for bg, var(--theme-text) for text
+109
-83
+19
-19
app/page/index.html
+19
-19
app/page/index.html
···
223
223
224
224
.widget {
225
225
pointer-events: auto;
226
-
background: var(--theme-bg-secondary, rgba(30, 30, 30, 0.92));
226
+
background: color-mix(in srgb, var(--base01, var(--theme-bg-secondary)) 92%, transparent);
227
227
backdrop-filter: blur(12px);
228
228
-webkit-backdrop-filter: blur(12px);
229
229
color: var(--theme-text, #e0e0e0);
···
358
358
position: absolute;
359
359
z-index: 140;
360
360
pointer-events: auto;
361
-
background: rgba(30, 30, 30, 0.85);
361
+
background: color-mix(in srgb, var(--base00) 85%, transparent);
362
362
backdrop-filter: blur(20px);
363
363
-webkit-backdrop-filter: blur(20px);
364
-
border: 1px solid rgba(255, 255, 255, 0.08);
364
+
border: var(--theme-surface-border, 1px solid rgba(255, 255, 255, 0.08));
365
365
color: var(--theme-text, #e0e0e0);
366
366
font-family: var(--theme-font-sans, system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
367
367
font-size: 12px;
···
408
408
flex-direction: column;
409
409
gap: 2px;
410
410
padding: 4px 0;
411
-
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
411
+
border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 30%, transparent);
412
412
}
413
413
414
414
.page-info-panel .info-row:last-child {
···
458
458
position: absolute;
459
459
z-index: 140;
460
460
pointer-events: auto;
461
-
background: rgba(30, 30, 30, 0.85);
461
+
background: color-mix(in srgb, var(--base00) 85%, transparent);
462
462
backdrop-filter: blur(20px);
463
463
-webkit-backdrop-filter: blur(20px);
464
-
border: 1px solid rgba(255, 255, 255, 0.08);
464
+
border: var(--theme-surface-border, 1px solid rgba(255, 255, 255, 0.08));
465
465
color: var(--theme-text, #e0e0e0);
466
466
font-family: var(--theme-font-sans, system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
467
467
font-size: 12px;
···
526
526
}
527
527
528
528
.tags-list::-webkit-scrollbar-thumb {
529
-
background: rgba(255, 255, 255, 0.15);
529
+
background: color-mix(in srgb, var(--theme-border) 50%, transparent);
530
530
border-radius: 2px;
531
531
}
532
532
···
535
535
align-items: center;
536
536
gap: 4px;
537
537
background: var(--theme-bg-tertiary, rgba(255, 255, 255, 0.1));
538
-
border: 1px solid rgba(255, 255, 255, 0.08);
538
+
border: 1px solid color-mix(in srgb, var(--theme-border) 40%, transparent);
539
539
color: var(--theme-text, #e0e0e0);
540
540
font-size: 11px;
541
541
font-family: inherit;
···
549
549
550
550
.tag-btn:hover {
551
551
background: var(--theme-bg-tertiary, rgba(255, 255, 255, 0.18));
552
-
border-color: rgba(255, 255, 255, 0.15);
552
+
border-color: color-mix(in srgb, var(--theme-border) 60%, transparent);
553
553
}
554
554
555
555
.tag-btn .tag-name {
···
581
581
582
582
.tags-input {
583
583
width: 100%;
584
-
background: rgba(255, 255, 255, 0.06);
585
-
border: 1px solid rgba(255, 255, 255, 0.1);
584
+
background: color-mix(in srgb, var(--theme-bg-tertiary) 30%, transparent);
585
+
border: 1px solid color-mix(in srgb, var(--theme-border) 40%, transparent);
586
586
border-radius: 5px;
587
587
color: var(--theme-text, #e0e0e0);
588
588
font-size: 11px;
···
627
627
position: absolute;
628
628
z-index: 140;
629
629
pointer-events: auto;
630
-
background: rgba(30, 30, 30, 0.85);
630
+
background: color-mix(in srgb, var(--base00) 85%, transparent);
631
631
backdrop-filter: blur(20px);
632
632
-webkit-backdrop-filter: blur(20px);
633
-
border: 1px solid rgba(255, 255, 255, 0.08);
633
+
border: var(--theme-surface-border, 1px solid rgba(255, 255, 255, 0.08));
634
634
color: var(--theme-text, #e0e0e0);
635
635
font-family: var(--theme-font-sans, system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
636
636
font-size: 12px;
···
683
683
}
684
684
685
685
.entities-panel .panel-body::-webkit-scrollbar-thumb {
686
-
background: rgba(255, 255, 255, 0.15);
686
+
background: color-mix(in srgb, var(--theme-border) 50%, transparent);
687
687
border-radius: 2px;
688
688
}
689
689
···
754
754
position: absolute;
755
755
z-index: 140;
756
756
pointer-events: auto;
757
-
background: rgba(30, 30, 30, 0.85);
757
+
background: color-mix(in srgb, var(--base00) 85%, transparent);
758
758
backdrop-filter: blur(20px);
759
759
-webkit-backdrop-filter: blur(20px);
760
-
border: 1px solid rgba(255, 255, 255, 0.08);
760
+
border: var(--theme-surface-border, 1px solid rgba(255, 255, 255, 0.08));
761
761
color: var(--theme-text, #e0e0e0);
762
762
font-family: var(--theme-font-sans, system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
763
763
font-size: 12px;
···
810
810
}
811
811
812
812
.extensions-panel .panel-body::-webkit-scrollbar-thumb {
813
-
background: rgba(255, 255, 255, 0.15);
813
+
background: color-mix(in srgb, var(--theme-border) 50%, transparent);
814
814
border-radius: 2px;
815
815
}
816
816
···
832
832
align-items: center;
833
833
gap: 8px;
834
834
padding: 5px 0;
835
-
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
835
+
border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 30%, transparent);
836
836
}
837
837
838
838
.ext-item:last-child {
···
909
909
left: 0;
910
910
right: 0;
911
911
bottom: 0;
912
-
background: rgba(255, 255, 255, 0.15);
912
+
background: color-mix(in srgb, var(--theme-border) 60%, transparent);
913
913
border-radius: 9px;
914
914
cursor: pointer;
915
915
transition: background 0.2s;
+2
-2
extensions/cmd/chain-editor.html
+2
-2
extensions/cmd/chain-editor.html
···
45
45
padding: 0;
46
46
height: 100%;
47
47
width: 100%;
48
-
background-color: rgba(30, 33, 40, 0.98);
48
+
background-color: color-mix(in srgb, var(--base00) 98%, transparent);
49
49
font-family: var(--theme-font-sans);
50
-
color: white;
50
+
color: var(--theme-text, #333);
51
51
overflow: hidden;
52
52
display: flex;
53
53
flex-direction: column;
+79
-53
extensions/cmd/panel.html
+79
-53
extensions/cmd/panel.html
···
11
11
<style>
12
12
@import url('peek://theme/variables.css');
13
13
14
+
/* Translucent surface colors — light/dark aware */
15
+
:root {
16
+
--cmd-surface-bg: rgba(240, 240, 240, 0.95);
17
+
--cmd-surface-hover: rgba(0, 0, 0, 0.06);
18
+
--cmd-surface-selected: rgba(0, 0, 0, 0.1);
19
+
--cmd-surface-divider: rgba(0, 0, 0, 0.08);
20
+
--cmd-badge-bg: rgba(0, 0, 0, 0.08);
21
+
--cmd-chain-bg: rgba(180, 200, 230, 0.95);
22
+
--cmd-chain-steps-bg: rgba(210, 220, 235, 0.95);
23
+
--cmd-exec-bg: rgba(180, 200, 230, 0.95);
24
+
--cmd-exec-error-bg: rgba(230, 180, 180, 0.95);
25
+
}
26
+
@media (prefers-color-scheme: dark) {
27
+
:root:not([data-theme="light"]) {
28
+
--cmd-surface-bg: rgba(40, 44, 52, 0.95);
29
+
--cmd-surface-hover: rgba(255, 255, 255, 0.1);
30
+
--cmd-surface-selected: rgba(255, 255, 255, 0.2);
31
+
--cmd-surface-divider: rgba(255, 255, 255, 0.1);
32
+
--cmd-badge-bg: rgba(255, 255, 255, 0.1);
33
+
--cmd-chain-bg: rgba(60, 80, 120, 0.95);
34
+
--cmd-chain-steps-bg: rgba(50, 60, 80, 0.95);
35
+
--cmd-exec-bg: rgba(60, 100, 160, 0.95);
36
+
--cmd-exec-error-bg: rgba(160, 60, 60, 0.95);
37
+
}
38
+
}
39
+
14
40
html, body {
15
41
margin: 0;
16
42
padding: 0;
···
18
44
width: 100%;
19
45
background-color: transparent;
20
46
font-family: var(--theme-font-sans);
21
-
color: white;
47
+
color: var(--theme-text, #333);
22
48
overflow: hidden;
23
49
display: flex;
24
50
flex-direction: column;
···
30
56
align-items: center;
31
57
padding: 6px 10px;
32
58
box-sizing: border-box;
33
-
background-color: rgba(40, 44, 52, 0.95);
59
+
background-color: var(--cmd-surface-bg);
34
60
border: var(--theme-surface-border, 1px solid rgba(255, 255, 255, 0.2));
35
61
box-shadow: var(--theme-surface-ring, 0 0 0 1px rgba(0, 0, 0, 0.5));
36
62
border-radius: 8px;
···
71
97
}
72
98
73
99
#command-input::placeholder {
74
-
color: rgba(255, 255, 255, 0.3);
100
+
color: var(--theme-text-muted, #999);
75
101
}
76
102
77
103
/* Suggestion element that shows the matching command with highlighting */
···
85
111
font-family: inherit;
86
112
font-size: 18px;
87
113
font-weight: 300;
88
-
color: rgba(255, 255, 255, 0.5);
114
+
color: var(--theme-text-muted, #999);
89
115
white-space: pre;
90
116
overflow: hidden;
91
117
pointer-events: none;
···
95
121
}
96
122
97
123
#command-text .typed {
98
-
color: white;
124
+
color: var(--theme-text, #333);
99
125
font-weight: 500;
100
126
}
101
127
···
116
142
margin: 5px 10px;
117
143
box-sizing: border-box;
118
144
119
-
background-color: rgba(40, 44, 52, 0.95);
145
+
background-color: var(--cmd-surface-bg);
120
146
border-radius: 8px;
121
147
}
122
148
···
131
157
}
132
158
133
159
.command-item:hover {
134
-
background-color: rgba(255, 255, 255, 0.1);
160
+
background-color: var(--cmd-surface-hover);
135
161
}
136
162
137
163
.command-item.selected {
138
-
background-color: rgba(255, 255, 255, 0.2);
164
+
background-color: var(--cmd-surface-selected);
139
165
}
140
166
141
167
/* Command item with description */
···
145
171
146
172
.command-item .cmd-desc {
147
173
font-size: 12px;
148
-
color: rgba(255, 255, 255, 0.6);
174
+
color: var(--theme-text-secondary, #666);
149
175
margin-left: 8px;
150
176
}
151
177
···
159
185
display: inline-block;
160
186
padding: 2px 4px;
161
187
border-radius: 3px;
162
-
background: rgba(255, 255, 255, 0.1);
188
+
background: var(--cmd-badge-bg);
163
189
margin-left: 4px;
164
190
}
165
191
···
169
195
align-items: center;
170
196
padding: 8px 12px;
171
197
margin: 10px 10px 5px 10px;
172
-
background: rgba(60, 80, 120, 0.95);
198
+
background: var(--cmd-chain-bg);
173
199
border-radius: 8px;
174
200
font-size: 12px;
175
201
gap: 8px;
···
183
209
184
210
#chain-indicator #chain-mime {
185
211
font-family: var(--theme-font-mono);
186
-
background: rgba(255, 255, 255, 0.1);
212
+
background: var(--cmd-badge-bg);
187
213
padding: 2px 6px;
188
214
border-radius: 3px;
189
215
}
190
216
191
217
#chain-indicator #chain-title {
192
-
color: rgba(255, 255, 255, 0.8);
218
+
color: var(--theme-text-secondary, #666);
193
219
flex: 1;
194
220
}
195
221
196
222
#chain-indicator #chain-cancel {
197
223
background: none;
198
224
border: none;
199
-
color: rgba(255, 255, 255, 0.6);
225
+
color: var(--theme-text-secondary, #666);
200
226
cursor: pointer;
201
227
font-size: 14px;
202
228
padding: 2px 6px;
···
204
230
}
205
231
206
232
#chain-indicator #chain-cancel:hover {
207
-
color: white;
208
-
background: rgba(255, 255, 255, 0.1);
233
+
color: var(--theme-text, #333);
234
+
background: var(--cmd-surface-hover);
209
235
border-radius: 3px;
210
236
}
211
237
···
215
241
flex-shrink: 0;
216
242
margin: 5px 10px;
217
243
padding: 10px;
218
-
background: rgba(40, 44, 52, 0.95);
244
+
background: var(--cmd-surface-bg);
219
245
border-radius: 8px;
220
246
max-height: 200px;
221
247
overflow: auto;
···
233
259
align-items: center;
234
260
gap: 8px;
235
261
padding-bottom: 6px;
236
-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
262
+
border-bottom: 1px solid var(--cmd-surface-divider);
237
263
margin-bottom: 8px;
238
264
font-size: 11px;
239
265
}
240
266
241
267
#preview-mime {
242
268
font-family: var(--theme-font-mono);
243
-
background: rgba(255, 255, 255, 0.1);
269
+
background: var(--cmd-badge-bg);
244
270
padding: 2px 6px;
245
271
border-radius: 3px;
246
272
}
247
273
248
274
#preview-title {
249
-
color: rgba(255, 255, 255, 0.7);
275
+
color: var(--theme-text-secondary, #666);
250
276
}
251
277
252
278
#preview-content {
···
263
289
}
264
290
265
291
#preview-content .preview-json {
266
-
color: #a8d4a8;
292
+
color: var(--base0B, #34c759);
267
293
}
268
294
269
295
#preview-content .preview-csv {
···
273
299
274
300
#preview-content .preview-csv td {
275
301
padding: 4px 8px;
276
-
border: 1px solid rgba(255, 255, 255, 0.1);
302
+
border: 1px solid var(--cmd-surface-divider);
277
303
}
278
304
279
305
#preview-content .preview-csv tr:first-child td {
280
-
background: rgba(255, 255, 255, 0.05);
306
+
background: var(--cmd-surface-hover);
281
307
font-weight: 500;
282
308
}
283
309
284
310
#preview-content .preview-plain {
285
-
color: rgba(255, 255, 255, 0.9);
311
+
color: var(--theme-text, #333);
286
312
}
287
313
288
314
#preview-content .preview-error {
289
-
color: #ff8888;
315
+
color: var(--base08, #ff3b30);
290
316
}
291
317
292
318
/* Preview table for JSON arrays of objects */
···
299
325
#preview-content .preview-table th {
300
326
text-align: left;
301
327
padding: 6px 8px;
302
-
background: rgba(255, 255, 255, 0.08);
303
-
border: 1px solid rgba(255, 255, 255, 0.1);
328
+
background: var(--cmd-surface-hover);
329
+
border: 1px solid var(--cmd-surface-divider);
304
330
font-weight: 500;
305
-
color: rgba(255, 255, 255, 0.9);
331
+
color: var(--theme-text, #333);
306
332
}
307
333
308
334
#preview-content .preview-table td {
309
335
padding: 4px 8px;
310
-
border: 1px solid rgba(255, 255, 255, 0.1);
311
-
color: rgba(255, 255, 255, 0.8);
336
+
border: 1px solid var(--cmd-surface-divider);
337
+
color: var(--theme-text-secondary, #666);
312
338
}
313
339
314
340
#preview-content .preview-table tr:hover td {
315
-
background: rgba(255, 255, 255, 0.05);
341
+
background: var(--cmd-surface-hover);
316
342
}
317
343
318
344
/* Preview list for simple arrays */
···
322
348
323
349
#preview-content .preview-list-item {
324
350
padding: 2px 0;
325
-
color: rgba(255, 255, 255, 0.85);
351
+
color: var(--theme-text, #333);
326
352
}
327
353
328
354
#preview-content .preview-more {
329
355
padding-top: 6px;
330
-
color: rgba(255, 255, 255, 0.5);
356
+
color: var(--theme-text-muted, #999);
331
357
font-style: italic;
332
358
font-size: 10px;
333
359
}
···
338
364
align-items: center;
339
365
padding: 8px 12px;
340
366
margin: 10px 10px 5px 10px;
341
-
background: rgba(60, 100, 160, 0.95);
367
+
background: var(--cmd-exec-bg);
342
368
border-radius: 8px;
343
369
font-size: 13px;
344
370
gap: 10px;
···
351
377
}
352
378
353
379
#execution-state.error {
354
-
background: rgba(160, 60, 60, 0.95);
380
+
background: var(--cmd-exec-error-bg);
355
381
}
356
382
357
383
#execution-state .spinner {
358
384
width: 14px;
359
385
height: 14px;
360
-
border: 2px solid rgba(255, 255, 255, 0.3);
361
-
border-top-color: white;
386
+
border: 2px solid var(--theme-text-muted, #999);
387
+
border-top-color: var(--theme-text, #333);
362
388
border-radius: 50%;
363
389
animation: spin 0.8s linear infinite;
364
390
}
···
369
395
370
396
#execution-state .exec-text {
371
397
flex: 1;
372
-
color: rgba(255, 255, 255, 0.9);
398
+
color: var(--theme-text, #333);
373
399
}
374
400
375
401
#execution-state .exec-error {
376
-
color: #ff8888;
402
+
color: var(--base08, #ff3b30);
377
403
}
378
404
379
405
#execution-state .exec-cancel {
380
406
background: none;
381
407
border: none;
382
-
color: rgba(255, 255, 255, 0.6);
408
+
color: var(--theme-text-secondary, #666);
383
409
cursor: pointer;
384
410
font-size: 12px;
385
411
padding: 2px 8px;
···
387
413
}
388
414
389
415
#execution-state .exec-cancel:hover {
390
-
color: white;
391
-
background: rgba(255, 255, 255, 0.1);
416
+
color: var(--theme-text, #333);
417
+
background: var(--cmd-surface-hover);
392
418
border-radius: 3px;
393
419
}
394
420
···
397
423
display: flex;
398
424
align-items: center;
399
425
padding: 4px 10px;
400
-
background: rgba(255, 255, 255, 0.15);
401
-
border: 1px solid rgba(255, 255, 255, 0.2);
426
+
background: var(--cmd-badge-bg);
427
+
border: 1px solid var(--cmd-surface-divider);
402
428
border-radius: 12px;
403
429
font-size: 11px;
404
430
font-weight: 500;
405
-
color: rgba(255, 255, 255, 0.9);
431
+
color: var(--theme-text, #333);
406
432
cursor: pointer;
407
433
transition: all 0.15s ease;
408
434
margin-right: 10px;
···
412
438
}
413
439
414
440
.mode-indicator:hover {
415
-
background: rgba(255, 255, 255, 0.25);
416
-
border-color: rgba(255, 255, 255, 0.3);
441
+
background: var(--cmd-surface-selected);
442
+
border-color: var(--cmd-surface-divider);
417
443
}
418
444
419
445
.mode-indicator:active {
420
-
background: rgba(255, 255, 255, 0.3);
446
+
background: var(--cmd-surface-selected);
421
447
transform: scale(0.98);
422
448
}
423
449
···
450
476
display: none;
451
477
padding: 6px 12px;
452
478
margin: 5px 10px 0 10px;
453
-
background: rgba(50, 60, 80, 0.95);
479
+
background: var(--cmd-chain-steps-bg);
454
480
border-radius: 8px;
455
481
font-size: 11px;
456
482
font-family: var(--theme-font-mono);
457
-
color: rgba(255, 255, 255, 0.7);
483
+
color: var(--theme-text-secondary, #666);
458
484
width: calc(100% - 20px);
459
485
box-sizing: border-box;
460
486
white-space: nowrap;
···
466
492
}
467
493
468
494
#chain-steps .chain-step {
469
-
color: rgba(255, 255, 255, 0.6);
495
+
color: var(--theme-text-secondary, #666);
470
496
}
471
497
472
498
#chain-steps .chain-step.active {
473
-
color: rgba(150, 200, 255, 1);
499
+
color: var(--base0D, #007aff);
474
500
font-weight: 600;
475
501
}
476
502
477
503
#chain-steps .chain-arrow {
478
-
color: rgba(255, 255, 255, 0.3);
504
+
color: var(--theme-text-muted, #999);
479
505
margin: 0 6px;
480
506
}
481
507
+2
-2
extensions/hud/styles.css
+2
-2
extensions/hud/styles.css
···
25
25
#hud-container {
26
26
width: 100%;
27
27
padding: 10px;
28
-
background: rgba(0, 0, 0, 0.81);
28
+
background: color-mix(in srgb, var(--base00) 81%, transparent);
29
29
backdrop-filter: blur(12px);
30
30
-webkit-backdrop-filter: blur(12px);
31
31
border-radius: 8px;
32
-
border: 1px solid rgba(255, 255, 255, 0.04);
32
+
border: var(--theme-surface-border, 1px solid rgba(255, 255, 255, 0.04));
33
33
-webkit-app-region: no-drag;
34
34
}
35
35
+2
-2
extensions/hud/widgets/stats.html
+2
-2
extensions/hud/widgets/stats.html
···
15
15
line-height: 1.6;
16
16
}
17
17
.stats-grid .stat-label {
18
-
color: rgba(255, 255, 255, 0.3);
18
+
color: var(--theme-text-muted, #999);
19
19
}
20
20
.stats-grid .stat-value {
21
-
color: rgba(255, 255, 255, 0.5);
21
+
color: var(--theme-text-secondary, #666);
22
22
text-align: right;
23
23
font-variant-numeric: tabular-nums;
24
24
}
+5
-5
extensions/hud/widgets/widget.css
+5
-5
extensions/hud/widgets/widget.css
···
25
25
width: 100%;
26
26
height: 100%;
27
27
padding: 8px 10px;
28
-
color: rgba(255, 255, 255, 0.45);
28
+
color: var(--theme-text-secondary, #666);
29
29
font-size: 11px;
30
30
}
31
31
···
34
34
font-weight: 500;
35
35
text-transform: uppercase;
36
36
letter-spacing: 0.5px;
37
-
color: rgba(255, 255, 255, 0.25);
37
+
color: var(--theme-text-muted, #999);
38
38
margin-bottom: 2px;
39
39
}
40
40
41
41
.widget-value {
42
42
font-size: 12px;
43
43
font-weight: 400;
44
-
color: rgba(255, 255, 255, 0.45);
44
+
color: var(--theme-text-secondary, #666);
45
45
line-height: 1.4;
46
46
}
47
47
···
59
59
60
60
/* Group mode — elevated visual treatment */
61
61
.mode-group {
62
-
color: rgba(255, 255, 255, 0.7);
62
+
color: var(--theme-text, #333);
63
63
font-weight: 500;
64
64
}
65
65
···
79
79
.group-name {
80
80
font-size: 13px;
81
81
font-weight: 600;
82
-
color: rgba(255, 255, 255, 0.75);
82
+
color: var(--theme-text, #333);
83
83
letter-spacing: 0.2px;
84
84
white-space: nowrap;
85
85
overflow: hidden;