Skip to main content
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBorder #000000 activityBar.background #eeeeee activityBar.border #cccccc00 activityBar.foreground #000000 activityBar.inactiveForeground #666666 activityBarBadge.background #000000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment #666666 — entity.other.attribute-name #666699 — constant, entity.name.constant, variable.other.constant, variable.language, entity #666699 — entity.name, meta.export.default, meta.definition.variable #447799 — variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Gabriel's Theme — Gabriel (Light) Gabriel's Theme | Coding Theme
activityBarBadge.foreground
#eeeeee
badge.background #000000
badge.foreground #eeeeee
breadcrumb.activeSelectionForeground #000000
breadcrumb.focusForeground #000000
breadcrumb.foreground #444444
breadcrumbPicker.background #eeeeee
button.background #000000
button.foreground #eeeeee
button.hoverBackground #000000
button.secondaryBackground #dddddd
button.secondaryForeground #444444
button.secondaryHoverBackground #cccccc
checkbox.background #eeeeee
checkbox.border #cccccc
commandCenter.activeBackground #cccccc
commandCenter.background #dddddd
debugToolBar.background #eeeeee
descriptionForeground #000000
diffEditor.insertedTextBackground #77996633
diffEditor.removedTextBackground #88444433
dropdown.background #eeeeee
dropdown.border #cccccc
dropdown.foreground #444444
dropdown.listBackground #eeeeee
editor.background #eeeeee
editor.findMatchBackground #AA884444
editor.findMatchHighlightBackground #AA884422
editor.focusedStackFrameHighlightBackground #cccccc
editor.foldBackground #dddddd
editor.foreground #000000
editor.inactiveSelectionBackground #dddddd
editor.lineHighlightBackground #dddddd
editor.linkedEditingBackground #dddddd
editor.selectionBackground #dddddd
editor.selectionHighlightBackground #dddddd
editor.selectionHighlightBorder #dddddd
editor.stackFrameHighlightBackground #aa884425
editor.wordHighlightBackground #dddddd
editor.wordHighlightBorder #eeeeee00
editor.wordHighlightStrongBackground #eeeeee00
editor.wordHighlightStrongBorder #eeeeee00
editorBracketMatch.background #dddddd
editorBracketMatch.border #eeeeee00
editorCursor.foreground #000000
editorGroup.border #cccccc00
editorGroupHeader.tabsBackground #eeeeee
editorGroupHeader.tabsBorder #cccccc00
editorGutter.addedBackground #779966
editorGutter.deletedBackground #884444
editorGutter.modifiedBackground #AA8844
editorHoverWidget.background #eeeeee
editorHoverWidget.foreground #444444
editorIndentGuide.activeBackground #bbbbbb
editorIndentGuide.background #cccccc
editorInlayHint.background #dddddd
editorInlayHint.foreground #444444
editorLineNumber.activeForeground #444444
editorLineNumber.foreground #666666
editorOverviewRuler.border #eeeeee
editorOverviewRuler.errorForeground #884444
editorRuler.foreground #cccccc
editorWhitespace.foreground #666666
editorWidget.background #eeeeee
editorWidget.border #cccccc
errorForeground #884444
errorLens.errorBackground #88444433
errorLens.errorBackgroundLight #88444433
errorLens.errorForeground #884444
errorLens.errorForegroundLight #884444
errorLens.hintBackground #44779933
errorLens.hintBackgroundLight #44779933
errorLens.hintForeground #447799
errorLens.hintForegroundLight #447799
errorLens.infoBackground #44779933
errorLens.infoBackgroundLight #44779933
errorLens.infoForeground #447799
errorLens.infoForegroundLight #447799
errorLens.warningBackground #AA884433
errorLens.warningBackgroundLight #AA884433
errorLens.warningForeground #AA884433
errorLens.warningForegroundLight #AA8844
focusBorder #eeeeee00
foreground #444444
gitDecoration.addedResourceForeground #779966
gitDecoration.conflictingResourceForeground #AA8844
gitDecoration.deletedResourceForeground #884444
gitDecoration.ignoredResourceForeground #666666
gitDecoration.modifiedResourceForeground #AA8844
gitDecoration.submoduleResourceForeground #000000
gitDecoration.untrackedResourceForeground #779966
icon.foreground #444444
input.background #eeeeee
input.border #cccccc
input.foreground #444444
input.placeholderForeground #444444
list.activeSelectionBackground #dddddd
list.activeSelectionForeground #000000
list.errorForeground #884444
list.focusBackground #dddddd
list.focusForeground #000000
list.highlightForeground #000000
list.hoverBackground #dddddd
list.hoverForeground #000000
list.inactiveFocusBackground #dddddd
list.inactiveSelectionBackground #dddddd
list.inactiveSelectionForeground #444444
list.warningForeground #AA8844
minimap.selectionHighlight #dddddd
notificationCenterHeader.background #eeeeee
notificationCenterHeader.foreground #444444
notifications.background #eeeeee
notifications.border #cccccc
notifications.foreground #000000
notificationsErrorIcon.foreground #884444
notificationsInfoIcon.foreground #447799
notificationsWarningIcon.foreground #AA8844
panel.background #eeeeee
panel.border #cccccc00
panelInput.border #cccccc
panelTitle.activeBorder #000000
panelTitle.activeForeground #000000
panelTitle.inactiveForeground #444444
peekView.border #cccccc
peekViewEditor.background #eeeeee
peekViewEditor.matchHighlightBackground #AA884433
peekViewResult.background #eeeeee
peekViewResult.matchHighlightBackground #AA884433
peekViewTitle.background #eeeeee
pickerGroup.border #cccccc
pickerGroup.foreground #000000
progressBar.background #000000
quickInput.background #eeeeee
quickInput.foreground #444444
scrollbar.shadow #eeeeee00
scrollbarSlider.activeBackground #cccccc
scrollbarSlider.background #cccccc
scrollbarSlider.hoverBackground #cccccc
selection.background #cccccc
settings.headerForeground #000000
settings.modifiedItemIndicator #000000
sideBar.background #eeeeee
sideBar.border #cccccc00
sideBar.foreground #444444
sideBarSectionHeader.background #eeeeee
sideBarSectionHeader.border #cccccc00
sideBarSectionHeader.foreground #444444
sideBarTitle.foreground #444444
statusBar.background #eeeeee
statusBar.border #cccccc00
statusBar.debuggingBackground #000000
statusBar.debuggingForeground #eeeeee
statusBar.foreground #444444
statusBar.noFolderBackground #eeeeee
statusBarItem.prominentBackground #eeeeee
tab.activeBackground #eeeeee
tab.activeBorder #000000
tab.activeBorderTop #eeeeee
tab.activeForeground #000000
tab.border #cccccc00
tab.hoverBackground #eeeeee
tab.inactiveBackground #eeeeee
tab.inactiveForeground #444444
tab.unfocusedActiveBorder #eeeeee
tab.unfocusedActiveBorderTop #eeeeee
tab.unfocusedHoverBackground #eeeeee
terminal.ansiBlack #000000
terminal.ansiBlue #447799
terminal.ansiBrightBlack #444444
terminal.ansiBrightBlue #447799
terminal.ansiBrightCyan #449999
terminal.ansiBrightGreen #779966
terminal.ansiBrightMagenta #666699
terminal.ansiBrightRed #884444
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #AA8844
terminal.ansiCyan #449999
terminal.ansiGreen #779966
terminal.ansiMagenta #666699
terminal.ansiRed #884444
terminal.ansiWhite #cccccc
terminal.ansiYellow #AA8844
terminal.foreground #000000
terminal.selectionBackground #cccccc
textBlockQuote.background #eeeeee
textBlockQuote.border #000000
textCodeBlock.background #eeeeee
textLink.activeForeground #000000
textLink.foreground #000000
textPreformat.foreground #000000
textSeparator.foreground #444444
titleBar.activeBackground #eeeeee
titleBar.activeForeground #444444
titleBar.border #cccccc00
titleBar.inactiveBackground #eeeeee
titleBar.inactiveForeground #444444
tree.indentGuidesStroke #cccccc entity.name.function #666699 —
entity.name.tag, support.class.component #447799 —
keyword.operator, storage.type.function.arrow #884444 —
storage, storage.type #884444 —
storage.modifier.package, storage.modifier.import, storage.type.java #000000 —
string, punctuation.definition.string, string punctuation.section.embedded source #447799 —
meta.property-name #447799 —
invalid.deprecated #884444 —
invalid.unimplemented #884444 —
source.regexp, string.regexp #447799 —
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition #447799 —
string.regexp constant.character.escape #447799 bold
meta.module-reference #447799 —
punctuation.definition.list.begin.markdown #AA8844 —
markup.heading, markup.heading entity.name #447799 bold
markup.italic #000000 italic
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted #884444 —
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted #447799 —
markup.changed, punctuation.definition.changed #AA8844 —
markup.ignored, markup.untracked #777777 —
meta.diff.range #666699 bold
meta.separator #447799 bold
meta.export.default #000000 —
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote #000000 —
brackethighlighter.unmatched #884444 —
constant.other.reference.link, string.other.link #447799 underline
token.error-token #884444 —
token.debug-token #666699 —
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser (id : string ) : Promise < User | null > {
if ( ! id) {
return null ;
}
const response = await fetch ( `/api/users/${ id }` , {
method: "GET" ,
headers: { Accept: "application/json" },
});
if ( ! response.ok) {
throw new Error ( `HTTP ${ response . status }` );
}
return ( await response. json ()) as User ;
}
function greet (user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name }!` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
main*
Button.tsx
fetchUser
31
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser (id : string ) : Promise < User | null > {
if ( ! id) {
return null ;
}
const response = await fetch ( `/api/users/${ id }` , {
method: "GET" ,
headers: { Accept: "application/json" },
});
if ( ! response.ok) {
throw new Error ( `HTTP ${ response . status }` );
}
return ( await response. json ()) as User ;
}
function greet (user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name }!` ;
}