Skip to main content
Home Theme VS Code Cool Cowboy Theme A dark theme blending muted cool and warm colors, creating a balanced and comfortable coding environment inspired by Western aesthetics.
Cool Cowboy 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 #564f6480 activityBar.activeBackground #564f644d activityBar.activeBorder #b4b0c2 activityBar.activeFocusBorder #1d1a2300 activityBar.background #1d1a23 activityBar.border #54515e tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — italic support.class.component, entity.name.type.class.component, support.class.component.tsx, support.class.component.jsx, entity.name.type.class.component, entity.other.inherited-class.component, meta.class.component #8fabc8 — strong — bold header #7790A8 — comment, punctuation.definition.comment, string.comment.buffered.block.pug, string.quoted.docstring.multi.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Cool Cowboy Theme — Cool Cowboy Theme (Colorblind)
activityBar.dropBorder #b4b0c2
activityBar.foreground #f5f4f8
activityBar.inactiveForeground #564f64
activityBarBadge.background #b4b0c2
activityBarBadge.foreground #1d1a23
activityBarTop.activeBackground #564f641f
activityBarTop.activeBorder #1d1a2300
activityBarTop.background #1d1a23
activityBarTop.dropBorder #b4b0c2
activityBarTop.foreground #f5f4f8
activityBarTop.inactiveForeground #9a92a8
activityErrorBadge.background #1d1a23
activityErrorBadge.foreground #ff9d80
activityWarningBadge.background #1d1a23
activityWarningBadge.foreground #ffd462
badge.background #b4b0c2
badge.foreground #1d1a23
banner.background #a8a4c8
banner.foreground #1d1a23
banner.iconForeground #1d1a23
breadcrumb.activeSelectionForeground #f5f4f8
breadcrumb.background #1d1a23
breadcrumb.focusForeground #f5f4f8
breadcrumb.foreground #9a92a8
breadcrumbPicker.background #1d1a23
button.background #749392
button.border #1d1a2300
button.foreground #1d1a23
button.hoverBackground #8bafae
button.secondaryBackground #564f644d
button.secondaryForeground #f5f4f8
button.secondaryHoverBackground #564f6480
button.separator #749392
charts.blue #ff0000
charts.foreground #ff0000
charts.green #ff0000
charts.lines #ff0000
charts.orange #ff0000
charts.purple #ff0000
charts.red #ff0000
charts.yellow #ff0000
chat.avatarBackground #1d1a2300
chat.avatarForeground #9a92a8
chat.requestBackground #282430
chat.requestBorder #54515e
chat.slashCommandBackground #1d1a23
chat.slashCommandForeground #b4b0c2
checkbox.background #1d1a23
checkbox.border #b4b0c2
checkbox.foreground #aba6b6
checkbox.selectBackground #1d1a23
checkbox.selectBorder #b4b0c2
commandCenter.activeBackground #564f6480
commandCenter.activeBorder #564f64
commandCenter.activeForeground #f5f4f8
commandCenter.background #282430
commandCenter.border #54515e
commandCenter.debuggingBackground #282430
commandCenter.foreground #b4b0c2
commandCenter.inactiveBorder #54515e
commandCenter.inactiveForeground #9a92a8
commentsView.resolvedIcon #8fabc8
commentsView.unresolvedIcon #ffd462
contrastActiveBorder #1d1a2300
contrastBorder #1d1a2300
debugConsole.errorForeground #ff9d80
debugConsole.infoForeground #8fabc8
debugConsole.sourceForeground #a8a4c8
debugConsole.warningForeground #ffd462
debugConsoleInputIcon.foreground #9a92a8
debugExceptionWidget.background #e386904d
debugExceptionWidget.border #e38690
debugIcon.breakpointCurrentStackframeForeground #ffd462
debugIcon.breakpointDisabledForeground #564f64
debugIcon.breakpointForeground #ff9d80
debugIcon.breakpointStackframeForeground #9a92a8
debugIcon.breakpointUnverifiedForeground #9a92a8
debugIcon.continueForeground #a8a4c8
debugIcon.disconnectForeground #a8a4c8
debugIcon.pauseForeground #a8a4c8
debugIcon.restartForeground #8fabc8
debugIcon.startForeground #8fabc8
debugIcon.stepBackForeground #a8a4c8
debugIcon.stepIntoForeground #a8a4c8
debugIcon.stepOutForeground #a8a4c8
debugIcon.stepOverForeground #a8a4c8
debugIcon.stopForeground #ff9d80
debugTokenExpression.boolean #a8a4c8
debugTokenExpression.error #ff9d80
debugTokenExpression.name #8bafae
debugTokenExpression.number #ffd462
debugTokenExpression.string #8fabc8
debugTokenExpression.type #e6cbd3
debugTokenExpression.value #8fabc8
debugToolBar.background #1d1a23
debugToolBar.border #54515e
debugView.exceptionLabelBackground #e38690
debugView.exceptionLabelForeground #1d1a23
debugView.stateLabelBackground #282430
debugView.stateLabelForeground #f5f4f8
debugView.valueChangedHighlight #8d88b680
descriptionForeground #f5f4f8
diffEditor.border #1d1a2300
diffEditor.diagonalFill #282430
diffEditor.insertedLineBackground #363b2b4d
diffEditor.insertedTextBackground #363b2be6
diffEditor.insertedTextBorder #1d1a2300
diffEditor.move.border #54515e
diffEditor.moveActive.border #564f64
diffEditor.removedLineBackground #572c324d
diffEditor.removedTextBackground #572c32e6
diffEditor.removedTextBorder #1d1a2300
diffEditor.unchangedCodeBackground #1d1a2300
diffEditor.unchangedRegionBackground #1d1a2300
diffEditor.unchangedRegionForeground #9a92a8
diffEditor.unchangedRegionShadow #564f64
diffEditorGutter.insertedLineBackground #363b2b4d
diffEditorGutter.removedLineBackground #572c324d
diffEditorOverview.insertedForeground #363b2be6
diffEditorOverview.removedForeground #572c32e6
disabledForeground #564f64
dropdown.background #282430
dropdown.border #54515e
dropdown.foreground #f5f4f8
dropdown.listBackground #282430
editor.background #1d1a23
editor.findMatchBackground #1d1a2300
editor.findMatchBorder #bfa481
editor.findMatchForeground #8bafae
editor.findMatchHighlightBackground #564f644d
editor.findMatchHighlightBorder #749392
editor.findMatchHighlightForeground #eedeca
editor.findRangeHighlightBackground #282430
editor.findRangeHighlightBorder #1d1a2300
editor.focusedStackFrameHighlightBackground #564f644d
editor.foldBackground #564f641f
editor.foldPlaceholderForeground #9a92a8
editor.foreground #f5f4f8
editor.hoverHighlightBackground #564f644d
editor.inactiveSelectionBackground #282430
editor.inlineValuesBackground #1d1a2300
editor.inlineValuesForeground #b4b0c2
editor.lineHighlightBackground #282430
editor.lineHighlightBorder #1d1a2300
editor.linkedEditingBackground #564f6480
editor.placeholder.foreground #b4b0c2
editor.rangeHighlightBackground #564f644d
editor.rangeHighlightBorder #1d1a2300
editor.selectionBackground #564f6480
editor.selectionHighlightBackground #1d1a2300
editor.selectionHighlightBorder #8fabc8
editor.snippetFinalTabstopHighlightBackground #1d1a2300
editor.snippetFinalTabstopHighlightBorder #564f64
editor.snippetTabstopHighlightBackground #564f641f
editor.snippetTabstopHighlightBorder #1d1a2300
editor.stackFrameHighlightBackground #564f6480
editor.symbolHighlightBackground #1d1a2300
editor.symbolHighlightBorder #1d1a2300
editor.wordHighlightBackground #1d1a2300
editor.wordHighlightBorder #a8a4c8
editor.wordHighlightStrongBackground #1d1a2300
editor.wordHighlightStrongBorder #8fabc8
editor.wordHighlightTextBackground #1d1a2300
editor.wordHighlightTextBorder #1d1a2300
editorActionList.background #1d1a23
editorActionList.focusBackground #564f644d
editorActionList.focusForeground #f5f4f8
editorActionList.foreground #b4b0c2
editorBracketHighlight.foreground1 #9a92a8
editorBracketHighlight.foreground2 #ff9d80
editorBracketHighlight.foreground3 #e6cbd3
editorBracketHighlight.foreground4 #ffd462
editorBracketHighlight.foreground5 #8fabc8
editorBracketHighlight.foreground6 #8fabc8
editorBracketHighlight.unexpectedBracket.foreground #e38690
editorBracketMatch.background #1d1a23
editorBracketMatch.border #564f64
editorBracketPairGuide.activeBackground1 #f5f4f800
editorBracketPairGuide.activeBackground2 #f5f4f800
editorBracketPairGuide.activeBackground3 #f5f4f800
editorBracketPairGuide.activeBackground4 #f5f4f800
editorBracketPairGuide.activeBackground5 #f5f4f800
editorBracketPairGuide.activeBackground6 #f5f4f800
editorBracketPairGuide.background1 #f5f4f800
editorBracketPairGuide.background2 #f5f4f800
editorBracketPairGuide.background3 #f5f4f800
editorBracketPairGuide.background4 #f5f4f800
editorBracketPairGuide.background5 #f5f4f800
editorBracketPairGuide.background6 #f5f4f800
editorCodeLens.foreground #b4b0c2
editorCommentsWidget.rangeActiveBackground #564f644d
editorCommentsWidget.rangeBackground #564f641f
editorCommentsWidget.replyInputBackground #282430
editorCommentsWidget.resolvedBorder #708b91
editorCommentsWidget.unresolvedBorder #bfa481
editorCursor.background #1d1a23
editorCursor.foreground #aba6b6
editorError.background #1d1a2300
editorError.border #1d1a2300
editorError.foreground #e38690
editorGhostText.background #1d1a2300
editorGhostText.border #1d1a2300
editorGhostText.foreground #b4b0c2
editorGroup.border #54515e
editorGroup.dropBackground #564f644d
editorGroup.dropIntoPromptBackground #282430
editorGroup.dropIntoPromptBorder #54515e
editorGroup.dropIntoPromptForeground #b4b0c2
editorGroup.emptyBackground #1d1a23
editorGroup.focusedEmptyBorder #564f64
editorGroupHeader.border #1d1a2300
editorGroupHeader.noTabsBackground #1d1a23
editorGroupHeader.tabsBackground #1d1a23
editorGroupHeader.tabsBorder #54515e
editorGutter.addedBackground #8fabc8
editorGutter.background #1d1a2300
editorGutter.commentGlyphForeground #1d1a23
editorGutter.commentRangeForeground #564f644d
editorGutter.commentUnresolvedGlyphForeground #1d1a23
editorGutter.deletedBackground #ff9d80
editorGutter.foldingControlForeground #b4b0c2
editorGutter.modifiedBackground #ffd462
editorHint.border #1d1a2300
editorHint.foreground #708b91
editorHoverWidget.background #1d1a23
editorHoverWidget.border #54515e
editorHoverWidget.foreground #f5f4f8
editorHoverWidget.highlightForeground #f5f4f8
editorHoverWidget.statusBarBackground #1d1a23
editorIndentGuide.activeBackground1 #564f64
editorIndentGuide.activeBackground2 #564f64
editorIndentGuide.activeBackground3 #564f64
editorIndentGuide.activeBackground4 #564f64
editorIndentGuide.activeBackground5 #564f64
editorIndentGuide.activeBackground6 #564f64
editorIndentGuide.background1 #54515e80
editorIndentGuide.background2 #54515e80
editorIndentGuide.background3 #54515e80
editorIndentGuide.background4 #54515e80
editorIndentGuide.background5 #54515e80
editorIndentGuide.background6 #54515e80
editorInfo.background #1d1a2300
editorInfo.border #1d1a2300
editorInfo.foreground #7790a8
editorInlayHint.background #1d1a2300
editorInlayHint.foreground #564f64
editorInlayHint.parameterBackground #1d1a2300
editorInlayHint.parameterForeground #564f64
editorInlayHint.typeBackground #1d1a2300
editorInlayHint.typeForeground #564f64
editorLightBulb.foreground #ffd462
editorLightBulbAi.foreground #ffd462
editorLightBulbAutoFix.foreground #ffd462
editorLineNumber.activeForeground #f5f4f8
editorLineNumber.dimmedForeground #b4b0c2
editorLineNumber.foreground #564f64
editorLink.activeForeground #f5f4f8
editorMarkerNavigation.background #1d1a23
editorMarkerNavigationError.background #e38690
editorMarkerNavigationError.headerBackground #e386901f
editorMarkerNavigationInfo.background #7790a8
editorMarkerNavigationInfo.headerBackground #7790a81f
editorMarkerNavigationWarning.background #bfa481
editorMarkerNavigationWarning.headerBackground #bfa4811f
editorMultiCursor.primary.background #1d1a23
editorMultiCursor.primary.foreground #aba6b6
editorMultiCursor.secondary.background #1d1a23
editorMultiCursor.secondary.foreground #aba6b6
editorOverviewRuler.addedForeground #708b9180
editorOverviewRuler.background #1d1a2300
editorOverviewRuler.border #1d1a23
editorOverviewRuler.bracketMatchForeground #9a92a8
editorOverviewRuler.commentForeground #708b914d
editorOverviewRuler.commentUnresolvedForeground #bfa4814d
editorOverviewRuler.commonContentForeground #1d1a2300
editorOverviewRuler.currentContentForeground #8d88b64d
editorOverviewRuler.deletedForeground #e3869080
editorOverviewRuler.errorForeground #e38690
editorOverviewRuler.findMatchForeground #bfa481
editorOverviewRuler.incomingContentForeground #7493924d
editorOverviewRuler.infoForeground #7790a8
editorOverviewRuler.inlineChatInserted #708b91
editorOverviewRuler.inlineChatRemoved #e38690
editorOverviewRuler.modifiedForeground #bfa481
editorOverviewRuler.rangeHighlightForeground #7790a8
editorOverviewRuler.selectionHighlightForeground #8bafae
editorOverviewRuler.warningForeground #bfa481
editorOverviewRuler.wordHighlightForeground #9a92a8
editorOverviewRuler.wordHighlightStrongForeground #9a92a8
editorOverviewRuler.wordHighlightTextForeground #a8a4c8
editorPane.background #1d1a23
editorRuler.foreground #564f64
editorStickyScroll.background #1d1a23
editorStickyScroll.border #1d1a2300
editorStickyScroll.shadow #121017
editorStickyScrollHover.background #564f644d
editorSuggestWidget.background #1d1a23
editorSuggestWidget.border #54515e
editorSuggestWidget.focusHighlightForeground #8fabc8
editorSuggestWidget.foreground #f5f4f8
editorSuggestWidget.highlightForeground #7790a8
editorSuggestWidget.selectedBackground #564f644d
editorSuggestWidget.selectedForeground #f5f4f8
editorSuggestWidget.selectedIconForeground #aba6b6
editorSuggestWidgetStatus.foreground #9a92a8
editorUnicodeHighlight.background #1d1a23
editorUnicodeHighlight.border #54515e
editorUnnecessaryCode.border #1d1a2300
editorUnnecessaryCode.opacity #f5f4f880
editorWarning.background #1d1a2300
editorWarning.border #1d1a2300
editorWarning.foreground #bfa481
editorWatermark.foreground #b4b0c2
editorWhitespace.foreground #564f64
editorWidget.background #282430
editorWidget.border #564f64
editorWidget.foreground #b4b0c2
editorWidget.resizeBorder #54515e
errorForeground #ff9d80
extensionBadge.remoteBackground #b4b0c2
extensionBadge.remoteForeground #1d1a23
extensionButton.background #749392
extensionButton.foreground #1d1a23
extensionButton.hoverBackground #8bafae
extensionButton.prominentBackground #749392
extensionButton.prominentForeground #1d1a23
extensionButton.prominentHoverBackground #8bafae
extensionButton.separator #564f64
extensionIcon.preReleaseForeground #a8a4c8
extensionIcon.sponsorForeground #ff9d80
extensionIcon.starForeground #564f64
extensionIcon.verifiedForeground #8fabc8
focusBorder #564f64
foreground #f5f4f8
gitDecoration.addedResourceForeground #708b91
gitDecoration.conflictingResourceForeground #8d88b6
gitDecoration.deletedResourceForeground #e38690
gitDecoration.ignoredResourceForeground #564f64
gitDecoration.modifiedResourceForeground #bfa481
gitDecoration.renamedResourceForeground #bfa481
gitDecoration.stageDeletedResourceForeground #e38690
gitDecoration.stageModifiedResourceForeground #bfa481
gitDecoration.submoduleResourceForeground #9a92a8
gitDecoration.untrackedResourceForeground #708b91
icon.foreground #aba6b6
inlineChat.background #282430
inlineChat.border #54515e
inlineChat.foreground #f5f4f8
inlineChat.shadow #121017
inlineChatDiff.inserted #363b2bb3
inlineChatDiff.removed #572c32b3
inlineChatInput.background #282430
inlineChatInput.border #54515e
inlineChatInput.focusBorder #564f64
inlineChatInput.placeholderForeground #9a92a8
input.background #282430
input.border #54515e
input.foreground #f5f4f8
input.placeholderForeground #9a92a8
inputOption.activeBackground #749392
inputOption.activeBorder #1d1a2300
inputOption.activeForeground #1d1a23
inputOption.hoverBackground #564f6480
inputValidation.errorBackground #282430
inputValidation.errorBorder #ff9d80
inputValidation.errorForeground #ff9d80
inputValidation.infoBackground #282430
inputValidation.infoBorder #b4b0c2
inputValidation.infoForeground #b4b0c2
inputValidation.warningBackground #282430
inputValidation.warningBorder #ffd462
inputValidation.warningForeground #ffd462
interactive.activeCodeBorder #564f64
interactive.inactiveCodeBorder #54515e
keybindingLabel.background #1d1a23
keybindingLabel.border #282430
keybindingLabel.bottomBorder #54515e
keybindingLabel.foreground #b4b0c2
keybindingTable.headerBackground #1d1a2300
keybindingTable.rowsBackground #1d1a2300
list.activeSelectionBackground #564f644d
list.activeSelectionForeground #f5f4f8
list.activeSelectionIconForeground #aba6b6
list.deemphasizedForeground #9a92a8
list.dropBackground #564f644d
list.dropBetweenBackground #564f64
list.errorForeground #ff9d80
list.filterMatchBackground #564f64b3
list.filterMatchBorder #1d1a2300
list.focusAndSelectionOutline #1d1a2300
list.focusBackground #564f6480
list.focusForeground #f5f4f8
list.focusHighlightForeground #8fabc8
list.focusOutline #1d1a2300
list.highlightForeground #8fabc8
list.hoverBackground #564f644d
list.hoverForeground #f5f4f8
list.inactiveFocusBackground #564f6480
list.inactiveFocusOutline #1d1a2300
list.inactiveSelectionBackground #564f644d
list.inactiveSelectionForeground #f5f4f8
list.inactiveSelectionIconForeground #aba6b6
list.invalidItemForeground #e38690
list.warningForeground #ffd462
listFilterWidget.background #282430
listFilterWidget.noMatchesOutline #ff9d80
listFilterWidget.outline #54515e
listFilterWidget.shadow #121017
menu.background #282430
menu.border #54515e
menu.foreground #f5f4f8
menu.selectionBackground #564f644d
menu.selectionBorder #1d1a2300
menu.selectionForeground #f5f4f8
menu.separatorBackground #54515e
menubar.selectionBackground #564f644d
menubar.selectionBorder #1d1a2300
menubar.selectionForeground #f5f4f8
merge.border #1d1a2300
merge.commonContentBackground #1d1a2300
merge.commonHeaderBackground #1d1a2300
merge.currentContentBackground #8d88b61f
merge.currentHeaderBackground #8d88b64d
merge.incomingContentBackground #7493921f
merge.incomingHeaderBackground #7493924d
mergeEditor.change.background #1d1a23
mergeEditor.change.word.background #282430
mergeEditor.changeBase.background #1d1a2300
mergeEditor.changeBase.word.background #1d1a2300
mergeEditor.conflict.handled.minimapOverViewRuler #8fabc8
mergeEditor.conflict.handledFocused.border #8fabc8
mergeEditor.conflict.handledUnfocused.border #8fabc8
mergeEditor.conflict.input1.background #1d1a2300
mergeEditor.conflict.input2.background #1d1a2300
mergeEditor.conflict.unhandled.minimapOverViewRuler #ff9d80
mergeEditor.conflict.unhandledFocused.border #ff9d80
mergeEditor.conflict.unhandledUnfocused.border #ff9d80
mergeEditor.conflictingLines.background #1d1a23
minimap.background #1d1a2300
minimap.errorHighlight #e38690
minimap.findMatchHighlight #bfa481
minimap.foregroundOpacity #1d1a23e6
minimap.infoHighlight #7790a8
minimap.selectionHighlight #564f64b3
minimap.selectionOccurrenceHighlight #564f64b3
minimap.warningHighlight #bfa481
minimapGutter.addedBackground #708b91
minimapGutter.deletedBackground #e38690
minimapGutter.modifiedBackground #bfa481
minimapSlider.activeBackground #564f64b3
minimapSlider.background #564f6480
minimapSlider.hoverBackground #564f64b3
multiDiffEditor.background #282430
multiDiffEditor.border #54515e
multiDiffEditor.headerBackground #282430
notebook.cellBorderColor #54515e
notebook.cellEditorBackground #1d1a23
notebook.cellHoverBackground #564f644d
notebook.cellInsertionIndicator #b4b0c2
notebook.cellStatusBarItemHoverBackground #564f644d
notebook.cellToolbarSeparator #54515e
notebook.editorBackground #1d1a23
notebook.focusedCellBackground #1d1a2300
notebook.focusedCellBorder #54515e
notebook.focusedEditorBorder #564f64
notebook.inactiveFocusedCellBorder #54515e
notebook.inactiveSelectedCellBorder #54515e
notebook.outputContainerBackgroundColor #1d1a2300
notebook.outputContainerBorderColor #54515e
notebook.selectedCellBackground #1d1a2300
notebook.selectedCellBorder #564f64
notebook.symbolHighlightBackground #1d1a2300
notebookEditorOverviewRuler.runningCellForeground #bfa481
notebookScrollbarSlider.activeBackground #564f6480
notebookScrollbarSlider.background #564f644d
notebookScrollbarSlider.hoverBackground #564f6480
notebookStatusErrorIcon.foreground #ff9d80
notebookStatusRunningIcon.foreground #ffd462
notebookStatusSuccessIcon.foreground #8fabc8
notificationCenter.border #54515e
notificationCenterHeader.background #1d1a23
notificationCenterHeader.foreground #f5f4f8
notificationLink.foreground #7790a8
notifications.background #1d1a23
notifications.border #54515e
notifications.foreground #f5f4f8
notificationsErrorIcon.foreground #ff9d80
notificationsInfoIcon.foreground #8fabc8
notificationsWarningIcon.foreground #ffd462
notificationToast.border #54515e
outputView.background #1d1a23
outputViewStickyScroll.background #1d1a23
panel.background #1d1a23
panel.border #54515e
panel.dropBorder #564f64
panelInput.border #564f64
panelSection.border #54515e
panelSection.dropBackground #564f644d
panelSectionHeader.background #1d1a23
panelSectionHeader.border #54515e
panelSectionHeader.foreground #f5f4f8
panelStickyScroll.background #1d1a23
panelStickyScroll.border #1d1a2300
panelStickyScroll.shadow #121017
panelTitle.activeBorder #b4b0c2
panelTitle.activeForeground #f5f4f8
panelTitle.inactiveForeground #9a92a8
peekView.border #54515e
peekViewEditor.background #1d1a23
peekViewEditor.matchHighlightBackground #564f644d
peekViewEditor.matchHighlightBorder #1d1a2300
peekViewEditorGutter.background #1d1a23
peekViewEditorStickyScroll.background #1d1a23
peekViewResult.background #282430
peekViewResult.fileForeground #b4b0c2
peekViewResult.lineForeground #9a92a8
peekViewResult.matchHighlightBackground #564f644d
peekViewResult.selectionBackground #564f644d
peekViewResult.selectionForeground #f5f4f8
peekViewTitle.background #1d1a23
peekViewTitleDescription.foreground #b4b0c2
peekViewTitleLabel.foreground #f5f4f8
pickerGroup.border #54515e
pickerGroup.foreground #b4b0c2
ports.iconRunningProcessForeground #ffd462
problemsErrorIcon.foreground #ff9d80
problemsInfoIcon.foreground #8fabc8
problemsWarningIcon.foreground #ffd462
profileBadge.background #b4b0c2
profileBadge.foreground #1d1a23
profiles.sashBorder #54515e
progressBar.background #8bafae
quickInput.background #282430
quickInput.foreground #b4b0c2
quickInputList.focusBackground #564f644d
quickInputList.focusForeground #f5f4f8
quickInputList.focusIconForeground #aba6b6
quickInputTitle.background #1d1a23
radio.activeBackground #1d1a23
radio.activeBorder #b4b0c2
radio.activeForeground #aba6b6
radio.inactiveBackground #1d1a23
radio.inactiveBorder #564f64
radio.inactiveForeground #1d1a23
radio.inactiveHoverBackground #564f641f
sash.hoverBorder #b4b0c2
scmGraph.foreground1 #7790a8
scmGraph.foreground2 #708b91
scmGraph.foreground3 #8d88b6
scmGraph.foreground4 #be76a3
scmGraph.foreground5 #749392
scmGraph.historyItemBaseRefColor #564f64
scmGraph.historyItemHoverAdditionsForeground #8fabc8
scmGraph.historyItemHoverDefaultLabelBackground #749392
scmGraph.historyItemHoverDefaultLabelForeground #f5f4f8
scmGraph.historyItemHoverDeletionsForeground #ff9d80
scmGraph.historyItemHoverLabelForeground #f5f4f8
scmGraph.historyItemRefColor #564f64
scmGraph.historyItemRemoteRefColor #708b91
scrollbar.shadow #121017
scrollbarSlider.activeBackground #564f6480
scrollbarSlider.background #564f644d
scrollbarSlider.hoverBackground #564f6480
search.resultsInfoForeground #b4b0c2
searchEditor.findMatchBackground #564f644d
searchEditor.findMatchBorder #ff9d80
searchEditor.textInputBorder #54515e
selection.background #564f64b3
settings.checkboxBackground #1d1a23
settings.checkboxBorder #b4b0c2
settings.checkboxForeground #aba6b6
settings.dropdownBackground #282430
settings.dropdownBorder #54515e
settings.dropdownForeground #f5f4f8
settings.dropdownListBorder #54515e
settings.focusedRowBackground #564f644d
settings.focusedRowBorder #1d1a2300
settings.headerBorder #54515e
settings.headerForeground #f5f4f8
settings.modifiedItemIndicator #ffd462
settings.numberInputBackground #282430
settings.numberInputBorder #54515e
settings.numberInputForeground #f5f4f8
settings.rowHoverBackground #564f641f
settings.sashBorder #54515e
settings.settingsHeaderHoverForeground #b4b0c2
settings.textInputBackground #282430
settings.textInputBorder #54515e
settings.textInputForeground #f5f4f8
sideBar.background #1d1a23
sideBar.border #54515e
sideBar.dropBackground #564f644d
sideBar.foreground #b4b0c2
sideBarActivityBarTop.border #54515e
sideBarSectionHeader.background #282430
sideBarSectionHeader.border #1d1a2300
sideBarSectionHeader.foreground #b4b0c2
sideBarStickyScroll.background #1d1a23
sideBarStickyScroll.border #1d1a2300
sideBarStickyScroll.shadow #121017
sideBarTitle.background #1d1a23
sideBarTitle.foreground #b4b0c2
sideBySideEditor.horizontalBorder #54515e
sideBySideEditor.verticalBorder #54515e
simpleFindWidget.sashBorder #54515e
statusBar.background #1d1a23
statusBar.border #54515e
statusBar.debuggingBackground #8d88b6
statusBar.debuggingBorder #54515e
statusBar.debuggingForeground #1d1a23
statusBar.focusBorder #54515e
statusBar.foreground #b4b0c2
statusBar.noFolderBackground #1d1a23
statusBar.noFolderBorder #54515e
statusBar.noFolderForeground #b4b0c2
statusBarItem.activeBackground #564f644d
statusBarItem.compactHoverBackground #564f64b3
statusBarItem.errorBackground #ff9d80
statusBarItem.errorForeground #1d1a23
statusBarItem.errorHoverBackground #cd9ca1
statusBarItem.errorHoverForeground #1d1a23
statusBarItem.focusBorder #54515e
statusBarItem.hoverBackground #564f6480
statusBarItem.hoverForeground #f5f4f8
statusBarItem.offlineBackground #ffd462
statusBarItem.offlineForeground #1d1a23
statusBarItem.offlineHoverBackground #eedeca
statusBarItem.offlineHoverForeground #1d1a23
statusBarItem.prominentBackground #8d88b6
statusBarItem.prominentForeground #1d1a23
statusBarItem.prominentHoverBackground #a8a4c8
statusBarItem.prominentHoverForeground #1d1a23
statusBarItem.remoteBackground #282430
statusBarItem.remoteForeground #b4b0c2
statusBarItem.remoteHoverBackground #564f6480
statusBarItem.remoteHoverForeground #f5f4f8
statusBarItem.warningBackground #ffd462
statusBarItem.warningForeground #1d1a23
statusBarItem.warningHoverBackground #eedeca
statusBarItem.warningHoverForeground #1d1a23
symbolIcon.arrayForeground #564f64
symbolIcon.booleanForeground #564f64
symbolIcon.classForeground #564f64
symbolIcon.colorForeground #564f64
symbolIcon.constantForeground #564f64
symbolIcon.constructorForeground #564f64
symbolIcon.enumeratorForeground #564f64
symbolIcon.enumeratorMemberForeground #564f64
symbolIcon.eventForeground #564f64
symbolIcon.fieldForeground #564f64
symbolIcon.fileForeground #564f64
symbolIcon.folderForeground #564f64
symbolIcon.functionForeground #564f64
symbolIcon.interfaceForeground #564f64
symbolIcon.keyForeground #564f64
symbolIcon.keywordForeground #564f64
symbolIcon.methodForeground #564f64
symbolIcon.moduleForeground #564f64
symbolIcon.namespaceForeground #564f64
symbolIcon.nullForeground #564f64
symbolIcon.numberForeground #564f64
symbolIcon.objectForeground #564f64
symbolIcon.operatorForeground #564f64
symbolIcon.packageForeground #564f64
symbolIcon.propertyForeground #564f64
symbolIcon.referenceForeground #564f64
symbolIcon.snippetForeground #564f64
symbolIcon.stringForeground #564f64
symbolIcon.structForeground #564f64
symbolIcon.textForeground #564f64
symbolIcon.typeParameterForeground #564f64
symbolIcon.unitForeground #564f64
symbolIcon.variableForeground #564f64
tab.activeBackground #564f644d
tab.activeBorder #b4b0c2
tab.activeBorderTop #1d1a2300
tab.activeForeground #f5f4f8
tab.activeModifiedBorder #1d1a2300
tab.border #1d1a2300
tab.dragAndDropBorder #b4b0c2
tab.hoverBackground #564f6480
tab.hoverBorder #564f64
tab.hoverForeground #b4b0c2
tab.inactiveBackground #1d1a23
tab.inactiveForeground #9a92a8
tab.inactiveModifiedBorder #1d1a2300
tab.lastPinnedBorder #564f64
tab.selectedBackground #564f644d
tab.selectedBorderTop #1d1a2300
tab.selectedForeground #f5f4f8
tab.unfocusedActiveBackground #564f644d
tab.unfocusedActiveBorder #564f64
tab.unfocusedActiveBorderTop #1d1a2300
tab.unfocusedActiveForeground #9a92a8
tab.unfocusedActiveModifiedBorder #1d1a2300
tab.unfocusedHoverBackground #564f6480
tab.unfocusedHoverBorder #564f64
tab.unfocusedHoverForeground #b4b0c2
tab.unfocusedInactiveBackground #1d1a23
tab.unfocusedInactiveForeground #564f64
tab.unfocusedInactiveModifiedBorder #1d1a2300
terminal.ansiBlack #1d1a23
terminal.ansiBlue #7790a8
terminal.ansiBrightBlack #9a92a8
terminal.ansiBrightBlue #6c9edd
terminal.ansiBrightCyan #4eb1b1
terminal.ansiBrightGreen #6bc46d
terminal.ansiBrightMagenta #a48ade
terminal.ansiBrightRed #e16f6f
terminal.ansiBrightWhite #f5f4f8
terminal.ansiBrightYellow #f0bf5e
terminal.ansiCyan #2c8585
terminal.ansiGreen #708b91
terminal.ansiMagenta #8d88b6
terminal.ansiRed #e38690
terminal.ansiWhite #b4b0c2
terminal.ansiYellow #bfa481
terminal.background #1d1a23
terminal.border #54515e
terminal.dropBackground #564f644d
terminal.findMatchBackground #a8a4c84d
terminal.findMatchBorder #ff9d80
terminal.findMatchHighlightBackground #564f6480
terminal.findMatchHighlightBorder #a8a4c8
terminal.foreground #f5f4f8
terminal.hoverHighlightBackground #564f644d
terminal.inactiveSelectionBackground #564f641f
terminal.initialHintForeground #b4b0c2
terminal.selectionBackground #564f644d
terminal.tab.activeBorder #b4b0c2
terminalCommandDecoration.defaultBackground #282430
terminalCommandDecoration.errorBackground #e38690
terminalCommandDecoration.successBackground #708b91
terminalCommandGuide.foreground #749392
terminalCursor.background #282430
terminalCursor.foreground #b4b0c2
terminalOverviewRuler.border #1d1a2300
terminalOverviewRuler.cursorForeground #564f6480
terminalOverviewRuler.findMatchForeground #bfa481
terminalStickyScroll.background #1d1a23
terminalStickyScroll.border #1d1a2300
terminalStickyScrollHover.background #564f644d
testing.coverCountBadgeBackground #b4b0c2
testing.coverCountBadgeForeground #1d1a23
testing.coveredBackground #363b2b4d
testing.coveredBorder #1d1a2300
testing.coveredGutterBackground #363b2b4d
testing.iconErrored #ff9d80
testing.iconErrored.retired #ff9d80
testing.iconFailed #ff9d80
testing.iconFailed.retired #ff9d80
testing.iconPassed #8fabc8
testing.iconPassed.retired #8fabc8
testing.iconQueued #a8a4c8
testing.iconQueued.retired #a8a4c8
testing.iconSkipped #ffd462
testing.iconSkipped.retired #ffd462
testing.iconUnset #9a92a8
testing.iconUnset.retired #9a92a8
testing.message.error.decorationForeground #ff9d80
testing.message.error.lineBackground #ff9d80
testing.message.info.decorationForeground #8fabc8
testing.message.info.lineBackground #8fabc8
testing.messagePeekBorder #54515e
testing.messagePeekHeaderBackground #1d1a2300
testing.peekBorder #54515e
testing.peekHeaderBackground #1d1a2300
testing.runAction #8fabc8
testing.uncoveredBackground #572c324d
testing.uncoveredBorder #1d1a2300
testing.uncoveredBranchBackground #572c324d
testing.uncoveredGutterBackground #572c324d
textBlockQuote.background #282430
textBlockQuote.border #54515e
textCodeBlock.background #282430
textLink.activeForeground #8fabc8
textLink.foreground #7790a8
textPreformat.background #282430
textPreformat.foreground #e5afa9
textSeparator.foreground #564f64
titleBar.activeBackground #1d1a23
titleBar.activeForeground #b4b0c2
titleBar.border #54515e
titleBar.inactiveBackground #1d1a23
titleBar.inactiveForeground #b4b0c2
toolbar.activeBackground #564f6480
toolbar.hoverBackground #564f6480
toolbar.hoverOutline #1d1a2300
tree.inactiveIndentGuidesStroke #54515e
tree.indentGuidesStroke #564f64
tree.tableColumnsBorder #54515e
tree.tableOddRowsBackground #1d1a2300
walkThrough.embeddedEditorBackground #1d1a23
walkthrough.stepTitle.foreground #f5f4f8
welcomePage.background #1d1a23
welcomePage.progress.background #564f644d
welcomePage.progress.foreground #8fabc8
welcomePage.tileBackground #564f644d
welcomePage.tileBorder #1d1a2300
welcomePage.tileHoverBackground #564f6480
widget.border #54515e
widget.shadow #121017
window.activeBorder #1d1a2300
window.inactiveBorder #1d1a2300 #9a92a8
constant, support.constant, variable.arguments #f5f4f8 —
constant.rgb-value #f5f4f8 —
entity.name.selector #8BAFAE —
entity.name.tag, punctuation.tag #ff9d80 —
invalid, invalid.illegal #e38690 —
invalid.deprecated #8D88B6 —
meta.preprocessor #e6cbd3 —
meta.preprocessor.string #8fabc8 —
meta.preprocessor.numeric #8fabc8 —
storage, storage.type.function, keyword.control #8D88B6 —
support.type.property-name #749392 —
keyword.control.module #8BAFAE —
keyword.control.less #ffd462 —
keyword.operator.new #b4b0c2 —
keyword.other.unit #b4b0c2 —
support.function.git-rebase #749392 —
constant.sha.git-rebase #8fabc8 —
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class #ffd462 —
variable.this, support.variable #A8A4C8 —
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type #f5f4f8 —
entity.function, entity.name.function.static #8BAFAE —
entity.name.function.function-call #8BAFAE —
support.function.builtin #b4b0c2 —
entity.name.method, entity.name.method.function-call, entity.name.static.function-call #749392 —
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder #8FABC8 —
storage.type.class #ff9d80 —
punctuation, attribute_value, meta.tag.other #9a92a8 —
punctuation.quoted #f5f4f8 —
punctuation.quasi #ff9d80 —
*url*, *link*, *uri* — underline
source.python, meta.function-call.arguments #8FABC8 —
meta.function.python, entity.name.function.python #ffd462 —
storage.type.function.python, storage.modifier.declaration, storage.type.class.python #ff9d80 —
meta.function-call.generic #f5f4f8 —
entity.name.function.decorator #ffd462 bold
support.type.exception.python #b4b0c2 —
entity.name.command.shell, entity.name.function.call.shell #ffd462 —
keyword.operator.logical #9a92a8 —
punctuation.definition.logical-expression #e6cbd3 —
string.inperpolated.dollar.shell #e6cbd3 —
string.interpolated.dollar.shell, string.interpolated.backtick.shell #8BAFAE —
string.unquoted.argument.shell #f5f4f8 —
keyword.control.directive #8BAFAE —
support.function.C99 #ffd462 —
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs #8fabc8 —
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs #8BAFAE —
keyword.other.this.cs, keyword.other.base.cs #A8A4C8 —
meta.scope.prerequisites #ffd462 —
entity.name.function.target #8fabc8 bold
storage.modifier.import.java, storage.modifier.package.java #b4b0c2 —
keyword.other.import.java, keyword.other.package.java #8BAFAE —
storage.type.java #ffd462 —
storage.type.annotation #8FABC8 bold
keyword.other.documentation.javadoc #8BAFAE —
comment.block.javadoc variable.parameter.java #8fabc8 bold
source.java variable.other.object, source.java variable.other.definition.java #f5f4f8 —
meta.function-parameters.lisp #ffd462 —
markup.underline — underline
string.other.link.title.markdown #f5f4f8 —
markup.underline.link #A8A4C8 —
markup.heading.markdown, entity.name.section.markdown #e5afa9 —
support.function.text.markdown.notes.wiki-link.title, string.other.link #e6cbd3 —
markup.italic #ffd462 italic
markup.strikethrough.markdown, punctuation.definition.strikethrough.markdown #9a92a8 —
markup.inline.raw, markup.fenced_code.block #8fabc8 —
text.markdown.notes.tag #8FABC8 —
punctuation.definition.list.begin.markdown, markup.quote.markdown, punctuation.definition.heading.markdown, punctuation.definition.wiki-link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown #9a92a8 —
keyword.control.mermaid #A8A4C8 —
entity.name.type.class.mermaid #ffd462 —
storage.type.mermaid #8BAFAE —
entity.name.function.mermaid #e6cbd3 —
punctuation.parenthesis.open.mermaid #8fabc8 —
string.quoted.double.json #f5f4f8 —
source.json meta.structure.dictionary.json support.type.property-name.json #ff9d80 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #e6cbd3 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #ffd462 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #8fabc8 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #8FABC8 —
string.quoted.double.scss #e6cbd3 —
entity.other.attribute-name.class.css #ffd462 —
entity.name.tag.css #8fabc8 —
entity.name.tag.reference.scss, entity.name.tag.wildcard.scss, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.parent-selector-suffix.css, punctuation.definition.entity.css, source.css.scss, entity.name.tag.custom.scss #8BAFAE —
variable.css, variable.scss #8FABC8 —
support.type.property-name.css, meta.property-name.scss, support.type.property-name.media.css, source.css.scss #A8A4C8 —
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc, punctuation.definition.keyword.scss, keyword.control.at-rule.media.scss, keyword.control.at-rule.mixin.scss, keyword.control.else.scss, keyword.control.if.scss, keyword.control.content.scss, keyword.operator.logical.scss #e5afa9 —
punctuation.definition.tag #9a92a8 —
text.html punctuation.tag #ff9d80 —
string.quoted.double.html, string.quoted.double.xml, string.quoted.double.js #e5afa9 —
entity.other.attribute-name, entity.other.attribute-name.html #A8A4C8 —
entity.other.attribute-name.class.pug #ffd462 —
meta.directive.vue #8BAFAE —
source.js, source.ts #b4b0c2 —
entity.name.type.class.js #ffd462 —
variable.other.property.js #8BAFAE —
meta.object-literal.key.js #f5f4f8 —
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc #8D88B6 —
entity.name.type.instance.jsdoc #b4b0c2 —
variable.other.jsdoc #7790A8 —
source.go storage.type #ffd462 —
source.go entity.name.import #8fabc8 —
source.go keyword.package, source.go keyword.import #8BAFAE —
source.go keyword.interface, source.go keyword.struct #8FABC8 —
source.go entity.name.type #f5f4f8 —
source.go entity.name.function #A8A4C8 —
keyword.control.cucumber.table #8FABC8 —
source.reason string.double, source.reason string.regexp #8fabc8 —
source.reason keyword.control.less #8BAFAE —
source.reason entity.name.function #8FABC8 —
source.reason support.property-value, source.reason entity.name.filename #e6cbd3 —
source.powershell variable.other.member.powershell #e6cbd3 —
source.powershell support.function.powershell #ffd462 —
source.powershell support.function.attribute.powershell #b4b0c2 —
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell #e6cbd3 —
token.error-token #F44747 —
token.debug-token #B267E6 —
export interface User {
id : string ;
name : string ;
role : " admin " | " member " ;
tags : string[] ;
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( ` /api/users/ ${ id }` , {
method : " GET " ,
headers : { Accept : " application/json " },
} ) ;
if ( ! response . ok ) {
throw new Error ( ` HTTP ${ response . status }` ) ;
}
return ( await response . json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return ` Hello, ${ user . name } ! ` ;
}
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
README.md
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
31
32
33
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 $
package.json
tsconfig.json
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 } ! ` ;
}