Skip to main content
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 #e395dc activityBar.background #161821 activityBar.border #161821 activityBar.foreground #b2b9bd activityBar.inactiveForeground #535763 activityBarBadge.background #e395dc 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 #696d77 italic comment storage.type #696d77 — comment entity.name.type #b2b9bd — comment variable, comment variable.other #b2b9bd — comment keyword.codetag.notation
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Interstellar Theme — Interstellar
activityBarBadge.foreground
#181818
badge.background #e395dc
badge.foreground #181818
banner.background #181818
banner.foreground #b2b9bd
banner.iconForeground #b2b9bd
breadcrumb.activeSelectionForeground #eaf2f1
breadcrumb.focusForeground #b2b9bd
breadcrumb.foreground #888d94
button.background #181818
button.foreground #b2b9bd
button.hoverBackground #535763
button.secondaryBackground #181818
button.secondaryForeground #b2b9bd
button.secondaryHoverBackground #535763
button.separator #181818
charts.blue #9cd1bb
charts.foreground #eaf2f1
charts.green #af9cff
charts.lines #696d77
charts.orange #ff9b5e
charts.purple #ffd76d
charts.red #63b2e9
charts.yellow #e395dc
checkbox.background #181818
checkbox.border #181818
checkbox.foreground #eaf2f1
commandCenter.activeBackground #181818
commandCenter.activeForeground #b2b9bd
commandCenter.background #181818
commandCenter.border #181818
commandCenter.foreground #888d94
debugConsole.errorForeground #63b2e9
debugConsole.infoForeground #9cd1bb
debugConsole.sourceForeground #eaf2f1
debugConsole.warningForeground #ff9b5e
debugConsoleInputIcon.foreground #e395dc
debugExceptionWidget.background #181818
debugExceptionWidget.border #181818
debugIcon.breakpointCurrentStackframeForeground #e395dc
debugIcon.breakpointDisabledForeground #b2b9bd
debugIcon.breakpointForeground #63b2e9
debugIcon.breakpointStackframeForeground #eaf2f1
debugIcon.breakpointUnverifiedForeground #ff9b5e
debugIcon.continueForeground #eaf2f1
debugIcon.disconnectForeground #eaf2f1
debugIcon.pauseForeground #eaf2f1
debugIcon.restartForeground #af9cff
debugIcon.startForeground #af9cff
debugIcon.stepBackForeground #eaf2f1
debugIcon.stepIntoForeground #eaf2f1
debugIcon.stepOutForeground #eaf2f1
debugIcon.stepOverForeground #eaf2f1
debugIcon.stopForeground #63b2e9
debugTokenExpression.boolean #ff9b5e
debugTokenExpression.error #63b2e9
debugTokenExpression.name #9cd1bb
debugTokenExpression.number #ffd76d
debugTokenExpression.string #e395dc
debugTokenExpression.value #eaf2f1
debugToolBar.background #181818
debugView.exceptionLabelBackground #63b2e9
debugView.exceptionLabelForeground #181818
debugView.stateLabelBackground #af9cff
debugView.stateLabelForeground #181818
debugView.valueChangedHighlight #e395dc
descriptionForeground #888d94
diffEditor.diagonalFill #181818
diffEditor.insertedLineBackground #af9cff19
diffEditor.insertedTextBackground #af9cff19
diffEditor.removedLineBackground #63b2e919
diffEditor.removedTextBackground #63b2e919
diffEditorGutter.insertedLineBackground #af9cff19
diffEditorGutter.removedLineBackground #63b2e919
diffEditorOverview.insertedForeground #af9cffa5
diffEditorOverview.removedForeground #63b2e9a5
dropdown.background #181818
dropdown.border #181818
dropdown.foreground #888d94
dropdown.listBackground #181818
editor.background #181818
editor.findMatchBackground #eaf2f126
editor.findMatchBorder #e395dc
editor.findMatchHighlightBackground #eaf2f126
editor.findMatchHighlightBorder #00000000
editor.findRangeHighlightBackground #eaf2f10c
editor.findRangeHighlightBorder #00000000
editor.focusedStackFrameHighlightBackground #b2b9bd26
editor.foldBackground #eaf2f10c
editor.foreground #eaf2f1
editor.hoverHighlightBackground #eaf2f10c
editor.inactiveSelectionBackground #eaf2f10c
editor.inlineValuesBackground #535763
editor.inlineValuesForeground #b2b9bd
editor.lineHighlightBackground #eaf2f10c
editor.lineHighlightBorder #00000000
editor.linkedEditingBackground #181818
editor.rangeHighlightBackground #181818
editor.rangeHighlightBorder #181818
editor.selectionBackground #b2b9bd26
editor.selectionHighlightBackground #eaf2f126
editor.selectionHighlightBorder #00000000
editor.stackFrameHighlightBackground #b2b9bd26
editor.wordHighlightBackground #eaf2f126
editor.wordHighlightBorder #00000000
editor.wordHighlightStrongBackground #eaf2f126
editor.wordHighlightStrongBorder #00000000
editorBracketHighlight.foreground1 #63b2e9
editorBracketHighlight.foreground2 #ff9b5e
editorBracketHighlight.foreground3 #e395dc
editorBracketHighlight.foreground4 #af9cff
editorBracketHighlight.foreground5 #9cd1bb
editorBracketHighlight.foreground6 #ffd76d
editorBracketMatch.background #181818
editorBracketMatch.border #696d77
editorCodeLens.foreground #696d77
editorCursor.background #181818
editorCursor.foreground #eaf2f1
editorError.background #00000000
editorError.border #00000000
editorError.foreground #63b2e9
editorGroup.border #181818
editorGroup.dropBackground #181818bf
editorGroup.emptyBackground #161821
editorGroup.focusedEmptyBorder #181818
editorGroupHeader.noTabsBackground #181818
editorGroupHeader.tabsBackground #181818
editorGroupHeader.tabsBorder #181818
editorGutter.addedBackground #af9cff
editorGutter.background #181818
editorGutter.deletedBackground #63b2e9
editorGutter.foldingControlForeground #b2b9bd
editorGutter.modifiedBackground #ff9b5e
editorHint.border #181818
editorHint.foreground #ffd76d
editorHoverWidget.background #181818
editorHoverWidget.border #181818
editorIndentGuide.background #181818
editorInfo.background #00000000
editorInfo.border #181818
editorInfo.foreground #9cd1bb
editorLightBulb.foreground #e395dc
editorLightBulbAutoFix.foreground #af9cff
editorLineNumber.activeForeground #b2b9bd
editorLineNumber.foreground #535763
editorLink.activeForeground #9cd1bb
editorMarkerNavigation.background #181818
editorMarkerNavigationError.background #63b2e9
editorMarkerNavigationInfo.background #9cd1bb
editorMarkerNavigationWarning.background #ff9b5e
editorOverviewRuler.addedForeground #af9cff
editorOverviewRuler.border #181818
editorOverviewRuler.currentContentForeground #181818
editorOverviewRuler.deletedForeground #63b2e9
editorOverviewRuler.errorForeground #63b2e9
editorOverviewRuler.findMatchForeground #eaf2f126
editorOverviewRuler.incomingContentForeground #181818
editorOverviewRuler.infoForeground #9cd1bb
editorOverviewRuler.modifiedForeground #ff9b5e
editorOverviewRuler.rangeHighlightForeground #eaf2f126
editorOverviewRuler.selectionHighlightForeground #eaf2f126
editorOverviewRuler.warningForeground #ff9b5e
editorOverviewRuler.wordHighlightForeground #eaf2f126
editorOverviewRuler.wordHighlightStrongForeground #eaf2f126
editorPane.background #181818
editorRuler.foreground #535763
editorSuggestWidget.background #181818
editorSuggestWidget.border #181818
editorSuggestWidget.foreground #b2b9bd
editorSuggestWidget.highlightForeground #eaf2f1
editorSuggestWidget.selectedBackground #696d77
editorUnnecessaryCode.opacity #000000a5
editorWarning.background #00000000
editorWarning.border #00000000
editorWarning.foreground #ff9b5e
editorWhitespace.foreground #535763
editorWidget.background #181818
editorWidget.border #181818
errorForeground #63b2e9
extensionBadge.remoteForeground #af9cff
extensionButton.prominentBackground #181818
extensionButton.prominentForeground #eaf2f1
extensionButton.prominentHoverBackground #535763
extensionIcon.preReleaseForeground #ffd76d
extensionIcon.sponsorForeground #9cd1bb
extensionIcon.starForeground #e395dc
extensionIcon.verifiedForeground #af9cff
focusBorder #696d77
foreground #eaf2f1
gitDecoration.addedResourceForeground #af9cff
gitDecoration.conflictingResourceForeground #ff9b5e
gitDecoration.deletedResourceForeground #63b2e9
gitDecoration.ignoredResourceForeground #535763
gitDecoration.modifiedResourceForeground #e395dc
gitDecoration.stageDeletedResourceForeground #63b2e9
gitDecoration.stageModifiedResourceForeground #e395dc
gitDecoration.untrackedResourceForeground #b2b9bd
icon.foreground #888d94
input.background #181818
input.border #181818
input.foreground #eaf2f1
input.placeholderForeground #696d77
inputOption.activeBackground #535763
inputOption.activeBorder #535763
inputOption.activeForeground #eaf2f1
inputOption.hoverBackground #535763
inputValidation.errorBackground #181818
inputValidation.errorBorder #63b2e9
inputValidation.errorForeground #63b2e9
inputValidation.infoBackground #181818
inputValidation.infoBorder #9cd1bb
inputValidation.infoForeground #9cd1bb
inputValidation.warningBackground #181818
inputValidation.warningBorder #ff9b5e
inputValidation.warningForeground #ff9b5e
keybindingLabel.background #535763
keybindingLabel.border #535763
keybindingLabel.bottomBorder #181818
keybindingLabel.foreground #b2b9bd
list.activeSelectionBackground #eaf2f10c
list.activeSelectionForeground #e395dc
list.dropBackground #181818bf
list.errorForeground #63b2e9
list.focusBackground #181818
list.focusForeground #eaf2f1
list.highlightForeground #eaf2f1
list.hoverBackground #eaf2f10c
list.hoverForeground #eaf2f1
list.inactiveFocusBackground #181818
list.inactiveSelectionBackground #b2b9bd0c
list.inactiveSelectionForeground #e395dc
list.invalidItemForeground #63b2e9
list.warningForeground #ff9b5e
listFilterWidget.background #181818
listFilterWidget.noMatchesOutline #63b2e9
listFilterWidget.outline #181818
menu.background #181818
menu.border #181818
menu.foreground #eaf2f1
menu.selectionForeground #e395dc
menu.separatorBackground #181818
menubar.selectionForeground #eaf2f1
merge.border #181818
merge.commonContentBackground #eaf2f119
merge.commonHeaderBackground #eaf2f126
merge.currentContentBackground #63b2e919
merge.currentHeaderBackground #63b2e926
merge.incomingContentBackground #af9cff19
merge.incomingHeaderBackground #af9cff26
mergeEditor.change.background #eaf2f119
mergeEditor.change.word.background #eaf2f119
mergeEditor.conflict.handled.minimapOverViewRuler #af9cff
mergeEditor.conflict.handledFocused.border #af9cff
mergeEditor.conflict.handledUnfocused.border #af9cff
mergeEditor.conflict.unhandled.minimapOverViewRuler #63b2e9
mergeEditor.conflict.unhandledFocused.border #63b2e9
mergeEditor.conflict.unhandledUnfocused.border #63b2e9
minimap.errorHighlight #63b2e9a5
minimap.findMatchHighlight #888d94a5
minimap.selectionHighlight #b2b9bd26
minimap.selectionOccurrenceHighlight #696d77a5
minimap.warningHighlight #ff9b5ea5
minimapGutter.addedBackground #af9cff
minimapGutter.deletedBackground #63b2e9
minimapGutter.modifiedBackground #e395dc
notebook.cellBorderColor #181818
notebook.cellEditorBackground #1818187f
notebook.cellInsertionIndicator #eaf2f1
notebook.cellStatusBarItemHoverBackground #696d77
notebook.cellToolbarSeparator #181818
notebook.editorBackground #181818
notebook.focusedEditorBorder #696d77
notebookStatusErrorIcon.foreground #63b2e9
notebookStatusRunningIcon.foreground #eaf2f1
notebookStatusSuccessIcon.foreground #af9cff
notificationCenter.border #181818
notificationCenterHeader.background #181818
notificationCenterHeader.foreground #888d94
notificationLink.foreground #e395dc
notifications.background #181818
notifications.border #181818
notifications.foreground #b2b9bd
notificationsErrorIcon.foreground #63b2e9
notificationsInfoIcon.foreground #9cd1bb
notificationsWarningIcon.foreground #ff9b5e
notificationToast.border #181818
panel.background #181818
panel.border #181818
panelTitle.activeBorder #e395dc
panelTitle.activeForeground #e395dc
panelTitle.inactiveForeground #888d94
peekView.border #181818
peekViewEditor.background #181818
peekViewEditor.matchHighlightBackground #535763
peekViewEditorGutter.background #181818
peekViewResult.background #181818
peekViewResult.fileForeground #888d94
peekViewResult.lineForeground #888d94
peekViewResult.matchHighlightBackground #535763
peekViewResult.selectionBackground #181818
peekViewResult.selectionForeground #eaf2f1
peekViewTitle.background #181818
peekViewTitleDescription.foreground #888d94
peekViewTitleLabel.foreground #eaf2f1
pickerGroup.border #181818
pickerGroup.foreground #535763
ports.iconRunningProcessForeground #af9cff
problemsErrorIcon.foreground #63b2e9
problemsInfoIcon.foreground #9cd1bb
problemsWarningIcon.foreground #ff9b5e
progressBar.background #181818
sash.hoverBorder #696d77
scrollbar.shadow #181818
scrollbarSlider.activeBackground #696d77
scrollbarSlider.background #b2b9bd26
scrollbarSlider.hoverBackground #eaf2f126
selection.background #b2b9bd26
settings.checkboxBackground #181818
settings.checkboxBorder #181818
settings.checkboxForeground #eaf2f1
settings.dropdownBackground #181818
settings.dropdownBorder #181818
settings.dropdownForeground #eaf2f1
settings.dropdownListBorder #888d94
settings.headerForeground #e395dc
settings.modifiedItemIndicator #e395dc
settings.numberInputBackground #181818
settings.numberInputBorder #181818
settings.numberInputForeground #eaf2f1
settings.rowHoverBackground #696d770c
settings.textInputBackground #181818
settings.textInputBorder #181818
settings.textInputForeground #eaf2f1
sideBar.background #181818
sideBar.border #161821
sideBar.dropBackground #181818
sideBar.foreground #888d94
sideBarSectionHeader.background #181818
sideBarSectionHeader.foreground #696d77
sideBarTitle.foreground #535763
statusBar.background #181818
statusBar.border #161821
statusBar.debuggingBackground #696d77
statusBar.debuggingBorder #181818
statusBar.debuggingForeground #eaf2f1
statusBar.focusBorder #181818
statusBar.foreground #696d77
statusBar.noFolderBackground #181818
statusBar.noFolderBorder #161821
statusBar.noFolderForeground #696d77
statusBarItem.activeBackground #181818
statusBarItem.errorBackground #181818
statusBarItem.errorForeground #63b2e9
statusBarItem.focusBorder #696d77
statusBarItem.hoverBackground #eaf2f10c
statusBarItem.prominentBackground #181818
statusBarItem.prominentHoverBackground #181818
statusBarItem.remoteBackground #181818
statusBarItem.remoteForeground #af9cff
statusBarItem.warningBackground #181818
statusBarItem.warningForeground #ff9b5e
symbolIcon.arrayForeground #63b2e9
symbolIcon.booleanForeground #63b2e9
symbolIcon.classForeground #9cd1bb
symbolIcon.colorForeground #ffd76d
symbolIcon.constantForeground #ffd76d
symbolIcon.constructorForeground #af9cff
symbolIcon.enumeratorForeground #ff9b5e
symbolIcon.enumeratorMemberForeground #ff9b5e
symbolIcon.eventForeground #ff9b5e
symbolIcon.fieldForeground #ff9b5e
symbolIcon.fileForeground #b2b9bd
symbolIcon.folderForeground #b2b9bd
symbolIcon.functionForeground #af9cff
symbolIcon.interfaceForeground #9cd1bb
symbolIcon.keyForeground #ff9b5e
symbolIcon.keywordForeground #63b2e9
symbolIcon.methodForeground #af9cff
symbolIcon.moduleForeground #9cd1bb
symbolIcon.namespaceForeground #9cd1bb
symbolIcon.nullForeground #ffd76d
symbolIcon.numberForeground #ffd76d
symbolIcon.objectForeground #9cd1bb
symbolIcon.operatorForeground #63b2e9
symbolIcon.packageForeground #ffd76d
symbolIcon.propertyForeground #ff9b5e
symbolIcon.referenceForeground #ffd76d
symbolIcon.snippetForeground #af9cff
symbolIcon.stringForeground #e395dc
symbolIcon.structForeground #63b2e9
symbolIcon.textForeground #e395dc
symbolIcon.typeParameterForeground #ff9b5e
symbolIcon.unitForeground #ffd76d
symbolIcon.variableForeground #9cd1bb
tab.activeBackground #181818
tab.activeBorder #e395dc
tab.activeForeground #e395dc
tab.activeModifiedBorder #535763
tab.border #181818
tab.hoverBackground #181818
tab.hoverBorder #535763
tab.hoverForeground #eaf2f1
tab.inactiveBackground #181818
tab.inactiveForeground #888d94
tab.inactiveModifiedBorder #535763
tab.lastPinnedBorder #535763
tab.unfocusedActiveBorder #888d94
tab.unfocusedActiveForeground #b2b9bd
tab.unfocusedActiveModifiedBorder #181818
tab.unfocusedHoverBackground #181818
tab.unfocusedHoverBorder #181818
tab.unfocusedHoverForeground #b2b9bd
tab.unfocusedInactiveForeground #888d94
tab.unfocusedInactiveModifiedBorder #181818
terminal.ansiBlack #181818
terminal.ansiBlue #ff9b5e
terminal.ansiBrightBlack #696d77
terminal.ansiBrightBlue #ff9b5e
terminal.ansiBrightCyan #9cd1bb
terminal.ansiBrightGreen #af9cff
terminal.ansiBrightMagenta #ffd76d
terminal.ansiBrightRed #63b2e9
terminal.ansiBrightWhite #eaf2f1
terminal.ansiBrightYellow #e395dc
terminal.ansiCyan #9cd1bb
terminal.ansiGreen #af9cff
terminal.ansiMagenta #ffd76d
terminal.ansiRed #63b2e9
terminal.ansiWhite #eaf2f1
terminal.ansiYellow #e395dc
terminal.background #181818
terminal.foreground #eaf2f1
terminal.selectionBackground #eaf2f126
terminalCommandDecoration.defaultBackground #eaf2f1
terminalCommandDecoration.errorBackground #63b2e9
terminalCommandDecoration.successBackground #af9cff
terminalCursor.background #00000000
terminalCursor.foreground #eaf2f1
testing.iconErrored #63b2e9
testing.iconFailed #63b2e9
testing.iconPassed #af9cff
testing.iconQueued #eaf2f1
testing.iconSkipped #ff9b5e
testing.iconUnset #888d94
testing.message.error.decorationForeground #63b2e9
testing.message.error.lineBackground #63b2e919
testing.message.info.decorationForeground #eaf2f1
testing.message.info.lineBackground #eaf2f119
testing.runAction #e395dc
textBlockQuote.background #181818
textBlockQuote.border #181818
textCodeBlock.background #181818
textLink.activeForeground #eaf2f1
textLink.foreground #e395dc
textPreformat.foreground #eaf2f1
textSeparator.foreground #696d77
titleBar.activeBackground #181818
titleBar.activeForeground #888d94
titleBar.border #161821
titleBar.inactiveBackground #181818
titleBar.inactiveForeground #535763
walkThrough.embeddedEditorBackground #181818
welcomePage.progress.background #696d77
welcomePage.progress.foreground #888d94
welcomePage.tileBackground #181818
welcomePage.tileHoverBackground #535763
welcomePage.tileShadow #161821
widget.shadow #161821 comment.git-status.header.remote #63b2e9 —
comment.git-status.header.local #9cd1bb —
comment.other.git-status.head #eaf2f1 —
string.quoted.docstring, string.quoted.docstring punctuation.definition #696d77 —
constant.other.caps #ffd76d —
constant.other.placeholder.c #ff9b5e —
constant.other.property #ffd76d —
constant.other.citation.latex #ffd76d —
constant.other.color #ffd76d —
constant.other.character-class.escape #ffd76d —
constant.other.key #ffd76d —
constant.other.symbol #ff9b5e —
constant.other.elm #9cd1bb —
constant.language #ffd76d —
constant.character.escape #ffd76d —
constant.numeric.line-number.find-in-files #535763 —
constant.numeric.line-number.match.find-in-files #e395dc —
entity.name.section #e395dc —
entity.name.type.alias.ts #FF0000 —
entity.name.function, entity.name.function.templated, entity.name.function.member.static #af9cff —
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace #af9cff —
entity.name.label #ffd76d —
entity.name.function.preprocessor #9cd1bb —
entity.name.class #9cd1bb —
entity.name.constant #ffd76d —
entity.name.namespace #eaf2f1 —
entity.other.inherited-class #9cd1bb italic
entity.name.function #af9cff —
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component #63b2e9 —
entity.name.function.operator #63b2e9 —
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator #888d94 —
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value #9cd1bb —
entity.other.attribute-name #9cd1bb 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 #af9cff —
entity.other.attribute-name.id.css #ff9b5e —
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css #9cd1bb italic
entity.name.function, support.function #af9cff —
entity.other.git-status.hex #ffd76d —
entity.other.jinja2.delimiter #888d94 —
entity.name.operator.custom-literal #eaf2f1 —
entity.name.operator.custom-literal.string #e395dc —
entity.name.operator.custom-literal.number #ffd76d —
entity.name.type.rust #9cd1bb —
entity.name.lifetime.rust #63b2e9 —
invalid #63b2e9 italic underline
invalid.deprecated #ff9b5e italic underline
keyword.control.directive #63b2e9 —
keyword.operator, keyword.operator.member, keyword.operator.new #63b2e9 —
keyword.other.substitution #888d94 —
keyword.other.template.begin, keyword.other.template.end #63b2e9 —
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext #888d94 —
keyword.other.parenthesis.elm #888d94 —
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust #9cd1bb —
keyword.control.rust, keyword.operator.misc.rust #63b2e9 —
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby #63b2e9 —
markup.underline — underline
markup.underline.link #af9cff —
markup.inserted, markup.inserted punctuation.definition.inserted #af9cff —
markup.deleted, markup.deleted punctuation.definition.deleted #63b2e9 —
markup.changed, markup.changed punctuation.definition.changed #e395dc —
markup.ignored, markup.ignored punctuation.definition.ignored #888d94 —
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 #888d94 —
meta.function-call.generic.python, support.function.builtin.python #af9cff —
meta.function-call.python meta.function-call.arguments.python #eaf2f1 —
meta.instance.constructor #af9cff —
meta.attribute-with-value.class string, meta.attribute.class.html string #af9cff —
meta.attribute-with-value.id string, meta.attribute.id.html string #ff9b5e —
source.json meta.mapping.key string #eaf2f1 —
meta.object.member #eaf2f1 —
meta.property-list.css variable.other #ff9b5e —
entity.name.constant.preprocessor, meta.preprocessor #ffd76d —
meta.diff.git-diff.header #e395dc —
meta.type_params.rust #eaf2f1 —
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 #b2b9bd —
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 #888d94 —
punctuation.definition.group #eaf2f1 —
punctuation.definition.comment #696d77 —
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css #b2b9bd —
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin #ff9b5e —
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 #63b2e9 —
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown — —
source.scss, source.sass #888d94 —
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 #ff9b5e italic
source.git-show.commit.sha #ffd76d —
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 #888d94 —
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha #ffd76d —
source.git-show meta.diff.range.unified #ff9b5e —
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file #888d94 —
storage.type #9cd1bb italic
storage.type.extends #63b2e9
storage.type.function.arrow #fff
storage.modifier, storage.type.modifier #63b2e9 italic
storage.class.restructuredtext.ref #ffd76d —
storage.modifier.visibility.rust, storage.modifier.lifetime.rust #63b2e9 —
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 #9cd1bb —
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 #63b2e9 —
string.unquoted.label #eaf2f1 —
string source punctuation.section.embedded, string punctuation.definition.string source #888d94 —
string.other.link.title, string.other.link.description #63b2e9 —
string.other.link.description.title #9cd1bb —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #63b2e9 —
string.other.ref, string.other.restructuredtext.ref #af9cff —
string.other.git-status.help.key #b2b9bd —
string.other.git-status.remote #63b2e9 —
support.constant.handlebars #888d94 —
support.type.vendor-prefix.css #b2b9bd —
support.function.delimiter.elm #888d94 —
support.type, entity.name.type.object.console #9cd1bb italic
support.type.property-name #eaf2f1
support.constant.core.rust #ffd76d —
text.find-in-files #eaf2f1 —
variable, variable.other #eaf2f1 —
variable.parameter, parameters variable.function #ff9b5e italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python #b2b9bd italic
variable.language.arguments #ffd76d —
variable.other.class #9cd1bb —
variable.other.constant #ffd76d —
variable.other.readwrite #eaf2f1 —
variable.other.member #eaf2f1 —
variable.other.enummember #ffd76d —
variable.other.property, variable.other.property.static, variable.other.event #eaf2f1 —
variable.function #af9cff —
variable.other.substitution #ff9b5e —
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby #ffd76d —
source.jinja2 variable.other.jinja2.block #af9cff —
source.jinja2 variable.other.jinja2 #ff9b5e —
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 } ! ` ;
}
Interstellar Theme | Coding Theme