Skip to main content
Home Theme VS Code Zenith Theme A refined dark theme with cohesive colors and complete UI coverage.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
actionBar.toggledBackground #61abda80 activityBar.activeBorder #00000000 activityBar.background #242a2e activityBar.border #101214 activityBar.foreground #b4bbc2e0 activityBar.inactiveForeground #5f6c75 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle #b4bbc2 — meta.embedded, source.groovy.embedded #b4bbc2 comment, punctuation.definition.comment #637079 italic meta.tag.sgml.doctype, meta.diff.header, meta.preprocessor, entity.name.function.preprocessor #637079 — keyword, storage, variable.language, keyword.operator.new, keyword.operator.expression, support.other, punctuation.definition.keyword
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Zenith Theme | Coding Theme
activityBarBadge.background
#61abda
activityBarBadge.foreground #161a1d
activityBarTop.activeBorder #61abda
activityBarTop.foreground #b4bbc2e0
activityBarTop.inactiveForeground #5f6c75
activityErrorBadge.background #de6e7c
activityErrorBadge.foreground #161a1d
activityWarningBadge.background #d68c67
activityWarningBadge.foreground #161a1d
badge.background #61abda
badge.foreground #161a1d
breadcrumb.activeSelectionForeground #b4bbc2
breadcrumb.focusForeground #b4bbc2
breadcrumb.foreground #839099
button.background #61abda
button.border #00000000
button.foreground #161a1d
button.hoverBackground #6bb6e8
button.secondaryBackground #5c6870
button.secondaryForeground #e2e7ea
button.secondaryHoverBackground #5f6c75
chart.axis #839099
chart.guide #839099
chart.line #b4bbc2
charts.blue #61abda
charts.foreground #242a2e
charts.green #64b280
charts.lines #5f6c75
charts.orange #d68c67
charts.purple #cf86c1
charts.red #de6e7c
charts.yellow #d6b867
chat.avatarBackground #161a1d
chat.avatarForeground #b4bbc2
chat.editedFileForeground #d68c67
chat.requestBorder #383f43
chat.slashCommandForeground #61abda
checkbox.background #161a1d
checkbox.border #383f43
checkbox.foreground #b4bbc2
commandCenter.activeBackground #161a1dc0
commandCenter.activeBorder #00000000
commandCenter.background #161a1d
commandCenter.border #00000000
commandCenter.inactiveBorder #00000000
commandCenter.inactiveForeground #5f6c75
debugConsoleInputIcon.foreground #839099
debugExceptionWidget.background #242a2e
debugExceptionWidget.border #de6e7c
debugIcon.breakpointCurrentStackframeForeground #d68c67
debugIcon.breakpointDisabledForeground #839099
debugIcon.breakpointForeground #de6e7c
debugIcon.breakpointStackframeForeground #64b280
debugIcon.breakpointUnverifiedForeground #839099
debugIcon.continueForeground #61abda
debugIcon.disconnectForeground #de6e7c
debugIcon.pauseForeground #61abda
debugIcon.restartForeground #64b280
debugIcon.startForeground #64b280
debugIcon.stepBackForeground #61abda
debugIcon.stepIntoForeground #61abda
debugIcon.stepOutForeground #61abda
debugIcon.stepOverForeground #61abda
debugIcon.stopForeground #de6e7c
debugTokenExpression.boolean #d68c67
debugTokenExpression.error #de6e7c
debugTokenExpression.name #b4bbc2
debugTokenExpression.number #d68c67
debugTokenExpression.string #64b280
debugTokenExpression.type #65b8c1
debugTokenExpression.value #839099
debugToolBar.background #2f363b
debugView.exceptionLabelBackground #de6e7c20
debugView.exceptionLabelForeground #de6e7c
debugView.stateLabelBackground #383f43
debugView.stateLabelForeground #b4bbc2
debugView.valueChangedHighlight #61abda50
descriptionForeground #839099
diffEditor.border #101214
diffEditor.diagonalFill #242a2e
diffEditor.insertedLineBackground #64b28020
diffEditor.insertedTextBackground #64b28030
diffEditor.move.border #83909980
diffEditor.moveActive.border #d6b867
diffEditor.removedLineBackground #de6e7c20
diffEditor.removedTextBackground #de6e7c30
diffEditor.unchangedCodeBackground #00000000
diffEditor.unchangedRegionBackground #00000000
diffEditor.unchangedRegionForeground #839099
diffEditor.unchangedRegionShadow #00000000
disabledForeground #5f6c75
dropdown.background #161a1d
dropdown.border #383f43
dropdown.foreground #b4bbc2
dropdown.listBackground #242a2e
editor.background #161a1d
editor.compositionBorder #383f43
editor.findMatchBackground #64b28050
editor.findMatchHighlightBackground #64b28050
editor.findRangeHighlightBackground #63707930
editor.focusedStackFrameHighlightBackground #d6b86730
editor.foldBackground #00000000
editor.foldPlaceholderForeground #839099
editor.foreground #b4bbc2
editor.hoverHighlightBackground #63707930
editor.inactiveSelectionBackground #63707950
editor.inlineValuesBackground #d6b86720
editor.inlineValuesForeground #d6b867
editor.lineHighlightBackground #242a2e
editor.lineHighlightBorder #00000000
editor.linkedEditingBackground #63707950
editor.placeholder.foreground #637079
editor.rangeHighlightBackground #63707930
editor.selectionBackground #61abda50
editor.selectionHighlightBackground #63707950
editor.snippetFinalTabstopHighlightBackground #00000000
editor.snippetFinalTabstopHighlightBorder #61abda
editor.snippetTabstopHighlightBackground #00000000
editor.snippetTabstopHighlightBorder #61abda
editor.stackFrameHighlightBackground #d6b86730
editor.wordHighlightBackground #00000000
editor.wordHighlightStrongBackground #00000000
editorBracketHighlight.foreground1 #d6b867
editorBracketHighlight.foreground2 #cf86c1
editorBracketHighlight.foreground3 #61abda
editorBracketHighlight.unexpectedBracket.foreground #de6e7c
editorBracketMatch.background #242a2e
editorBracketMatch.border #83909980
editorCodeLens.foreground #637079
editorCommentsWidget.rangeActiveBackground #61abda30
editorCommentsWidget.rangeBackground #61abda30
editorCommentsWidget.resolvedBorder #83909980
editorCommentsWidget.unresolvedBorder #61abda
editorCursor.foreground #b4bbc2
editorError.foreground #de6e7c
editorGhostText.foreground #637079
editorGroup.border #101214
editorGroup.dropBackground #61abda20
editorGroupHeader.border #101214
editorGroupHeader.tabsBackground #242a2e
editorGroupHeader.tabsBorder #101214
editorGutter.addedBackground #64b28080
editorGutter.deletedBackground #de6e7cb0
editorGutter.modifiedBackground #61abda80
editorHint.foreground #b4bbc2
editorHoverWidget.background #2f363b
editorHoverWidget.border #383f43
editorIndentGuide.activeBackground1 #535d64
editorIndentGuide.background1 #38424880
editorInfo.foreground #61abda
editorInlayHint.foreground #839099
editorInlayHint.parameterForeground #839099
editorInlayHint.typeForeground #839099
editorLightBulb.foreground #d6b867
editorLightBulbAi.foreground #d6b867
editorLightBulbAutoFix.foreground #d6b867
editorLineNumber.activeForeground #b4bbc2
editorLineNumber.foreground #637079
editorLink.activeForeground #61abda
editorMarkerNavigation.background #161a1d
editorMarkerNavigationError.background #de6e7c
editorMarkerNavigationError.headerBackground #242a2e
editorMarkerNavigationInfo.background #61abda
editorMarkerNavigationInfo.headerBackground #242a2e
editorMarkerNavigationWarning.background #d68c67
editorMarkerNavigationWarning.headerBackground #242a2e
editorOverviewRuler.addedForeground #64b28080
editorOverviewRuler.border #00000000
editorOverviewRuler.bracketMatchForeground #63707980
editorOverviewRuler.commonContentForeground #63707980
editorOverviewRuler.currentContentForeground #65b8c180
editorOverviewRuler.deletedForeground #de6e7c80
editorOverviewRuler.errorForeground #de6e7c
editorOverviewRuler.findMatchForeground #64b28080
editorOverviewRuler.incomingContentForeground #61abda80
editorOverviewRuler.infoForeground #61abda
editorOverviewRuler.inlineChatInserted #64b28080
editorOverviewRuler.inlineChatRemoved #de6e7c80
editorOverviewRuler.modifiedForeground #61abda80
editorOverviewRuler.rangeHighlightForeground #63707980
editorOverviewRuler.selectionHighlightForeground #63707980
editorOverviewRuler.warningForeground #d68c67
editorOverviewRuler.wordHighlightForeground #63707980
editorOverviewRuler.wordHighlightStrongForeground #63707980
editorOverviewRuler.wordHighlightTextForeground #63707980
editorRuler.foreground #38424880
editorStickyScrollHover.background #242a2e
editorSuggestWidget.background #2f363b
editorSuggestWidget.border #383f43
editorSuggestWidget.foreground #b4bbc2
editorUnnecessaryCode.opacity #00000080
editorWarning.foreground #d68c67
editorWhitespace.foreground #839099
editorWidget.background #242a2e
editorWidget.border #383f43
editorWidget.resizeBorder #00000000
errorForeground #de6e7c
errorLens.errorBackground #00000000
errorLens.errorForeground #de6e7c
errorLens.errorMessageBackground #de6e7c20
errorLens.errorRangeBackground #de6e7c30
errorLens.hintBackground #00000000
errorLens.hintForeground #61abda
errorLens.hintMessageBackground #61abda20
errorLens.hintRangeBackground #61abda30
errorLens.infoBackground #00000000
errorLens.infoForeground #61abda
errorLens.infoMessageBackground #61abda20
errorLens.infoRangeBackground #61abda30
errorLens.statusBarErrorForeground #de6e7c
errorLens.statusBarHintForeground #61abda
errorLens.statusBarIconErrorForeground #de6e7c
errorLens.statusBarIconWarningForeground #d68c67
errorLens.statusBarInfoForeground #61abda
errorLens.statusBarWarningForeground #d68c67
errorLens.warningBackground #00000000
errorLens.warningForeground #d68c67
errorLens.warningMessageBackground #d68c6720
errorLens.warningRangeBackground #d68c6730
extensionIcon.preReleaseForeground #64b280
extensionIcon.sponsorForeground #cf86c1
extensionIcon.starForeground #d68c67
extensionIcon.verifiedForeground #61abda
focusBorder #61abda
foreground #b4bbc2
git.blame.editorDecorationForeground #637079
gitDecoration.addedResourceForeground #64b280
gitDecoration.conflictingResourceForeground #d68c67
gitDecoration.deletedResourceForeground #de6e7c
gitDecoration.ignoredResourceForeground #63707980
gitDecoration.modifiedResourceForeground #61abda
gitDecoration.renamedResourceForeground #64b280
gitDecoration.stageDeletedResourceForeground #de6e7c
gitDecoration.stageModifiedResourceForeground #61abda
gitDecoration.submoduleResourceForeground #839099
gitDecoration.untrackedResourceForeground #64b280
gitlens.trailingLineForegroundColor #637079
icon.foreground #839099
inlineChat.background #242a2e
inlineChat.border #383f43
inlineChatDiff.inserted #64b28020
inlineChatDiff.removed #de6e7c20
inlineChatInput.border #383f43
input.background #161a1d
input.border #383f43
input.foreground #b4bbc2
input.placeholderForeground #5c6870
inputOption.activeBackground #61abda30
inputOption.activeBorder #61abda
inputOption.activeForeground #b4bbc2
inputOption.hoverBackground #ccebff24
inputValidation.errorBackground #464041
inputValidation.errorBorder #de6e7c
inputValidation.infoBackground #35454f
inputValidation.infoBorder #61abda
inputValidation.warningBackground #444141
inputValidation.warningBorder #d68c67
keybindingLabel.background #34393c
keybindingLabel.border #161a1d
keybindingLabel.bottomBorder #161a1d
keybindingLabel.foreground #b4bbc2
keybindingTable.headerBackground #ccebff14
keybindingTable.rowsBackground #ccebff08
list.activeSelectionBackground #395263
list.activeSelectionForeground #b4bbc2
list.activeSelectionIconForeground #b4bbc2
list.deemphasizedForeground #637079
list.dropBackground #61abda20
list.errorForeground #de6e7c
list.filterMatchBackground #00000000
list.focusAndSelectionOutline #61abda
list.focusBackground #ccebff28
list.focusForeground #b4bbc2
list.focusHighlightForeground #61abda
list.focusOutline #61abda
list.highlightForeground #61abda
list.hoverBackground #ccebff28
list.inactiveSelectionBackground #395263
list.inactiveSelectionForeground #b4bbc2
list.invalidItemForeground #d68c67
list.warningForeground #d68c67
listFilterWidget.background #2f363b
listFilterWidget.noMatchesOutline #383f43
listFilterWidget.outline #383f43
menu.background #2a2f32
menu.border #383f43
menu.foreground #b4bbc2
menu.selectionBackground #61abda20
menu.separatorBackground #383f43
merge.commonContentBackground #63707930
merge.commonHeaderBackground #63707930
merge.currentContentBackground #65b8c150
merge.currentHeaderBackground #65b8c150
merge.incomingContentBackground #61abda50
merge.incomingHeaderBackground #61abda50
mergeEditor.change.background #d68c6750
mergeEditor.change.word.background #d68c6750
mergeEditor.changeBase.background #83909950
mergeEditor.changeBase.word.background #83909950
mergeEditor.conflict.handled.minimapOverViewRuler #637079
mergeEditor.conflict.handledFocused.border #83909980
mergeEditor.conflict.handledUnfocused.border #83909980
mergeEditor.conflict.unhandled.minimapOverViewRuler #d68c67
mergeEditor.conflict.unhandledFocused.border #d68c67
mergeEditor.conflict.unhandledUnfocused.border #d68c67
mergeEditor.conflictingLines.background #d68c6700
minimap.errorHighlight #de6e7c80
minimap.findMatchHighlight #64b28080
minimap.foregroundOpacity #000000a0
minimap.infoHighlight #61abda80
minimap.selectionHighlight #61abda50
minimap.selectionOccurrenceHighlight #63707950
minimap.warningHighlight #d68c6780
minimapGutter.addedBackground #64b28080
minimapGutter.deletedBackground #de6e7c80
minimapGutter.modifiedBackground #61abda80
minimapSlider.activeBackground #83909950
minimapSlider.background #83909930
minimapSlider.hoverBackground #83909940
multiDiffEditor.border #101214
multiDiffEditor.headerBackground #101214
notebook.cellBorderColor #395263
notebook.cellEditorBackground #242a2e
notebook.cellInsertionIndicator #61abda
notebook.cellStatusBarItemHoverBackground #ccebff28
notebook.cellToolbarSeparator #383f43
notebook.focusedCellBorder #61abda
notebook.focusedEditorBorder #61abda
notebook.inactiveFocusedCellBorder #395263
notebook.selectedCellBackground #395263
notebook.selectedCellBorder #395263
notebook.symbolHighlightBackground #5f6c7530
notebookEditorOverviewRuler.runningCellForeground #64b280
notificationCenter.border #383f43
notificationCenterHeader.background #242a2e
notificationCenterHeader.foreground #b4bbc2
notificationLink.foreground #61abda
notifications.background #2f363b
notifications.border #383f43
notifications.foreground #b4bbc2
outputViewStickyScroll.background #242a2e
panel.background #242a2e
panel.border #101214
panelInput.border #383f43
panelSection.border #00000000
panelSectionHeader.background #242a2e
panelSectionHeader.border #101214
panelSectionHeader.foreground #839099
panelTitle.activeBorder #61abda
panelTitle.activeForeground #b4bbc2
panelTitle.inactiveForeground #839099
peekView.border #383f43
peekViewEditor.background #161a1d
peekViewEditor.matchHighlightBackground #64b28050
peekViewResult.background #242a2e
peekViewResult.fileForeground #b4bbc2
peekViewResult.lineForeground #b4bbc2
peekViewResult.matchHighlightBackground #00000000
peekViewResult.selectionBackground #395263
peekViewResult.selectionForeground #b4bbc2
peekViewTitle.background #242a2e
peekViewTitleDescription.foreground #839099
peekViewTitleLabel.foreground #b4bbc2
pickerGroup.border #383f43
pickerGroup.foreground #839099
ports.iconRunningProcessForeground #64b280
profileBadge.background #161a1d
profileBadge.foreground #b4bbc2
progressBar.background #61abda
quickInput.background #2f363b
quickInputList.focusForeground #b4bbc2
quickInputTitle.background #242a2e
radio.activeBackground #161a1d
radio.activeBorder #383f43
radio.activeForeground #b4bbc2
radio.inactiveBackground #161a1d
radio.inactiveBorder #383f43
radio.inactiveForeground #b4bbc2
radio.inactiveHoverBackground #161a1d
scmGraph.foreground1 #d6b867
scmGraph.foreground2 #9d86ce
scmGraph.foreground3 #d68c67
scmGraph.foreground4 #65b8c1
scmGraph.foreground5 #cf86c1
scmGraph.historyItemBaseRefColor #839099
scmGraph.historyItemHoverAdditionsForeground #64b280
scmGraph.historyItemHoverDefaultLabelBackground #61abda
scmGraph.historyItemHoverDefaultLabelForeground #161a1d
scmGraph.historyItemHoverDeletionsForeground #de6e7c
scmGraph.historyItemHoverLabelForeground #161a1d
scmGraph.historyItemRefColor #61abda
scmGraph.historyItemRemoteRefColor #cf86c1
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #83909980
scrollbarSlider.background #83909950
scrollbarSlider.hoverBackground #83909968
search.resultsInfoForeground #839099
searchEditor.findMatchBackground #64b28050
selection.background #61abda50
settings.checkboxBackground #242a2e
settings.checkboxBorder #383f43
settings.checkboxForeground #b4bbc2
settings.dropdownBackground #242a2e
settings.dropdownBorder #383f43
settings.dropdownForeground #b4bbc2
settings.dropdownListBorder #383f43
settings.focusedRowBackground #00000000
settings.focusedRowBorder #61abda
settings.headerBorder #00000000
settings.headerForeground #b4bbc2
settings.modifiedItemIndicator #d68c67
settings.numberInputBackground #242a2e
settings.numberInputBorder #383f43
settings.numberInputForeground #b4bbc2
settings.rowHoverBackground #00000000
settings.sashBorder #161a1d
settings.settingsHeaderHoverForeground #61abda
settings.textInputBackground #242a2e
settings.textInputBorder #383f43
settings.textInputForeground #b4bbc2
sideBar.background #242a2e
sideBar.border #101214
sideBar.foreground #b4bbc2
sideBarActivityBarTop.border #00000000
sideBarSectionHeader.background #242a2e
sideBarSectionHeader.border #101214
sideBarSectionHeader.foreground #839099
sideBarTitle.border #00000000
sideBarTitle.foreground #839099
simpleFindWidget.sashBorder #00000000
statusBar.background #242a2e
statusBar.border #101214
statusBar.debuggingBackground #242a2e
statusBar.debuggingForeground #839099
statusBar.focusBorder #61abda
statusBar.foreground #839099
statusBar.noFolderBackground #242a2e
statusBarItem.activeBackground #ccebff34
statusBarItem.compactHoverBackground #ccebff28
statusBarItem.errorBackground #00000000
statusBarItem.errorForeground #de6e7c
statusBarItem.errorHoverBackground #ccebff18
statusBarItem.errorHoverForeground #de6e7c
statusBarItem.focusBorder #61abda
statusBarItem.hoverBackground #ccebff18
statusBarItem.hoverForeground #b4bbc2
statusBarItem.offlineBackground #00000000
statusBarItem.offlineForeground #de6e7c
statusBarItem.offlineHoverForeground #de6e7c
statusBarItem.prominentBackground #ccebff18
statusBarItem.prominentForeground #b4bbc2
statusBarItem.prominentHoverBackground #ccebff28
statusBarItem.prominentHoverForeground #b4bbc2
statusBarItem.remoteBackground #00000000
statusBarItem.remoteForeground #839099
statusBarItem.warningBackground #00000000
statusBarItem.warningForeground #d68c67
statusBarItem.warningHoverBackground #ccebff18
statusBarItem.warningHoverForeground #d68c67
symbolIcon.arrayForeground #839099
symbolIcon.booleanForeground #d68c67
symbolIcon.classForeground #65b8c1
symbolIcon.colorForeground #839099
symbolIcon.constantForeground #d68c67
symbolIcon.constructorForeground #61abda
symbolIcon.enumeratorForeground #65b8c1
symbolIcon.enumeratorMemberForeground #d68c67
symbolIcon.eventForeground #61abda
symbolIcon.fieldForeground #839099
symbolIcon.fileForeground #839099
symbolIcon.folderForeground #839099
symbolIcon.functionForeground #61abda
symbolIcon.interfaceForeground #65b8c1
symbolIcon.keyForeground #839099
symbolIcon.keywordForeground #cf86c1
symbolIcon.methodForeground #61abda
symbolIcon.moduleForeground #839099
symbolIcon.namespaceForeground #65b8c1
symbolIcon.nullForeground #d68c67
symbolIcon.numberForeground #d68c67
symbolIcon.objectForeground #839099
symbolIcon.operatorForeground #839099
symbolIcon.packageForeground #839099
symbolIcon.propertyForeground #839099
symbolIcon.referenceForeground #839099
symbolIcon.snippetForeground #839099
symbolIcon.stringForeground #64b280
symbolIcon.structForeground #65b8c1
symbolIcon.textForeground #64b280
symbolIcon.typeParameterForeground #65b8c1
symbolIcon.unitForeground #d68c67
symbolIcon.variableForeground #839099
tab.activeBackground #161a1d
tab.activeBorder #161a1d
tab.activeBorderTop #00000000
tab.activeForeground #b4bbc2
tab.activeModifiedBorder #61abda
tab.border #101214
tab.hoverBackground #2f363b
tab.inactiveBackground #242a2e
tab.inactiveForeground #839099
tab.inactiveModifiedBorder #61abda80
tab.lastPinnedBorder #101214
tab.unfocusedActiveBorder #161a1d
tab.unfocusedActiveBorderTop #00000000
tab.unfocusedActiveForeground #839099
tab.unfocusedActiveModifiedBorder #61abda80
tab.unfocusedHoverBackground #2f363b
tab.unfocusedInactiveForeground #839099
tab.unfocusedInactiveModifiedBorder #61abda80
terminal.ansiBlack #161a1d
terminal.ansiBlue #61abda
terminal.ansiBrightBlack #637079
terminal.ansiBrightBlue #7fc9f8
terminal.ansiBrightCyan #83d6df
terminal.ansiBrightGreen #86cc92
terminal.ansiBrightMagenta #eca4df
terminal.ansiBrightRed #fc8c9a
terminal.ansiBrightWhite #839099
terminal.ansiBrightYellow #f4aa85
terminal.ansiCyan #65b8c1
terminal.ansiGreen #64b280
terminal.ansiMagenta #cf86c1
terminal.ansiRed #de6e7c
terminal.ansiWhite #b4bbc2
terminal.ansiYellow #d68c67
terminal.border #101214
terminal.findMatchBackground #46725Afe
terminal.findMatchHighlightBackground #64b28050
terminal.foreground #b4bbc2
terminal.hoverHighlightBackground #ccebff28
terminal.inactiveSelectionBackground #83909930
terminal.initialHintForeground #637079
terminal.selectionBackground #61abda50
terminal.tab.activeBorder #00000000
terminalCommandDecoration.defaultBackground #839099
terminalCommandDecoration.errorBackground #de6e7c
terminalCommandDecoration.successBackground #64b280
terminalCommandGuide.foreground #ccebff28
terminalCursor.foreground #b4bbc2
terminalOverviewRuler.cursorForeground #b4bbc280
testing.coverCountBadgeBackground #2f363b
testing.coverCountBadgeForeground #b4bbc2
testing.coveredBackground #64b28020
testing.coveredBorder #00000000
testing.coveredGutterBackground #64b28080
testing.iconErrored #de6e7c
testing.iconErrored.retired #de6e7cb0
testing.iconFailed #de6e7c
testing.iconFailed.retired #de6e7cb0
testing.iconPassed #64b280
testing.iconPassed.retired #64b280b0
testing.iconQueued #d68c67
testing.iconQueued.retired #d68c67b0
testing.iconSkipped #839099
testing.iconSkipped.retired #839099b0
testing.iconUnset #839099
testing.iconUnset.retired #839099b0
testing.message.error.badgeBackground #de6e7c
testing.message.error.badgeBorder #00000000
testing.message.error.badgeForeground #161a1d
testing.message.error.lineBackground #de6e7c20
testing.message.info.decorationForeground #637079
testing.message.info.lineBackground #61abda20
testing.messagePeekBorder #383f43
testing.messagePeekHeaderBackground #242a2e
testing.peekBorder #de6e7c
testing.peekHeaderBackground #242a2e
testing.runAction #64b280
testing.uncoveredBackground #de6e7c20
testing.uncoveredBorder #00000000
testing.uncoveredBranchBackground #2f363b
testing.uncoveredGutterBackground #de6e7c80
textBlockQuote.background #00000000
textBlockQuote.border #383f43
textCodeBlock.background #383f43
textLink.activeForeground #6bb6e8
textLink.foreground #61abda
textPreformat.background #383f43
textPreformat.foreground #b4bbc2
textSeparator.foreground #383f43
titleBar.activeBackground #2f363b
titleBar.activeForeground #b4bbc2
titleBar.border #101214
titleBar.inactiveBackground #2f363b
titleBar.inactiveForeground #5f6c75
toolbar.activeBackground #ccebff24
toolbar.hoverBackground #ccebff18
tree.inactiveIndentGuidesStroke #383f43
tree.indentGuidesStroke #383f43
tree.tableColumnsBorder #ccebff28
tree.tableOddRowsBackground #ccebff0a
walkThrough.embeddedEditorBackground #161a1d
walkthrough.stepTitle.foreground #b4bbc2
welcomePage.progress.background #161a1d
welcomePage.progress.foreground #61abda
welcomePage.tileBackground #242a2e
welcomePage.tileBorder #383f43
welcomePage.tileHoverBackground #ccebff28
widget.border #383f43
widget.shadow #161a1d80 entity.name.function, support.function, variable.function, keyword.other.special-method, storage.type.method #61abda —
entity.name.variable.property, meta.object-literal.key, meta.object.member, meta.property.object, support.type.property.name, support.variable.property, variable.object.property, variable.other.constant.property, variable.other.member, variable.other.object.property, variable.other.property #9d86ce —
entity.name.type, entity.other.inherited-class, support.class, support.type #65b8c1 —
variable, meta.import constant, support.variable #b4bbc2 —
constant, support.constant, meta.preprocessor.numeric, constant.other.color punctuation #d68c67 —
string, constant.character, markup.raw, markup.inline.raw, meta.preprocessor.string #64b280 —
string.unquoted.argument #b4bbc2 —
keyword.operator.type.annotation, meta.tag.attributes keyword.operator.assignment, keyword.operator.assignment.shell #839099 —
punctuation, meta.brace, constant.character.escape #839099 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, punctuation.definition.subshell, punctuation.definition.variable.shell #cf86c1 —
entity.name.type.module, support.type.property-name #b4bbc2 —
entity.name.tag, entity.name.nesting.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, punctuation.definition.tag, punctuation.definition.entity #cf86c1 —
meta.selector.pseudo-class, meta.selector.pseudo-element, meta.selector.pseudo-class punctuation.definition.entity, meta.selector.pseudo-element punctuation.definition.entity #839099 —
entity.other.keyframe-offset #839099 —
keyword.other.unit #d68c67 —
markup.heading, markup.bold, strong — bold
markup.italic, emphasis — italic
markup.heading markup.italic, markup.bold markup.italic, markup.italic markup.bold, strong emphasis, emphasis strong — italic bold
string.other.link, markup.link #61abda —
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 } ! ` ;
}