Skip to content

Commit 3b87e4e

Browse files
ciscoheatciscoheat
committed
Added vscode theme to SuperDebug.
1 parent 3ab9cde commit 3b87e4e

File tree

2 files changed

+118
-46
lines changed

2 files changed

+118
-46
lines changed

‎src/lib/client/SuperDebug.svelte‎

Lines changed: 111 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,37 @@
6262
*/
6363
export let functions = false;
6464
65+
/**
66+
* Theme, which can also be customized with CSS variables:
67+
* --sd-bg-color
68+
* --sd-label-color
69+
* --sd-promise-loading-color
70+
* --sd-promise-error-color
71+
* --sd-code-default
72+
* --sd-info
73+
* --sd-success
74+
* --sd-redirect
75+
* --sd-error
76+
* --sd-code-key
77+
* --sd-code-string
78+
* --sd-code-date
79+
* --sd-code-boolean
80+
* --sd-code-number
81+
* --sd-code-bigint
82+
* --sd-code-null
83+
* --sd-code-nan
84+
* --sd-code-undefined
85+
* --sd-code-function
86+
* --sd-sb-width
87+
* --sd-sb-height
88+
* --sd-sb-track-color
89+
* --sd-sb-track-color-focus
90+
* --sd-sb-thumb-color
91+
* --sd-sb-thumb-color-focus
92+
* @type {"default" | "vscode"}
93+
*/
94+
export let theme = 'default';
95+
6596
/**
6697
* @param {unknown} json
6798
* @returns {string}
@@ -182,6 +213,23 @@
182213
);
183214
}
184215
216+
const themeStyle =
217+
theme == 'vscode'
218+
? `
219+
--sd-vscode-bg-color:#1f1f1f;
220+
--sd-vscode-label-color:#cccccc;
221+
--sd-vscode-code-default:#8c8a89;
222+
--sd-vscode-code-key:#9cdcfe;
223+
--sd-vscode-code-string:#ce9171;
224+
--sd-vscode-code-number:#b5c180;
225+
--sd-vscode-code-boolean:#4a9cd6;
226+
--sd-vscode-code-null:#4a9cd6;
227+
--sd-vscode-code-undefined:#4a9cd6;
228+
--sd-vscode-sb-thumb-color:#35373a;
229+
--sd-vscode-sb-thumb-color-focus:#4b4d50;
230+
`
231+
: undefined;
232+
185233
/** @type {EncodeableData} */
186234
let debugData;
187235
@@ -200,7 +248,7 @@
200248
</script>
201249

