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 #000000 activityBar.border #00000000 activityBar.foreground #FFFFFF activityBar.inactiveForeground #A3A3A3 activityBarBadge.background #000000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, meta.var.expr storage.type, keyword.control.flow, keyword.control.return, meta.directive.vue punctuation.separator.key-value.html, meta.directive.vue entity.other.attribute-name.html, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.modifier — italic keyword.control.flow.block-scalar.literal — comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation #5C6370 — comment.block.documentation variable, comment.block.documentation storage, comment.block.documentation keyword, comment.block.documentation support, comment.block.documentation markup, comment.block.documentation markup.inline.raw.string.markdown, meta.other.type.phpdoc.php keyword.other.type.php, meta.other.type.phpdoc.php support.other.namespace.php, meta.other.type.phpdoc.php punctuation.separator.inheritance.php, meta.other.type.phpdoc.php support.class, keyword.other.phpdoc.php, log.date
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#FFFFFF
badge.background #2f2f2f
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #FFFFFF
breadcrumb.focusForeground #FFFFFF
breadcrumb.foreground #A3A3A3
breadcrumbPicker.background #141414
button.background #0a0a0a
button.foreground #FFFFFF
button.hoverBackground #131313
charts.blue #7aa2f7
charts.foreground #9AA5CE
charts.green #41a6b5
charts.lines #16161E
charts.orange #ff9e64
charts.purple #9d7cd8
charts.red #f7768e
charts.yellow #e0af68
debugConsole.errorForeground #bb616b
debugConsole.infoForeground #787C99
debugConsole.sourceForeground #787C99
debugConsole.warningForeground #c49a5a
debugConsoleInputIcon.foreground #73daca
debugExceptionWidget.background #0A0A0A
debugExceptionWidget.border #963c47
debugTokenExpression.boolean #ff9e64
debugTokenExpression.error #bb616b
debugTokenExpression.name #7dcfff
debugTokenExpression.number #ff9e64
debugTokenExpression.string #9ece6a
debugTokenExpression.value #9aa5ce
debugToolBar.background #141414
debugView.stateLabelBackground #0A0A0A
debugView.stateLabelForeground #FFFFFF
debugView.valueChangedHighlight #3d59a1aa
descriptionForeground #515670
diffEditor.insertedTextBackground #41a6b515
diffEditor.removedTextBackground #db4b4b22
dropdown.background #0a0a0a
dropdown.foreground #A3A3A3
dropdown.listBackground #0a0a0a
editor.background #000000
editor.findMatchBackground #515c7ea8
editor.findMatchHighlightBackground #00000000
editor.findRangeHighlightBackground #515c7e33
editor.focusedStackFrameHighlightBackground #73daca20
editor.foldBackground #1111174a
editor.foreground #FFFFFF
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #a3a3a300
editor.selectionBackground #515c7e30
editor.selectionHighlightBackground #515c7e44
editor.stackFrameHighlightBackground #E2BD3A20
editor.wordHighlightBackground #515c7e44
editor.wordHighlightStrongBackground #515c7e55
editorBracketHighlight.foreground1 #C5A804
editorBracketHighlight.foreground2 #68b3de
editorBracketHighlight.foreground3 #9a7ecc
editorBracketHighlight.foreground4 #25aac2
editorBracketHighlight.foreground5 #80a856
editorBracketHighlight.foreground6 #c49a5a
editorBracketHighlight.unexpectedBracket.foreground #db4b4b
editorBracketMatch.background #00000000
editorBracketMatch.border #00000000
editorBracketPairGuide.activeBackground1 #FFD700
editorBracketPairGuide.activeBackground2 #68b3de
editorBracketPairGuide.activeBackground3 #9a7ecc
editorBracketPairGuide.activeBackground4 #25aac2
editorBracketPairGuide.activeBackground5 #80a856
editorBracketPairGuide.activeBackground6 #c49a5a
editorCodeLens.foreground #484f70
editorCursor.foreground #FFFFFF
editorError.foreground #db4b4b
editorGroup.border #0A0A0A
editorGroup.dropBackground #31313131
editorGroupHeader.tabsBackground #00000000
editorGutter.addedBackground #164846
editorGutter.deletedBackground #823c41
editorGutter.modifiedBackground #394b70
editorHint.foreground #0da0ba
editorHoverWidget.background #0A0A0A
editorHoverWidget.border #0A0A0A
editorIndentGuide.activeBackground #2A2A2A
editorIndentGuide.background #0A0A0A
editorInfo.foreground #0da0ba
editorLightBulb.foreground #e0af68
editorLightBulbAutoFix.foreground #e0af68
editorLineNumber.activeForeground #FFFFFF
editorLineNumber.foreground #5C6370
editorLink.activeForeground #acb0d0
editorMarkerNavigation.background #16161E
editorOverviewRuler.addedForeground #164846
editorOverviewRuler.border #00000000
editorOverviewRuler.bracketMatchForeground #0A0A0A
editorOverviewRuler.deletedForeground #703438
editorOverviewRuler.errorForeground #db4b4b
editorOverviewRuler.findMatchForeground #a9b1d644
editorOverviewRuler.infoForeground #1abc9c
editorOverviewRuler.modifiedForeground #394b70
editorOverviewRuler.rangeHighlightForeground #a9b1d644
editorOverviewRuler.selectionHighlightForeground #a9b1d622
editorOverviewRuler.warningForeground #e0af68
editorOverviewRuler.wordHighlightForeground #bb9af755
editorOverviewRuler.wordHighlightStrongForeground #bb9af766
editorPane.background #16161E
editorRuler.foreground #d11515
editorSuggestWidget.background #141414
editorSuggestWidget.border #141414
editorSuggestWidget.focusHighlightForeground #FFFFFF
editorSuggestWidget.highlightForeground #08b7ec
editorSuggestWidget.selectedBackground #0A0A0A
editorWarning.foreground #e0af68
editorWhitespace.foreground #363B54
editorWidget.background #141414
editorWidget.foreground #FFFFFF
editorWidget.resizeBorder #00000000
errorForeground #FFFFFF
extensionBadge.remoteBackground #3d59a1
extensionBadge.remoteForeground #FFFFFF
extensionButton.prominentBackground #3d59a1DD
extensionButton.prominentForeground #FFFFFF
extensionButton.prominentHoverBackground #3d59a1AA
focusBorder #00000000
foreground #aaaaaa
gitDecoration.addedResourceForeground #449dab
gitDecoration.conflictingResourceForeground #bb7a61
gitDecoration.deletedResourceForeground #914c54
gitDecoration.ignoredResourceForeground #515670
gitDecoration.modifiedResourceForeground #6183bb
gitDecoration.renamedResourceForeground #449dab
gitDecoration.stageDeletedResourceForeground #914c54
gitDecoration.stageModifiedResourceForeground #6183bb
gitDecoration.untrackedResourceForeground #449dab
icon.foreground #FFFFFF
input.background #0A0A0A
input.foreground #FFFFFF
input.placeholderForeground #a3a3a3
inputOption.activeBackground #2a2a2a
inputOption.activeBorder #2a2a2a
inputOption.activeForeground #FFFFFF
inputOption.hoverBackground #2a2a2a
inputValidation.errorBackground #85353e
inputValidation.errorBorder #963c4700
inputValidation.errorForeground #bbc2e0
inputValidation.infoBackground #0da0ba
inputValidation.infoBorder #0db9d700
inputValidation.infoForeground #000000
inputValidation.warningBackground #c2985b
inputValidation.warningBorder #e0af6800
inputValidation.warningForeground #000000
list.activeSelectionBackground #31313181
list.activeSelectionForeground #FFFFFF
list.dropBackground #31313181
list.errorForeground #bb616b
list.focusBackground #31313181
list.focusForeground #FFFFFF
list.highlightForeground #668ac4
list.hoverBackground #31313181
list.hoverForeground #FFFFFF
list.inactiveSelectionBackground #31313181
list.inactiveSelectionForeground #FFFFFF
list.invalidItemForeground #c97018
list.warningForeground #c49a5a
listFilterWidget.background #141414
menu.background #141414
menu.foreground #aaaaaa
menu.selectionBackground #313131b7
menu.selectionForeground #FFFFFF
menu.separatorBackground #31313131
menubar.selectionForeground #FFFFFF
merge.currentContentBackground #007a7544
merge.currentHeaderBackground #007a75aa
merge.incomingContentBackground #3d59a144
merge.incomingHeaderBackground #3d59a1aa
minimapGutter.addedBackground #1C5957
minimapGutter.deletedBackground #944449
minimapGutter.modifiedBackground #425882
notificationLink.foreground #6183bb
notifications.background #141414
notificationsErrorIcon.foreground #bb616b
notificationsInfoIcon.foreground #0da0ba
notificationsWarningIcon.foreground #bba461
panel.background #000000
panel.border #0A0A0A
panelInput.border #16161E
panelTitle.activeBorder #000000
panelTitle.activeForeground #FFFFFF
panelTitle.inactiveForeground #A3A3A3
peekView.border #0A0A0A
peekViewEditor.background #16161E
peekViewEditor.matchHighlightBackground #3d59a166
peekViewResult.background #0A0A0A
peekViewResult.fileForeground #787C99
peekViewResult.lineForeground #a9b1d6
peekViewResult.matchHighlightBackground #3d59a166
peekViewResult.selectionBackground #3d59a133
peekViewResult.selectionForeground #a9b1d6
peekViewTitle.background #0A0A0A
peekViewTitleDescription.foreground #787C99
peekViewTitleLabel.foreground #a9b1d6
pickerGroup.border #0A0A0A
pickerGroup.foreground #a3a3a3
progressBar.background #3d59a1
sash.hoverBorder #0A0A0A
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #00000000
scrollbarSlider.background #00000000
scrollbarSlider.hoverBackground #00000000
selection.background #515c7e40
settings.headerForeground #FFFFFF
sideBar.background #000000
sideBar.border #0A0A0A
sideBar.foreground #A3A3A3
sideBarSectionHeader.background #00000000
sideBarSectionHeader.foreground #A3A3A3
sideBarTitle.foreground #FFFFFF
statusBar.background #000000
statusBar.debuggingBackground #000000
statusBar.debuggingForeground #A3A3A3
statusBar.foreground #A3A3A3
statusBar.noFolderBackground #000000
statusBarItem.activeBackground #0A0A0A
statusBarItem.hoverBackground #000000
statusBarItem.prominentBackground #0A0A0A
statusBarItem.prominentHoverBackground #20222C
tab.activeForeground #FFFFFF
tab.border #00000000
tab.hoverForeground #FFFFFF
tab.inactiveBackground #31313131
tab.inactiveForeground #A3A3A3
tab.unfocusedActiveForeground #A3A3A3
tab.unfocusedHoverForeground #FFFFFF
tab.unfocusedInactiveForeground #A3A3A3
terminal.ansiBlack #363B54
terminal.ansiBlue #7aa2f7
terminal.ansiBrightBlack #363B54
terminal.ansiBrightBlue #7aa2f7
terminal.ansiBrightCyan #7dcfff
terminal.ansiBrightGreen #41a6b5
terminal.ansiBrightMagenta #bb9af7
terminal.ansiBrightRed #f7768e
terminal.ansiBrightWhite #acb0d0
terminal.ansiBrightYellow #e0af68
terminal.ansiCyan #7dcfff
terminal.ansiGreen #41a6b5
terminal.ansiMagenta #bb9af7
terminal.ansiRed #f7768e
terminal.ansiWhite #787C99
terminal.ansiYellow #e0af68
terminal.background #000000
terminal.foreground #FFFFFF
terminal.selectionBackground #515c7e30
terminalCursor.background #000000
terminalCursor.foreground #FFFFFF
textBlockQuote.background #16161E
textCodeBlock.background #16161E
textLink.activeForeground #2e73e0
textLink.foreground #2e73e0
textPreformat.foreground #9699A8
textSeparator.foreground #363B54
titleBar.activeBackground #000000
titleBar.activeForeground #FFFFFF
titleBar.border #00000000
titleBar.inactiveBackground #000000
titleBar.inactiveForeground #A3A3A3
tree.inactiveIndentGuidesStroke #2A2A2A
tree.indentGuidesStroke #2A2A2A
walkThrough.embeddedEditorBackground #16161E meta.other.type.phpdoc.php support.class, comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation entity.name.type.instance #646e9c —
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant #ff9e64 —
string, constant.other.symbol, constant.other.key, meta.attribute-selector #badd88
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant #9aa5ce —
invalid, invalid.illegal #ff5370 —
invalid.deprecated #bb9af7 —
meta.var.expr storage.type, storage.modifier #9d7cd8 —
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig #7dcfff —
keyword.control.smarty, keyword.control.twig, support.constant.handlebars keyword.control, keyword.operator.comparison.twig, keyword.blade, entity.name.function.blade #0db9d7 —
keyword.operator.spread, keyword.operator.rest #f7768e bold
keyword.operator, keyword.control.as, keyword.other, keyword.operator.bitwise.shift, punctuation, text.html.twig meta.tag.inline.any.html, meta.tag.template.value.twig meta.function.arguments.twig, meta.directive.vue punctuation.separator.key-value.html, punctuation.definition.constant.markdown, punctuation.definition.string, punctuation.support.type.property-name, text.html.vue-html meta.tag, punctuation.definition.keyword, punctuation.terminator.rule, punctuation.definition.entity, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution, entity.name.operator, meta.property-list punctuation.separator.key-value, meta.at-rule.mixin punctuation.separator.key-value, meta.at-rule.function variable.parameter.url #89ddff —
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other #7dcfff —
keyword, keyword.control, keyword.other.important #bb9af7 —
keyword.other.DML #7dcfff —
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp #bb9af7 —
entity.name.tag support.class.component, meta.tag #de5971 —
punctuation.definition.tag #ba3c97 —
constant.other.php, variable.other.global.safer, variable.other.global.safer punctuation.definition.variable, variable.other.global, variable.other.global punctuation.definition.variable, constant.other #e0af68 —
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars #FFFFFF —
variable.other.object #cf6082 —
meta.array.literal variable #7dcfff —
meta.object-literal.key, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property #73daca —
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property #7dcfff —
variable.other.object.property #c0caf5 —
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key #41a6b5 —
source.cpp meta.block variable.other #f7768e —
support.other.variable #f7768e —
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs #7aa2f7 —
entity.name.function, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function #7aa2f7 —
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable #e0af68 —
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit #bb9af7 —
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.other.declaration #e2d2ff —
entity.other.inherited-class #bb9af7
support.class, support.type, variable.other.readwrite.alias, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier #0db9d7 —
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, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key #7aa2f7 —
support.constant.font-name, meta.definition.variable #9ece6a —
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss #9ece6a —
entity.other.attribute-name.id #fc7b7b —
entity.name.tag.css #0db9d7 —
entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference #e0af68 —
meta.property-list #9abdf5 —
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else #ff9e64 —
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css #73daca —
meta.property-list meta.property-list #9abdf5 —
meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include #bb9af7 —
keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword #9d7cd8 —
meta.property-list meta.at-rule.include #c0caf5 —
support.constant.property-value #ff9e64 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #c0caf5 —
variable.language #f7768e —
variable.other punctuation.definition.variable #c0caf5 —
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this #f7768e —
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #af84ff —
text.html constant.character.entity #0DB9D7 —
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html #bb9af7 —
source.sass keyword.control #7aa2f7 —
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value #bb9af7 —
punctuation.definition.group #f7768e —
constant.other.character-class.regexp #bb9af7 —
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp #e0af68 —
keyword.operator.quantifier.regexp #89ddff —
constant.character.escape.backslash #c0caf5 —
constant.character.escape #89ddff —
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #7aa2f7 —
keyword.other.unit #f7768e —
source.json meta.structure.dictionary.json support.type.property-name.json #7aa2f7 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #0db9d7 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #7dcfff —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #bb9af7 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #e0af68 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #0db9d7 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #73daca —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #f7768e —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #9ece6a —
punctuation.definition.list_item.markdown #9abdf5 —
meta.block, meta.brace, punctuation.definition.block, punctuation.definition.use, punctuation.definition.class, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, punctuation.definition.switch-expression.begin.bracket, punctuation.definition.switch-expression.end.bracket, punctuation.definition.section.switch-block.begin.bracket, punctuation.definition.section.switch-block.end.bracket, punctuation.definition.group.shell, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section #9abdf5 —
meta.jsx.children, meta.embedded.block #c0caf5 —
text.html, text.log #FFFFFF —
text.html.markdown markup.inline.raw.markdown #bb9af7 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #4E5579 —
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown #89ddff bold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown #61bdf2 bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown #7aa2f7 bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown #6d91de bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown #9aa5ce bold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown #747ca1 bold
markup.italic, markup.italic punctuation #c0caf5 italic
markup.bold, markup.bold punctuation #c0caf5 bold
markup.bold markup.italic, markup.bold markup.italic punctuation #c0caf5 bold italic
markup.underline, markup.underline punctuation — underline
markup.quote punctuation.definition.blockquote.markdown #4e5579 —
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown #73daca —
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown #89ddff —
meta.separator #444b6a bold
token.error-token #db4b4b —
token.debug-token #b267e6 —
entity.tag.apacheconf #f7768e —
meta.preprocessor #73daca —
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 } ! ` ;
}
Dark Moon | Coding Theme