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 #1f2335 activityBar.border #1f2335 activityBar.foreground #7982a9 activityBar.inactiveForeground #41496b activityBarBadge.background #3d59a1 activityBarBadge.foreground #fff 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 #565f89 — 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.
badge.background
#7e83b233
badge.foreground #a9b1d6
breadcrumb.activeSelectionForeground #a9b1d6
breadcrumb.background #1f2335
breadcrumb.focusForeground #a9b1d6
breadcrumb.foreground #545c7e
breadcrumbPicker.background #1f2335
button.background #3d59a1dd
button.foreground #ffffff
button.hoverBackground #3d59a1AA
charts.blue #7aa2f7
charts.foreground #9AA5CE
charts.green #73daca
charts.lines #1f2335
charts.orange #ff9e64
charts.purple #9d7cd8
charts.red #f7768e
charts.yellow #e0af68
debugConsole.errorForeground #bb616b
debugConsole.infoForeground #7982a9
debugConsole.sourceForeground #7982a9
debugConsole.warningForeground #c49a5a
debugConsoleInputIcon.foreground #73daca
debugExceptionWidget.background #1b1e2e
debugExceptionWidget.border #963c47
debugTokenExpression.boolean #ff9e64
debugTokenExpression.error #bb616b
debugTokenExpression.name #7dcfff
debugTokenExpression.number #ff9e64
debugTokenExpression.string #9ece6a
debugTokenExpression.value #9aa5ce
debugToolBar.background #1b1e2e
debugView.stateLabelBackground #1b1e2e
debugView.stateLabelForeground #7982a9
debugView.valueChangedHighlight #3d59a1cc
descriptionForeground #545c7e
diffEditor.insertedTextBackground #41a6b515
diffEditor.removedTextBackground #db4b4b22
dropdown.background #1b1e2e
dropdown.foreground #7982a9
dropdown.listBackground #1b1e2e
editor.background #24283b
editor.findMatchBackground #3d59a166
editor.findMatchBorder #ffdb69aa
editor.findMatchHighlightBackground #3d59a166
editor.findRangeHighlightBackground #6f7bb625
editor.focusedStackFrameHighlightBackground #73daca20
editor.foldBackground #181b294a
editor.foreground #a9b1d6
editor.inactiveSelectionBackground #6f7bb615
editor.lineHighlightBackground #292e42
editor.rangeHighlightBackground #6f7bb620
editor.selectionBackground #6f7bb630
editor.selectionHighlightBackground #6f7bb633
editor.stackFrameHighlightBackground #e2bd3a20
editor.wordHighlightBackground #6f7bb633
editor.wordHighlightStrongBackground #6f7bb644
editorBracketHighlight.foreground1 #698cd6
editorBracketHighlight.foreground2 #68b3de
editorBracketHighlight.foreground3 #9a7ecc
editorBracketHighlight.foreground4 #25aac2
editorBracketHighlight.foreground5 #80a856
editorBracketHighlight.foreground6 #cfa25f
editorBracketHighlight.unexpectedBracket.foreground #db4b4b
editorBracketMatch.background #1f2335
editorBracketMatch.border #545c7e
editorBracketPairGuide.activeBackground1 #698cd6
editorBracketPairGuide.activeBackground2 #68b3de
editorBracketPairGuide.activeBackground3 #9a7ecc
editorBracketPairGuide.activeBackground4 #25aac2
editorBracketPairGuide.activeBackground5 #80a856
editorBracketPairGuide.activeBackground6 #cfa25f
editorCodeLens.foreground #565f89
editorCursor.foreground #c0caf5
editorError.foreground #db4b4b
editorGroup.border #1b1e2e
editorGroup.dropBackground #292e42
editorGroupHeader.border #1b1e2e
editorGroupHeader.noTabsBackground #1f2335
editorGroupHeader.tabsBackground #1f2335
editorGroupHeader.tabsBorder #1b1e2e
editorGutter.addedBackground #164846
editorGutter.deletedBackground #823c41
editorGutter.modifiedBackground #394b70
editorHint.foreground #0da0ba
editorHoverWidget.background #1f2335
editorHoverWidget.border #1b1e2e
editorIndentGuide.activeBackground #3b4261
editorIndentGuide.background #292e42
editorInfo.foreground #0da0ba
editorLightBulb.foreground #e0af68
editorLightBulbAutoFix.foreground #e0af68
editorLineNumber.activeForeground #737aa2
editorLineNumber.foreground #3b4261
editorLink.activeForeground #a9b1d6
editorMarkerNavigation.background #1f2335
editorOverviewRuler.addedForeground #164846
editorOverviewRuler.border #1b1e2e
editorOverviewRuler.bracketMatchForeground #1b1e2e
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 #1f2335
editorRuler.foreground #1b1e2e
editorSuggestWidget.background #1f2335
editorSuggestWidget.border #1b1e2e
editorSuggestWidget.highlightForeground #668ac4
editorSuggestWidget.selectedBackground #282e44
editorWarning.foreground #e0af68
editorWhitespace.foreground #3b4261
editorWidget.background #1f2335
editorWidget.resizeBorder #545c7e33
errorForeground #5a607d
extensionBadge.remoteBackground #3d59a1
extensionBadge.remoteForeground #ffffff
extensionButton.prominentBackground #3d59a1DD
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #3d59a1AA
focusBorder #545c7e33
foreground #7982a9
gitDecoration.addedResourceForeground #449dab
gitDecoration.conflictingResourceForeground #bb7a61
gitDecoration.deletedResourceForeground #914c54
gitDecoration.ignoredResourceForeground #545c7e
gitDecoration.modifiedResourceForeground #6183bb
gitDecoration.renamedResourceForeground #449dab
gitDecoration.stageDeletedResourceForeground #914c54
gitDecoration.stageModifiedResourceForeground #6183bb
gitDecoration.untrackedResourceForeground #449dab
gitlens.gutterForegroundColor #565f89
gitlens.gutterUncommittedForegroundColor #565f89
gitlens.trailingLineForegroundColor #565f89
icon.foreground #7982a9
input.background #1b1e2e
input.border #282e44
input.foreground #a9b1d6
input.placeholderForeground #4a5272
inputOption.activeBackground #3d59a144
inputOption.activeForeground #c0caf5
inputValidation.errorBackground #85353e
inputValidation.errorBorder #963c47
inputValidation.errorForeground #bbc2e0
inputValidation.infoBackground #0da0ba
inputValidation.infoBorder #0db9d7
inputValidation.infoForeground #000000
inputValidation.warningBackground #c2985b
inputValidation.warningBorder #e0af68
inputValidation.warningForeground #000000
list.activeSelectionBackground #2c324a
list.activeSelectionForeground #a9b1d6
list.deemphasizedForeground #7982a9
list.dropBackground #292e42
list.errorForeground #bb616b
list.focusBackground #292e42
list.focusForeground #a9b1d6
list.highlightForeground #668ac4
list.hoverBackground #1b1e2e
list.hoverForeground #a9b1d6
list.inactiveSelectionBackground #292e42
list.inactiveSelectionForeground #a9b1d6
list.invalidItemForeground #c97018
list.warningForeground #c49a5a
listFilterWidget.background #1b1e2e
listFilterWidget.noMatchesOutline #a6333f
listFilterWidget.outline #3d59a1
menu.background #1f2335
menu.border #1b1e2e
menu.foreground #7982a9
menu.selectionBackground #2f3549
menu.selectionForeground #c0caf5
menu.separatorBackground #1b1e2e
menubar.selectionBackground #2f3549
menubar.selectionBorder #1b1e2e
menubar.selectionForeground #c0caf5
merge.currentContentBackground #007a7544
merge.currentHeaderBackground #007a75aa
merge.incomingContentBackground #3d59a144
merge.incomingHeaderBackground #3d59a1aa
minimapGutter.addedBackground #1C5957
minimapGutter.deletedBackground #944449
minimapGutter.modifiedBackground #425882
notificationCenterHeader.background #1b1e2e
notificationLink.foreground #6183bb
notifications.background #1b1e2e
notificationsErrorIcon.foreground #bb616b
notificationsInfoIcon.foreground #0da0ba
notificationsWarningIcon.foreground #bba461
panel.background #1f2335
panel.border #1b1e2e
panelInput.border #1f2335
panelTitle.activeBorder #1f2335
panelTitle.activeForeground #7982a9
panelTitle.inactiveForeground #545c7e
peekView.border #1b1e2e
peekViewEditor.background #1f2335
peekViewEditor.matchHighlightBackground #3d59a166
peekViewResult.background #1b1e2e
peekViewResult.fileForeground #7982a9
peekViewResult.lineForeground #a9b1d6
peekViewResult.matchHighlightBackground #3d59a166
peekViewResult.selectionBackground #3d59a133
peekViewResult.selectionForeground #a9b1d6
peekViewTitle.background #1b1e2e
peekViewTitleDescription.foreground #7982a9
peekViewTitleLabel.foreground #a9b1d6
pickerGroup.border #1b1e2e
pickerGroup.foreground #a9b1d6
progressBar.background #3d59a1
sash.hoverBorder #29355a
scrollbar.shadow #00000033
scrollbarSlider.activeBackground #9cacff22
scrollbarSlider.background #9cacff15
scrollbarSlider.hoverBackground #9cacff10
selection.background #6f7bb635
settings.headerForeground #6183bb
sideBar.background #1f2335
sideBar.border #1b1e2e
sideBar.dropBackground #292e42
sideBar.foreground #7982a9
sideBarSectionHeader.background #1f2335
sideBarSectionHeader.border #1b1e2e
sideBarSectionHeader.foreground #a9b1d6
sideBarTitle.foreground #7982a9
statusBar.background #1f2335
statusBar.border #1b1e2e
statusBar.debuggingBackground #1f2335
statusBar.debuggingForeground #7982a9
statusBar.foreground #7982a9
statusBar.noFolderBackground #1f2335
statusBarItem.activeBackground #1b1e2e
statusBarItem.hoverBackground #282e44
statusBarItem.prominentBackground #1b1e2e
statusBarItem.prominentHoverBackground #282e44
tab.activeBackground #1f2335
tab.activeBorder #3d59a1
tab.activeForeground #a9b1d6
tab.activeModifiedBorder #282d42
tab.border #1b1e2e
tab.hoverForeground #a9b1d6
tab.inactiveBackground #1f2335
tab.inactiveForeground #7982a9
tab.inactiveModifiedBorder #282d42
tab.lastPinnedBorder #2c3147
tab.unfocusedActiveBorder #3b4261
tab.unfocusedActiveForeground #a9b1d6
tab.unfocusedHoverForeground #a9b1d6
tab.unfocusedInactiveForeground #7982a9
terminal.ansiBlack #414868
terminal.ansiBlue #7aa2f7
terminal.ansiBrightBlack #414868
terminal.ansiBrightBlue #7aa2f7
terminal.ansiBrightCyan #7dcfff
terminal.ansiBrightGreen #73daca
terminal.ansiBrightMagenta #bb9af7
terminal.ansiBrightRed #f7768e
terminal.ansiBrightWhite #a9b1d6
terminal.ansiBrightYellow #e0af68
terminal.ansiCyan #7dcfff
terminal.ansiGreen #73daca
terminal.ansiMagenta #bb9af7
terminal.ansiRed #f7768e
terminal.ansiWhite #7982a9
terminal.ansiYellow #e0af68
terminal.background #1f2335
terminal.foreground #7982a9
terminal.selectionBackground #6f7bb620
textBlockQuote.background #1f2335
textCodeBlock.background #1f2335
textLink.activeForeground #7dcfff
textLink.foreground #668ac4
textPreformat.foreground #73daca
textSeparator.foreground #545c7e
titleBar.activeBackground #1f2335
titleBar.activeForeground #7982a9
titleBar.border #1b1e2e
titleBar.inactiveBackground #1f2335
titleBar.inactiveForeground #7982a9
tree.indentGuidesStroke #2e344f
walkThrough.embeddedEditorBackground #1f2335
widget.shadow #ffffff00
window.activeBorder #0d0f17
window.inactiveBorder #0d0f17 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 #7582ba —
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant #ff9e64 —
string, constant.other.symbol, constant.other.key, meta.attribute-selector #9ece6a
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 #2ac3de —
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.haskell #e0af68 —
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars #c0caf5 —
variable.other.object #c0caf5 —
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, variable.other.object.property.cs #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 #bb9af7 —
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 #2ac3de —
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 #2ac3de —
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 #bb9af7 —
text.html constant.character.entity #2AC3DE —
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 #2ac3de —
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 #2ac3de —
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.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 #565f89 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 } ! ` ;
}
crazy-moon | Coding Theme