202250
{#if display}
203-
<div class="super-debug">
251+
<div class="super-debug" style={themeStyle}>
204252
<div
205253
class="super-debug--status {label === ''
206254
? 'absolute inset-x-0 top-0'
@@ -222,7 +270,9 @@
222270
class="super-debug--pre {label === '' ? 'pt-4' : 'pt-0'}"
223271
bind:this={ref}><code class="super-debug--code"
224272
><slot
225-
>{#if assertPromise(debugData, raw, promise)}{#await promiseSyntaxHighlight(debugData)}<div>Loading data...</div>{:then result}{@html result}{/await}{:else}{@html syntaxHighlight(
273+
>{#if assertPromise(debugData, raw, promise)}{#await promiseSyntaxHighlight(debugData)}<div
274+
class="super-debug--promise-loading">Loading data...</div>{:then result}{@html result}{:catch error}<div
275+
class="super-debug--promise-error">{error}</div>{/await}{:else}{@html syntaxHighlight(
226276
debugData
227277
)}{/if}</slot
228278
></code
@@ -302,7 +352,10 @@
302352
}
303353
304354
.super-debug {
305-
--_sd-bg-color: var(--sd-bg-color, rgb(30, 41, 59));
355+
--_sd-bg-color: var(
356+
--sd-bg-color,
357+
var(--sd-vscode-bg-color, rgb(30, 41, 59))
358+
);
306359
position: relative;
307360
background-color: var(--_sd-bg-color);
308361
border-radius: 0.5rem;
@@ -318,90 +371,123 @@
318371
}
319372
320373
.super-debug--label {
321-
color: var(--sd-label-color, white);
374+
color: var(--sd-label-color, var(--sd-vscode-label-color, white));
375+
}
376+
377+
.super-debug--promise-loading {
378+
color: var(
379+
--sd-promise-loading-color,
380+
var(--sd-vscode-promise-loading-color, #999)
381+
);
382+
}
383+
384+
.super-debug--promise-error {
385+
color: var(
386+
--sd-promise-error-color,
387+
var(--sd-vscode-promise-error-color, #ff475d)
388+
);
322389
}
323390
324391
.super-debug pre {
325-
color: var(--sd-code-default, #999);
392+
color: var(--sd-code-default, var(--sd-vscode-code-default, #999));
326393
background-color: var(--_sd-bg-color);
327394
margin-bottom: 0px;
328395
/** Sakura is doing 0.9em, turn font-size back to 1em **/
329396
font-size: 1em;
330397
}
331398
332399
.info {
333-
color: var(--sd-info, rgb(85, 85, 255));
400+
color: var(--sd-info, var(--sd-vscode-info, rgb(85, 85, 255)));
334401
}
335402
336403
.success {
337-
color: var(--sd-success, #2cd212);
404+
color: var(--sd-success, var(--sd-vscode-success, #2cd212));
338405
}
339406
340407
.redirect {
341-
color: var(--sd-redirect, #03cae5);
408+
color: var(--sd-redirect, var(--sd-vscode-redirect, #03cae5));
342409
}
343410
344411
.error {
345-
color: var(--sd-error, #ff475d);
412+
color: var(--sd-error, var(--sd-vscode-error, #ff475d));
346413
}
347414
348415
:global(.super-debug--code .key) {
349-
color: var(--sd-code-key, #eab308);
416+
color: var(--sd-code-key, var(--sd-vscode-code-key, #eab308));
350417
}
351418
352419
:global(.super-debug--code .string) {
353-
color: var(--sd-code-string, #6ec687);
420+
color: var(--sd-code-string, var(--sd-vscode-code-string, #6ec687));
354421
}
355422
356423
:global(.super-debug--code .date) {
357-
color: var(--sd-code-date, #f06962);
424+
color: var(--sd-code-date, var(--sd-vscode-code-date, #f06962));
358425
}
359426
360427
:global(.super-debug--code .boolean) {
361-
color: var(--sd-code-boolean, #79b8ff);
428+
color: var(--sd-code-boolean, var(--sd-vscode-code-boolean, #79b8ff));
362429
}
363430
364431
:global(.super-debug--code .number) {
365-
color: var(--sd-code-number, #af77e9);
432+
color: var(--sd-code-number, var(--sd-vscode-code-number, #af77e9));
366433
}
367434
368435
:global(.super-debug--code .bigint) {
369-
color: var(--sd-code-bigint, #af77e9);
436+
color: var(--sd-code-bigint, var(--sd-vscode-code-bigint, #af77e9));
370437
}
371438
372439
:global(.super-debug--code .null) {
373-
color: var(--sd-code-null, #238afe);
440+
color: var(--sd-code-null, var(--sd-vscode-code-null, #238afe));
374441
}
375442
376443
:global(.super-debug--code .nan) {
377-
color: var(--sd-code-nan, #af77e9);
444+
color: var(--sd-code-nan, var(--sd-vscode-code-nan, #af77e9));
378445
}
379446
380447
:global(.super-debug--code .undefined) {
381-
color: var(--sd-code-undefined, #238afe);
448+
color: var(
449+
--sd-code-undefined,
450+
var(--sd-vscode-code-undefined, #238afe)
451+
);
382452
}
383453
384454
:global(.super-debug--code .function) {
385-
color: var(--sd-code-function, #f06962);
455+
color: var(--sd-code-function, var(--sd-vscode-code-function, #f06962));
386456
}
387457
388458
.super-debug pre::-webkit-scrollbar {
389-
width: var(--sd-sb-width, 1.25rem);
390-
height: var(--sd-sb-height, 1.25rem);
459+
width: var(--sd-sb-width, var(--sd-vscode-sb-width, 1.25rem));
460+
height: var(--sd-sb-height, var(--sd-vscode-sb-height, 1.25rem));
391461
opacity: 0.5;
392462
}
393463
394464
.super-debug pre::-webkit-scrollbar-track {
395-
background-color: var(--sd-sb-track-color, hsl(0, 0%, 40%, 0.2));
465+
background-color: var(
466+
--sd-sb-track-color,
467+
--sd-vscode-sb-track-color,
468+
hsl(0, 0%, 40%, 0.2)
469+
);
396470
}
397471
.super-debug:is(:focus-within, :hover) pre::-webkit-scrollbar-track {
398-
background-color: var(--sd-sb-track-color-focus, hsl(0, 0%, 50%, 0.2));
472+
background-color: var(
473+
--sd-sb-track-color-focus,
474+
--sd-vscode-sb-track-color-focus,
475+
hsl(0, 0%, 50%, 0.2)
476+
);
399477
}
400478
401479
.super-debug pre::-webkit-scrollbar-thumb {
402-
background-color: var(--sd-sb-thumb-color, hsl(217, 50%, 50%, 0.5));
480+
background-color: var(
481+
--sd-sb-thumb-color,
482+
--sd-vscode-sb-thumb-color,
483+
hsl(217, 50%, 50%, 0.5)
484+
);
403485
}
404486
.super-debug:is(:focus-within, :hover) pre::-webkit-scrollbar-thumb {
405-
background-color: var(--sd-sb-thumb-color-focus, hsl(217, 50%, 50%));
487+
background-color: var(
488+
--sd-sb-thumb-color-focus,
489+
--sd-vscode-sb-thumb-color-focus,
490+
hsl(217, 50%, 50%)
491+
);
406492
}
407493
</style>

‎src/routes/super-debug/+page.svelte‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
import { readable } from 'svelte/store';
77
88
export let data;
9-
9+
1010
const bigSForm = superForm(data.bigForm);
1111
const bigForm = bigSForm.form;
12-
$bigForm.full_name = 'Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.';
12+
$bigForm.full_name =
13+
'Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.';
1314
1415
const { form } = superForm(data.form);
1516
@@ -22,11 +23,10 @@
2223
const someObject = {
2324
full_name: 'Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.'
2425
};
25-
const promiseNeverCameTrue = new Promise((resolve, reject) => {
26-
setTimeout(() => resolve({}), 5000);
26+
const promiseNeverCameTrue = new Promise((_, reject) => {
27+
setTimeout(() => reject('Rejected'), 5000);
2728
});
2829
29-
3030
/** @type {() => Promise<unknown>} */
3131
let promiseProduct = async () => ({});
3232
@@ -203,27 +203,13 @@
203203
<section>
204204
<h4>Super Debug custom styling 😎</h4>
205205
<p>Bugs are easier to solve if they look familiar.</p>
206-
<SuperDebug
207-
data={$form}
208-
label="VS Code like theme"
209-
--sd-bg-color="#1f1f1f"
210-
--sd-label-color="#cccccc"
211-
--sd-code-default="#8c8a89"
212-
--sd-code-key="#9cdcfe"
213-
--sd-code-string="#ce9171"
214-
--sd-code-number="#b5c180"
215-
--sd-code-boolean="#4a9cd6"
216-
--sd-code-null="#4a9cd6"
217-
--sd-code-undefined="#4a9cd6"
218-
--sd-sb-thumb-color="#35373a"
219-
--sd-sb-thumb-color-focus="#4b4d50"
220-
/>
206+
<SuperDebug data={$form} label="VS Code like theme" theme="vscode" />
221207
<p
222208
style:margin-top="1em"
223209
style:padding-left="4px"
224210
style:background-color="#1f1f1f0f"
225211
>
226-
<strong>Note:</strong> styling the component produces de side effect
212+
<strong>Note:</strong> styling the component produces the side-effect
227213
described at the
228214
<a
229215
href="https://svelte.dev/docs/component-directives#style-props"

0 commit comments

Comments
 (0)