Skip to main content
Home Theme VS Code Pastel Evening Theme Dark theme with pastel colors and a slight blue hint to the editor.
Pastel Evening Theme | Coding Theme
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.activeBackground #33353dff activityBar.activeBorder #83cafbff activityBar.activeFocusBorder #83cafbff activityBar.background #24262eff activityBar.border #1d1f2740 activityBar.dropBorder #d3dbec1a tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle #f0f token.info-token #83cafbff token.warn-token #f9a988ff token.error-token #fe7577ff token.debug-token
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Pastel Evening Theme — Pastel Evening Dark
activityBar.foreground #d3dbecff
activityBar.inactiveForeground #d3dbec80
activityBarBadge.background #83cafbff
activityBarBadge.foreground #1d1f27ff
activityBarItem.profilesHoverForeground #d3dbecff
badge.background #83cafbff
badge.foreground #1d1f27ff
breadcrumb.activeSelectionForeground #d3dbecff
breadcrumb.background #1d1f27ff
breadcrumb.focusForeground #bcc4d5ff
breadcrumbPicker.background #1d1f27ff
button.background #83cafbff
button.foreground #1d1f27ff
button.hoverBackground #9cd5fcff
button.secondaryBackground #6ca1c5ff
button.secondaryForeground #1d1f27ff
button.secondaryHoverBackground #7eadcdff
button.separator #1d1f2740
charts.blue #83cafbff
charts.foreground #a6aebeff
charts.green #8edca9ff
charts.lines #a6aebe80
charts.orange #f9a988ff
charts.purple #f9b0e1ff
charts.red #faa2a0ff
charts.yellow #efc785ff
checkbox.background #24262eff
checkbox.border #1d1f2740
commandCenter.activeBackground #33353dff
commandCenter.activeBorder #1d1f2740
commandCenter.activeForeground #d3dbecff
commandCenter.background #24262eff
commandCenter.border #1d1f2740
commandCenter.foreground #a6aebeff
commandCenter.inactiveBorder #1d1f2740
commandCenter.inactiveForeground #a6aebeff
contrastActiveBorder #00000000
contrastBorder #00000000
debugIcon.breakpointCurrentStackframeForeground #fe7577ff
debugIcon.breakpointDisabledForeground #7c8393ff
debugIcon.breakpointForeground #fe7577ff
debugIcon.continueForeground #8edca9ff
debugIcon.disconnectForeground #faa2a0ff
debugIcon.pauseForeground #f9a988ff
debugIcon.restartForeground #e0b490ff
debugIcon.startForeground #8edca9ff
debugIcon.stepBackForeground #83cafbff
debugIcon.stepIntoForeground #83cafbff
debugIcon.stepOutForeground #83cafbff
debugIcon.stepOverForeground #83cafbff
debugIcon.stopForeground #fe7577ff
debugTokenExpression.boolean #e0b490ff
debugTokenExpression.error #faa2a0ff
debugTokenExpression.name #83cafbff
debugTokenExpression.number #e0b490ff
debugTokenExpression.string #e0b490ff
debugTokenExpression.value #e0b490ff
debugToolBar.background #33353dff
debugView.exceptionLabelBackground #644446ff
debugView.stateLabelBackground #2b2d36ff
debugView.valueChangedHighlight #74b28aff
descriptionForeground #a6aebeff
diffEditor.diagonalFill #3b3d45ff
diffEditor.insertedLineBackground #2d3e38ff
diffEditor.insertedTextBackground #385144ff
diffEditor.removedLineBackground #453236ff
diffEditor.removedTextBackground #5b3f42ff
diffEditorGutter.insertedLineBackground #385144ff
diffEditorGutter.removedLineBackground #5b3f42ff
diffEditorOverview.insertedForeground #4f775fff
diffEditorOverview.removedForeground #87595aff
disabledForeground #7c8393ff
dropdown.background #24262eff
dropdown.border #1d1f2740
dropdown.foreground #a6aebeff
dropdown.listBackground #24262eff
editor.background #2b2d36ff
editor.findMatchBackground #1d1f27ff
editor.findMatchHighlightBackground #5b3f42ff
editor.findRangeHighlightBackground #efc78526
editor.focusedStackFrameHighlightBackground #efc78526
editor.foldBackground #3b3d45ff
editor.foreground #a6aebeff
editor.hoverHighlightBackground #efc78526
editor.inactiveSelectionBackground #83cafb24
editor.lineHighlightBackground #2b2d36ff
editor.rangeHighlightBackground #efc78526
editor.selectionBackground #83cafb33
editor.selectionHighlightBackground #efc78526
editor.snippetFinalTabstopHighlightBackground #efc78526
editor.snippetTabstopHighlightBackground #efc78526
editor.stackFrameHighlightBackground #efc78526
editor.symbolHighlightBackground #efc78526
editor.wordHighlightBackground #efc78526
editor.wordHighlightStrongBackground #efc78526
editorBracketHighlight.foreground1 #a6aebeff
editorBracketHighlight.foreground2 #83cafbff
editorBracketHighlight.foreground3 #e0b490ff
editorBracketHighlight.foreground4 #faa2a0ff
editorBracketHighlight.foreground5 #8edca9ff
editorBracketMatch.background #3b3d45ff
editorBracketMatch.border #7c8393ff
editorCodeLens.foreground #7c8393ff
editorCursor.foreground #a6aebeff
editorGhostText.foreground #d1d5eb56
editorGroup.border #1d1f2740
editorGroup.dropBackground #d3dbec1a
editorGroup.dropIntoPromptBackground #2b2d36ff
editorGroup.dropIntoPromptBorder #1d1f2740
editorGroup.dropIntoPromptForeground #a6aebeff
editorGroupHeader.border #1d1f27ff
editorGroupHeader.noTabsBackground #24262eff
editorGroupHeader.tabsBackground #24262eff
editorGroupHeader.tabsBorder #1d1f27ff
editorGutter.addedBackground #8edca9ff
editorGutter.background #24262eff
editorGutter.deletedBackground #fe7577ff
editorGutter.foldingControlForeground #7c8393ff
editorGutter.modifiedBackground #83cafbff
editorHoverWidget.background #24262eff
editorHoverWidget.border #1d1f2740
editorHoverWidget.foreground #a6aebeff
editorIndentGuide.activeBackground #535560ff
editorIndentGuide.activeBackground1 #535560ff
editorIndentGuide.background #3b3d45ff
editorIndentGuide.background1 #3b3d45ff
editorInfo.foreground #83cafbff
editorInlayHint.background #3b3d45ff
editorInlayHint.foreground #9198a8ff
editorInlayHint.parameterBackground #3b3d45ff
editorInlayHint.parameterForeground #9198a8ff
editorInlayHint.typeBackground #3b3d45ff
editorInlayHint.typeForeground #9198a8ff
editorLineNumber.activeForeground #a6aebeff
editorLineNumber.foreground #7c8393ff
editorOverviewRuler.addedForeground #8edca980
editorOverviewRuler.background #24262eff
editorOverviewRuler.border #1d1f2740
editorOverviewRuler.deletedForeground #fe757780
editorOverviewRuler.errorForeground #fe7577ff
editorOverviewRuler.findMatchForeground #ca8483ff
editorOverviewRuler.infoForeground #83cafbff
editorOverviewRuler.modifiedForeground #83cafb80
editorOverviewRuler.warningForeground #e0b490ff
editorPane.background #24262eff
editorRuler.foreground #3b3d45ff
editorStickyScroll.background #24262eff
editorStickyScrollHover.background #2b2d36ff
editorSuggestWidget.background #24262eff
editorSuggestWidget.border #1d1f2740
editorSuggestWidget.focusHighlightForeground #83cafbff
editorSuggestWidget.highlightForeground #83cafbff
editorSuggestWidget.selectedBackground #33353dff
editorSuggestWidget.selectedForeground #d3dbecff
editorSuggestWidget.selectedIconForeground #83cafbff
editorWidget.background #24262eff
editorWidget.border #1d1f2740
editorWidget.resizeBorder #6ca1c5ff
errorLens.errorBackground #fe75770d
errorLens.errorForeground #ca8483ff
errorLens.errorMessageBackground #fe75770d
errorLens.errorRangeBackground #fe75770d
errorLens.hintBackground #1ceb960d
errorLens.hintForeground #74b28aff
errorLens.hintMessageBackground #1ceb960d
errorLens.hintRangeBackground #1ceb960d
errorLens.infoBackground #83cafb0d
errorLens.infoForeground #6ba4ccff
errorLens.infoMessageBackground #83cafb0d
errorLens.infoRangeBackground #83cafb0d
errorLens.statusBarErrorForeground #faa2a0ff
errorLens.statusBarHintForeground #8edca9ff
errorLens.statusBarIconErrorForeground #faa2a0ff
errorLens.statusBarIconWarningForeground #e0b490ff
errorLens.statusBarInfoForeground #83cafbff
errorLens.statusBarWarningForeground #e0b490ff
errorLens.warningBackground #f9a9880d
errorLens.warningForeground #b59276ff
errorLens.warningMessageBackground #f9a9880d
errorLens.warningRangeBackground #f9a9880d
extensionIcon.preReleaseForeground #4f775fff
extensionIcon.starForeground #f9a988ff
extensionIcon.verifiedForeground #83cafbff
focusBorder #00000000
foreground #a6aebeff
gitDecoration.addedResourceForeground #8edca9ff
gitDecoration.conflictingResourceForeground #fe7577ff
gitDecoration.deletedResourceForeground #faa2a0ff
gitDecoration.ignoredResourceForeground #7c8393ff
gitDecoration.modifiedResourceForeground #efc785ff
gitDecoration.renamedResourceForeground #8edca9ff
gitDecoration.stageDeletedResourceForeground #faa2a0ff
gitDecoration.stageModifiedResourceForeground #efc785ff
gitDecoration.submoduleResourceForeground #83cafbff
gitDecoration.untrackedResourceForeground #c6b4fbff
gitlens.closedAutolinkedIssueIconColor #c6b4fbff
gitlens.closedPullRequestIconColor #7c8393ff
gitlens.decorations.branchAheadForegroundColor #8edca9ff
gitlens.decorations.branchBehindForegroundColor #faa2a0ff
gitlens.decorations.branchDivergedForegroundColor #efc785ff
gitlens.decorations.branchMissingUpstreamForegroundColor #fe7577ff
gitlens.decorations.branchUnpublishedForegroundColor #c6b4fbff
gitlens.decorations.statusMergingOrRebasingConflictForegroundColor #fe7577ff
gitlens.decorations.statusMergingOrRebasingForegroundColor #fec257ff
gitlens.decorations.workspaceCurrentForegroundColor #8edca9ff
gitlens.decorations.workspaceRepoMissingForegroundColor #7c8393ff
gitlens.decorations.workspaceRepoOpenForegroundColor #8edca9ff
gitlens.decorations.worktreeHasUncommittedChangesForegroundColor #efc785ff
gitlens.decorations.worktreeMissingForegroundColor #fe7577ff
gitlens.graphChangesColumnAddedColor #8edca9ff
gitlens.graphChangesColumnDeletedColor #faa2a0ff
gitlens.graphLane10Color #efc785ff
gitlens.graphLane1Color #8edca9ff
gitlens.graphLane2Color #6bd8dcff
gitlens.graphLane3Color #83cafbff
gitlens.graphLane4Color #c6b4fbff
gitlens.graphLane5Color #f9b0e1ff
gitlens.graphLane6Color #f285c7
gitlens.graphLane7Color #faa2a0ff
gitlens.graphLane8Color #f9a988ff
gitlens.graphLane9Color #e0b490ff
gitlens.graphMinimapMarkerHeadColor #d3dbecff
gitlens.graphMinimapMarkerHighlightsColor #fec257ff
gitlens.graphMinimapMarkerLocalBranchesColor #83cafbff
gitlens.graphMinimapMarkerRemoteBranchesColor #49b8feff
gitlens.graphMinimapMarkerStashesColor #8e77d2ff
gitlens.graphMinimapMarkerTagsColor #bb7a60ff
gitlens.graphMinimapMarkerUpstreamColor #8edca9ff
gitlens.graphScrollMarkerHeadColor #d3dbecff
gitlens.graphScrollMarkerHighlightsColor #fec257ff
gitlens.graphScrollMarkerLocalBranchesColor #83cafbff
gitlens.graphScrollMarkerRemoteBranchesColor #49b8feff
gitlens.graphScrollMarkerStashesColor #8e77d2ff
gitlens.graphScrollMarkerTagsColor #bb7a60ff
gitlens.graphScrollMarkerUpstreamColor #8edca9ff
gitlens.gutterBackgroundColor #1d1f274d
gitlens.gutterForegroundColor #9198a8ff
gitlens.gutterUncommittedForegroundColor #efc785ff
gitlens.lineHighlightBackgroundColor #83cafb26
gitlens.lineHighlightOverviewRulerColor #83cafbbf
gitlens.mergedPullRequestIconColor #c6b4fbff
gitlens.openAutolinkedIssueIconColor #8edca9ff
gitlens.openPullRequestIconColor #8edca9ff
gitlens.trailingLineBackgroundColor #00000000
gitlens.trailingLineForegroundColor #565b68ff
gitlens.unpublishedChangesIconColor #55966bff
gitlens.unpublishedCommitIconColor #55966bff
gitlens.unpulledChangesIconColor #f9a988ff
icon.foreground #a6aebeff
input.background #1d1f27ff
input.border #1d1f2740
input.placeholderForeground #7c8393ff
inputOption.activeBackground #83cafbff
inputOption.activeForeground #d3dbecff
inputOption.hoverBackground #d3dbec1a
inputValidation.errorForeground #bcc4d5ff
inputValidation.infoForeground #bcc4d5ff
inputValidation.warningForeground #bcc4d5ff
issues.closed #c6b4fbff
issues.newIssueDecoration #d3dbec80
issues.open #8edca9ff
keybindingLabel.background #33353dff
keybindingLabel.border #1d1f2740
keybindingLabel.bottomBorder #d3dbec1a
keybindingLabel.foreground #a6aebeff
list.activeSelectionBackground #33353dff
list.activeSelectionForeground #d3dbecff
list.errorForeground #faa2a0ff
list.hoverBackground #2b2d36ff
list.hoverForeground #bcc4d5ff
list.inactiveSelectionBackground #33353dff
list.inactiveSelectionForeground #d3dbecff
list.warningForeground #e0b490ff
markdown.extension.editor.codeSpan.background #0000
markdown.extension.editor.codeSpan.border #0000
menu.background #1d1f27ff
menu.border #1d1f2740
menu.foreground #a6aebeff
menu.selectionBackground #2b2d36ff
menu.selectionBorder #00000000
menu.selectionForeground #d3dbecff
menu.separatorBackground #33353dff
menubar.selectionBackground #2b2d36ff
menubar.selectionBorder #00000000
menubar.selectionForeground #d3dbecff
minimap.background #24262eff
minimap.errorHighlight #ca8483ff
minimap.findMatchHighlight #5b3f42ff
minimap.selectionHighlight #83cafb24
minimap.selectionOccurrenceHighlight #efc78526
minimap.warningHighlight #b59276ff
minimapSlider.activeBackground #d3dbec33
minimapSlider.hoverBackground #d3dbec1a
notebook.cellBorderColor #1d1f2740
notebook.cellEditorBackground #2b2d36ff
notebook.cellInsertionIndicator #6ca1c5ff
notebook.cellStatusBarItemHoverBackground #acafbf20
notebook.cellToolbarSeparator #1d1f2740
notebook.editorBackground #24262eff
notebook.focusedCellBorder #6ca1c5ff
notebook.focusedEditorBorder #6ca1c5ff
notebook.inactiveFocusedCellBorder #6ca1c5ff
notebook.outputContainerBackgroundColor #1d1f27ff
notebook.outputContainerBorderColor #1d1f2740
notebookStatusErrorIcon.foreground #fe7577ff
notebookStatusRunningIcon.foreground #83cafbff
notebookStatusSuccessIcon.foreground #8edca9ff
notificationCenter.border #1d1f2740
notificationCenterHeader.background #24262eff
notificationCenterHeader.foreground #bcc4d5ff
notifications.background #2b2d36ff
notifications.border #1d1f2740
notificationsInfoIcon.foreground #83cafbff
notificationToast.border #1d1f2740
panel.background #24262eff
panel.border #1d1f2740
panel.dropBorder #83cafbff
panelInput.border #1d1f2740
panelSection.border #1d1f2740
panelSection.dropBackground #d3dbec1a
panelSectionHeader.background #1d1f27ff
panelSectionHeader.border #1d1f2740
panelSectionHeader.foreground #bcc4d5ff
panelTitle.activeBorder #83cafbff
panelTitle.activeForeground #d3dbecff
panelTitle.inactiveForeground #a6aebeff
peekView.border #83cafb80
peekViewEditor.background #2b2d3eff
peekViewEditor.matchHighlightBackground #5b3f42ff
peekViewEditorGutter.background #242636ff
peekViewResult.background #242636ff
peekViewResult.fileForeground #d3dbecff
peekViewResult.lineForeground #a6aebeff
peekViewResult.matchHighlightBackground #5b3f42ff
peekViewTitle.background #2b2d50ff
peekViewTitleDescription.foreground #a6aebeff
peekViewTitleLabel.foreground #d3dbecff
pickerGroup.border #3b3d45ff
problemsInfoIcon.foreground #83cafbff
progressBar.background #83cafbff
pullRequests.closed #faa2a0ff
pullRequests.draft #7c8393ff
pullRequests.merged #c6b4fbff
quickInput.background #24262eff
quickInput.foreground #a6aebeff
quickInputList.focusBackground #33353dff
quickInputList.focusForeground #83cafbff
quickInputList.focusIconForeground #83cafbff
quickInputTitle.background #24262eff
scrollbar.shadow #1d1f2740
scrollbarSlider.activeBackground #d3dbec33
scrollbarSlider.background #d3dbec0d
scrollbarSlider.hoverBackground #d3dbec1a
selection.background #83cafb33
settings.checkboxBackground #24262eff
settings.dropdownBackground #24262eff
settings.focusedRowBackground #33353dff
settings.headerBorder #1d1f2740
settings.headerForeground #d3dbecff
settings.modifiedItemIndicator #83cafbff
settings.numberInputBackground #24262eff
settings.rowHoverBackground #d3dbec1a
settings.textInputBackground #24262eff
sideBar.background #24262eff
sideBar.border #1d1f2740
sideBar.dropBackground #d3dbec1a
sideBarSectionHeader.background #1d1f27ff
sideBarSectionHeader.border #1d1f2740
sideBarTitle.foreground #bcc4d5ff
statusBar.background #24262eff
statusBar.border #1d1f2740
statusBar.debuggingBackground #83cafbff
statusBar.debuggingForeground #1d1f27ff
statusBar.foreground #bcc4d5ff
statusBar.noFolderBackground #24262eff
statusBarItem.activeBackground #d3dbec33
statusBarItem.compactHoverBackground #d3dbec1a
statusBarItem.errorBackground #d82828
statusBarItem.errorForeground #d3dbecff
statusBarItem.hoverBackground #d3dbec1a
statusBarItem.prominentForeground #d3dbecff
statusBarItem.warningBackground #ce8e1f
statusBarItem.warningForeground #d3dbecff
symbolIcon.arrayForeground #a6aebeff
symbolIcon.booleanForeground #faa2a0ff
symbolIcon.classForeground #8edca9ff
symbolIcon.colorForeground #a6aebeff
symbolIcon.constantForeground #d3dbecff
symbolIcon.constructorForeground #8edca9ff
symbolIcon.enumeratorForeground #8edca9ff
symbolIcon.enumeratorMemberForeground #d3dbecff
symbolIcon.eventForeground #8edca9ff
symbolIcon.fieldForeground #d3dbecff
symbolIcon.fileForeground #a6aebeff
symbolIcon.folderForeground #a6aebeff
symbolIcon.functionForeground #83cafbff
symbolIcon.interfaceForeground #efc785ff
symbolIcon.keyForeground #a6aebeff
symbolIcon.keywordForeground #faa2a0ff
symbolIcon.methodForeground #83cafbff
symbolIcon.moduleForeground #a6aebeff
symbolIcon.namespaceForeground #a6aebeff
symbolIcon.nullForeground #faa2a0ff
symbolIcon.numberForeground #e0b490ff
symbolIcon.objectForeground #8edca9ff
symbolIcon.operatorForeground #a6aebeff
symbolIcon.packageForeground #a6aebeff
symbolIcon.propertyForeground #d3dbecff
symbolIcon.referenceForeground #a6aebeff
symbolIcon.snippetForeground #a6aebeff
symbolIcon.stringForeground #e0b490ff
symbolIcon.structForeground #8edca9ff
symbolIcon.textForeground #a6aebeff
symbolIcon.typeParameterForeground #8edca9ff
symbolIcon.unitForeground #a6aebeff
symbolIcon.variableForeground #a6aebeff
tab.activeBackground #33353dff
tab.activeBorder #83cafbff
tab.activeForeground #d3dbecff
tab.border #1d1f2740
tab.hoverBackground #2b2d36ff
tab.hoverBorder #6ba4ccff
tab.hoverForeground #bcc4d5ff
tab.inactiveBackground #24262eff
terminal.ansiBlack #2b2d36ff
terminal.ansiBlue #6ba4ccff
terminal.ansiBrightBlack #7c8393ff
terminal.ansiBrightBlue #83cafbff
terminal.ansiBrightCyan #6bd8dcff
terminal.ansiBrightGreen #8edca9ff
terminal.ansiBrightMagenta #f9b0e1ff
terminal.ansiBrightRed #faa2a0ff
terminal.ansiBrightWhite #d3dbecff
terminal.ansiBrightYellow #efc785ff
terminal.ansiCyan #58afb3ff
terminal.ansiGreen #74b28aff
terminal.ansiMagenta #ca8fb7ff
terminal.ansiRed #ca8483ff
terminal.ansiWhite #a6aebeff
terminal.ansiYellow #c2a16dff
terminal.background #1d1f27ff
terminal.border #1d1f2740
terminal.dropBackground #d3dbec1a
terminal.foreground #a6aebeff
terminalCursor.background #2b2d36ff
terminalCursor.foreground #a6aebeff
testing.iconErrored #fe7577ff
testing.iconFailed #fe7577ff
testing.iconPassed #8edca9ff
testing.runAction #8edca9ff
textBlockQuote.background #1d1f2740
textBlockQuote.border #83cafbff
textCodeBlock.background #1d1f2740
textLink.activeForeground #b4dffdff
textLink.foreground #83cafbff
textPreformat.foreground #e0b490ff
titleBar.activeBackground #1d1f27ff
titleBar.activeForeground #a6aebeff
titleBar.border #1d1f2740
titleBar.inactiveBackground #1d1f27ff
titleBar.inactiveForeground #9198a8ff
toolbar.activeBackground #d3dbec33
toolbar.hoverBackground #d3dbec1a
toolbar.hoverOutline #00000000
tree.indentGuidesStroke #3b3d45ff
welcomePage.background #2b2d36ff
welcomePage.progress.background #1d1f27ff
welcomePage.progress.foreground #83cafbff
welcomePage.tileBackground #24262eff
welcomePage.tileHoverBackground #33353dff
widget.shadow #1d1f2740
#f9b0e1ff
comment, string.quoted.docstring, string.quoted.docstring storage.type.string.python, string.quoted.docstring punctuation.definition.string, punctuation.definition.comment, markup.underline.link, markup.link, source.ini comment punctuation #7c8393ff
entity.name.namespace, entity.name.module, entity.name.package, storage.modifier.package, storage.modifier.import, entity.name.type.namespace, entity.name.section.fsharp, string.quoted.double.include.cpp, source.cpp string.quoted.other.lt-gt.include, source.cpp string.quoted.other.lt-gt.include punctuation.definition.string, source.cpp meta.preprocessor.include punctuation.definition.string, entity.name.tag.namespace, punctuation.separator.namespace, source.go punctuation.definition.string, source.go entity.name.import #a6aebeff
variable, support.variable, meta.interpolation.rust, meta.preprocessor.cs, string.unquoted.preprocessor.message.cs, text.html.php, text.html.markdown, text.html source #a6aebeff
variable.other.constant, support.constant, constant.other, variable.other.readwrite.class.ruby, source.ruby variable.other.readwrite.global #d3dbecff
variable.other.global, entity.name.variable.global #d3dbecff
variable.other.property, variable.other.field, variable.other.object.property, variable.other.object.field, variable.object.property, variable.object.field, entity.name.variable.property, entity.name.variable.field, entity.name.variable.event, variable.other.event, meta.objectliteral meta.object.member meta.object-literal.key, entity.name.record.field.elm, variable.other.readwrite.instance.ruby, meta.var.expr meta.tag meta.tag.attributes entity.other.attribute-name, text.xml entity.other.attribute-name, text.html entity.other.attribute-name, source.css support.type.property-name, entity.other.attribute-name.css #d3dbecff
comment variable.parameter, comment variable.other.jsdoc, entity.other.attribute-name.localname.cs, comment.documentation.attribute.name.cs #abb2c0ff
variable.other.metavariable.name.rust, keyword.operator.macro.dollar.rust #d3dbecff
keyword.other.definition.ini, support.type.property-name.json, support.type.property-name.toml, entity.name.tag.yaml, entity.name.tag.ron, punctuation.support.type.property-name.json, variable.other.makefile, source.hcl variable, keyword.other.cabal, variable.name.pestfile #d3dbecff
keyword, keyword.other, storage.modifier, storage.type, variable.language, constant.language, entity.name.function.macro.rules.rust, storage.type.template.argument.class.cpp, storage.type.template.argument.unsigned.cpp, storage.type.template.argument.signed.cpp, storage.type.template.argument.typename.cpp, storage.type.template.argument.struct.cpp, storage.type.template.argument.enum.cpp, storage.type.template.argument.union.cpp, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, keyword.type.go, entity.name.function.asciidoc, entity.name.section.cabal #faa2a0ff
keyword.other.documentation, source.cs comment entity.name.tag, comment.documentation.name.cs, storage.type.class.doxygen, comment storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, keyword.other.phpdoc #ca8483ff
keyword.operator, source.cpp storage.modifier.reference, source.cpp storage.modifier.pointer, entity.name.function.operator, source.cpp punctuation.separator.scope-resolution, source.cpp punctuation.separator.pointer-access, source.cpp punctuation.separator.dot-access, entity.name.function.member.overload.cs, source.fsharp keyword.symbol, keyword.symbol.fsharp, keyword.control.ternary.java, keyword.control.ternary.kotlin, variable.language.wildcard.java, variable.language.wildcard.kotlin, meta.import constant.language.import-export-all, punctuation.accessor, entity.name.tag.wildcard, entity.other.document.begin.yaml, meta.separator.markdown, source.yaml keyword.control, source.python punctuation.separator.period, source.ruby punctuation.separator.method, source.java punctuation.separator.period, text.html punctuation.separator.key-value #a6aebeff
punctuation, source.rust meta.use punctuation, meta.attribute.rust punctuation, punctuation.definition.decorator, punctuation.separator.inheritance.ruby, storage.type.function.arrow.java, punctuation.definition.directive.cpp, source.cpp support.other.attribute punctuation, source.fsharp support.function.attribute, meta.var.expr meta.arrow storage.type.function.arrow, source meta.arrow storage.type.function.arrow, source meta.brace, meta.selector.css punctuation, meta.property-value.css punctuation, source.css keyword punctuation, keyword.other.elm, keyword.other.colon.elm, keyword.other.period.elm, text.html meta.tag, text.xml meta.tag, source.yaml punctuation, text.asciidoc punctuation, text.asciidoc markup.heading.block-attribute, text.asciidoc markup.code markup.heading, source.ini punctuation #a6aebeff
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike, keyword.operator.noexcept #faa2a0ff
entity.name.type.trait, entity.name.type.interface #efc785ff
entity.other.attribute-name, entity.name.type.annotation, meta.attribute.rust, entity.name.function.decorator.python, source.python meta.function.decorator support.type, storage.type.annotation.java, storage.type.annotation.kotlin, source.cs keyword.preprocessor, keyword.preprocessor.cs, source.cpp keyword.control.directive, keyword.other.attribute-specifier.cs, source.cpp keyword.operator.alignas, source.cpp support.other.attribute, text.asciidoc support.constant.attribute-name, text.asciidoc markup.meta.attribute-list, text.asciidoc markup.meta.attribute-list entity.name.function.asciidoc #efc785ff
string, constant.other.rune.go, storage.type.string.python, keyword.interpolation.scala, meta.jsx.children, punctuation.definition.string, punctuation.definition.char, text.html, text.xml, source.cabal, keyword.operator.cabal, source.ini, source.ini punctuation.definition.string, source.yaml punctuation.definition.string, meta.property-value.css support.constant, source.css string punctuation, source.cpp entity.name.operator.custom-literal #e0b490ff
constant.character.escape, constant.character.string.escape, keyword.format.specifier.fsharp, constant.character.format.placeholder.other.python, storage.type.format.python, punctuation.definition.interpolation, meta.var.expr string.template meta.template.expression punctuation.definition.template-expression, meta.var.expr meta.tag meta.jsx.children punctuation.section.embedded, source.kotlin variable.string-escape, source.kotlin meta.template.expression, source.kotlin entity.string.template, source.scala punctuation.definition.template-expression, text.xml constant.character.entity, text.html constant.character.entity, source.ruby punctuation.section.embedded, source.hcl keyword.other.interpolation #f9a988ff
comment constant.character.escape #ca8970ff
constant.numeric, storage.type.number.python, source.rust constant.numeric entity.name.type, source.cpp keyword.other.unit, keyword.other.unit, meta.var.expr constant.numeric storage.type.numeric #e0b490ff
meta.property-value.css, constant.other.time.datetime.offset.toml, constant.other.time.datetime.local.toml, constant.other.time.date.toml, constant.other.time.time.toml, constant.other.timestamp.yaml #e0b490ff
entity.name.label, entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust, variable.parameter.definition.label.latex, entity.other.attribute-name.id.css, source.ruby constant.language.symbol #f9a988ff
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.tag, support.type, support.class, support.struct, support.enum, entity.other.inherited-class, variable.other.metavariable.specifier.rust, source.java storage.type, source.haskell storage.type, source.haskell constant.other, source.go storage.type, source.cpp storage.type.integral, source.cpp storage.type.built-in, source.cpp meta.template storage.type.template.argument, source.elm storage.type, keyword.type, entity.other.attribute-name.class.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, meta.selector.css, meta.var.expr new.expr meta.function-call entity.name.function #8edca9ff
comment.block entity.name.type, comment keyword.other.type.php, comment support.class.php, comment support.class.builtin.php #74b28aff
variable.other.enummember, entity.name.variable.enum-member.cs, constant.type-constructor.elm, constant.other.enum.java #d3dbecff
entity.name.function, support.function, meta.function-call.generic.python, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, entity.name.function.operator.member.cpp #83cafbff
support.type.property-name.table.toml, support.type.property-name.array.toml, entity.name.section.group-title.ini #8edca9ff
text.html.markdown string.other.link, text.html.markdown meta.link.reference.def constant.other, text.asciidoc markup.reference string, text.asciidoc markup.other.url string, meta.link.email.lt-gt.markdown markup.underline.link, markup.link.email #83cafbff
entity.name.type.anchor.yaml, variable.other.alias.yaml #83cafbff
markup.heading, text.tex meta.function.section.part entity.name, text.tex meta.function.section.chapter entity.name, text.tex meta.function.section.section entity.name #8edca9ff
markup heading.2, markup.heading.heading-1, markup.heading.heading-1 markup.heading, text.tex meta.function.section.subsection entity.name #86cf9fff
markup heading.3, markup.heading.heading-2, markup.heading.heading-2 markup.heading, text.tex meta.function.section.subsubsection entity.name #7dc195ff
markup heading.4, markup.heading.heading-3, markup.heading.heading-3 markup.heading, text.tex meta.function.section.paragraph entity.name, source.rust heading.4.markdown entity.name.section.markdown #74b28aff
markup heading.5, markup.heading.heading-4, markup.heading.heading-4 markup.heading, text.tex meta.function.section.subparagraph entity.name #69a27eff
markup heading.6, markup.heading.heading-5, markup.heading.heading-5 markup.heading #5d8e6fff
markup.inline.raw.string, text.asciidoc markup.raw #e0b490ff
comment markup.inline.raw.string #b59276ff
text.asciidoc markup.macro string #a6aebeff
markup.quote, markup.italic.quotes #a6aebeff italic
markup.italic #d3dbecff italic
markup.list punctuation, markup.quote punctuation, markup.fenced_code.block punctuation.definition.markdown, markup.fenced_code.block fenced_code.block.language, meta.separator.markdown, markup.list.bullet #d3dbecff
callout.source.code.asciidoc, callout.source.code.asciidoc constant.other, callout.source.code.asciidoc constant.numeric #7c8393ff
text.tex support.function, text.tex storage.type.function, text.tex constant.other, text.tex constant #faa2a0ff
text.tex support.function.be, text.tex support.function.section #83cafbff
text.tex support.class.math #e0b490ff
text.tex meta.function variable.parameter #d3dbecff
text.tex meta.preamble support.class #a6aebeff
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...
main*
Button.tsx
31
~/my-project
$
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 } !` ;
}