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 #ffffff activityBar.background #111111 activityBar.border #33333300 activityBar.foreground #ffffff activityBar.inactiveForeground #999999 activityBarBadge.background #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment #999999 — entity.other.attribute-name #8888bb — constant, entity.name.constant, variable.other.constant, variable.language, entity #8888bb — entity.name, meta.export.default, meta.definition.variable #6699bb — 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 (Dark)
activityBarBadge.foreground
#111111
badge.background #ffffff
badge.foreground #111111
breadcrumb.activeSelectionForeground #ffffff
breadcrumb.focusForeground #ffffff
breadcrumb.foreground #bbbbbb
breadcrumbPicker.background #111111
button.background #ffffff
button.foreground #111111
button.hoverBackground #ffffff
button.secondaryBackground #222222
button.secondaryForeground #bbbbbb
button.secondaryHoverBackground #333333
checkbox.background #111111
checkbox.border #333333
commandCenter.activeBackground #333333
commandCenter.background #222222
debugToolBar.background #111111
descriptionForeground #ffffff
diffEditor.insertedTextBackground #99bb8833
diffEditor.removedTextBackground #aa666633
dropdown.background #111111
dropdown.border #333333
dropdown.foreground #bbbbbb
dropdown.listBackground #111111
editor.background #111111
editor.findMatchBackground #ccaa6633
editor.findMatchHighlightBackground #ccaa6633
editor.focusedStackFrameHighlightBackground #333333
editor.foldBackground #222222
editor.foreground #ffffff
editor.inactiveSelectionBackground #222222
editor.lineHighlightBackground #222222
editor.linkedEditingBackground #222222
editor.selectionBackground #222222
editor.selectionHighlightBackground #222222
editor.selectionHighlightBorder #222222
editor.stackFrameHighlightBackground #ccaa6633
editor.wordHighlightBackground #222222
editor.wordHighlightBorder #11111100
editor.wordHighlightStrongBackground #11111100
editor.wordHighlightStrongBorder #11111100
editorBracketMatch.background #222222
editorBracketMatch.border #11111100
editorCursor.foreground #ffffff
editorGroup.border #33333300
editorGroupHeader.tabsBackground #111111
editorGroupHeader.tabsBorder #33333300
editorGutter.addedBackground #99bb88
editorGutter.deletedBackground #aa6666
editorGutter.modifiedBackground #ccaa66
editorHoverWidget.background #111111
editorHoverWidget.foreground #bbbbbb
editorIndentGuide.activeBackground #444444
editorIndentGuide.background #333333
editorInlayHint.background #222222
editorInlayHint.foreground #bbbbbb
editorLineNumber.activeForeground #bbbbbb
editorLineNumber.foreground #999999
editorOverviewRuler.border #111111
editorOverviewRuler.errorForeground #aa6666
editorRuler.foreground #333333
editorWhitespace.foreground #999999
editorWidget.background #111111
editorWidget.border #333333
errorForeground #aa6666
errorLens.errorBackground #aa666633
errorLens.errorBackgroundLight #aa666633
errorLens.errorForeground #aa6666
errorLens.errorForegroundLight #aa6666
errorLens.hintBackground #6699bb33
errorLens.hintBackgroundLight #6699bb33
errorLens.hintForeground #6699bb
errorLens.hintForegroundLight #6699bb
errorLens.infoBackground #6699bb33
errorLens.infoBackgroundLight #6699bb33
errorLens.infoForeground #6699bb
errorLens.infoForegroundLight #6699bb
errorLens.warningBackground #ccaa6633
errorLens.warningBackgroundLight #ccaa6633
errorLens.warningForeground #ccaa6633
errorLens.warningForegroundLight #ccaa66
focusBorder #11111100
foreground #bbbbbb
gitDecoration.addedResourceForeground #99bb88
gitDecoration.conflictingResourceForeground #ccaa66
gitDecoration.deletedResourceForeground #aa6666
gitDecoration.ignoredResourceForeground #999999
gitDecoration.modifiedResourceForeground #ccaa66
gitDecoration.submoduleResourceForeground #ffffff
gitDecoration.untrackedResourceForeground #99bb88
icon.foreground #bbbbbb
input.background #111111
input.border #333333
input.foreground #bbbbbb
input.placeholderForeground #bbbbbb
list.activeSelectionBackground #222222
list.activeSelectionForeground #ffffff
list.errorForeground #aa6666
list.focusBackground #222222
list.focusForeground #ffffff
list.highlightForeground #ffffff
list.hoverBackground #222222
list.hoverForeground #ffffff
list.inactiveFocusBackground #222222
list.inactiveSelectionBackground #222222
list.inactiveSelectionForeground #bbbbbb
list.warningForeground #ccaa66
minimap.selectionHighlight #222222
notificationCenterHeader.background #111111
notificationCenterHeader.foreground #bbbbbb
notifications.background #111111
notifications.border #333333
notifications.foreground #ffffff
notificationsErrorIcon.foreground #aa6666
notificationsInfoIcon.foreground #6699bb
notificationsWarningIcon.foreground #ccaa66
panel.background #111111
panel.border #33333300
panelInput.border #333333
panelTitle.activeBorder #ffffff
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #bbbbbb
peekView.border #333333
peekViewEditor.background #111111
peekViewEditor.matchHighlightBackground #ccaa6633
peekViewResult.background #111111
peekViewResult.matchHighlightBackground #ccaa6633
peekViewTitle.background #111111
pickerGroup.border #333333
pickerGroup.foreground #ffffff
progressBar.background #ffffff
quickInput.background #111111
quickInput.foreground #bbbbbb
scrollbar.shadow #11111100
scrollbarSlider.activeBackground #333333
scrollbarSlider.background #333333
scrollbarSlider.hoverBackground #333333
selection.background #333333
settings.headerForeground #ffffff
settings.modifiedItemIndicator #ffffff
sideBar.background #111111
sideBar.border #33333300
sideBar.foreground #bbbbbb
sideBarSectionHeader.background #111111
sideBarSectionHeader.border #33333300
sideBarSectionHeader.foreground #bbbbbb
sideBarTitle.foreground #bbbbbb
statusBar.background #111111
statusBar.border #33333300
statusBar.debuggingBackground #ffffff
statusBar.debuggingForeground #111111
statusBar.foreground #bbbbbb
statusBar.noFolderBackground #111111
statusBarItem.prominentBackground #111111
tab.activeBackground #111111
tab.activeBorder #ffffff
tab.activeBorderTop #111111
tab.activeForeground #ffffff
tab.border #33333300
tab.hoverBackground #111111
tab.inactiveBackground #111111
tab.inactiveForeground #bbbbbb
tab.unfocusedActiveBorder #111111
tab.unfocusedActiveBorderTop #111111
tab.unfocusedHoverBackground #111111
terminal.ansiBlack #111111
terminal.ansiBlue #6699bb
terminal.ansiBrightBlack #444444
terminal.ansiBrightBlue #6699bb
terminal.ansiBrightCyan #66bbbb
terminal.ansiBrightGreen #99bb88
terminal.ansiBrightMagenta #8888bb
terminal.ansiBrightRed #aa6666
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ccaa66
terminal.ansiCyan #66bbbb
terminal.ansiGreen #99bb88
terminal.ansiMagenta #8888bb
terminal.ansiRed #aa6666
terminal.ansiWhite #cccccc
terminal.ansiYellow #ccaa66
terminal.foreground #ffffff
terminal.selectionBackground #222222
textBlockQuote.background #111111
textBlockQuote.border #ffffff
textCodeBlock.background #111111
textLink.activeForeground #ffffff
textLink.foreground #ffffff
textPreformat.foreground #ffffff
textSeparator.foreground #bbbbbb
titleBar.activeBackground #111111
titleBar.activeForeground #bbbbbb
titleBar.border #33333300
titleBar.inactiveBackground #111111
titleBar.inactiveForeground #bbbbbb
tree.indentGuidesStroke #333333 meta.export.default #ffffff —
entity.name.function #8888bb —
entity.name.tag, support.class.component #6699bb —
keyword.operator, storage.type.function.arrow #aa6666 —
storage, storage.type #aa6666 —
storage.modifier.package, storage.modifier.import, storage.type.java #ffffff —
string, punctuation.definition.string, string punctuation.section.embedded source #6699bb —
meta.property-name #6699bb —
invalid.deprecated #aa6666 —
invalid.unimplemented #aa6666 —
source.regexp, string.regexp #6699bb —
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition #6699bb —
string.regexp constant.character.escape #6699bb bold
meta.module-reference #6699bb —
punctuation.definition.list.begin.markdown #ccaa66 —
markup.heading, markup.heading entity.name #6699bb bold
markup.italic #ffffff italic
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted #aa6666 —
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted #6699bb —
markup.changed, punctuation.definition.changed #ccaa66 —
markup.ignored, markup.untracked #999999 —
meta.diff.range #8888bb bold
meta.separator #6699bb bold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote #ffffff —
brackethighlighter.unmatched #aa6666 —
constant.other.reference.link, string.other.link #6699bb underline
token.error-token #aa6666 —
token.debug-token #8888bb —
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
fetchUser 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...
~/my-project
main*
Button.tsx
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 }!` ;
}
Gabriel's Theme | Coding Theme