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.background #111 activityBar.border #30604A60 activityBar.foreground #E2E2E2 activityBarBadge.background #6C9C87 activityBarBadge.foreground #222222 badge.background #22222230 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle token.warn-token, token.error-token, variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier, constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, entity.name, support.type, support.class, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name, support.function, markup.inserted, markup.changed, text.html.markdown markup.inline.raw.markdown, meta.function-call.generic.python, variable.parameter.js, constant.other.object.key.js, string.unquoted.label.js, variable.parameter.keyframe-list.css, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss, source.scss keyword.control, constant.other.php, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, punctuation.separator.key-value.html, string.other.link.description.title.markdown, constant.other.reference.link.markdown, markup.raw.block, punctuation.definition.italic.markdown, markup.italic.markdown, punctuation.definition.bold.markdown, markup.bold.markdown, punctuation.definition.entity.tsx #DA4E3F — constant.other.color, invalid, invalid.illegal, variable.parameter.function.language.special, variable.parameter, markup.deleted, entity.name.module.js, variable.import.parameter.js, variable.other.class.js, constant.numeric.dec.python, punctuation.definition.decorator.python, entity.name.function.decorator.python, meta.function.decorator.python, text.html.derivative
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#6C9C87
breadcrumb.activeSelectionForeground #345D98
breadcrumb.background #222222
breadcrumb.focusForeground #345D98
breadcrumb.foreground #e2e2e2
breadcrumbPicker.background #222222
button.background #30604A50
contrastBorder #0ea66240
debugToolBar.background #111
diffEditor.insertedTextBackground #D02D1C15
diffEditor.removedTextBackground #FFFFFF20
dropdown.background #222222
dropdown.border #FFFFFF10
editor.background #222222
editor.findMatchBackground #222222
editor.findMatchBorder #30604A
editor.findMatchHighlightBackground #30604A93
editor.findMatchHighlightBorder #FFFFFF30
editor.foreground #E2E2E2
editor.lineHighlightBackground #22222250
editor.selectionBackground #6C9C8730
editor.selectionHighlightBackground #30604A6b
editor.selectionHighlightBorder #5375A5f0
editorBracketMatch.background #222222
editorBracketMatch.border #30604a00
editorCursor.foreground #DABB7E
editorError.foreground #FFFFFF70
editorGroup.border #22222230
editorGroupHeader.tabsBackground #222222
editorGutter.addedBackground #D02D1C60
editorGutter.deletedBackground #FFFFFF60
editorGutter.modifiedBackground #6C9C8760
editorHoverWidget.background #222222
editorHoverWidget.border #FFFFFF10
editorIndentGuide.activeBackground1 #2F2F2F
editorIndentGuide.background1 #2F2F2F70
editorInfo.foreground #6C9C8770
editorLineNumber.activeForeground #6C9C87
editorLineNumber.foreground #30604Ac0
editorLink.activeForeground #E2E2E2
editorMarkerNavigation.background #E2E2E205
editorOverviewRuler.border #222222
editorOverviewRuler.errorForeground #FFFFFF40
editorOverviewRuler.findMatchForeground #30604A
editorOverviewRuler.infoForeground #6C9C8740
editorOverviewRuler.warningForeground #D02D1C70
editorRuler.foreground #2F2F2F
editorSuggestWidget.background #222222
editorSuggestWidget.border #FFFFFF10
editorSuggestWidget.foreground #E2E2E2
editorSuggestWidget.highlightForeground #DA4E3F
editorSuggestWidget.selectedBackground #30604A20
editorWarning.foreground #DA4E3F
editorWhitespace.foreground #E2E2E240
editorWidget.background #222222
editorWidget.border #DA4E3F
editorWidget.resizeBorder #30604A
extensionButton.prominentBackground #D02D1C90
extensionButton.prominentHoverBackground #FFFFFF
focusBorder #FFFFFF00
gitDecoration.conflictingResourceForeground #DA4E3F
gitDecoration.deletedResourceForeground #DA4E3F
gitDecoration.ignoredResourceForeground #C5C5C5
gitDecoration.modifiedResourceForeground #DABB7E
gitDecoration.untrackedResourceForeground #6C9C87
input.background #2F2F2F
input.border #FFFFFF10
input.foreground #E2E2E2
input.placeholderForeground #E2E2E260
inputOption.activeBackground #E2E2E230
inputOption.activeBorder #E2E2E230
inputValidation.errorBorder #FFFFFF50
inputValidation.infoBorder #6C9C8750
inputValidation.warningBorder #D02D1C50
list.activeSelectionBackground #E2E2E208
list.activeSelectionForeground #5375A5
list.focusBackground #2F2F2F
list.focusForeground #3A7359
list.highlightForeground #3A7359
list.hoverBackground #2F2F2F
list.hoverForeground #FFFFFF
list.inactiveSelectionBackground #5375a508
list.inactiveSelectionForeground #5375A5
list.warningForeground #DA4E3F
listFilterWidget.background #22222230
listFilterWidget.noMatchesOutline #22222230
listFilterWidget.outline #22222230
menu.background #222222f8
menu.border #30604A50
menu.foreground #E2E2E2
menu.selectionBackground #2F2F2F
menu.selectionBorder #22222230
menu.selectionForeground #E2E2E2
menu.separatorBackground #E2E2E2
menubar.selectionBackground #2f2f2f
menubar.selectionBorder #30604A50
menubar.selectionForeground #E2E2E2
minimap.background #1F1F1F
minimapGutter.addedBackground #FFFFFF
minimapGutter.deletedBackground #DA4E3F
minimapGutter.modifiedBackground #DA4E3F
minimapSlider.activeBackground #D02D1Cb0
minimapSlider.background #6C9C8748
minimapSlider.hoverBackground #6C9C877f
notificationLink.foreground #30604A
notifications.background #222222
notifications.foreground #E2E2E2
panel.background #222222
panel.border #DABB7E60
panelTitle.activeBorder #30604A
panelTitle.activeForeground #FFFFFF
panelTitle.inactiveForeground #E2E2E2
peekView.border #22222230
peekViewEditor.background #E2E2E205
peekViewEditor.matchHighlightBackground #30604A50
peekViewEditorGutter.background #E2E2E205
peekViewResult.background #E2E2E205
peekViewResult.matchHighlightBackground #30604A50
peekViewResult.selectionBackground #30604A70
peekViewTitle.background #E2E2E205
peekViewTitleDescription.foreground #E2E2E260
pickerGroup.foreground #30604A
progressBar.background #30604A
scrollbar.shadow #22222200
scrollbarSlider.activeBackground #30604Acc
scrollbarSlider.background #30604Abb
scrollbarSlider.hoverBackground #30604Aee
selection.background #30604A
settings.checkboxBackground #222222
settings.checkboxForeground #E2E2E2
settings.dropdownBackground #222222
settings.dropdownForeground #E2E2E2
settings.headerForeground #DABB7E
settings.modifiedItemIndicator #30604A
settings.numberInputBackground #222222
settings.numberInputForeground #E2E2E2
settings.textInputBackground #222222
settings.textInputForeground #E2E2E2
sideBar.background #161616
sideBar.border #30604A50
sideBar.foreground #E2E2E2
sideBarSectionHeader.background #222222
sideBarSectionHeader.border #22222260
sideBarSectionHeader.foreground #6C9C87
sideBarTitle.foreground #6C9C87
statusBar.background #30604A
statusBar.border #1F1F1F
statusBar.debuggingBackground #DA4E3F
statusBar.debuggingForeground #FFFFFF
statusBar.foreground #fff
statusBar.noFolderBackground #111
statusBar.noFolderForeground #6C9C87
statusBarItem.hoverBackground #30604a13
statusBarItem.remoteBackground #30604A
statusBarItem.remoteForeground #fff
tab.activeBackground #30604A50
tab.activeBorder #30604A
tab.activeForeground #FFFFFF
tab.activeModifiedBorder #30604A
tab.border #222222
tab.inactiveBackground #222
tab.inactiveForeground #E2E2E2af
tab.unfocusedActiveBackground #222
tab.unfocusedActiveBorder #222
tab.unfocusedActiveForeground #E2E2E2
tab.unfocusedInactiveBackground #222
tab.unfocusedInactiveForeground #E2E2E27f
terminal.ansiBlack #222222
terminal.ansiBlue #0057E7
terminal.ansiBrightBlack #222
terminal.ansiBrightBlue #0057E7
terminal.ansiBrightCyan #00B0E7
terminal.ansiBrightGreen #30604A
terminal.ansiBrightMagenta #D01CB3
terminal.ansiBrightRed #DA4E3F
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FEC32B
terminal.ansiCyan #00B0E7
terminal.ansiGreen #30604A
terminal.ansiMagenta #D01CB3
terminal.ansiRed #DA4E3F
terminal.ansiWhite #FFFFFF
terminal.ansiYellow #FEC32B
terminal.background #161616
terminalCursor.background #222222
terminalCursor.foreground #DABB7E
textLink.activeForeground #E2E2E2
textLink.foreground #5375A5
titleBar.activeBackground #111
titleBar.activeForeground #E2E2E2
titleBar.border #22222260
titleBar.inactiveBackground #222222
titleBar.inactiveForeground #E2E2E2
tree.indentGuidesStroke #2F2F2F
widget.shadow #22222230 #FFFFFF
Keyword, Storage, source.js constant.other.object.key.js string.unquoted.label.js, markup.quote, markup.italic.markdown — italic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.separator, punctuation.definition.tag.html, punctuation.separator.inheritance.php, entity.name.tag.reference.scss, constant.other.color.rgb-value.hex.css, punctuation.definition.constant.css, punctuation.support.type.property-name.begin.json, support.type.property-name.json, string.json #A7A8AF —
comment.line.number-sign.ignore, comment.block.css, punctuation.definition.comment.begin.css, punctuation.definition.comment.end.css, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js, entity.name.tag.tsx, comment.line.double-slash.tsx, punctuation.definition.comment.tsx, punctuation.definition.comment.json, comment.line.double-slash.js, comment.block.json.comments #565656 —
keyword.control.at-rule, keyword.control.operator, entity.name.function, editorBracketHighlight, string.regexp, constant.character.escape, token.debug-token, punctuation.terminator.rule.css, entity.name.tag.css, punctuation.definition.keyword.css, support.constant.media.css, meta.at-rule.media.header.css, keyword.control.at-rule.media.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.binding-pattern.object.js, meta.class-method.js entity.name.function.js, variable.other.object.js, entity.other.attribute-name.html, variable.other.readwrite.tsx, meta.embedded.expression.tsx, constant.numeric.decimal.tsx, punctuation.definition.raw.markdown, punctuation.definition.markdown, markup.underline.link.markdown #FEC32B —
punctuation.definition, entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.other.variable, string.other.link, markup.table, entity.other.attribute-name.id, meta.object-literal.key, text.html.markdown, punctuation.definition.list_item.markdown, keyword.control.conditional.js, support.constant, string.quoted.single.js, string.quoted.double.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, source.js constant.other.object.key.js string.unquoted.label.js, string.quoted.single.scss, keyword.operator.assignment.tsx, keyword.operator.relational.tsx #E2E2E2 —
comment.line.scss, punctuation.definition.comment.scss, comment.line.double-slash.js, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html, comment.line.double-slash.ts, punctuation.definition.comment.ts #6D6F7C —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, entity.name.tag.html, meta.import.tsx, variable.other.readwrite.alias.tsx, variable.other.constant.tsx, meta.definition.variable.tsx, meta.array-binding-pattern-variable.tsx, meta.var.expr.tsx, storage.type.js, source.python, entity.other.attribute-name.tsx #5375A5 —
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.class, variable.parameter.tsx, variable.other.object.tsx, punctuation.definition.entity.css, entity.other.attribute-name.id.css, storage.type.function.js #00B0E7 —
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.single.python, string.quoted.docstring.single.python, punctuation.definition.string.begin.tsx, punctuation.definition.string.end.tsx, string.quoted.double.tsx, string.quoted.single.tsx, string.quoted.double.ts, string.quoted.single.ts, punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts, string.other.link.title.markdown, punctuation.definition.string.begin.python, variable.other.readwrite.js, entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, meta.object-literal.key.js, string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.single.css, string.quoted.double.css, punctuation.definition.string.begin.css, punctuation.definition.string.end.css #6C9C87 —
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js — italic
string, variable.function, entity.name.function, entity.name.tag.other.html, entity.name.tag.block.any.html, variable.other.constant.js, variable.other.object.property.js, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, keyword.other.special-method, markup.bold, variable.function.constructor, source.sass keyword.control, punctuation.definition.string.begin.py, punctuation.definition.string.end.py #3A7359 —
support.type, variable.argument.css #B2CCD6 —
constant.other.caps.python #0057E7 —
keyword.control.import.python #C5C5C5 —
comment.line.number-sign.python, punctuation.definition.comment.python, string.template.js #777777 —
meta.function-call.arguments.python, meta.function-call.python, meta.member.access.python #E9CF9C —
*url*, *link*, *uri*, markup.underline — underline
text.html.markdown markup.inline.raw.markdown, markup.quote punctuation.definition.blockquote.markdown #30604A50 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown #345D98 bold
variable.language.fenced.markdown, token.info-token #30604A —
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*
P90 | Coding Theme 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 } ! ` ;
}