Skip to main content
Home Theme VS Code Tokyo Night Moon NVim Theme Tokyo Night Moon but with colors from NVim port
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 #1e2030 activityBar.border #1e2030 activityBar.foreground #787c99 activityBar.inactiveForeground #3b3e52 activityBarBadge.background #3e68d7 activityBarBadge.foreground #fff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle entity.name.type.class, entity.name.type.module, entity.name.type.namespace — bold keyword.control.flow.block-scalar.literal — comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation #565f89 — keyword.operator.assignment.jsdoc, 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.
Tokyo Night Moon NVim Theme — Tokyo Night Moon NVim
badge.background
#7e83b230
badge.foreground #acb0d0
breadcrumb.activeSelectionForeground #828bb8
breadcrumb.background #1e2030
breadcrumb.focusForeground #828bb8
breadcrumb.foreground #515670
breadcrumbPicker.background #1e2030
button.background #3e68d7dd
button.foreground #ffffff
button.hoverBackground #3e68d7AA
button.secondaryBackground #3b3e52
charts.blue #82aaff
charts.foreground #9AA5CE
charts.green #41a6b5
charts.lines #1e2030
charts.orange #ff966c
charts.purple #fca7ea
charts.red #ff757f
charts.yellow #ffc777
debugConsole.errorForeground #bb616b
debugConsole.infoForeground #787c99
debugConsole.sourceForeground #787c99
debugConsole.warningForeground #c49a5a
debugConsoleInputIcon.foreground #4fd6be
debugExceptionWidget.background #16161e
debugExceptionWidget.border #963c47
debugIcon.breakpointDisabledForeground #414761
debugIcon.breakpointForeground #c53b53
debugIcon.breakpointUnverifiedForeground #c24242
debugTokenExpression.boolean #ff966c
debugTokenExpression.error #bb616b
debugTokenExpression.name #86e1fc
debugTokenExpression.number #ff966c
debugTokenExpression.string #c3e88d
debugTokenExpression.value #9aa5ce
debugToolBar.background #16161e
debugView.stateLabelBackground #14141b
debugView.stateLabelForeground #787c99
debugView.valueChangedHighlight #3e68d7aa
descriptionForeground #515670
diffEditor.diagonalFill #2f334d
diffEditor.insertedLineBackground #41a6b520
diffEditor.insertedTextBackground #41a6b520
diffEditor.removedLineBackground #c53b5322
diffEditor.removedTextBackground #c53b5322
diffEditorGutter.insertedLineBackground #41a6b525
diffEditorGutter.removedLineBackground #c53b5322
diffEditorOverview.insertedForeground #41a6b525
diffEditorOverview.removedForeground #c53b5322
dropdown.background #14141b
dropdown.foreground #787c99
dropdown.listBackground #14141b
editor.background #222436
editor.findMatchBackground #3e68d766
editor.findMatchBorder #ffc777
editor.findMatchHighlightBackground #3e68d766
editor.findRangeHighlightBackground #515c7e33
editor.focusedStackFrameHighlightBackground #4fd6be20
editor.foldBackground #1111174a
editor.foreground #828bb8
editor.inactiveSelectionBackground #515c7e25
editor.lineHighlightBackground #2f334d
editor.rangeHighlightBackground #515c7e20
editor.selectionBackground #515c7e4d
editor.selectionHighlightBackground #515c7e44
editor.stackFrameHighlightBackground #E2BD3A20
editor.wordHighlightBackground #515c7e44
editor.wordHighlightStrongBackground #515c7e55
editorBracketHighlight.foreground1 #698cd699
editorBracketHighlight.foreground2 #68b3de99
editorBracketHighlight.foreground3 #9a7ecc99
editorBracketHighlight.foreground4 #25aac299
editorBracketHighlight.foreground5 #80a85699
editorBracketHighlight.foreground6 #c49a5a99
editorBracketHighlight.unexpectedBracket.foreground #c53b53
editorBracketMatch.background #1e2030
editorBracketMatch.border #42465d
editorBracketPairGuide.activeBackground1 #698cd699
editorBracketPairGuide.activeBackground2 #68b3de99
editorBracketPairGuide.activeBackground3 #9a7ecc99
editorBracketPairGuide.activeBackground4 #25aac299
editorBracketPairGuide.activeBackground5 #80a85699
editorBracketPairGuide.activeBackground6 #c49a5a99
editorCodeLens.foreground #484f70
editorCursor.foreground #c8d3f5
editorError.foreground #c53b53
editorGhostText.foreground #646e9c
editorGroup.border #16161e
editorGroup.dropBackground #1e202e
editorGroupHeader.border #16161e
editorGroupHeader.noTabsBackground #1e2030
editorGroupHeader.tabsBackground #1e2030
editorGroupHeader.tabsBorder #16161e
editorGutter.addedBackground #164846
editorGutter.deletedBackground #823c41
editorGutter.modifiedBackground #394b70
editorHint.foreground #0da0ba
editorHoverWidget.background #1e2030
editorHoverWidget.border #16161e
editorIndentGuide.activeBackground #363b54
editorIndentGuide.background #1e202e
editorInfo.foreground #0da0ba
editorLightBulb.foreground #ffc777
editorLightBulbAutoFix.foreground #ffc777
editorLineNumber.activeForeground #737aa2
editorLineNumber.foreground #363b54
editorLink.activeForeground #acb0d0
editorMarkerNavigation.background #1e2030
editorOverviewRuler.addedForeground #164846
editorOverviewRuler.border #16161e
editorOverviewRuler.bracketMatchForeground #16161e
editorOverviewRuler.deletedForeground #703438
editorOverviewRuler.errorForeground #c53b53
editorOverviewRuler.findMatchForeground #828bb844
editorOverviewRuler.infoForeground #4fd6be
editorOverviewRuler.modifiedForeground #394b70
editorOverviewRuler.rangeHighlightForeground #828bb844
editorOverviewRuler.selectionHighlightForeground #828bb822
editorOverviewRuler.warningForeground #ffc777
editorOverviewRuler.wordHighlightForeground #c099ff55
editorOverviewRuler.wordHighlightStrongForeground #c099ff66
editorPane.background #1e2030
editorRuler.foreground #16161e
editorSuggestWidget.background #1e2030
editorSuggestWidget.border #16161e
editorSuggestWidget.highlightForeground #6183bb
editorSuggestWidget.selectedBackground #20222c
editorWarning.foreground #ffc777
editorWhitespace.foreground #363b54
editorWidget.background #1e2030
editorWidget.foreground #787c99
editorWidget.resizeBorder #545c7e33
errorForeground #515670
extensionBadge.remoteBackground #3e68d7
extensionBadge.remoteForeground #ffffff
extensionButton.prominentBackground #3e68d7DD
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #3e68d7AA
focusBorder #545c7e33
foreground #787c99
gitDecoration.addedResourceForeground #449dab
gitDecoration.conflictingResourceForeground #ffc777cc
gitDecoration.deletedResourceForeground #914c54
gitDecoration.ignoredResourceForeground #515670
gitDecoration.modifiedResourceForeground #6183bb
gitDecoration.renamedResourceForeground #449dab
gitDecoration.stageDeletedResourceForeground #914c54
gitDecoration.stageModifiedResourceForeground #6183bb
gitDecoration.untrackedResourceForeground #449dab
gitlens.gutterBackgroundColor #1e2030
gitlens.gutterForegroundColor #787c99
gitlens.gutterUncommittedForegroundColor #82aaff
gitlens.trailingLineForegroundColor #646e9c
icon.foreground #787c99
input.background #14141b
input.border #0f0f14
input.foreground #828bb8
input.placeholderForeground #787c998A
inputOption.activeBackground #3e68d744
inputOption.activeForeground #c8d3f5
inputValidation.errorBackground #85353e
inputValidation.errorBorder #963c47
inputValidation.errorForeground #bbc2e0
inputValidation.infoBackground #3e68d75c
inputValidation.infoBorder #3e68d7
inputValidation.infoForeground #bbc2e0
inputValidation.warningBackground #c2985b
inputValidation.warningBorder #ffc777
inputValidation.warningForeground #000000
list.activeSelectionBackground #14141b
list.activeSelectionForeground #828bb8
list.deemphasizedForeground #787c99
list.dropBackground #1e202e
list.errorForeground #bb616b
list.focusBackground #1c1d29
list.focusForeground #828bb8
list.highlightForeground #668ac4
list.hoverBackground #13131a
list.hoverForeground #828bb8
list.inactiveSelectionBackground #14141b
list.inactiveSelectionForeground #828bb8
list.invalidItemForeground #c97018
list.warningForeground #c49a5a
listFilterWidget.background #16161e
listFilterWidget.noMatchesOutline #a6333f
listFilterWidget.outline #3e68d7
menu.background #1e2030
menu.border #16161e
menu.foreground #787c99
menu.selectionBackground #1e202e
menu.selectionForeground #828bb8
menu.separatorBackground #16161e
menubar.selectionBackground #14141b
menubar.selectionBorder #1b1e2e
menubar.selectionForeground #828bb8
merge.currentContentBackground #007a7544
merge.currentHeaderBackground #41a6b525
merge.incomingContentBackground #3e68d744
merge.incomingHeaderBackground #3e68d7aa
mergeEditor.change.background #41a6b525
mergeEditor.change.word.background #41a6b540
mergeEditor.conflict.handled.minimapOverViewRuler #449dab
mergeEditor.conflict.handledFocused.border #41a6b565
mergeEditor.conflict.handledUnfocused.border #41a6b525
mergeEditor.conflict.unhandled.minimapOverViewRuler #ffc777
mergeEditor.conflict.unhandledFocused.border #ffc777b0
mergeEditor.conflict.unhandledUnfocused.border #ffc77788
minimapGutter.addedBackground #1C5957
minimapGutter.deletedBackground #944449
minimapGutter.modifiedBackground #425882
notebook.cellBorderColor #16161e
notebook.cellEditorBackground #1e2030
notebook.cellStatusBarItemHoverBackground #1c1d29
notebook.editorBackground #222436
notebook.focusedCellBorder #29355a
notificationCenterHeader.background #16161e
notificationLink.foreground #6183bb
notifications.background #16161e
notificationsErrorIcon.foreground #bb616b
notificationsInfoIcon.foreground #0da0ba
notificationsWarningIcon.foreground #bba461
panel.background #1e2030
panel.border #16161e
panelInput.border #1e2030
panelTitle.activeBorder #1e2030
panelTitle.activeForeground #787c99
panelTitle.inactiveForeground #42465d
peekView.border #16161e
peekViewEditor.background #1e2030
peekViewEditor.matchHighlightBackground #3e68d766
peekViewResult.background #16161e
peekViewResult.fileForeground #787c99
peekViewResult.lineForeground #828bb8
peekViewResult.matchHighlightBackground #3e68d766
peekViewResult.selectionBackground #3e68d733
peekViewResult.selectionForeground #828bb8
peekViewTitle.background #16161e
peekViewTitleDescription.foreground #787c99
peekViewTitleLabel.foreground #828bb8
pickerGroup.border #16161e
pickerGroup.foreground #828bb8
progressBar.background #3e68d7
sash.hoverBorder #29355a
scrollbar.shadow #00000033
scrollbarSlider.activeBackground #868bc422
scrollbarSlider.background #868bc415
scrollbarSlider.hoverBackground #868bc410
selection.background #515c7e40
settings.headerForeground #6183bb
sideBar.background #1e2030
sideBar.border #16161e
sideBar.dropBackground #1e202e
sideBar.foreground #787c99
sideBarSectionHeader.background #1e2030
sideBarSectionHeader.border #16161e
sideBarSectionHeader.foreground #828bb8
sideBarTitle.foreground #787c99
statusBar.background #1e2030
statusBar.border #16161e
statusBar.debuggingBackground #1e2030
statusBar.debuggingForeground #787c99
statusBar.foreground #787c99
statusBar.noFolderBackground #1e2030
statusBarItem.activeBackground #16161e
statusBarItem.hoverBackground #20222c
statusBarItem.prominentBackground #16161e
statusBarItem.prominentHoverBackground #20222c
tab.activeBackground #1e2030
tab.activeBorder #3e68d7
tab.activeForeground #828bb8
tab.activeModifiedBorder #222436
tab.border #16161e
tab.hoverForeground #828bb8
tab.inactiveBackground #1e2030
tab.inactiveForeground #787c99
tab.inactiveModifiedBorder #1f202e
tab.lastPinnedBorder #222333
tab.unfocusedActiveBorder #1f202e
tab.unfocusedActiveForeground #828bb8
tab.unfocusedHoverForeground #828bb8
tab.unfocusedInactiveForeground #787c99
terminal.ansiBlack #363b54
terminal.ansiBlue #82aaff
terminal.ansiBrightBlack #363b54
terminal.ansiBrightBlue #82aaff
terminal.ansiBrightCyan #86e1fc
terminal.ansiBrightGreen #41a6b5
terminal.ansiBrightMagenta #c099ff
terminal.ansiBrightRed #ff757f
terminal.ansiBrightWhite #acb0d0
terminal.ansiBrightYellow #ffc777
terminal.ansiCyan #86e1fc
terminal.ansiGreen #41a6b5
terminal.ansiMagenta #c099ff
terminal.ansiRed #ff757f
terminal.ansiWhite #787c99
terminal.ansiYellow #ffc777
terminal.background #1e2030
terminal.foreground #787c99
terminal.selectionBackground #515c7e4d
textBlockQuote.background #1e2030
textCodeBlock.background #1e2030
textLink.activeForeground #86e1fc
textLink.foreground #6183bb
textPreformat.foreground #9699a8
textSeparator.foreground #363b54
titleBar.activeBackground #1e2030
titleBar.activeForeground #787c99
titleBar.border #16161e
titleBar.inactiveBackground #1e2030
titleBar.inactiveForeground #787c99
toolbar.activeBackground #202330
toolbar.hoverBackground #202330
tree.indentGuidesStroke #2b2b3b
walkThrough.embeddedEditorBackground #1e2030
widget.shadow #ffffff00
window.activeBorder #0d0f17
window.inactiveBorder #0d0f17 #7a88cf
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 #7a88cf —
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.language.null, constant.language.undefined, constant.language.go, constant.language.boolean, constant.language.json, constant.language.infinity, constant.language.nan #ff966c —
string, constant.other.symbol, constant.other.key, meta.attribute-selector #b9e981
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant #9aa5ce —
invalid, invalid.illegal #ff5370 —
invalid.deprecated #c099ff —
meta.var.expr storage.type, storage.modifier #fca7ea —
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig #86e1fc —
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 #ff757f bold
keyword.operator, keyword.control.as, keyword.other, keyword.operator.bitwise.shift, punctuation, expression.embbeded.vue punctuation.definition.tag, 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, meta.attribute.directive, 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, meta.import keyword.other #62e4ff —
keyword, keyword.control, keyword.other.important #c099ff —
keyword.control.default #fda2ee —
keyword, keyword.control.flow #fda2ee —
keyword.other.DML #86e1fc —
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp #c099ff —
entity.name.tag support.class.component, meta.tag.custom entity.name.tag, meta.tag.other.unrecognized.html.derivative entity.name.tag, meta.tag #fd6a7c —
punctuation.definition.tag #5d83c8 —
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 #ffc777 —
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars, variable.other.object #c8d3f5 —
meta.object-literal.key, entity.name.type.hcl, 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, meta.block entity.name.label #4fd6be —
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property #22d9bd —
variable.other.object.property #c8d3f5 —
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 #ff757f —
support.other.variable #ff757f —
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs #76abff —
entity.name.function, variable.other.enummember, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function #82aaff —
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable #fec468 —
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit #c099ff —
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.declaration.hcl variable.other.readwrite.hcl, meta.mapping.key.hcl variable.other.readwrite.hcl, variable.other.declaration #c6d3f8 —
entity.other.inherited-class #c099ff
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, variable.other.constant.object #c797ff —
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 #82aaff —
support.constant.font-name, meta.definition.variable #c3e88d —
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss #c3e88d —
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 #ffc777 —
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 #ff966c —
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css #4fd6be —
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 #c099ff —
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 #fca7ea —
meta.property-list meta.at-rule.include #c8d3f5 —
support.constant.property-value #ff966c —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #c8d3f5 —
variable.language #ff757f —
variable.other punctuation.definition.variable #c8d3f5 —
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this #ff757f —
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #22d9bd —
text.html constant.character.entity #0DB9D7 —
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html #c099ff —
source.sass keyword.control #82aaff —
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value #c099ff —
punctuation.definition.group #ff757f —
constant.other.character-class.regexp #c099ff —
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp #ffc777 —
keyword.operator.quantifier.regexp #89ddff —
constant.character.escape.backslash #c8d3f5 —
constant.character.escape #89ddff —
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #82aaff —
keyword.other.unit #ff757f —
source.json meta.structure.dictionary.json support.type.property-name.json #82aaff —
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 #86e1fc —
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 #c099ff —
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 #ffc777 —
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 #4fd6be —
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 #ff757f —
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 #c3e88d —
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 #808bbb —
meta.jsx.children, meta.embedded.block #c8d3f5 —
text.html, text.log #9aa5ce —
text.html.markdown markup.inline.raw.markdown #c099ff —
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 #82aaff 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 #c8d3f5 italic
markup.bold, markup.bold punctuation #c8d3f5 bold
markup.bold markup.italic, markup.bold markup.italic punctuation #c8d3f5 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 #4fd6be —
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown #89ddff —
meta.separator #444b6a bold
token.error-token #c53b53 —
token.debug-token #b267e6 —
entity.tag.apacheconf #ff757f —
meta.preprocessor #4fd6be —
variable.other.readwrite.alias #3cbeff —
variable.object.property #22d9bd —
meta.var.expr meta.object.member variable.other.readwrite #fec468 —
meta.arrow meta.block meta.var.expr meta.object.member variable.other.readwrite, meta.arrow meta.block meta.tag meta.object.member variable.other.readwrite #c6d3f8 —
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 } ! ` ;
}
Tokyo Night Moon NVim Theme | Coding Theme