Skip to main content
Home Theme VS Code Modern Dark Monoaki VS Code new Modern Dark theme with monokai syntax
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.activeFocusBorder #ffed72 activityBar.background #161b1e activityBar.border #161b1e activityBar.foreground #ffffff activityBar.inactiveForeground #bbbbbb activityBarBadge.background #ffed72 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text #6B7678 italic comment storage.type #6B7678 — comment entity.name.type #B8C4C3 — comment variable, comment variable.other #B8C4C3 — comment keyword.codetag.notation
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Modern Dark Monoaki — Modern Dark Monokai pro Modern Dark Monoaki | Coding Theme
activityBarBadge.foreground
#273136
badge.background #ffed72
badge.foreground #273136
banner.background #3a4449
banner.foreground #b8c4c3
banner.iconForeground #b8c4c3
breadcrumb.activeSelectionForeground #f2fffc
breadcrumb.focusForeground #b8c4c3
breadcrumb.foreground #8b9798
button.background #3a4449
button.foreground #b8c4c3
button.hoverBackground #545f62
button.secondaryBackground #3a4449
button.secondaryForeground #b8c4c3
button.secondaryHoverBackground #545f62
button.separator #273136
charts.blue #7cd5f1
charts.foreground #f2fffc
charts.green #a2e57b
charts.lines #6b7678
charts.orange #ffb270
charts.purple #baa0f8
charts.red #ff6d7e
charts.yellow #ffed72
checkbox.background #3a4449
checkbox.border #3a4449
checkbox.foreground #f2fffc
commandCenter.activeBackground #273136
commandCenter.activeForeground #b8c4c3
commandCenter.background #1d2528
commandCenter.border #273136
commandCenter.foreground #8b9798
debugConsole.errorForeground #ff6d7e
debugConsole.infoForeground #7cd5f1
debugConsole.sourceForeground #f2fffc
debugConsole.warningForeground #ffb270
debugConsoleInputIcon.foreground #ffed72
debugExceptionWidget.background #3a4449
debugExceptionWidget.border #273136
debugIcon.breakpointCurrentStackframeForeground #ffed72
debugIcon.breakpointDisabledForeground #b8c4c3
debugIcon.breakpointForeground #ff6d7e
debugIcon.breakpointStackframeForeground #f2fffc
debugIcon.breakpointUnverifiedForeground #ffb270
debugIcon.continueForeground #f2fffc
debugIcon.disconnectForeground #f2fffc
debugIcon.pauseForeground #f2fffc
debugIcon.restartForeground #a2e57b
debugIcon.startForeground #a2e57b
debugIcon.stepBackForeground #f2fffc
debugIcon.stepIntoForeground #f2fffc
debugIcon.stepOutForeground #f2fffc
debugIcon.stepOverForeground #f2fffc
debugIcon.stopForeground #ff6d7e
debugTokenExpression.boolean #ffb270
debugTokenExpression.error #ff6d7e
debugTokenExpression.name #7cd5f1
debugTokenExpression.number #baa0f8
debugTokenExpression.string #ffed72
debugTokenExpression.value #f2fffc
debugToolBar.background #3a4449
debugView.exceptionLabelBackground #ff6d7e
debugView.exceptionLabelForeground #273136
debugView.stateLabelBackground #a2e57b
debugView.stateLabelForeground #273136
debugView.valueChangedHighlight #ffed72
descriptionForeground #8b9798
diffEditor.diagonalFill #3a4449
diffEditor.insertedLineBackground #a2e57b19
diffEditor.insertedTextBackground #a2e57b19
diffEditor.removedLineBackground #ff6d7e19
diffEditor.removedTextBackground #ff6d7e19
diffEditorGutter.insertedLineBackground #a2e57b19
diffEditorGutter.removedLineBackground #ff6d7e19
diffEditorOverview.insertedForeground #a2e57ba5
diffEditorOverview.removedForeground #ff6d7ea5
dropdown.background #273136
dropdown.border #273136
dropdown.foreground #8b9798
dropdown.listBackground #3a4449
editor.background #273136
editor.findMatchBackground #f2fffc26
editor.findMatchBorder #ffed72
editor.findMatchHighlightBackground #f2fffc26
editor.findMatchHighlightBorder #00000000
editor.findRangeHighlightBackground #f2fffc0c
editor.findRangeHighlightBorder #00000000
editor.focusedStackFrameHighlightBackground #b8c4c326
editor.foldBackground #f2fffc0c
editor.foreground #ffffff
editor.hoverHighlightBackground #f2fffc0c
editor.inactiveSelectionBackground #f2fffc0c
editor.inlineValuesBackground #545f62
editor.inlineValuesForeground #b8c4c3
editor.lineHighlightBackground #f2fffc0c
editor.lineHighlightBorder #00000000
editor.linkedEditingBackground #3a4449
editor.rangeHighlightBackground #3a4449
editor.rangeHighlightBorder #3a4449
editor.selectionBackground #b8c4c326
editor.selectionHighlightBackground #f2fffc26
editor.selectionHighlightBorder #00000000
editor.stackFrameHighlightBackground #b8c4c326
editor.wordHighlightBackground #f2fffc26
editor.wordHighlightBorder #00000000
editor.wordHighlightStrongBackground #f2fffc26
editor.wordHighlightStrongBorder #00000000
editorBracketHighlight.foreground1 #ff6d7e
editorBracketHighlight.foreground2 #ffb270
editorBracketHighlight.foreground3 #ffed72
editorBracketHighlight.foreground4 #a2e57b
editorBracketHighlight.foreground5 #7cd5f1
editorBracketHighlight.foreground6 #baa0f8
editorBracketMatch.background #273136
editorBracketMatch.border #6b7678
editorCodeLens.foreground #6b7678
editorCursor.background #273136
editorCursor.foreground #f2fffc
editorError.background #00000000
editorError.border #00000000
editorError.foreground #ff6d7e
editorGroup.border #1d2528
editorGroup.dropBackground #1d2528bf
editorGroup.emptyBackground #161b1e
editorGroup.focusedEmptyBorder #1d2528
editorGroupHeader.noTabsBackground #273136
editorGroupHeader.tabsBackground #273136
editorGroupHeader.tabsBorder #273136
editorGutter.addedBackground #a2e57b
editorGutter.background #273136
editorGutter.deletedBackground #ff6d7e
editorGutter.foldingControlForeground #b8c4c3
editorGutter.modifiedBackground #ffb270
editorHint.border #273136
editorHint.foreground #baa0f8
editorHoverWidget.background #3a4449
editorHoverWidget.border #273136
editorIndentGuide.background #3a4449
editorInfo.background #00000000
editorInfo.border #273136
editorInfo.foreground #7cd5f1
editorLightBulb.foreground #ffed72
editorLightBulbAutoFix.foreground #a2e57b
editorLineNumber.activeForeground #b8c4c3
editorLineNumber.foreground #545f62
editorLink.activeForeground #7cd5f1
editorMarkerNavigation.background #3a4449
editorMarkerNavigationError.background #ff6d7e
editorMarkerNavigationInfo.background #7cd5f1
editorMarkerNavigationWarning.background #ffb270
editorOverviewRuler.addedForeground #a2e57b
editorOverviewRuler.border #273136
editorOverviewRuler.currentContentForeground #3a4449
editorOverviewRuler.deletedForeground #ff6d7e
editorOverviewRuler.errorForeground #ff6d7e
editorOverviewRuler.findMatchForeground #f2fffc26
editorOverviewRuler.incomingContentForeground #3a4449
editorOverviewRuler.infoForeground #7cd5f1
editorOverviewRuler.modifiedForeground #ffb270
editorOverviewRuler.rangeHighlightForeground #f2fffc26
editorOverviewRuler.selectionHighlightForeground #f2fffc26
editorOverviewRuler.warningForeground #ffb270
editorOverviewRuler.wordHighlightForeground #f2fffc26
editorOverviewRuler.wordHighlightStrongForeground #f2fffc26
editorPane.background #273136
editorRuler.foreground #545f62
editorSuggestWidget.background #3a4449
editorSuggestWidget.border #3a4449
editorSuggestWidget.foreground #b8c4c3
editorSuggestWidget.highlightForeground #f2fffc
editorSuggestWidget.selectedBackground #6b7678
editorUnnecessaryCode.opacity #000000a5
editorWarning.background #00000000
editorWarning.border #00000000
editorWarning.foreground #ffb270
editorWhitespace.foreground #545f62
editorWidget.background #3a4449
editorWidget.border #3a4449
errorForeground #ff6d7e
extensionBadge.remoteForeground #a2e57b
extensionButton.prominentBackground #3a4449
extensionButton.prominentForeground #f2fffc
extensionButton.prominentHoverBackground #545f62
extensionIcon.preReleaseForeground #baa0f8
extensionIcon.sponsorForeground #7cd5f1
extensionIcon.starForeground #ffed72
extensionIcon.verifiedForeground #a2e57b
focusBorder #6b7678
foreground #f2fffc
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #e4676b
gitDecoration.deletedResourceForeground #c74e39
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e2c08d
gitDecoration.renamedResourceForeground #73c991
gitDecoration.stageDeletedResourceForeground #c74e39
gitDecoration.stageModifiedResourceForeground #e2c08d
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #73c991
icon.foreground #8b9798
input.background #3a4449
input.border #3a4449
input.foreground #f2fffc
input.placeholderForeground #6b7678
inputOption.activeBackground #545f62
inputOption.activeBorder #545f62
inputOption.activeForeground #f2fffc
inputOption.hoverBackground #545f62
inputValidation.errorBackground #3a4449
inputValidation.errorBorder #ff6d7e
inputValidation.errorForeground #ff6d7e
inputValidation.infoBackground #3a4449
inputValidation.infoBorder #7cd5f1
inputValidation.infoForeground #7cd5f1
inputValidation.warningBackground #3a4449
inputValidation.warningBorder #ffb270
inputValidation.warningForeground #ffb270
keybindingLabel.background #545f62
keybindingLabel.border #545f62
keybindingLabel.bottomBorder #3a4449
keybindingLabel.foreground #b8c4c3
list.activeSelectionBackground #f2fffc0c
list.activeSelectionForeground #ffed72
list.dropBackground #1d2528bf
list.errorForeground #ff6d7e
list.focusBackground #273136
list.focusForeground #f2fffc
list.highlightForeground #f2fffc
list.hoverBackground #f2fffc0c
list.hoverForeground #f2fffc
list.inactiveFocusBackground #273136
list.inactiveSelectionBackground #b8c4c30c
list.inactiveSelectionForeground #ffed72
list.invalidItemForeground #ff6d7e
list.warningForeground #ffb270
listFilterWidget.background #273136
listFilterWidget.noMatchesOutline #ff6d7e
listFilterWidget.outline #273136
menu.background #273136
menu.border #1d2528
menu.foreground #f2fffc
menu.selectionForeground #ffed72
menu.separatorBackground #3a4449
menubar.selectionForeground #f2fffc
merge.border #273136
merge.commonContentBackground #f2fffc19
merge.commonHeaderBackground #f2fffc26
merge.currentContentBackground #ff6d7e19
merge.currentHeaderBackground #ff6d7e26
merge.incomingContentBackground #a2e57b19
merge.incomingHeaderBackground #a2e57b26
mergeEditor.change.background #f2fffc19
mergeEditor.change.word.background #f2fffc19
mergeEditor.conflict.handled.minimapOverViewRuler #a2e57b
mergeEditor.conflict.handledFocused.border #a2e57b
mergeEditor.conflict.handledUnfocused.border #a2e57b
mergeEditor.conflict.unhandled.minimapOverViewRuler #ff6d7e
mergeEditor.conflict.unhandledFocused.border #ff6d7e
mergeEditor.conflict.unhandledUnfocused.border #ff6d7e
minimap.errorHighlight #ff6d7ea5
minimap.findMatchHighlight #8b9798a5
minimap.selectionHighlight #b8c4c326
minimap.selectionOccurrenceHighlight #6b7678a5
minimap.warningHighlight #ffb270a5
minimapGutter.addedBackground #a2e57b
minimapGutter.deletedBackground #ff6d7e
minimapGutter.modifiedBackground #ffed72
notebook.cellBorderColor #3a4449
notebook.cellEditorBackground #1d25287f
notebook.cellInsertionIndicator #f2fffc
notebook.cellStatusBarItemHoverBackground #6b7678
notebook.cellToolbarSeparator #3a4449
notebook.editorBackground #273136
notebook.focusedEditorBorder #6b7678
notebookStatusErrorIcon.foreground #ff6d7e
notebookStatusRunningIcon.foreground #f2fffc
notebookStatusSuccessIcon.foreground #a2e57b
notificationCenter.border #3a4449
notificationCenterHeader.background #3a4449
notificationCenterHeader.foreground #8b9798
notificationLink.foreground #ffed72
notifications.background #3a4449
notifications.border #3a4449
notifications.foreground #b8c4c3
notificationsErrorIcon.foreground #ff6d7e
notificationsInfoIcon.foreground #7cd5f1
notificationsWarningIcon.foreground #ffb270
notificationToast.border #3a4449
panel.background #1d2528
panel.border #273136
panelTitle.activeBorder #ffed72
panelTitle.activeForeground #ffed72
panelTitle.inactiveForeground #d2d2d2
peekView.border #273136
peekViewEditor.background #3a4449
peekViewEditor.matchHighlightBackground #545f62
peekViewEditorGutter.background #3a4449
peekViewResult.background #3a4449
peekViewResult.fileForeground #f7f7f7
peekViewResult.lineForeground #c5c5c5
peekViewResult.matchHighlightBackground #545f62
peekViewResult.selectionBackground #3a4449
peekViewResult.selectionForeground #f2fffc
peekViewTitle.background #3a4449
peekViewTitleDescription.foreground #c5c5c5
peekViewTitleLabel.foreground #f2fffc
pickerGroup.border #273136
pickerGroup.foreground #545f62
ports.iconRunningProcessForeground #a2e57b
problemsErrorIcon.foreground #ff6d7e
problemsInfoIcon.foreground #7cd5f1
problemsWarningIcon.foreground #ffb270
profileBadge.background #3a4449
profileBadge.foreground #b8c4c3
progressBar.background #3a4449
sash.hoverBorder #6b7678
scrollbar.shadow #273136
scrollbarSlider.activeBackground #f2fffc59
scrollbarSlider.background #b8c4c326
scrollbarSlider.hoverBackground #f2fffc26
selection.background #b8c4c326
settings.checkboxBackground #3a4449
settings.checkboxBorder #3a4449
settings.checkboxForeground #f2fffc
settings.dropdownBackground #3a4449
settings.dropdownBorder #3a4449
settings.dropdownForeground #f2fffc
settings.dropdownListBorder #8b9798
settings.headerForeground #ffed72
settings.modifiedItemIndicator #ffed72
settings.numberInputBackground #3a4449
settings.numberInputBorder #3a4449
settings.numberInputForeground #f2fffc
settings.rowHoverBackground #6b76780c
settings.textInputBackground #3a4449
settings.textInputBorder #3a4449
settings.textInputForeground #f2fffc
sideBar.background #1d2528
sideBar.border #161b1e
sideBar.dropBackground #1d2528bf
sideBar.foreground #ffffff
sideBarSectionHeader.background #1d2528
sideBarSectionHeader.foreground #ffffff
sideBarTitle.foreground #ffffff
statusBar.background #1d2528
statusBar.border #161b1e
statusBar.debuggingBackground #6b7678
statusBar.debuggingBorder #1d2528
statusBar.debuggingForeground #f2fffc
statusBar.focusBorder #3a4449
statusBar.foreground #e7e7e7
statusBar.noFolderBackground #1d2528
statusBar.noFolderBorder #161b1e
statusBar.noFolderForeground #6b7678
statusBarItem.activeBackground #273136
statusBarItem.errorBackground #273136
statusBarItem.errorForeground #ff6d7e
statusBarItem.focusBorder #6b7678
statusBarItem.hoverBackground #f2fffc0c
statusBarItem.prominentBackground #3a4449
statusBarItem.prominentHoverBackground #3a4449
statusBarItem.remoteBackground #1d2528
statusBarItem.remoteForeground #a2e57b
statusBarItem.warningBackground #273136
statusBarItem.warningForeground #ffb270
symbolIcon.arrayForeground #ff6d7e
symbolIcon.booleanForeground #ff6d7e
symbolIcon.classForeground #7cd5f1
symbolIcon.colorForeground #baa0f8
symbolIcon.constantForeground #baa0f8
symbolIcon.constructorForeground #a2e57b
symbolIcon.enumeratorForeground #ffb270
symbolIcon.enumeratorMemberForeground #ffb270
symbolIcon.eventForeground #ffb270
symbolIcon.fieldForeground #ffb270
symbolIcon.fileForeground #b8c4c3
symbolIcon.folderForeground #b8c4c3
symbolIcon.functionForeground #a2e57b
symbolIcon.interfaceForeground #7cd5f1
symbolIcon.keyForeground #ffb270
symbolIcon.keywordForeground #ff6d7e
symbolIcon.methodForeground #a2e57b
symbolIcon.moduleForeground #7cd5f1
symbolIcon.namespaceForeground #7cd5f1
symbolIcon.nullForeground #baa0f8
symbolIcon.numberForeground #baa0f8
symbolIcon.objectForeground #7cd5f1
symbolIcon.operatorForeground #ff6d7e
symbolIcon.packageForeground #baa0f8
symbolIcon.propertyForeground #ffb270
symbolIcon.referenceForeground #baa0f8
symbolIcon.snippetForeground #a2e57b
symbolIcon.stringForeground #ffed72
symbolIcon.structForeground #ff6d7e
symbolIcon.textForeground #ffed72
symbolIcon.typeParameterForeground #ffb270
symbolIcon.unitForeground #baa0f8
symbolIcon.variableForeground #7cd5f1
tab.activeBackground #273136
tab.activeBorder #ffed72
tab.activeForeground #ffed72
tab.activeModifiedBorder #545f62
tab.border #273136
tab.hoverBackground #273136
tab.hoverBorder #545f62
tab.hoverForeground #f2fffc
tab.inactiveBackground #273136
tab.inactiveForeground #8b9798
tab.inactiveModifiedBorder #545f62
tab.lastPinnedBorder #545f62
tab.unfocusedActiveBorder #8b9798
tab.unfocusedActiveForeground #b8c4c3
tab.unfocusedActiveModifiedBorder #3a4449
tab.unfocusedHoverBackground #273136
tab.unfocusedHoverBorder #273136
tab.unfocusedHoverForeground #b8c4c3
tab.unfocusedInactiveForeground #8b9798
tab.unfocusedInactiveModifiedBorder #3a4449
terminal.ansiBlack #3a4449
terminal.ansiBlue #ffb270
terminal.ansiBrightBlack #6b7678
terminal.ansiBrightBlue #ffb270
terminal.ansiBrightCyan #7cd5f1
terminal.ansiBrightGreen #a2e57b
terminal.ansiBrightMagenta #baa0f8
terminal.ansiBrightRed #ff6d7e
terminal.ansiBrightWhite #f2fffc
terminal.ansiBrightYellow #ffed72
terminal.ansiCyan #7cd5f1
terminal.ansiGreen #a2e57b
terminal.ansiMagenta #baa0f8
terminal.ansiRed #ff6d7e
terminal.ansiWhite #f2fffc
terminal.ansiYellow #ffed72
terminal.background #1d2528
terminal.foreground #f2fffc
terminal.selectionBackground #f2fffc26
terminalCommandDecoration.defaultBackground #f2fffc
terminalCommandDecoration.errorBackground #ff6d7e
terminalCommandDecoration.successBackground #a2e57b
terminalCursor.background #00000000
terminalCursor.foreground #f2fffc
testing.iconErrored #ff6d7e
testing.iconFailed #ff6d7e
testing.iconPassed #a2e57b
testing.iconQueued #f2fffc
testing.iconSkipped #ffb270
testing.iconUnset #8b9798
testing.message.error.decorationForeground #ff6d7e
testing.message.error.lineBackground #ff6d7e19
testing.message.info.decorationForeground #f2fffc
testing.message.info.lineBackground #f2fffc19
testing.runAction #ffed72
textBlockQuote.background #3a4449
textBlockQuote.border #3a4449
textCodeBlock.background #3a4449
textLink.activeForeground #f2fffc
textLink.foreground #ffed72
textPreformat.foreground #f2fffc
textSeparator.foreground #6b7678
titleBar.activeBackground #1d2528
titleBar.activeForeground #ffffff
titleBar.border #161b1e
titleBar.inactiveBackground #1d2528
titleBar.inactiveForeground #545f62
walkThrough.embeddedEditorBackground #1d2528
welcomePage.progress.background #6b7678
welcomePage.progress.foreground #8b9798
welcomePage.tileBackground #3a4449
welcomePage.tileHoverBackground #545f62
widget.shadow #161b1e comment.git-status.header.remote #FF6D7E —
comment.git-status.header.local #7CD5F1 —
comment.other.git-status.head #F2FFFC —
string.quoted.docstring, string.quoted.docstring punctuation.definition #6B7678 —
constant.other.caps #BAA0F8 —
constant.other.placeholder.c #FFB270 —
constant.other.property #BAA0F8 —
constant.other.citation.latex #BAA0F8 —
constant.other.color #BAA0F8 —
constant.other.character-class.escape #BAA0F8 —
constant.other.key #BAA0F8 —
constant.other.symbol #FFB270 —
constant.other.elm #7CD5F1 —
constant.language #BAA0F8 —
constant.character.escape #BAA0F8 —
constant.numeric.line-number.find-in-files #545F62 —
constant.numeric.line-number.match.find-in-files #FFED72 —
entity.name.section #FFED72 —
entity.name.function, entity.name.function.templated, entity.name.function.member.static #A2E57B —
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace #7CD5F1 —
entity.name.label #BAA0F8 —
entity.name.function.preprocessor #7CD5F1 —
entity.name.class #7CD5F1 —
entity.name.constant #BAA0F8 —
entity.name.namespace #F2FFFC —
entity.other.inherited-class #7CD5F1 italic
entity.name.function #A2E57B —
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component #FF6D7E —
entity.name.function.operator #FF6D7E —
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator #8B9798 —
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value #7CD5F1 —
entity.other.attribute-name #7CD5F1 italic
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css, entity.other.animation-name.css #A2E57B —
entity.other.attribute-name.id.css #FFB270 —
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css #7CD5F1 italic
entity.name.function, support.function #A2E57B —
entity.other.git-status.hex #BAA0F8 —
entity.other.jinja2.delimiter #8B9798 —
entity.name.operator.custom-literal #F2FFFC —
entity.name.operator.custom-literal.string #FFED72 —
entity.name.operator.custom-literal.number #BAA0F8 —
entity.name.type.rust #7CD5F1 —
entity.name.lifetime.rust #FF6D7E —
invalid #FF6D7E italic underline
invalid.deprecated #FFB270 italic underline
keyword.control.directive #FF6D7E —
keyword.operator, keyword.operator.member, keyword.operator.new #FF6D7E —
keyword.other.substitution #8B9798 —
keyword.other.template.begin, keyword.other.template.end #FF6D7E —
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext #8B9798 —
keyword.other.parenthesis.elm #8B9798 —
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust #7CD5F1 —
keyword.control.rust, keyword.operator.misc.rust #FF6D7E —
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby #FF6D7E —
markup.underline — underline
markup.underline.link #A2E57B —
markup.inserted, markup.inserted punctuation.definition.inserted #A2E57B —
markup.deleted, markup.deleted punctuation.definition.deleted #FF6D7E —
markup.changed, markup.changed punctuation.definition.changed #FFED72 —
markup.ignored, markup.ignored punctuation.definition.ignored #8B9798 —
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js #8B9798 —
meta.function-call.generic.python, support.function.builtin.python #A2E57B —
meta.function-call.python meta.function-call.arguments.python #F2FFFC —
meta.instance.constructor #A2E57B —
meta.attribute-with-value.class string, meta.attribute.class.html string #A2E57B —
meta.attribute-with-value.id string, meta.attribute.id.html string #FFB270 —
source.json meta.mapping.key string #F2FFFC —
source.yaml meta.mapping.key string #FF6D7E —
meta.object.member #F2FFFC —
meta.property-list.css variable.other #FFB270 —
entity.name.constant.preprocessor, meta.preprocessor #BAA0F8 —
meta.diff.git-diff.header #FFED72 —
meta.type_params.rust #F2FFFC —
meta.attribute.rust, meta.annotation.rust, variable.language.rust, variable.annotation.rust, meta.annotation.rust string, meta.annotation.rust keyword, meta.annotation.rust keyword.operator, meta.attribute.rust string #B8C4C3 —
punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css #8B9798 —
punctuation.definition.group #F2FFFC —
punctuation.definition.comment #6B7678 —
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css #B8C4C3 —
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin #FFB270 —
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #FF6D7E —
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown — —
markup.underline.link punctuation #A2E57B —
source.scss, source.sass #8B9798 —
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less #FFB270 italic
source.git-show.commit.sha #BAA0F8 —
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file #8B9798 —
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha #BAA0F8 —
source.git-show meta.diff.range.unified #FFB270 —
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file #8B9798 —
storage.type #7CD5F1 italic
storage.type.extends #FF6D7E normal
storage.type.function.arrow #FF6D7E normal
storage.modifier, storage.type.modifier #FF6D7E italic
storage.class.restructuredtext.ref #BAA0F8 —
storage.modifier.visibility.rust, storage.modifier.lifetime.rust #FF6D7E —
storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, storage.type.rust, storage.type.core.rust, storage.class.std.rust #7CD5F1 —
storage.type.rust, storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, keyword.other.rust, keyword.other.where.rust #FF6D7E —
string.unquoted.label #F2FFFC —
string source punctuation.section.embedded, string punctuation.definition.string source #8B9798 —
string.other.link.title, string.other.link.description #FF6D7E —
string.other.link.description.title #7CD5F1 —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #FF6D7E —
string.other.ref, string.other.restructuredtext.ref #A2E57B —
string.other.git-status.help.key #B8C4C3 —
string.other.git-status.remote #FF6D7E —
support.constant.handlebars #8B9798 —
support.type.vendor-prefix.css #B8C4C3 —
support.function.delimiter.elm #8B9798 —
support.type, entity.name.type.object.console #7CD5F1 italic
support.type.property-name #F2FFFC normal
support.constant.core.rust #BAA0F8 —
text.find-in-files #F2FFFC —
variable, variable.other #F2FFFC —
variable.parameter, parameters variable.function #FFB270 italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python #B8C4C3 italic
variable.language.arguments #BAA0F8 —
variable.other.class #7CD5F1 —
variable.other.constant #BAA0F8 —
variable.other.readwrite #F2FFFC —
variable.other.member #F2FFFC —
variable.other.enummember #BAA0F8 —
variable.other.property, variable.other.property.static, variable.other.event #F2FFFC —
variable.function #A2E57B —
variable.other.substitution #FFB270 —
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby #BAA0F8 —
source.jinja2 variable.other.jinja2.block #A2E57B —
source.jinja2 variable.other.jinja2 #FFB270 —
token.error-token #F44747 —
token.debug-token #B267E6 —
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 } ! ` ;
}