Skip to main content
Home Theme VS Code Zenith Theme A refined dark theme with cohesive colors and complete UI coverage.
Zenith Theme | 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.
actionBar.toggledBackground #61abda80 activityBar.activeBorder #00000000 activityBar.background #292929 activityBar.border #191919 activityBar.foreground #bbbbbbe0 activityBar.inactiveForeground #6a6a6a tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle #bbbbbb — meta.embedded, source.groovy.embedded #bbbbbb comment, punctuation.definition.comment #6e6e6e italic meta.tag.sgml.doctype, meta.diff.header, meta.preprocessor, entity.name.function.preprocessor #6e6e6e — 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 — Zenith Neutral
activityBarBadge.background
#61abda
activityBarBadge.foreground #191919
activityBarTop.activeBorder #61abda
activityBarTop.foreground #bbbbbbe0
activityBarTop.inactiveForeground #6a6a6a
activityErrorBadge.background #de6e7c
activityErrorBadge.foreground #191919
activityWarningBadge.background #d68c67
activityWarningBadge.foreground #191919
badge.background #61abda
badge.foreground #191919
breadcrumb.activeSelectionForeground #bbbbbb
breadcrumb.focusForeground #bbbbbb
breadcrumb.foreground #8e8e8e
button.background #61abda
button.border #00000000
button.foreground #161a1d
button.hoverBackground #6bb6e8
button.secondaryBackground #666666
button.secondaryForeground #e6e6e6
button.secondaryHoverBackground #6a6a6a
chart.axis #8e8e8e
chart.guide #8e8e8e
chart.line #bbbbbb
charts.blue #61abda
charts.foreground #292929
charts.green #64b280
charts.lines #6a6a6a
charts.orange #d68c67
charts.purple #cf86c1
charts.red #de6e7c
charts.yellow #d6b867
chat.avatarBackground #191919
chat.avatarForeground #bbbbbb
chat.editedFileForeground #d68c67
chat.requestBorder #3e3e3e
chat.slashCommandForeground #61abda
checkbox.background #191919
checkbox.border #3e3e3e
checkbox.foreground #bbbbbb
commandCenter.activeBackground #191919c0
commandCenter.activeBorder #00000000
commandCenter.background #191919
commandCenter.border #00000000
commandCenter.inactiveBorder #00000000
commandCenter.inactiveForeground #6a6a6a
debugConsoleInputIcon.foreground #8e8e8e
debugExceptionWidget.background #292929
debugExceptionWidget.border #de6e7c
debugIcon.breakpointCurrentStackframeForeground #d68c67
debugIcon.breakpointDisabledForeground #8e8e8e
debugIcon.breakpointForeground #de6e7c
debugIcon.breakpointStackframeForeground #64b280
debugIcon.breakpointUnverifiedForeground #8e8e8e
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 #bbbbbb
debugTokenExpression.number #d68c67
debugTokenExpression.string #64b280
debugTokenExpression.type #65b8c1
debugTokenExpression.value #8e8e8e
debugToolBar.background #353535
debugView.exceptionLabelBackground #de6e7c20
debugView.exceptionLabelForeground #de6e7c
debugView.stateLabelBackground #3e3e3e
debugView.stateLabelForeground #bbbbbb
debugView.valueChangedHighlight #61abda50
descriptionForeground #8e8e8e
diffEditor.border #191919
diffEditor.diagonalFill #292929
diffEditor.insertedLineBackground #64b28020
diffEditor.insertedTextBackground #64b28030
diffEditor.move.border #8e8e8e80
diffEditor.moveActive.border #d6b867
diffEditor.removedLineBackground #de6e7c20
diffEditor.removedTextBackground #de6e7c30
diffEditor.unchangedCodeBackground #00000000
diffEditor.unchangedRegionBackground #00000000
diffEditor.unchangedRegionForeground #8e8e8e
diffEditor.unchangedRegionShadow #00000000
disabledForeground #6a6a6a
dropdown.background #191919
dropdown.border #3e3e3e
dropdown.foreground #bbbbbb
dropdown.listBackground #292929
editor.background #191919
editor.compositionBorder #3e3e3e
editor.findMatchBackground #64b28050
editor.findMatchHighlightBackground #64b28050
editor.findRangeHighlightBackground #6e6e6e30
editor.focusedStackFrameHighlightBackground #d6b86730
editor.foldBackground #00000000
editor.foldPlaceholderForeground #8e8e8e
editor.foreground #bbbbbb
editor.hoverHighlightBackground #6e6e6e30
editor.inactiveSelectionBackground #6e6e6e50
editor.inlineValuesBackground #d6b86720
editor.inlineValuesForeground #d6b867
editor.lineHighlightBackground #292929
editor.lineHighlightBorder #00000000
editor.linkedEditingBackground #6e6e6e50
editor.placeholder.foreground #6e6e6e
editor.rangeHighlightBackground #6e6e6e30
editor.selectionBackground #61abda50
editor.selectionHighlightBackground #6e6e6e50
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 #292929
editorBracketMatch.border #8e8e8e80
editorCodeLens.foreground #6e6e6e
editorCommentsWidget.rangeActiveBackground #61abda30
editorCommentsWidget.rangeBackground #61abda30
editorCommentsWidget.resolvedBorder #8e8e8e80
editorCommentsWidget.unresolvedBorder #61abda
editorCursor.foreground #bbbbbb
editorError.foreground #de6e7c
editorGhostText.foreground #6e6e6e
editorGroup.border #090909
editorGroup.dropBackground #61abda20
editorGroupHeader.border #191919
editorGroupHeader.tabsBackground #292929
editorGroupHeader.tabsBorder #191919
editorGutter.addedBackground #64b28080
editorGutter.deletedBackground #de6e7cb0
editorGutter.modifiedBackground #61abda80
editorHint.foreground #bbbbbb
editorHoverWidget.background #353535
editorHoverWidget.border #3e3e3e
editorIndentGuide.activeBackground1 #5b5b5b
editorIndentGuide.background1 #40404080
editorInfo.foreground #61abda
editorInlayHint.foreground #8e8e8e
editorInlayHint.parameterForeground #8e8e8e
editorInlayHint.typeForeground #8e8e8e
editorLightBulb.foreground #d6b867
editorLightBulbAi.foreground #d6b867
editorLightBulbAutoFix.foreground #d6b867
editorLineNumber.activeForeground #bbbbbb
editorLineNumber.foreground #6e6e6e
editorLink.activeForeground #61abda
editorMarkerNavigation.background #191919
editorMarkerNavigationError.background #de6e7c
editorMarkerNavigationError.headerBackground #292929
editorMarkerNavigationInfo.background #61abda
editorMarkerNavigationInfo.headerBackground #292929
editorMarkerNavigationWarning.background #d68c67
editorMarkerNavigationWarning.headerBackground #292929
editorOverviewRuler.addedForeground #64b28080
editorOverviewRuler.border #00000000
editorOverviewRuler.bracketMatchForeground #6e6e6e80
editorOverviewRuler.commonContentForeground #6e6e6e80
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 #6e6e6e80
editorOverviewRuler.selectionHighlightForeground #6e6e6e80
editorOverviewRuler.warningForeground #d68c67
editorOverviewRuler.wordHighlightForeground #6e6e6e80
editorOverviewRuler.wordHighlightStrongForeground #6e6e6e80
editorOverviewRuler.wordHighlightTextForeground #6e6e6e80
editorRuler.foreground #40404080
editorStickyScrollHover.background #292929
editorSuggestWidget.background #353535
editorSuggestWidget.border #3e3e3e
editorSuggestWidget.foreground #bbbbbb
editorUnnecessaryCode.opacity #00000080
editorWarning.foreground #d68c67
editorWhitespace.foreground #8e8e8e
editorWidget.background #292929
editorWidget.border #3e3e3e
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 #bbbbbb
git.blame.editorDecorationForeground #6e6e6e
gitDecoration.addedResourceForeground #64b280
gitDecoration.conflictingResourceForeground #d68c67
gitDecoration.deletedResourceForeground #de6e7c
gitDecoration.ignoredResourceForeground #6e6e6e80
gitDecoration.modifiedResourceForeground #61abda
gitDecoration.renamedResourceForeground #64b280
gitDecoration.stageDeletedResourceForeground #de6e7c
gitDecoration.stageModifiedResourceForeground #61abda
gitDecoration.submoduleResourceForeground #8e8e8e
gitDecoration.untrackedResourceForeground #64b280
gitlens.trailingLineForegroundColor #6e6e6e
icon.foreground #8e8e8e
inlineChat.background #292929
inlineChat.border #3e3e3e
inlineChatDiff.inserted #64b28020
inlineChatDiff.removed #de6e7c20
inlineChatInput.border #3e3e3e
input.background #191919
input.border #3e3e3e
input.foreground #bbbbbb
input.placeholderForeground #666666
inputOption.activeBackground #61abda30
inputOption.activeBorder #61abda
inputOption.activeForeground #bbbbbb
inputOption.hoverBackground #e7e7e724
inputValidation.errorBackground #464041
inputValidation.errorBorder #de6e7c
inputValidation.infoBackground #35454f
inputValidation.infoBorder #61abda
inputValidation.warningBackground #444141
inputValidation.warningBorder #d68c67
keybindingLabel.background #383838
keybindingLabel.border #191919
keybindingLabel.bottomBorder #191919
keybindingLabel.foreground #bbbbbb
keybindingTable.headerBackground #e7e7e714
keybindingTable.rowsBackground #e7e7e708
list.activeSelectionBackground #395263
list.activeSelectionForeground #bbbbbb
list.activeSelectionIconForeground #bbbbbb
list.deemphasizedForeground #6e6e6e
list.dropBackground #61abda20
list.errorForeground #de6e7c
list.filterMatchBackground #00000000
list.focusAndSelectionOutline #61abda
list.focusBackground #e7e7e728
list.focusForeground #bbbbbb
list.focusHighlightForeground #61abda
list.focusOutline #61abda
list.highlightForeground #61abda
list.hoverBackground #e7e7e728
list.inactiveSelectionBackground #395263
list.inactiveSelectionForeground #bbbbbb
list.invalidItemForeground #d68c67
list.warningForeground #d68c67
listFilterWidget.background #353535
listFilterWidget.noMatchesOutline #3e3e3e
listFilterWidget.outline #3e3e3e
menu.background #2e2e2e
menu.border #3e3e3e
menu.foreground #bbbbbb
menu.selectionBackground #61abda20
menu.separatorBackground #3e3e3e
merge.commonContentBackground #6e6e6e30
merge.commonHeaderBackground #6e6e6e30
merge.currentContentBackground #65b8c150
merge.currentHeaderBackground #65b8c150
merge.incomingContentBackground #61abda50
merge.incomingHeaderBackground #61abda50
mergeEditor.change.background #d68c6750
mergeEditor.change.word.background #d68c6750
mergeEditor.changeBase.background #8e8e8e50
mergeEditor.changeBase.word.background #8e8e8e50
mergeEditor.conflict.handled.minimapOverViewRuler #6e6e6e
mergeEditor.conflict.handledFocused.border #8e8e8e80
mergeEditor.conflict.handledUnfocused.border #8e8e8e80
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 #6e6e6e50
minimap.warningHighlight #d68c6780
minimapGutter.addedBackground #64b28080
minimapGutter.deletedBackground #de6e7c80
minimapGutter.modifiedBackground #61abda80
minimapSlider.activeBackground #8e8e8e50
minimapSlider.background #8e8e8e30
minimapSlider.hoverBackground #8e8e8e40
multiDiffEditor.border #191919
multiDiffEditor.headerBackground #191919
notebook.cellBorderColor #4f4f4f
notebook.cellEditorBackground #292929
notebook.cellInsertionIndicator #61abda
notebook.cellStatusBarItemHoverBackground #e7e7e728
notebook.cellToolbarSeparator #3e3e3e
notebook.focusedCellBorder #61abda
notebook.focusedEditorBorder #61abda
notebook.inactiveFocusedCellBorder #4f4f4f
notebook.selectedCellBackground #4f4f4f
notebook.selectedCellBorder #4f4f4f
notebook.symbolHighlightBackground #6a6a6a30
notebookEditorOverviewRuler.runningCellForeground #64b280
notificationCenter.border #3e3e3e
notificationCenterHeader.background #292929
notificationCenterHeader.foreground #bbbbbb
notificationLink.foreground #61abda
notifications.background #353535
notifications.border #3e3e3e
notifications.foreground #bbbbbb
outputViewStickyScroll.background #292929
panel.background #292929
panel.border #191919
panelInput.border #3e3e3e
panelSection.border #00000000
panelSectionHeader.background #292929
panelSectionHeader.border #191919
panelSectionHeader.foreground #8e8e8e
panelTitle.activeBorder #61abda
panelTitle.activeForeground #bbbbbb
panelTitle.inactiveForeground #8e8e8e
peekView.border #3e3e3e
peekViewEditor.background #191919
peekViewEditor.matchHighlightBackground #64b28050
peekViewResult.background #292929
peekViewResult.fileForeground #bbbbbb
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #00000000
peekViewResult.selectionBackground #395263
peekViewResult.selectionForeground #bbbbbb
peekViewTitle.background #292929
peekViewTitleDescription.foreground #8e8e8e
peekViewTitleLabel.foreground #bbbbbb
pickerGroup.border #3e3e3e
pickerGroup.foreground #8e8e8e
ports.iconRunningProcessForeground #64b280
profileBadge.background #191919
profileBadge.foreground #bbbbbb
progressBar.background #61abda
quickInput.background #353535
quickInputList.focusForeground #bbbbbb
quickInputTitle.background #292929
radio.activeBackground #191919
radio.activeBorder #3e3e3e
radio.activeForeground #bbbbbb
radio.inactiveBackground #191919
radio.inactiveBorder #3e3e3e
radio.inactiveForeground #bbbbbb
radio.inactiveHoverBackground #191919
scmGraph.foreground1 #d6b867
scmGraph.foreground2 #9d86ce
scmGraph.foreground3 #d68c67
scmGraph.foreground4 #65b8c1
scmGraph.foreground5 #cf86c1
scmGraph.historyItemBaseRefColor #8e8e8e
scmGraph.historyItemHoverAdditionsForeground #64b280
scmGraph.historyItemHoverDefaultLabelBackground #61abda
scmGraph.historyItemHoverDefaultLabelForeground #191919
scmGraph.historyItemHoverDeletionsForeground #de6e7c
scmGraph.historyItemHoverLabelForeground #191919
scmGraph.historyItemRefColor #61abda
scmGraph.historyItemRemoteRefColor #cf86c1
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #8e8e8e80
scrollbarSlider.background #8e8e8e50
scrollbarSlider.hoverBackground #8e8e8e68
search.resultsInfoForeground #8e8e8e
searchEditor.findMatchBackground #64b28050
selection.background #61abda50
settings.checkboxBackground #292929
settings.checkboxBorder #3e3e3e
settings.checkboxForeground #bbbbbb
settings.dropdownBackground #292929
settings.dropdownBorder #3e3e3e
settings.dropdownForeground #bbbbbb
settings.dropdownListBorder #3e3e3e
settings.focusedRowBackground #00000000
settings.focusedRowBorder #61abda
settings.headerBorder #00000000
settings.headerForeground #bbbbbb
settings.modifiedItemIndicator #d68c67
settings.numberInputBackground #292929
settings.numberInputBorder #3e3e3e
settings.numberInputForeground #bbbbbb
settings.rowHoverBackground #00000000
settings.sashBorder #191919
settings.settingsHeaderHoverForeground #61abda
settings.textInputBackground #292929
settings.textInputBorder #3e3e3e
settings.textInputForeground #bbbbbb
sideBar.background #292929
sideBar.border #191919
sideBar.foreground #bbbbbb
sideBarActivityBarTop.border #00000000
sideBarSectionHeader.background #292929
sideBarSectionHeader.border #191919
sideBarSectionHeader.foreground #8e8e8e
sideBarTitle.border #00000000
sideBarTitle.foreground #8e8e8e
simpleFindWidget.sashBorder #00000000
statusBar.background #292929
statusBar.border #191919
statusBar.debuggingBackground #292929
statusBar.debuggingForeground #8e8e8e
statusBar.focusBorder #61abda
statusBar.foreground #8e8e8e
statusBar.noFolderBackground #292929
statusBarItem.activeBackground #e7e7e734
statusBarItem.compactHoverBackground #e7e7e728
statusBarItem.errorBackground #00000000
statusBarItem.errorForeground #de6e7c
statusBarItem.errorHoverBackground #e7e7e718
statusBarItem.errorHoverForeground #de6e7c
statusBarItem.focusBorder #61abda
statusBarItem.hoverBackground #e7e7e718
statusBarItem.hoverForeground #bbbbbb
statusBarItem.offlineBackground #00000000
statusBarItem.offlineForeground #de6e7c
statusBarItem.offlineHoverForeground #de6e7c
statusBarItem.prominentBackground #e7e7e718
statusBarItem.prominentForeground #bbbbbb
statusBarItem.prominentHoverBackground #e7e7e728
statusBarItem.prominentHoverForeground #bbbbbb
statusBarItem.remoteBackground #00000000
statusBarItem.remoteForeground #8e8e8e
statusBarItem.warningBackground #00000000
statusBarItem.warningForeground #d68c67
statusBarItem.warningHoverBackground #e7e7e718
statusBarItem.warningHoverForeground #d68c67
symbolIcon.arrayForeground #8e8e8e
symbolIcon.booleanForeground #d68c67
symbolIcon.classForeground #65b8c1
symbolIcon.colorForeground #8e8e8e
symbolIcon.constantForeground #d68c67
symbolIcon.constructorForeground #61abda
symbolIcon.enumeratorForeground #65b8c1
symbolIcon.enumeratorMemberForeground #d68c67
symbolIcon.eventForeground #61abda
symbolIcon.fieldForeground #8e8e8e
symbolIcon.fileForeground #8e8e8e
symbolIcon.folderForeground #8e8e8e
symbolIcon.functionForeground #61abda
symbolIcon.interfaceForeground #65b8c1
symbolIcon.keyForeground #8e8e8e
symbolIcon.keywordForeground #cf86c1
symbolIcon.methodForeground #61abda
symbolIcon.moduleForeground #8e8e8e
symbolIcon.namespaceForeground #65b8c1
symbolIcon.nullForeground #d68c67
symbolIcon.numberForeground #d68c67
symbolIcon.objectForeground #8e8e8e
symbolIcon.operatorForeground #8e8e8e
symbolIcon.packageForeground #8e8e8e
symbolIcon.propertyForeground #8e8e8e
symbolIcon.referenceForeground #8e8e8e
symbolIcon.snippetForeground #8e8e8e
symbolIcon.stringForeground #64b280
symbolIcon.structForeground #65b8c1
symbolIcon.textForeground #64b280
symbolIcon.typeParameterForeground #65b8c1
symbolIcon.unitForeground #d68c67
symbolIcon.variableForeground #8e8e8e
tab.activeBackground #191919
tab.activeBorder #191919
tab.activeBorderTop #00000000
tab.activeForeground #bbbbbb
tab.activeModifiedBorder #61abda
tab.border #191919
tab.hoverBackground #353535
tab.inactiveBackground #292929
tab.inactiveForeground #8e8e8e
tab.inactiveModifiedBorder #61abda80
tab.lastPinnedBorder #191919
tab.unfocusedActiveBorder #191919
tab.unfocusedActiveBorderTop #00000000
tab.unfocusedActiveForeground #8e8e8e
tab.unfocusedActiveModifiedBorder #61abda80
tab.unfocusedHoverBackground #353535
tab.unfocusedInactiveForeground #8e8e8e
tab.unfocusedInactiveModifiedBorder #61abda80
terminal.ansiBlack #191919
terminal.ansiBlue #61abda
terminal.ansiBrightBlack #6e6e6e
terminal.ansiBrightBlue #7fc9f8
terminal.ansiBrightCyan #83d6df
terminal.ansiBrightGreen #86cc92
terminal.ansiBrightMagenta #eca4df
terminal.ansiBrightRed #fc8c9a
terminal.ansiBrightWhite #8e8e8e
terminal.ansiBrightYellow #f4aa85
terminal.ansiCyan #65b8c1
terminal.ansiGreen #64b280
terminal.ansiMagenta #cf86c1
terminal.ansiRed #de6e7c
terminal.ansiWhite #bbbbbb
terminal.ansiYellow #d68c67
terminal.border #191919
terminal.findMatchBackground #5b5b5bfe
terminal.findMatchHighlightBackground #64b28050
terminal.foreground #bbbbbb
terminal.hoverHighlightBackground #e7e7e728
terminal.inactiveSelectionBackground #8e8e8e30
terminal.initialHintForeground #6e6e6e
terminal.selectionBackground #61abda50
terminal.tab.activeBorder #00000000
terminalCommandDecoration.defaultBackground #8e8e8e
terminalCommandDecoration.errorBackground #de6e7c
terminalCommandDecoration.successBackground #64b280
terminalCommandGuide.foreground #e7e7e728
terminalCursor.foreground #bbbbbb
terminalOverviewRuler.cursorForeground #bbbbbb80
testing.coverCountBadgeBackground #353535
testing.coverCountBadgeForeground #bbbbbb
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 #8e8e8e
testing.iconSkipped.retired #8e8e8eb0
testing.iconUnset #8e8e8e
testing.iconUnset.retired #8e8e8eb0
testing.message.error.badgeBackground #de6e7c
testing.message.error.badgeBorder #00000000
testing.message.error.badgeForeground #191919
testing.message.error.lineBackground #de6e7c20
testing.message.info.decorationForeground #6e6e6e
testing.message.info.lineBackground #61abda20
testing.messagePeekBorder #3e3e3e
testing.messagePeekHeaderBackground #292929
testing.peekBorder #de6e7c
testing.peekHeaderBackground #292929
testing.runAction #64b280
testing.uncoveredBackground #de6e7c20
testing.uncoveredBorder #00000000
testing.uncoveredBranchBackground #353535
testing.uncoveredGutterBackground #de6e7c80
textBlockQuote.background #00000000
textBlockQuote.border #3e3e3e
textCodeBlock.background #3e3e3e
textLink.activeForeground #6bb6e8
textLink.foreground #61abda
textPreformat.background #3e3e3e
textPreformat.foreground #bbbbbb
textSeparator.foreground #3e3e3e
titleBar.activeBackground #383838
titleBar.activeForeground #bbbbbb
titleBar.border #191919
titleBar.inactiveBackground #383838
titleBar.inactiveForeground #6a6a6a
toolbar.activeBackground #e7e7e724
toolbar.hoverBackground #e7e7e718
tree.inactiveIndentGuidesStroke #3e3e3e
tree.indentGuidesStroke #3e3e3e
tree.tableColumnsBorder #e7e7e728
tree.tableOddRowsBackground #e7e7e70a
walkThrough.embeddedEditorBackground #191919
walkthrough.stepTitle.foreground #bbbbbb
welcomePage.progress.background #191919
welcomePage.progress.foreground #61abda
welcomePage.tileBackground #292929
welcomePage.tileBorder #3e3e3e
welcomePage.tileHoverBackground #e7e7e728
widget.border #3e3e3e
widget.shadow #19191980 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 #bbbbbb —
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 #bbbbbb —
keyword.operator.type.annotation, meta.tag.attributes keyword.operator.assignment, keyword.operator.assignment.shell #8e8e8e —
punctuation, meta.brace, constant.character.escape #8e8e8e —
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 #bbbbbb —
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 #8e8e8e —
entity.other.keyframe-offset #8e8e8e —
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 } ! ` ;
}