Skip to main content
Home Theme VS Code Modern Dark Monoaki VS Code new Modern Dark theme with monokai syntax
Modern Dark Monoaki | 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.activeBorder #0078d4 activityBar.background #141414 activityBar.border #ffffff15 activityBar.foreground #d7d7d7 activityBar.inactiveForeground #ffffff80 activityBarBadge.background #0078d4 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 #69676C italic comment storage.type #69676C — comment entity.name.type #BAB6C0 — comment variable, comment variable.other #BAB6C0 — comment keyword.codetag.notation
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Modern Dark Monoaki — Modern Dark Monokai
activityBarBadge.foreground
#ffffff
badge.background #0078d4
badge.foreground #ffffff
button.background #0078d4
button.border #ffffff12
button.foreground #ffffff
button.hoverBackground #0078d4e6
button.secondaryBackground #ffffff0f
button.secondaryForeground #cccccc
button.secondaryHoverBackground #ffffff15
checkbox.background #313131
checkbox.border #ffffff1f
debugToolBar.background #141414
descriptionForeground #8b949e
diffEditor.insertedLineBackground #23863633
diffEditor.insertedTextBackground #2386364d
diffEditor.removedLineBackground #da363333
diffEditor.removedTextBackground #da36334d
dropdown.background #313131
dropdown.border #ffffff1f
dropdown.foreground #cccccc
dropdown.listBackground #313131
editor.background #1f1f1f
editor.findMatchBackground #9e6a03
editor.foreground #ffffff
editor.inactiveSelectionBackground #3a3d41
editor.lineHighlightBorder #3b3b3b
editor.selectionHighlightBackground #add6ff26
editorGroup.border #ffffff17
editorGroupHeader.tabsBackground #141414
editorGroupHeader.tabsBorder #ffffff15
editorGutter.addedBackground #2ea043
editorGutter.deletedBackground #f85149
editorGutter.modifiedBackground #0078d4
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #404040
editorInlayHint.background #8b949e33
editorInlayHint.foreground #8b949e
editorInlayHint.typeBackground #8b949e33
editorInlayHint.typeForeground #8b949e
editorLineNumber.activeForeground #cccccc
editorLineNumber.foreground #6e7681
editorOverviewRuler.border #010409
editorWidget.background #1f1f1f
errorForeground #f85149
focusBorder #0078d4
foreground #cccccc
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
gitlens.closedAutolinkedIssueIconColor #a371f7
gitlens.closedPullRequestIconColor #f85149
gitlens.decorations.addedForegroundColor #81b88b
gitlens.decorations.branchAheadForegroundColor #35b15e
gitlens.decorations.branchBehindForegroundColor #b15e35
gitlens.decorations.branchDivergedForegroundColor #d8af1b
gitlens.decorations.branchMissingUpstreamForegroundColor #c74e39
gitlens.decorations.branchUnpublishedForegroundColor #35b15e
gitlens.decorations.copiedForegroundColor #73c991
gitlens.decorations.deletedForegroundColor #c74e39
gitlens.decorations.ignoredForegroundColor #8c8c8c
gitlens.decorations.modifiedForegroundColor #e2c08d
gitlens.decorations.renamedForegroundColor #73c991
gitlens.decorations.untrackedForegroundColor #73c991
gitlens.decorations.worktreeView.hasUncommittedChangesForegroundColor #e2c08d
gitlens.graphLane10Color #2ece9d
gitlens.graphLane1Color #15a0bf
gitlens.graphLane2Color #0669f7
gitlens.graphLane3Color #8e00c2
gitlens.graphLane4Color #c517b6
gitlens.graphLane5Color #d90171
gitlens.graphLane6Color #cd0101
gitlens.graphLane7Color #f25d2e
gitlens.graphLane8Color #f2ca33
gitlens.graphLane9Color #7bd938
gitlens.gutterBackgroundColor #ffffff13
gitlens.gutterForegroundColor #bebebe
gitlens.gutterUncommittedForegroundColor #00bcf299
gitlens.lineHighlightBackgroundColor #00bcf233
gitlens.lineHighlightOverviewRulerColor #00bcf299
gitlens.mergedPullRequestIconColor #a371f7
gitlens.openAutolinkedIssueIconColor #3fb950
gitlens.openPullRequestIconColor #3fb950
gitlens.trailingLineBackgroundColor #00000000
gitlens.trailingLineForegroundColor #99999959
gitlens.unpublishedChangesIconColor #35b15e
gitlens.unpublishedCommitIconColor #35b15e
gitlens.unpulledChangesIconColor #b15e35
icon.foreground #cccccc
input.background #2a2a2a
input.border #ffffff1f
input.foreground #cccccc
input.placeholderForeground #ffffff79
inputOption.activeBackground #2489db82
inputOption.activeBorder #2488db
keybindingLabel.foreground #cccccc
list.activeSelectionBackground #323232
list.activeSelectionForeground #ffffff
list.activeSelectionIconForeground #ffffff
list.dropBackground #383b3d
menu.background #1f1f1f
menu.border #454545
menu.foreground #cccccc
menu.separatorBackground #454545
notificationCenterHeader.background #1f1f1f
notificationCenterHeader.foreground #cccccc
notifications.background #1f1f1f
notifications.border #ffffff15
notifications.foreground #cccccc
panel.background #141414
panel.border #ffffff15
panelInput.border #ffffff15
panelTitle.activeBorder #0078d4
panelTitle.activeForeground #cccccc
panelTitle.inactiveForeground #8b949e
peekViewEditor.background #1f1f1f
peekViewEditor.matchHighlightBackground #bb800966
peekViewResult.background #1f1f1f
peekViewResult.matchHighlightBackground #bb800966
pickerGroup.border #ffffff15
pickerGroup.foreground #8b949e
ports.iconRunningProcessForeground #369432
progressBar.background #0078d4
quickInput.background #1f1f1f
quickInput.foreground #cccccc
scrollbar.shadow #484f5833
scrollbarSlider.activeBackground #6e768187
scrollbarSlider.background #6e768133
scrollbarSlider.hoverBackground #6e768145
settings.dropdownBackground #313131
settings.dropdownBorder #ffffff1f
settings.headerForeground #ffffff
settings.modifiedItemIndicator #bb800966
sideBar.background #141414
sideBar.border #ffffff15
sideBar.foreground #ffffff
sideBarSectionHeader.background #141414
sideBarSectionHeader.border #ffffff15
sideBarSectionHeader.foreground #cccccc
sideBarTitle.foreground #cccccc
statusBar.background #141414
statusBar.border #ffffff15
statusBar.debuggingBackground #0078d4
statusBar.debuggingForeground #ffffff
statusBar.foreground #cccccc
statusBar.noFolderBackground #1f1f1f
statusBarItem.focusBorder #0078d4
statusBarItem.prominentBackground #6e768166
statusBarItem.remoteBackground #0078d4
statusBarItem.remoteForeground #ffffff
tab.activeBackground #1f1f1f
tab.activeBorder #1f1f1f
tab.activeBorderTop #0078d4
tab.activeForeground #ffffff
tab.border #ffffff15
tab.hoverBackground #1f1f1f
tab.inactiveBackground #141414
tab.inactiveForeground #ffffff80
tab.lastPinnedBorder #cccccc33
tab.unfocusedActiveBorder #1f1f1f
tab.unfocusedActiveBorderTop #ffffff15
tab.unfocusedHoverBackground #6e76811a
terminal.foreground #ffffff
terminal.inactiveSelectionBackground #3a3d41
terminal.tab.activeBorder #0078d4
textBlockQuote.background #010409
textBlockQuote.border #ffffff14
textCodeBlock.background #6e768166
textLink.activeForeground #40a6ff
textLink.foreground #40a6ff
textSeparator.foreground #21262d
titleBar.activeBackground #141414
titleBar.activeForeground #cccccc
titleBar.border #ffffff15
titleBar.inactiveBackground #1f1f1f
titleBar.inactiveForeground #8b949e
welcomePage.progress.foreground #0078d4
welcomePage.tileBackground #ffffff0f
widget.border #ffffff15 comment.git-status.header.remote #FC618D —
comment.git-status.header.local #5AD4E6 —
comment.other.git-status.head #F7F1FF —
constant.other.php #948AE3 —
constant.other.property #948AE3 —
constant.other.citation.latex #948AE3 —
constant.other.color #948AE3 —
constant.other.character-class.escape #948AE3 —
constant.other.key #948AE3 —
constant.other.symbol #FD9353 —
constant.other.elm #5AD4E6 —
constant.language #948AE3 —
constant.character.escape #948AE3 —
constant.numeric.line-number.find-in-files #525053 —
constant.numeric.line-number.match.find-in-files #FCE566 —
entity.name.section #FCE566 —
entity.name.function, entity.name.function.templated #7BD88F —
entity.name.function.member.static #F7F1FF —
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace #5AD4E6 —
entity.name.label #948AE3 —
entity.name.function.preprocessor #5AD4E6 —
entity.name.class #5AD4E6 —
entity.name.constant #948AE3 —
entity.name.namespace #F7F1FF —
entity.other.inherited-class #5AD4E6 italic
entity.name.function #7BD88F —
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component #FC618D —
entity.name.function.operator #FC618D —
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value #5AD4E6 —
entity.other.attribute-name #5AD4E6 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 #7BD88F —
entity.other.attribute-name.id.css #FD9353 —
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css #5AD4E6 italic
entity.name.function, support.function #7BD88F —
entity.other.git-status.hex #948AE3 —
entity.other.jinja2.delimiter #8B888F —
entity.name.operator.custom-literal #F7F1FF —
entity.name.operator.custom-literal.string #FCE566 —
entity.name.operator.custom-literal.number #948AE3 —
entity.name.type.rust #5AD4E6 —
entity.name.lifetime.rust #FC618D —
keyword.control.directive #FC618D —
keyword.operator, keyword.operator.member, keyword.operator.new #FC618D —
keyword.other.substitution #8B888F —
keyword.other.template.begin, keyword.other.template.end #FC618D —
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext #8B888F —
keyword.other.parenthesis.elm #8B888F —
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust #5AD4E6 —
keyword.control.rust, keyword.operator.misc.rust #FC618D —
keyword.declaration.class.ruby, keyword.declaration.function.ruby #FC618D —
markup.underline — underline
markup.underline.link #7BD88F —
markup.inserted, markup.inserted punctuation.definition.inserted #7BD88F —
markup.deleted, markup.deleted punctuation.definition.deleted #FC618D —
markup.changed, markup.changed punctuation.definition.changed #FCE566 —
markup.ignored, markup.ignored punctuation.definition.ignored #8B888F —
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 #8B888F —
meta.function-call.generic.python, support.function.builtin.python #7BD88F —
meta.function-call.python meta.function-call.arguments.python #F7F1FF —
meta.instance.constructor #7BD88F —
meta.attribute-with-value.class string, meta.attribute.class.html string #7BD88F —
meta.attribute-with-value.id string, meta.attribute.id.html string #FD9353 —
source.json meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary, source.json meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string, source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary string #F7F1FF —
source.json meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string, source.json meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value string #FCE566 —
meta.object.member #F7F1FF —
meta.property-list.css variable.other #FD9353 —
entity.name.constant.preprocessor, meta.preprocessor #948AE3 —
meta.diff.git-diff.header #FCE566 —
meta.type_params.rust #F7F1FF —
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 #BAB6C0 —
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 #8B888F —
punctuation.definition.group #F7F1FF —
punctuation.definition.comment #69676C —
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css #BAB6C0 —
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin #FD9353 —
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 #FC618D —
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown — —
source.scss, source.sass #8B888F —
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 #FD9353 italic
source.git-show.commit.sha #948AE3 —
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 #8B888F —
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha #948AE3 —
source.git-show meta.diff.range.unified #FD9353 —
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file #8B888F —
storage.type #5AD4E6 italic
storage.type.extends #FC618D normal
storage.type.function.arrow #FC618D normal
storage.modifier, storage.type.modifier #FC618D italic
storage.class.restructuredtext.ref #948AE3 —
storage.modifier.visibility.rust, storage.modifier.lifetime.rust #FC618D —
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 #5AD4E6 —
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 #FC618D —
string.unquoted.label #F7F1FF —
string source punctuation.section.embedded, string punctuation.definition.string source #8B888F —
string.other.link.title, string.other.link.description #FC618D —
string.other.link.description.title #5AD4E6 —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #FC618D —
string.other.ref, string.other.restructuredtext.ref #7BD88F —
string.other.git-status.help.key #BAB6C0 —
string.other.git-status.remote #FC618D —
support.constant.handlebars #8B888F —
support.type.vendor-prefix.css #BAB6C0 —
support.function.delimiter.elm #8B888F —
support.type, entity.name.type.object.console #5AD4E6 italic
support.type.property-name #F7F1FF normal
support.constant.core.rust #948AE3 —
text.find-in-files #F7F1FF —
variable, variable.other #F7F1FF —
variable.parameter, parameters variable.function #FD9353 italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python #BAB6C0 italic
variable.language.arguments #948AE3 —
variable.other.class #5AD4E6 —
variable.other.constant #948AE3 —
variable.other.readwrite #F7F1FF —
variable.other.member #F7F1FF —
variable.other.enummember #948AE3 —
variable.other.property, variable.other.property.static, variable.other.event #F7F1FF —
variable.function #7BD88F —
variable.other.substitution #FD9353 —
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby #948AE3 —
source.jinja2 variable.other.jinja2.block #7BD88F —
source.jinja2 variable.other.jinja2 #FD9353 —
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 } ! ` ;
}