Skip to main content
Home Theme VS Code JG-VSC A modern minimalist theme that makes the moon a friend for the lonesome to code to...
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 #e0def4 activityBar.background #232136 activityBar.dropBorder #393552 activityBar.foreground #e0def4 activityBar.inactiveForeground #908caa activityBarBadge.background #ea9a97 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 #727072 italic comment storage.type #727072 — comment entity.name.type #c1c0c0 — comment variable, comment variable.other #c1c0c0 — comment keyword.codetag.notation
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#232136
badge.background #ea9a97
badge.foreground #232136
banner.background #2a273f
banner.foreground #e0def4
banner.iconForeground #908caa
breadcrumb.activeSelectionForeground #ea9a97
breadcrumb.background #232136
breadcrumb.focusForeground #908caa
breadcrumb.foreground #6e6a86
breadcrumbPicker.background #2a273f
button.background #ea9a97
button.foreground #232136
button.hoverBackground #ea9a97e6
button.secondaryBackground #2a273f
button.secondaryForeground #e0def4
button.secondaryHoverBackground #393552
charts.blue #9ccfd8
charts.foreground #e0def4
charts.green #3e8fb0
charts.lines #908caa
charts.orange #ea9a97
charts.purple #c4a7e7
charts.red #eb6f92
charts.yellow #f6c177
checkbox.background #2a273f
checkbox.border #817c9c26
checkbox.foreground #e0def4
debugExceptionWidget.background #2a273f
debugExceptionWidget.border #817c9c26
debugIcon.breakpointCurrentStackframeForeground #908caa
debugIcon.breakpointDisabledForeground #908caa
debugIcon.breakpointForeground #908caa
debugIcon.breakpointStackframeForeground #908caa
debugIcon.breakpointUnverifiedForeground #908caa
debugIcon.continueForeground #908caa
debugIcon.disconnectForeground #908caa
debugIcon.pauseForeground #908caa
debugIcon.restartForeground #908caa
debugIcon.startForeground #908caa
debugIcon.stepBackForeground #908caa
debugIcon.stepIntoForeground #908caa
debugIcon.stepOutForeground #908caa
debugIcon.stepOverForeground #908caa
debugIcon.stopForeground #eb6f92
debugToolBar.background #2a273f
debugToolBar.border #393552
descriptionForeground #908caa
diffEditor.border #393552
diffEditor.diagonalFill #817c9c4d
diffEditor.insertedTextBackground #9ccfd826
diffEditor.removedTextBackground #eb6f9226
diffEditorOverview.insertedForeground #9ccfd880
diffEditorOverview.removedForeground #eb6f9280
dropdown.background #2a273f
dropdown.border #817c9c26
dropdown.foreground #e0def4
dropdown.listBackground #2a273f
editor.background #2F274A
editor.findMatchBackground #817c9c4d
editor.findMatchHighlightBackground #817c9c4d
editor.findRangeHighlightBackground #817c9c4d
editor.findRangeHighlightBorder #0000
editor.focusedStackFrameHighlightBackground #817c9c26
editor.foldBackground #2a273f
editor.foreground #e0def4
editor.hoverHighlightBackground #0000
editor.inactiveSelectionBackground #817c9c14
editor.inlineValuesBackground #0000
editor.inlineValuesForeground #908caa
editor.lineHighlightBackground #817c9c14
editor.lineHighlightBorder #0000
editor.linkedEditingBackground #2a273f
editor.rangeHighlightBackground #817c9c14
editor.rangeHighlightBorder #0000
editor.selectionBackground #817c9c26
editor.selectionForeground #e0def4
editor.selectionHighlightBackground #817c9c26
editor.selectionHighlightBorder #0000
editor.snippetFinalTabstopHighlightBackground #817c9c26
editor.snippetFinalTabstopHighlightBorder #2a273f
editor.snippetTabstopHighlightBackground #817c9c26
editor.snippetTabstopHighlightBorder #2a273f
editor.stackFrameHighlightBackground #817c9c26
editor.symbolHighlightBackground #817c9c26
editor.symbolHighlightBorder #0000
editor.wordHighlightBackground #817c9c26
editor.wordHighlightBorder #0000
editor.wordHighlightStrongBackground #817c9c26
editor.wordHighlightStrongBorder #817c9c26
editorBracketHighlight.foreground1 #eb6f9280
editorBracketHighlight.foreground2 #3e8fb080
editorBracketHighlight.foreground3 #f6c17780
editorBracketHighlight.foreground4 #9ccfd880
editorBracketHighlight.foreground5 #ea9a9780
editorBracketHighlight.foreground6 #c4a7e780
editorBracketMatch.background #0000
editorBracketMatch.border #908caa
editorBracketPairGuide.activeBackground1 #3e8fb0
editorBracketPairGuide.activeBackground2 #ea9a97
editorBracketPairGuide.activeBackground3 #c4a7e7
editorBracketPairGuide.activeBackground4 #9ccfd8
editorBracketPairGuide.activeBackground5 #f6c177
editorBracketPairGuide.activeBackground6 #eb6f92
editorBracketPairGuide.background1 #3e8fb080
editorBracketPairGuide.background2 #ea9a9780
editorBracketPairGuide.background3 #c4a7e780
editorBracketPairGuide.background4 #9ccfd880
editorBracketPairGuide.background5 #f6c17780
editorBracketPairGuide.background6 #eb6f9280
editorCodeLens.foreground #ea9a97
editorCursor.background #e0def4
editorCursor.foreground #6e6a86
editorError.border #0000
editorError.foreground #eb6f92
editorGhostText.foreground #908caa
editorGroup.border #0000
editorGroup.dropBackground #2a273f
editorGroup.emptyBackground #0000
editorGroup.focusedEmptyBorder #0000
editorGroupHeader.noTabsBackground #0000
editorGroupHeader.tabsBackground #0000
editorGroupHeader.tabsBorder #0000
editorGutter.addedBackground #9ccfd8
editorGutter.background #0000
editorGutter.commentRangeForeground #908caa
editorGutter.deletedBackground #eb6f92
editorGutter.foldingControlForeground #c4a7e7
editorGutter.modifiedBackground #ea9a97
editorHint.border #0000
editorHint.foreground #908caa
editorHoverWidget.background #2a273f
editorHoverWidget.border #6e6a8680
editorHoverWidget.foreground #908caa
editorHoverWidget.highlightForeground #e0def4
editorHoverWidget.statusBarBackground #0000
editorIndentGuide.activeBackground #6e6a86
editorIndentGuide.background #817c9c4d
editorInfo.border #393552
editorInfo.foreground #9ccfd8
editorInlayHint.background #393552
editorInlayHint.foreground #908caa
editorInlayHint.parameterBackground #393552
editorInlayHint.parameterForeground #c4a7e7
editorInlayHint.typeBackground #393552
editorInlayHint.typeForeground #9ccfd8
editorLightBulb.foreground #3e8fb0
editorLightBulbAutoFix.foreground #ea9a97
editorLineNumber.activeForeground #e0def4
editorLineNumber.foreground #908caa
editorLink.activeForeground #ea9a97
editorMarkerNavigation.background #2a273f
editorMarkerNavigationError.background #2a273f
editorMarkerNavigationInfo.background #2a273f
editorMarkerNavigationWarning.background #2a273f
editorOverviewRuler.addedForeground #9ccfd880
editorOverviewRuler.background #232136
editorOverviewRuler.border #817c9c4d
editorOverviewRuler.bracketMatchForeground #908caa
editorOverviewRuler.commonContentForeground #817c9c14
editorOverviewRuler.currentContentForeground #817c9c26
editorOverviewRuler.deletedForeground #eb6f9280
editorOverviewRuler.errorForeground #eb6f9280
editorOverviewRuler.findMatchForeground #817c9c4d
editorOverviewRuler.incomingContentForeground #c4a7e780
editorOverviewRuler.infoForeground #9ccfd880
editorOverviewRuler.modifiedForeground #ea9a9780
editorOverviewRuler.rangeHighlightForeground #817c9c4d
editorOverviewRuler.selectionHighlightForeground #817c9c4d
editorOverviewRuler.warningForeground #f6c17780
editorOverviewRuler.wordHighlightForeground #817c9c26
editorOverviewRuler.wordHighlightStrongForeground #817c9c4d
editorPane.background #0000
editorRuler.foreground #817c9c4d
editorSuggestWidget.background #2a273f
editorSuggestWidget.border #0000
editorSuggestWidget.focusHighlightForeground #ea9a97
editorSuggestWidget.foreground #908caa
editorSuggestWidget.highlightForeground #ea9a97
editorSuggestWidget.selectedBackground #817c9c26
editorSuggestWidget.selectedForeground #e0def4
editorSuggestWidget.selectedIconForeground #e0def4
editorUnnecessaryCode.border #0000
editorUnnecessaryCode.opacity #00000080
editorWarning.border #0000
editorWarning.foreground #f6c177
editorWhitespace.foreground #6e6a86
editorWidget.background #2a273f
editorWidget.border #393552
editorWidget.foreground #908caa
editorWidget.resizeBorder #6e6a86
errorForeground #eb6f92
extensionBadge.remoteBackground #c4a7e7
extensionBadge.remoteForeground #232136
extensionButton.prominentBackground #ea9a97
extensionButton.prominentForeground #232136
extensionButton.prominentHoverBackground #ea9a97e6
extensionIcon.starForeground #ea9a97
extensionIcon.verifiedForeground #c4a7e7
focusBorder #817c9c26
foreground #e0def4
gitDecoration.addedResourceForeground #9ccfd8
gitDecoration.conflictingResourceForeground #eb6f92
gitDecoration.deletedResourceForeground #908caa
gitDecoration.ignoredResourceForeground #6e6a86
gitDecoration.modifiedResourceForeground #ea9a97
gitDecoration.renamedResourceForeground #3e8fb0
gitDecoration.stageDeletedResourceForeground #eb6f92
gitDecoration.stageModifiedResourceForeground #c4a7e7
gitDecoration.submoduleResourceForeground #f6c177
gitDecoration.untrackedResourceForeground #f6c177
icon.foreground #908caa
input.background #39355280
input.border #817c9c26
input.foreground #e0def4
input.placeholderForeground #908caa
inputOption.activeBackground #ea9a97
inputOption.activeBorder #0000
inputOption.activeForeground #232136
inputValidation.errorBackground #2a273f
inputValidation.errorBorder #817c9c4d
inputValidation.errorForeground #eb6f92
inputValidation.infoBackground #2a273f
inputValidation.infoBorder #817c9c4d
inputValidation.infoForeground #9ccfd8
inputValidation.warningBackground #2a273f
inputValidation.warningBorder #817c9c4d
inputValidation.warningForeground #9ccfd880
keybindingLabel.background #393552
keybindingLabel.border #817c9c4d
keybindingLabel.bottomBorder #817c9c4d
keybindingLabel.foreground #c4a7e7
keybindingTable.headerBackground #393552
keybindingTable.rowsBackground #2a273f
list.activeSelectionBackground #817c9c26
list.activeSelectionForeground #e0def4
list.activeSelectionIconForeground #e0def4
list.deemphasizedForeground #908caa
list.dropBackground #2a273f
list.errorForeground #eb6f92
list.filterMatchBackground #2a273f
list.filterMatchBorder #ea9a97
list.focusBackground #817c9c4d
list.focusForeground #e0def4
list.focusOutline #817c9c26
list.highlightForeground #ea9a97
list.hoverBackground #817c9c14
list.hoverForeground #e0def4
list.inactiveFocusBackground #817c9c14
list.inactiveSelectionBackground #2a273f
list.inactiveSelectionForeground #e0def4
list.inactiveSelectionIconForeground #908caa
list.invalidItemForeground #eb6f92
list.warningForeground #f6c177
listFilterWidget.background #2a273f
listFilterWidget.noMatchesOutline #eb6f92
listFilterWidget.outline #393552
menu.background #2a273f
menu.border #817c9c14
menu.foreground #e0def4
menu.selectionBackground #817c9c26
menu.selectionBorder #393552
menu.selectionForeground #e0def4
menu.separatorBackground #817c9c4d
menubar.selectionBackground #817c9c26
menubar.selectionBorder #817c9c14
menubar.selectionForeground #e0def4
merge.border #393552
merge.commonContentBackground #817c9c26
merge.commonHeaderBackground #817c9c26
merge.currentContentBackground #f6c17780
merge.currentHeaderBackground #f6c17780
merge.incomingContentBackground #9ccfd880
merge.incomingHeaderBackground #9ccfd880
minimap.background #2a273f
minimap.errorHighlight #eb6f9280
minimap.findMatchHighlight #817c9c26
minimap.selectionHighlight #817c9c26
minimap.warningHighlight #f6c17780
minimapGutter.addedBackground #9ccfd8
minimapGutter.deletedBackground #eb6f92
minimapGutter.modifiedBackground #ea9a97
minimapSlider.activeBackground #817c9c4d
minimapSlider.background #817c9c26
minimapSlider.hoverBackground #817c9c26
notificationCenter.border #817c9c26
notificationCenterHeader.background #2a273f
notificationCenterHeader.foreground #908caa
notificationLink.foreground #c4a7e7
notifications.background #2a273f
notifications.border #817c9c26
notifications.foreground #e0def4
notificationsErrorIcon.foreground #eb6f92
notificationsInfoIcon.foreground #9ccfd8
notificationsWarningIcon.foreground #f6c177
notificationToast.border #817c9c26
panel.background #2a273f
panel.border #0000
panel.dropBorder #393552
panelInput.border #2a273f
panelSection.dropBackground #817c9c26
panelSectionHeader.background #2a273f
panelSectionHeader.foreground #e0def4
panelTitle.activeBorder #817c9c4d
panelTitle.activeForeground #e0def4
panelTitle.inactiveForeground #908caa
peekView.border #393552
peekViewEditor.background #2a273f
peekViewEditor.matchHighlightBackground #817c9c4d
peekViewResult.background #2a273f
peekViewResult.fileForeground #908caa
peekViewResult.lineForeground #908caa
peekViewResult.matchHighlightBackground #817c9c4d
peekViewResult.selectionBackground #817c9c26
peekViewResult.selectionForeground #e0def4
peekViewTitle.background #393552
peekViewTitleDescription.foreground #908caa
pickerGroup.border #817c9c4d
pickerGroup.foreground #c4a7e7
ports.iconRunningProcessForeground #ea9a97
problemsErrorIcon.foreground #eb6f92
problemsInfoIcon.foreground #9ccfd8
problemsWarningIcon.foreground #f6c177
progressBar.background #ea9a97
quickInput.background #2a273f
quickInput.foreground #908caa
quickInputList.focusBackground #817c9c26
quickInputList.focusForeground #e0def4
quickInputList.focusIconForeground #e0def4
scrollbar.shadow #0000
scrollbarSlider.activeBackground #3e8fb080
scrollbarSlider.background #817c9c26
scrollbarSlider.hoverBackground #817c9c4d
searchEditor.findMatchBackground #817c9c26
selection.background #817c9c4d
settings.focusedRowBackground #2a273f
settings.focusedRowBorder #817c9c26
settings.headerForeground #e0def4
settings.modifiedItemIndicator #ea9a97
settings.rowHoverBackground #2a273f
sideBar.background #232136
sideBar.dropBackground #2a273f
sideBar.foreground #908caa
sideBarSectionHeader.background #0000
sideBarSectionHeader.border #817c9c26
statusBar.background #232136
statusBar.debuggingBackground #c4a7e7
statusBar.debuggingForeground #232136
statusBar.foreground #908caa
statusBar.noFolderBackground #232136
statusBar.noFolderForeground #908caa
statusBarItem.activeBackground #817c9c4d
statusBarItem.errorBackground #232136
statusBarItem.errorForeground #eb6f92
statusBarItem.hoverBackground #817c9c26
statusBarItem.prominentBackground #393552
statusBarItem.prominentForeground #e0def4
statusBarItem.prominentHoverBackground #817c9c26
statusBarItem.remoteBackground #232136
statusBarItem.remoteForeground #f6c177
symbolIcon.arrayForeground #908caa
symbolIcon.classForeground #908caa
symbolIcon.colorForeground #908caa
symbolIcon.constantForeground #908caa
symbolIcon.constructorForeground #908caa
symbolIcon.enumeratorForeground #908caa
symbolIcon.enumeratorMemberForeground #908caa
symbolIcon.eventForeground #908caa
symbolIcon.fieldForeground #908caa
symbolIcon.fileForeground #908caa
symbolIcon.folderForeground #908caa
symbolIcon.functionForeground #908caa
symbolIcon.interfaceForeground #908caa
symbolIcon.keyForeground #908caa
symbolIcon.keywordForeground #908caa
symbolIcon.methodForeground #908caa
symbolIcon.moduleForeground #908caa
symbolIcon.namespaceForeground #908caa
symbolIcon.nullForeground #908caa
symbolIcon.numberForeground #908caa
symbolIcon.objectForeground #908caa
symbolIcon.operatorForeground #908caa
symbolIcon.packageForeground #908caa
symbolIcon.propertyForeground #908caa
symbolIcon.referenceForeground #908caa
symbolIcon.snippetForeground #908caa
symbolIcon.stringForeground #908caa
symbolIcon.structForeground #908caa
symbolIcon.textForeground #908caa
symbolIcon.typeParameterForeground #908caa
symbolIcon.unitForeground #908caa
symbolIcon.variableForeground #908caa
tab.activeBackground #817c9c14
tab.activeForeground #e0def4
tab.activeModifiedBorder #9ccfd8
tab.border #0000
tab.hoverBackground #817c9c26
tab.inactiveBackground #0000
tab.inactiveForeground #908caa
tab.inactiveModifiedBorder #9ccfd880
tab.lastPinnedBorder #6e6a86
tab.unfocusedActiveBackground #0000
tab.unfocusedHoverBackground #0000
tab.unfocusedInactiveBackground #0000
tab.unfocusedInactiveModifiedBorder #9ccfd880
terminal.ansiBlack #393552
terminal.ansiBlue #9ccfd8
terminal.ansiBrightBlack #908caa
terminal.ansiBrightBlue #9ccfd8
terminal.ansiBrightCyan #ea9a97
terminal.ansiBrightGreen #3e8fb0
terminal.ansiBrightMagenta #c4a7e7
terminal.ansiBrightRed #eb6f92
terminal.ansiBrightWhite #e0def4
terminal.ansiBrightYellow #f6c177
terminal.ansiCyan #ea9a97
terminal.ansiGreen #3e8fb0
terminal.ansiMagenta #c4a7e7
terminal.ansiRed #eb6f92
terminal.ansiWhite #e0def4
terminal.ansiYellow #f6c177
terminal.dropBackground #817c9c26
terminal.foreground #e0def4
terminal.selectionBackground #817c9c26
terminal.tab.activeBorder #e0def4
terminalCursor.background #e0def4
terminalCursor.foreground #6e6a86
textBlockQuote.background #2a273f
textBlockQuote.border #817c9c26
textCodeBlock.background #2a273f
textLink.activeForeground #c4a7e7e6
textLink.foreground #c4a7e7
textPreformat.foreground #f6c177
textSeparator.foreground #908caa
titleBar.activeBackground #232136
titleBar.activeForeground #908caa
titleBar.inactiveBackground #2a273f
titleBar.inactiveForeground #908caa
toolbar.activeBackground #817c9c4d
toolbar.hoverBackground #817c9c26
tree.indentGuidesStroke #908caa
walkThrough.embeddedEditorBackground #232136
welcomePage.background #232136
widget.shadow #1917244d
window.activeBorder #2a273f
window.inactiveBorder #2a273f comment.git-status.header.remote #ff6188 —
comment.git-status.header.local #78dce8 —
comment.other.git-status.head #fcfcfa —
string.quoted.docstring, string.quoted.docstring punctuation.definition #727072 —
constant.other.caps #ab9df2 —
constant.other.placeholder.c #fc9867 —
constant.other.property #ab9df2 —
constant.other.citation.latex #ab9df2 —
constant.other.color #ab9df2 —
constant.other.character-class.escape #ab9df2 —
constant.other.key #ab9df2 —
constant.other.symbol #fc9867 —
constant.other.elm #78dce8 —
constant.language #ab9df2 —
constant.character.escape #ab9df2 —
constant.numeric.line-number.find-in-files #5b595c —
constant.numeric.line-number.match.find-in-files #ffd866 —
entity.name.section #ffd866 —
entity.name.function, entity.name.function.templated #a9dc76 —
entity.name.function.member.static #fcfcfa —
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace #78dce8 —
entity.name.label #ab9df2 —
entity.name.function.preprocessor #78dce8 —
entity.name.class #78dce8 —
entity.name.constant #ab9df2 —
entity.name.namespace #fcfcfa —
entity.other.inherited-class #78dce8 italic
entity.name.function #a9dc76 —
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component #ff6188 —
entity.name.function.operator #ff6188 —
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value #78dce8 —
entity.other.attribute-name #78dce8 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 #a9dc76 —
entity.other.attribute-name.id.css #fc9867 —
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css #78dce8 italic
entity.name.function, support.function #a9dc76 —
entity.other.git-status.hex #ab9df2 —
entity.other.jinja2.delimiter #939293 —
entity.name.operator.custom-literal #fcfcfa —
entity.name.operator.custom-literal.string #ffd866 —
entity.name.operator.custom-literal.number #ab9df2 —
entity.name.type.rust #78dce8 —
entity.name.lifetime.rust #ff6188 —
keyword.control.directive #ff6188 —
keyword.operator, keyword.operator.member, keyword.operator.new #ff6188 —
keyword.other.substitution #939293 —
keyword.other.template.begin, keyword.other.template.end #ff6188 —
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext #939293 —
keyword.other.parenthesis.elm #939293 —
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust #78dce8 —
keyword.control.rust, keyword.operator.misc.rust #ff6188 —
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby #ff6188 —
markup.underline — underline
markup.underline.link #a9dc76 —
markup.inserted, markup.inserted punctuation.definition.inserted #a9dc76 —
markup.deleted, markup.deleted punctuation.definition.deleted #ff6188 —
markup.changed, markup.changed punctuation.definition.changed #ffd866 —
markup.ignored, markup.ignored punctuation.definition.ignored #939293 —
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 #939293 —
meta.function-call.generic.python, support.function.builtin.python #a9dc76 —
meta.function-call.python meta.function-call.arguments.python #fcfcfa —
meta.instance.constructor #a9dc76 —
meta.attribute-with-value.class string, meta.attribute.class.html string #a9dc76 —
meta.attribute-with-value.id string, meta.attribute.id.html string #fc9867 —
source.json meta.mapping.key string #fcfcfa —
meta.object.member #fcfcfa —
meta.property-list.css variable.other #fc9867 —
entity.name.constant.preprocessor, meta.preprocessor #ab9df2 —
meta.diff.git-diff.header #ffd866 —
meta.type_params.rust #fcfcfa —
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 #c1c0c0 —
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 #939293 —
punctuation.definition.group #fcfcfa —
punctuation.definition.comment #727072 —
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css #c1c0c0 —
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin #fc9867 —
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 #ff6188 —
source.scss, source.sass #939293 —
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 #fc9867 italic
source.git-show.commit.sha #ab9df2 —
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 #939293 —
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha #ab9df2 —
source.git-show meta.diff.range.unified #fc9867 —
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file #939293 —
storage.type #78dce8 italic
storage.type.extends #ff6188 —
storage.type.function.arrow #ff6188 —
storage.modifier, storage.type.modifier #ff6188 italic
storage.class.restructuredtext.ref #ab9df2 —
storage.modifier.visibility.rust, storage.modifier.lifetime.rust #ff6188 —
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 #78dce8 —
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 #ff6188 —
string.unquoted.label #fcfcfa —
string source punctuation.section.embedded, string punctuation.definition.string source #939293 —
string.other.link.title, string.other.link.description #ff6188 —
string.other.link.description.title #78dce8 —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #ff6188 —
string.other.ref, string.other.restructuredtext.ref #a9dc76 —
string.other.git-status.help.key #c1c0c0 —
string.other.git-status.remote #ff6188 —
support.constant.handlebars #939293 —
support.type.vendor-prefix.css #c1c0c0 —
support.function.delimiter.elm #939293 —
support.type, entity.name.type.object.console #78dce8 italic
support.type.property-name #fcfcfa —
support.constant.core.rust #ab9df2 —
text.find-in-files #fcfcfa —
variable, variable.other #fcfcfa —
variable.parameter, parameters variable.function #fc9867 italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python #c1c0c0 italic
variable.language.arguments #ab9df2 —
variable.other.class #78dce8 —
variable.other.constant #ab9df2 —
variable.other.readwrite #fcfcfa —
variable.other.member #fcfcfa —
variable.other.enummember #ab9df2 —
variable.other.property, variable.other.property.static, variable.other.event #fcfcfa —
variable.function #a9dc76 —
variable.other.substitution #fc9867 —
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby #ab9df2 —
source.jinja2 variable.other.jinja2.block #a9dc76 —
source.jinja2 variable.other.jinja2 #fc9867 —
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 } ! ` ;
}
JG-VSC | Coding Theme