Skip to main content
Home Theme VS Code invi Custom theme inspired by Tokyo Night, Nocterial Palenight, Nanowise and more!
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 #5865f2 activityBar.background #16161e activityBar.border #16161e activityBar.foreground #787c99 activityBar.inactiveForeground #3b3e52 activityBarBadge.background #5865f2 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 #444b6a — 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
#fff
badge.background #7e83b230
badge.foreground #acb0d0
breadcrumb.activeSelectionForeground #5865f2
breadcrumb.background #16161e
breadcrumb.focusForeground #a9b1d6
breadcrumb.foreground #515670
breadcrumbPicker.background #16161e
button.background #3d59a1dd
button.foreground #ffffff
button.hoverBackground #3d59a1AA
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 #101014
debugExceptionWidget.border #963c47
debugTokenExpression.boolean #ff9e64
debugTokenExpression.error #bb616b
debugTokenExpression.name #7dcfff
debugTokenExpression.number #ff9e64
debugTokenExpression.string #9ece6a
debugTokenExpression.value #9aa5ce
debugToolBar.background #101014
debugView.stateLabelBackground #14141b
debugView.stateLabelForeground #787c99
debugView.valueChangedHighlight #3d59a1aa
descriptionForeground #515670
diffEditor.insertedTextBackground #41a6b515
diffEditor.removedTextBackground #db4b4b22
dropdown.background #14141b
dropdown.foreground #787c99
dropdown.listBackground #14141b
editor.background #1a1b26
editor.findMatchBackground #3d59a166
editor.findMatchBorder #5865f2
editor.findMatchHighlightBackground #3d59a166
editor.findRangeHighlightBackground #515c7e33
editor.focusedStackFrameHighlightBackground #73daca20
editor.foldBackground #1111174a
editor.foreground #a9b1d6
editor.inactiveSelectionBackground #515c7e25
editor.lineHighlightBackground #1e202e
editor.rangeHighlightBackground #515c7e20
editor.selectionBackground #515c7e40
editor.selectionHighlightBackground #515c7e44
editor.selectionHighlightBorder #5865f2b6
editor.stackFrameHighlightBackground #E2BD3A20
editor.wordHighlightBackground #515c7e44
editor.wordHighlightStrongBackground #515c7e55
editorBracketHighlight.foreground1 #698cd6
editorBracketHighlight.foreground2 #68b3de
editorBracketHighlight.foreground3 #9a7ecc
editorBracketHighlight.foreground4 #25aac2
editorBracketHighlight.foreground5 #80a856
editorBracketHighlight.foreground6 #c49a5a
editorBracketHighlight.unexpectedBracket.foreground #db4b4b
editorBracketMatch.background #16161e
editorBracketMatch.border #42465d
editorBracketPairGuide.activeBackground1 #698cd6
editorBracketPairGuide.activeBackground2 #68b3de
editorBracketPairGuide.activeBackground3 #9a7ecc
editorBracketPairGuide.activeBackground4 #25aac2
editorBracketPairGuide.activeBackground5 #80a856
editorBracketPairGuide.activeBackground6 #c49a5a
editorCodeLens.foreground #484f70
editorCursor.foreground #c0caf5
editorError.foreground #db4b4b
editorGroup.border #101014
editorGroup.dropBackground #1e202e
editorGroupHeader.border #101014
editorGroupHeader.noTabsBackground #16161e
editorGroupHeader.tabsBackground #16161e
editorGroupHeader.tabsBorder #101014
editorGutter.addedBackground #164846
editorGutter.deletedBackground #823c41
editorGutter.modifiedBackground #394b70
editorHint.foreground #0da0ba
editorHoverWidget.background #16161e
editorHoverWidget.border #101014
editorIndentGuide.activeBackground #363b54
editorIndentGuide.background #1e202e
editorInfo.foreground #0da0ba
editorLightBulb.foreground #e0af68
editorLightBulbAutoFix.foreground #e0af68
editorLineNumber.activeForeground #737aa2
editorLineNumber.foreground #363b54
editorLink.activeForeground #acb0d0
editorMarkerNavigation.background #16161e
editorOverviewRuler.addedForeground #164846
editorOverviewRuler.border #101014
editorOverviewRuler.bracketMatchForeground #101014
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 #5865f2a9
editorSuggestWidget.background #16161e
editorSuggestWidget.border #101014
editorSuggestWidget.highlightForeground #5865f2
editorSuggestWidget.selectedBackground #20222c
editorWarning.foreground #e0af68
editorWhitespace.foreground #363b54
editorWidget.background #16161e
editorWidget.border #5865f2
editorWidget.resizeBorder #5865f2
errorForeground #515670
extensionBadge.remoteBackground #3d59a1
extensionBadge.remoteForeground #ffffff
extensionButton.prominentBackground #3d59a1DD
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #3d59a1AA
focusBorder #545c7e33
foreground #787c99
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
gitlens.gutterForegroundColor #444b6a
gitlens.gutterUncommittedForegroundColor #444b6a
gitlens.trailingLineForegroundColor #444b6a
icon.foreground #787c99
input.background #14141b
input.border #0f0f14
input.foreground #a9b1d6
input.placeholderForeground #787c998A
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 #202330
list.activeSelectionForeground #5865f2
list.deemphasizedForeground #787c99
list.dropBackground #1e202e
list.errorForeground #bb616b
list.focusBackground #1c1d29
list.focusForeground #a9b1d6
list.highlightForeground #5865f2
list.hoverBackground #13131a
list.hoverForeground #a9b1d6
list.inactiveSelectionBackground #1c1d29
list.inactiveSelectionForeground #5865f2
list.invalidItemForeground #c97018
list.warningForeground #c49a5a
listFilterWidget.background #101014
listFilterWidget.noMatchesOutline #a6333f
listFilterWidget.outline #3d59a1
menu.background #16161e
menu.border #101014
menu.foreground #787c99
menu.selectionBackground #1e202e
menu.selectionForeground #5865f2
menu.separatorBackground #101014
menubar.selectionBackground #1e202e
menubar.selectionBorder #1b1e2e
menubar.selectionForeground #5865f2
merge.currentContentBackground #007a7544
merge.currentHeaderBackground #007a75aa
merge.incomingContentBackground #3d59a144
merge.incomingHeaderBackground #3d59a1aa
minimapGutter.addedBackground #1C5957
minimapGutter.deletedBackground #944449
minimapGutter.modifiedBackground #425882
notebook.focusedCellBorder #5865f2a9
notebook.selectedCellBorder #5865f2a9
notificationCenterHeader.background #101014
notificationLink.foreground #5865f2
notifications.background #101014
notificationsErrorIcon.foreground #bb616b
notificationsInfoIcon.foreground #0da0ba
notificationsWarningIcon.foreground #bba461
panel.background #16161e
panel.border #101014
panelInput.border #16161e
panelTitle.activeBorder #5865f2
panelTitle.activeForeground #787c99
panelTitle.inactiveForeground #42465d
peekView.border #5865f2a9
peekViewEditor.background #16161e
peekViewEditor.matchHighlightBackground #3d59a166
peekViewResult.background #101014
peekViewResult.fileForeground #787c99
peekViewResult.lineForeground #a9b1d6
peekViewResult.matchHighlightBackground #3d59a166
peekViewResult.selectionBackground #3d59a133
peekViewResult.selectionForeground #a9b1d6
peekViewTitle.background #101014
peekViewTitleDescription.foreground #787c99
peekViewTitleLabel.foreground #a9b1d6
pickerGroup.border #101014
pickerGroup.foreground #5865f2
progressBar.background #5865f2
sash.hoverBorder #29355a
scrollbar.shadow #00000033
scrollbarSlider.activeBackground #5865f250
scrollbarSlider.background #868bc415
scrollbarSlider.hoverBackground #868bc410
selection.background #5865f240
settings.headerForeground #5865f2
settings.modifiedItemIndicator #5865f2
sideBar.background #16161e
sideBar.border #101014
sideBar.dropBackground #1e202e
sideBar.foreground #787c99
sideBarSectionHeader.background #16161e
sideBarSectionHeader.border #101014
sideBarSectionHeader.foreground #a9b1d6
sideBarTitle.foreground #787c99
statusBar.background #16161e
statusBar.border #101014
statusBar.debuggingBackground #16161e
statusBar.debuggingForeground #787c99
statusBar.foreground #787c99
statusBar.noFolderBackground #16161e
statusBarItem.activeBackground #101014
statusBarItem.hoverBackground #20222c
statusBarItem.prominentBackground #101014
statusBarItem.prominentHoverBackground #20222c
statusBarItem.remoteBackground #5865f2
tab.activeBackground #16161e
tab.activeBorder #5865f2
tab.activeBorderTop #5865f2
tab.activeForeground #a9b1d6
tab.activeModifiedBorder #1a1b26
tab.border #101014
tab.hoverForeground #a9b1d6
tab.inactiveBackground #16161e
tab.inactiveForeground #787c99
tab.inactiveModifiedBorder #1f202e
tab.lastPinnedBorder #222333
tab.unfocusedActiveBorder #1f202e
tab.unfocusedActiveForeground #a9b1d6
tab.unfocusedHoverForeground #a9b1d6
tab.unfocusedInactiveForeground #787c99
terminal.ansiBlack #565869
terminal.ansiBlue #5DD9FF
terminal.ansiBrightBlack #75798F
terminal.ansiBrightBlue #14B1FF
terminal.ansiBrightCyan #04d1bc
terminal.ansiBrightGreen #B3FF63
terminal.ansiBrightMagenta #FF94D2
terminal.ansiBrightRed #FFAEAC
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #F5B900
terminal.ansiCyan #04d1bc
terminal.ansiGreen #2DAE58
terminal.ansiMagenta #FF577F
terminal.ansiRed #FF577F
terminal.ansiWhite #FAFBF9
terminal.ansiYellow #FFCC00
textBlockQuote.background #16161e
textCodeBlock.background #16161e
textLink.activeForeground #7dcfff
textLink.foreground #5865f2
textPreformat.foreground #9699a8
textSeparator.foreground #363b54
titleBar.activeBackground #16161e
titleBar.activeForeground #787c99
titleBar.border #101014
titleBar.inactiveBackground #16161e
titleBar.inactiveForeground #787c99
tree.indentGuidesStroke #2b2b3b
walkThrough.embeddedEditorBackground #16161e
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 #646e9c —
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 #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 #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 #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 #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 #bb9af7 —
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 #9aa5ce —
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 } ! ` ;
}
invi | Coding Theme