Skip to main content
Home Theme VS Code Random Color Theme Dynamically generates a new color theme for your VS Code editor every 4 minutes and 20 seconds.
Random Color 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 #55d704 activityBar.activeBackground #5f7e16 activityBar.activeBorder #16bb8e activityBar.activeFocusBorder #515c51 activityBar.background #32e50d activityBar.border #95f440 tokenColors TextMate scopes and font styles (syntax highlighting rules).
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Random Color Theme — Random Color Theme 1
activityBar.dropBorder
#da0a3f
activityBar.foreground #5d2fde
activityBar.inactiveForeground #b8e234
activityBarBadge.background #5a1f7b
activityBarBadge.foreground #2ca2f6
activityBarTop.activeBorder #a76fe9
activityBarTop.dropBorder #fcbad1
activityBarTop.foreground #9889a6
activityBarTop.inactiveForeground #92aade
badge.background #d6248f
badge.foreground #713db5
banner.background #f10366
banner.foreground #a4a44f
banner.iconForeground #91d142
breadcrumb.activeSelectionForeground #c8a1b0
breadcrumb.background #f1973e
breadcrumb.focusForeground #cf4294
breadcrumb.foreground #1db793
breadcrumbPicker.background #91a95b
button.background #62abf0
button.border #ac7a6f
button.foreground #7f8a05
button.hoverBackground #5e67b6
button.secondaryBackground #96a543
button.secondaryForeground #201ea8
button.secondaryHoverBackground #f99404
button.separator #e8f8cc
charts.blue #2641ce
charts.foreground #fd4a94
charts.green #c19b08
charts.lines #b13c28
charts.orange #d7ba14
charts.purple #427469
charts.red #9c8317
charts.yellow #328c47
chat.avatarBackground #3bdf80
chat.avatarForeground #06e03f
chat.requestBackground #c0ba17
chat.requestBorder #6630fa
chat.slashCommandBackground #a75bd5
chat.slashCommandForeground #135cda
checkbox.background #7ddb6c
checkbox.border #51d489
checkbox.foreground #d0fe6b
checkbox.selectBackground #9075fa
checkbox.selectBorder #3b2713
commandCenter.activeBackground #5bc335
commandCenter.activeBorder #e93a3b
commandCenter.activeForeground #f068ce
commandCenter.background #affa5b
commandCenter.border #8581aa
commandCenter.debuggingBackground #ea6260
commandCenter.foreground #ac6168
commandCenter.inactiveBorder #5af4ae
commandCenter.inactiveForeground #a236a0
commentsView.resolvedIcon #17411d
commentsView.unresolvedIcon #6f3968
contrastActiveBorder #7913ad
contrastBorder #c4123a
debugConsole.errorForeground #e41e50
debugConsole.infoForeground #503d24
debugConsole.sourceForeground #1a8a29
debugConsole.warningForeground #c7d1bd
debugConsoleInputIcon.foreground #b05a60
debugExceptionWidget.background #ad2ba8
debugExceptionWidget.border #656aca
debugIcon.breakpointCurrentStackframeForeground #4320cc
debugIcon.breakpointDisabledForeground #4bb42f
debugIcon.breakpointForeground #9147a5
debugIcon.breakpointStackframeForeground #43f91d
debugIcon.breakpointUnverifiedForeground #0a55b8
debugIcon.continueForeground #bfc59f
debugIcon.disconnectForeground #1647e8
debugIcon.pauseForeground #fdfc40
debugIcon.restartForeground #1ca01b
debugIcon.startForeground #2c0120
debugIcon.stepBackForeground #a3326b
debugIcon.stepIntoForeground #6ccaa6
debugIcon.stepOutForeground #268ed2
debugIcon.stepOverForeground #55cc22
debugIcon.stopForeground #e5168d
debugTokenExpression.boolean #030c40
debugTokenExpression.error #abf18a
debugTokenExpression.name #b58234
debugTokenExpression.number #262147
debugTokenExpression.string #62e571
debugTokenExpression.value #11cfeb
debugToolBar.background #766168
debugToolBar.border #45fb03
debugView.exceptionLabelBackground #a0ea41
debugView.exceptionLabelForeground #7e6d00
debugView.stateLabelBackground #6a0ef6
debugView.stateLabelForeground #287be5
debugView.valueChangedHighlight #e57436
descriptionForeground #1591ef
diffEditor.border #e4883c
diffEditor.diagonalFill #f65dde
diffEditor.insertedLineBackground #1b4476
diffEditor.insertedTextBackground #178b53
diffEditor.insertedTextBorder #55734a
diffEditor.move.border #193ee2
diffEditor.moveActive.border #b62675
diffEditor.removedLineBackground #f2827b
diffEditor.removedTextBackground #f6e5d8
diffEditor.removedTextBorder #a20dea
diffEditor.unchangedCodeBackground #109c84
diffEditor.unchangedRegionBackground #12582c
diffEditor.unchangedRegionForeground #613af1
diffEditor.unchangedRegionShadow #f846fb
diffEditorGutter.insertedLineBackground #2a7fea
diffEditorGutter.removedLineBackground #7a392b
diffEditorOverview.insertedForeground #627e61
diffEditorOverview.removedForeground #0e13d2
disabledForeground #080427
dropdown.background #e586dd
dropdown.border #7a1c8d
dropdown.foreground #7e7102
dropdown.listBackground #015da6
editor.background #d85544
editor.findMatchBackground #97b6b8
editor.findMatchBorder #5fe0fa
editor.findMatchHighlightBackground #5b7cf1
editor.findMatchHighlightBorder #7efa0e
editor.findRangeHighlightBackground #7c2844
editor.findRangeHighlightBorder #023ea8
editor.focusedStackFrameHighlightBackground #d046c5
editor.foldBackground #e037ab
editor.foreground #182e8d
editor.hoverHighlightBackground #970d48
editor.inactiveSelectionBackground #109672
editor.inlineValuesBackground #c3b44b
editor.inlineValuesForeground #f166cb
editor.lineHighlightBackground #8f0b07
editor.lineHighlightBorder #d5c2f5
editor.linkedEditingBackground #28aef0
editor.rangeHighlightBackground #9ab8fb
editor.rangeHighlightBorder #61b6a0
editor.selectionBackground #aa1be7
editor.selectionForeground #284eec
editor.selectionHighlightBackground #24e68a
editor.selectionHighlightBorder #bf9697
editor.snippetFinalTabstopHighlightBackground #32441b
editor.snippetFinalTabstopHighlightBorder #a4d564
editor.snippetTabstopHighlightBackground #732722
editor.snippetTabstopHighlightBorder #dff01c
editor.stackFrameHighlightBackground #b5137d
editor.symbolHighlightBackground #468d60
editor.symbolHighlightBorder #79c506
editor.wordHighlightBackground #406407
editor.wordHighlightBorder #11417a
editor.wordHighlightStrongBackground #c1fafb
editor.wordHighlightStrongBorder #c3bd0c
editor.wordHighlightTextBackground #50dd25
editor.wordHighlightTextBorder #4abf99
editorBracketHighlight.foreground1 #d174a9
editorBracketHighlight.foreground2 #417aba
editorBracketHighlight.foreground3 #2f1118
editorBracketHighlight.foreground4 #8fd9d5
editorBracketHighlight.foreground5 #8879f5
editorBracketHighlight.foreground6 #9f3468
editorBracketHighlight.unexpectedBracket.foreground #a84a14
editorBracketMatch.background #9f1ee4
editorBracketMatch.border #49e09b
editorBracketPairGuide.activeBackground1 #96e8c2
editorBracketPairGuide.activeBackground2 #e9a843
editorBracketPairGuide.activeBackground3 #db5bcd
editorBracketPairGuide.activeBackground4 #0113a4
editorBracketPairGuide.activeBackground5 #c73d29
editorBracketPairGuide.activeBackground6 #c3dce9
editorBracketPairGuide.background1 #04cfbc
editorBracketPairGuide.background2 #683602
editorBracketPairGuide.background3 #057469
editorBracketPairGuide.background4 #5eb417
editorBracketPairGuide.background5 #2b34e1
editorBracketPairGuide.background6 #602792
editorCodeLens.foreground #5a5c55
editorCommentsWidget.rangeActiveBackground #96bf63
editorCommentsWidget.rangeBackground #1c2a12
editorCommentsWidget.replyInputBackground #ec18c8
editorCommentsWidget.resolvedBorder #4f5a86
editorCommentsWidget.unresolvedBorder #4e4b04
editorCursor.background #63b363
editorCursor.foreground #2754a2
editorError.background #074adc
editorError.border #5d93ca
editorError.foreground #e24e4b
editorGhostText.background #967b4c
editorGhostText.border #d982fb
editorGhostText.foreground #6a1158
editorGroup.border #d8c575
editorGroup.dropBackground #aaca66
editorGroup.dropIntoPromptBackground #0318ce
editorGroup.dropIntoPromptBorder #80cafe
editorGroup.dropIntoPromptForeground #0a7a3a
editorGroup.emptyBackground #890585
editorGroup.focusedEmptyBorder #12224f
editorGroupHeader.border #2f0a69
editorGroupHeader.noTabsBackground #404bc2
editorGroupHeader.tabsBackground #837b7d
editorGroupHeader.tabsBorder #b4c935
editorGutter.addedBackground #b5d4df
editorGutter.background #374fd2
editorGutter.commentGlyphForeground #b5a17a
editorGutter.commentRangeForeground #bae12b
editorGutter.commentUnresolvedGlyphForeground #39d9ed
editorGutter.deletedBackground #5a79dd
editorGutter.foldingControlForeground #5202cb
editorGutter.modifiedBackground #7c6ec6
editorHint.border #d6b55c
editorHint.foreground #eb2179
editorHoverWidget.background #a93c06
editorHoverWidget.border #746185
editorHoverWidget.foreground #42ca2d
editorHoverWidget.highlightForeground #43eac4
editorHoverWidget.statusBarBackground #fdf134
editorIndentGuide.activeBackground #df29f9
editorIndentGuide.background #ad41eb
editorInfo.background #13126d
editorInfo.border #f91416
editorInfo.foreground #c6c59a
editorInlayHint.background #db88ac
editorInlayHint.foreground #314c3f
editorInlayHint.parameterBackground #5a8cd0
editorInlayHint.parameterForeground #5331f1
editorInlayHint.typeBackground #c967bc
editorInlayHint.typeForeground #66ceba
editorLightBulb.foreground #29b1db
editorLightBulbAi.foreground #6ed3b6
editorLightBulbAutoFix.foreground #3cf681
editorLineNumber.activeForeground #3abdee
editorLineNumber.dimmedForeground #a9d61b
editorLineNumber.foreground #558314
editorLink.activeForeground #d731df
editorMarkerNavigation.background #2cf91b
editorMarkerNavigationError.background #2ed06b
editorMarkerNavigationError.headerBackground #b39648
editorMarkerNavigationInfo.background #10ac14
editorMarkerNavigationInfo.headerBackground #287729
editorMarkerNavigationWarning.background #973cee
editorMarkerNavigationWarning.headerBackground #368442
editorOverviewRuler.addedForeground #6cfad0
editorOverviewRuler.background #e9e1e2
editorOverviewRuler.border #ee64db
editorOverviewRuler.bracketMatchForeground #e111eb
editorOverviewRuler.commentForeground #110b8a
editorOverviewRuler.commentUnresolvedForeground #dc618c
editorOverviewRuler.commonContentForeground #6acefd
editorOverviewRuler.currentContentForeground #810ae7
editorOverviewRuler.deletedForeground #fa0758
editorOverviewRuler.errorForeground #9f3ef8
editorOverviewRuler.findMatchForeground #50b4de
editorOverviewRuler.incomingContentForeground #e52355
editorOverviewRuler.infoForeground #422097
editorOverviewRuler.inlineChatInserted #c6c480
editorOverviewRuler.inlineChatRemoved #9a630f
editorOverviewRuler.modifiedForeground #ee3c99
editorOverviewRuler.rangeHighlightForeground #26dfd1
editorOverviewRuler.selectionHighlightForeground #6ded3e
editorOverviewRuler.warningForeground #b2766a
editorOverviewRuler.wordHighlightForeground #30790a
editorOverviewRuler.wordHighlightStrongForeground #b66455
editorOverviewRuler.wordHighlightTextForeground #7dea58
editorPane.background #0bb595
editorRuler.foreground #2002c0
editorStickyScroll.background #f8b7ba
editorStickyScroll.border #106cd7
editorStickyScroll.shadow #6554ec
editorStickyScrollHover.background #0b5831
editorSuggestWidget.background #5de615
editorSuggestWidget.border #1b26fc
editorSuggestWidget.focusHighlightForeground #154f66
editorSuggestWidget.foreground #e3fa3c
editorSuggestWidget.highlightForeground #382637
editorSuggestWidget.selectedBackground #f83150
editorSuggestWidget.selectedForeground #728e17
editorSuggestWidget.selectedIconForeground #1a6549
editorSuggestWidgetStatus.foreground #147ca6
editorUnicodeHighlight.background #19bbfb
editorUnicodeHighlight.border #1db5c3
editorUnnecessaryCode.border #573907
editorUnnecessaryCode.opacity #700694
editorWarning.background #cc2183
editorWarning.border #f8003c
editorWarning.foreground #2cbf1e
editorWatermark.foreground #cf2ea4
editorWhitespace.foreground #50efcb
editorWidget.background #086297
editorWidget.border #149ce4
editorWidget.foreground #e24fec
editorWidget.resizeBorder #efdf65
errorForeground #fbe06d
extensionBadge.remoteBackground #c67654
extensionBadge.remoteForeground #5784dd
extensionButton.background #daa5c2
extensionButton.foreground #42d358
extensionButton.hoverBackground #c698aa
extensionButton.prominentBackground #86abd1
extensionButton.prominentForeground #5a4345
extensionButton.prominentHoverBackground #f672b9
extensionButton.separator #c61e68
extensionIcon.preReleaseForeground #215e01
extensionIcon.sponsorForeground #4f14ed
extensionIcon.starForeground #e4b1fc
extensionIcon.verifiedForeground #384ffc
focusBorder #20474a
foreground #a44e0d
gitDecoration.addedResourceForeground #85d246
gitDecoration.conflictingResourceForeground #bfb029
gitDecoration.deletedResourceForeground #467df0
gitDecoration.ignoredResourceForeground #e46577
gitDecoration.modifiedResourceForeground #f62d39
gitDecoration.renamedResourceForeground #78d8e9
gitDecoration.stageDeletedResourceForeground #2f4cd4
gitDecoration.stageModifiedResourceForeground #2849dd
gitDecoration.submoduleResourceForeground #753949
gitDecoration.untrackedResourceForeground #9cdc9d
icon.foreground #e401bb
inlineChat.background #1af44e
inlineChat.border #ec5cb5
inlineChat.regionHighlight #ee31fe
inlineChat.shadow #7333fe
inlineChatDiff.inserted #b4fe59
inlineChatDiff.removed #0f021d
inlineChatInput.background #f21522
inlineChatInput.border #c627db
inlineChatInput.focusBorder #5a8ed2
inlineChatInput.placeholderForeground #2a41cc
input.background #c34b2b
input.border #88f65c
input.foreground #639163
input.placeholderForeground #ed2966
inputOption.activeBackground #979289
inputOption.activeBorder #60c77a
inputOption.activeForeground #1cc186
inputOption.hoverBackground #21bc29
inputValidation.errorBackground #e1eab2
inputValidation.errorBorder #57f4e3
inputValidation.errorForeground #329358
inputValidation.infoBackground #144905
inputValidation.infoBorder #49f9d6
inputValidation.infoForeground #9a0ee6
inputValidation.warningBackground #633afc
inputValidation.warningBorder #844d1f
inputValidation.warningForeground #c2782e
interactive.activeCodeBorder #832898
interactive.inactiveCodeBorder #07dbf3
keybindingLabel.background #da87c5
keybindingLabel.border #b2e6d6
keybindingLabel.bottomBorder #c5aa96
keybindingLabel.foreground #6d72ae
keybindingTable.headerBackground #7566ce
keybindingTable.rowsBackground #f71ad1
list.activeSelectionBackground #7c7e35
list.activeSelectionForeground #96d235
list.activeSelectionIconForeground #3ec852
list.deemphasizedForeground #3200fa
list.dropBackground #5efea3
list.dropBetweenBackground #6dab47
list.errorForeground #8be38f
list.filterMatchBackground #c2ac5a
list.filterMatchBorder #9bbf69
list.focusAndSelectionOutline #0438e0
list.focusBackground #6f68ce
list.focusForeground #247e63
list.focusHighlightForeground #5fd998
list.focusOutline #86b2a9
list.highlightForeground #612bac
list.hoverBackground #ba0d6a
list.hoverForeground #9d322e
list.inactiveFocusBackground #b7de62
list.inactiveFocusOutline #c60db3
list.inactiveSelectionBackground #10262a
list.inactiveSelectionForeground #aa0b36
list.inactiveSelectionIconForeground #893964
list.invalidItemForeground #f94fc2
list.warningForeground #afcae8
listFilterWidget.background #6134e9
listFilterWidget.noMatchesOutline #5fe610
listFilterWidget.outline #c829d3
listFilterWidget.shadow #9a6632
menu.background #c527ad
menu.border #2ca4c7
menu.foreground #fb11e5
menu.selectionBackground #7624b2
menu.selectionBorder #f8691c
menu.selectionForeground #64adaf
menu.separatorBackground #91a325
menubar.selectionBackground #5a5660
menubar.selectionBorder #d19ccd
menubar.selectionForeground #bd38ab
merge.border #3eb047
merge.commonContentBackground #8ea22c
merge.commonHeaderBackground #3601f4
merge.currentContentBackground #3becbf
merge.currentHeaderBackground #50e166
merge.incomingContentBackground #25cbd5
merge.incomingHeaderBackground #640a6e
mergeEditor.change.background #0803fe
mergeEditor.change.word.background #1e3193
mergeEditor.changeBase.background #80d523
mergeEditor.changeBase.word.background #21b0a4
mergeEditor.conflict.handled.minimapOverViewRuler #1cf980
mergeEditor.conflict.handledFocused.border #eff05f
mergeEditor.conflict.handledUnfocused.border #2b8187
mergeEditor.conflict.input1.background #602e9a
mergeEditor.conflict.input2.background #12c165
mergeEditor.conflict.unhandled.minimapOverViewRuler #28fc55
mergeEditor.conflict.unhandledFocused.border #c74d26
mergeEditor.conflict.unhandledUnfocused.border #0dd114
mergeEditor.conflictingLines.background #e39cba
minimap.background #3c2931
minimap.errorHighlight #c7c754
minimap.findMatchHighlight #d50795
minimap.foregroundOpacity #4591cb
minimap.infoHighlight #7cf24e
minimap.selectionHighlight #08050d
minimap.selectionOccurrenceHighlight #7cea74
minimap.warningHighlight #5f2c59
minimapGutter.addedBackground #52f445
minimapGutter.deletedBackground #0db52a
minimapGutter.modifiedBackground #b2d6ef
minimapSlider.activeBackground #8e4825
minimapSlider.background #5a3d53
minimapSlider.hoverBackground #d2e249
multiDiffEditor.background #de225a
multiDiffEditor.border #cfe106
multiDiffEditor.headerBackground #bcbbbb
notebook.cellBorderColor #339162
notebook.cellEditorBackground #4b6396
notebook.cellHoverBackground #ae5dfb
notebook.cellInsertionIndicator #ba2c78
notebook.cellStatusBarItemHoverBackground #0629c8
notebook.cellToolbarSeparator #04388e
notebook.editorBackground #5a4fba
notebook.focusedCellBackground #1a7761
notebook.focusedCellBorder #58c6e8
notebook.focusedEditorBorder #c897a7
notebook.inactiveFocusedCellBorder #7d0404
notebook.inactiveSelectedCellBorder #85c14a
notebook.outputContainerBackgroundColor #415079
notebook.outputContainerBorderColor #f02676
notebook.selectedCellBackground #092f90
notebook.selectedCellBorder #7c9bed
notebook.symbolHighlightBackground #fcd8d5
notebookEditorOverviewRuler.runningCellForeground #514400
notebookScrollbarSlider.activeBackground #824857
notebookScrollbarSlider.background #77300e
notebookScrollbarSlider.hoverBackground #b3f9be
notebookStatusErrorIcon.foreground #11e636
notebookStatusRunningIcon.foreground #4b0687
notebookStatusSuccessIcon.foreground #dd940e
notificationCenter.border #972c8f
notificationCenterHeader.background #cace1c
notificationCenterHeader.foreground #059b4d
notificationLink.foreground #3b6af5
notifications.background #969371
notifications.border #8e3b3f
notifications.foreground #9be296
notificationsErrorIcon.foreground #3f3297
notificationsInfoIcon.foreground #b7b2d1
notificationsWarningIcon.foreground #03a484
notificationToast.border #d0dee5
outputView.background #1aa12d
outputViewStickyScroll.background #be2b94
panel.background #3e4f25
panel.border #a901f3
panel.dropBorder #7a93bc
panelInput.border #935e70
panelSection.border #d4387a
panelSection.dropBackground #8c3886
panelSectionHeader.background #c151ab
panelSectionHeader.border #b99fb9
panelSectionHeader.foreground #151ae6
panelTitle.activeBorder #e1c1a9
panelTitle.activeForeground #28d32a
panelTitle.inactiveForeground #20851b
peekView.border #a853a0
peekViewEditor.background #06f864
peekViewEditor.matchHighlightBackground #67c3fe
peekViewEditor.matchHighlightBorder #2081e3
peekViewEditorGutter.background #764a63
peekViewEditorStickyScroll.background #d7b000
peekViewResult.background #a22c7b
peekViewResult.fileForeground #f1c5ec
peekViewResult.lineForeground #8d17c7
peekViewResult.matchHighlightBackground #c77aa9
peekViewResult.selectionBackground #de4b18
peekViewResult.selectionForeground #7ac1d9
peekViewTitle.background #110761
peekViewTitleDescription.foreground #91fa15
peekViewTitleLabel.foreground #77a54b
pickerGroup.border #da4110
pickerGroup.foreground #113849
ports.iconRunningProcessForeground #5a1b7c
problemsErrorIcon.foreground #386d18
problemsInfoIcon.foreground #2267e4
problemsWarningIcon.foreground #a719b6
profileBadge.background #04e8db
profileBadge.foreground #3f265a
progressBar.background #2fa9dc
quickInput.background #5593b7
quickInput.foreground #c9d28a
quickInputList.focusBackground #671907
quickInputList.focusForeground #19aa98
quickInputList.focusIconForeground #9779cf
quickInputTitle.background #73114a
sash.hoverBorder #8d205e
scm.historyItemAdditionsForeground #6a2180
scm.historyItemDeletionsForeground #919605
scm.historyItemSelectedStatisticsBorder #2f1c8e
scm.historyItemStatisticsBorder #2a47bc
scrollbar.shadow #20693d
scrollbarSlider.activeBackground #df10fa
scrollbarSlider.background #c204be
scrollbarSlider.hoverBackground #561d42
searchEditor.findMatchBackground #658fc0
searchEditor.findMatchBorder #a360e7
selection.background #e0b361
settings.checkbox.selectBackground #c74afc
settings.checkbox.selectBorder #11b3da
settings.checkboxBackground #52c296
settings.checkboxBorder #6c5bac
settings.checkboxForeground #6919ca
settings.dropdownBackground #f62590
settings.dropdownBorder #be03ed
settings.dropdownForeground #362b08
settings.dropdownListBorder #d9d2e4
settings.focusedRowBackground #3ad2aa
settings.focusedRowBorder #936cf7
settings.headerBorder #963bc4
settings.headerForeground #6c87d7
settings.modifiedItemIndicator #d3238c
settings.numberInputBackground #3ec311
settings.numberInputBorder #617919
settings.numberInputForeground #f82b88
settings.rowHoverBackground #92061b
settings.sashBorder #dc697b
settings.settingsHeaderHoverForeground #694a69
settings.textInputBackground #36994d
settings.textInputBorder #cb2a99
settings.textInputForeground #78f5ce
sideBar.background #724bbc
sideBar.border #be50a2
sideBar.foreground #6bb7a7
sideBarSectionHeader.background #c53c8b
sideBarSectionHeader.border #c38a3b
sideBarSectionHeader.foreground #942c4a
sideBySideEditor.horizontalBorder #32e851
sideBySideEditor.verticalBorder #705c64
simpleFindWidget.sashBorder #9a1b4d
statusBar.background #e48059
statusBar.border #7243a6
statusBar.debuggingBackground #171985
statusBar.debuggingBorder #58de18
statusBar.debuggingForeground #8649c3
statusBar.focusBorder #b72e4c
statusBar.foreground #c16714
statusBar.noFolderBackground #2a06d1
statusBar.noFolderBorder #037030
statusBar.noFolderForeground #50f445
statusBarItem.activeBackground #ea6064
statusBarItem.compactHoverBackground #cee18b
statusBarItem.errorBackground #03c8d9
statusBarItem.errorForeground #ded82c
statusBarItem.errorHoverBackground #3ec36e
statusBarItem.errorHoverForeground #170b14
statusBarItem.focusBorder #981d23
statusBarItem.hoverBackground #dd91c2
statusBarItem.hoverForeground #9cbb6d
statusBarItem.offlineBackground #fb919e
statusBarItem.offlineForeground #4c2118
statusBarItem.offlineHoverBackground #f999c2
statusBarItem.offlineHoverForeground #73b3bf
statusBarItem.prominentBackground #c9dd77
statusBarItem.prominentForeground #a84223
statusBarItem.prominentHoverBackground #c2d468
statusBarItem.prominentHoverForeground #a9efdc
statusBarItem.remoteBackground #3102d2
statusBarItem.remoteForeground #78e19f
statusBarItem.remoteHoverBackground #5e1823
statusBarItem.remoteHoverForeground #6f2c08
statusBarItem.warningBackground #d940e5
statusBarItem.warningForeground #24675d
statusBarItem.warningHoverBackground #22a24a
statusBarItem.warningHoverForeground #7707bf
symbolIcon.arrayForeground #acd4cf
symbolIcon.booleanForeground #03955b
symbolIcon.classForeground #927519
symbolIcon.colorForeground #28e628
symbolIcon.constantForeground #c5fa03
symbolIcon.constructorForeground #a5be53
symbolIcon.enumeratorForeground #51ce26
symbolIcon.enumeratorMemberForeground #927eec
symbolIcon.eventForeground #fdfafd
symbolIcon.fieldForeground #a72703
symbolIcon.fileForeground #f7405d
symbolIcon.folderForeground #1a3d14
symbolIcon.functionForeground #2f86b3
symbolIcon.interfaceForeground #26f307
symbolIcon.keyForeground #b21147
symbolIcon.keywordForeground #242207
symbolIcon.methodForeground #806255
symbolIcon.moduleForeground #b5ca03
symbolIcon.namespaceForeground #cd2533
symbolIcon.nullForeground #2b7413
symbolIcon.numberForeground #f7fa04
symbolIcon.objectForeground #e74001
symbolIcon.operatorForeground #04b51e
symbolIcon.packageForeground #a04889
symbolIcon.propertyForeground #a41805
symbolIcon.referenceForeground #a1612b
symbolIcon.snippetForeground #82b45a
symbolIcon.stringForeground #492845
symbolIcon.structForeground #7d74de
symbolIcon.textForeground #201a4e
symbolIcon.typeParameterForeground #9b06d7
symbolIcon.unitForeground #92ac16
symbolIcon.variableForeground #b70080
tab.activeBackground #020817
tab.activeBorder #7679b0
tab.activeBorderTop #f58d97
tab.activeForeground #0d0a51
tab.activeModifiedBorder #83ba77
tab.border #c92544
tab.dragAndDropBorder #2d9938
tab.hoverBackground #b57598
tab.hoverBorder #7929e8
tab.hoverForeground #e4c792
tab.inactiveBackground #5f1ef3
tab.inactiveForeground #bcb161
tab.inactiveModifiedBorder #a0707f
tab.lastPinnedBorder #f6e7b0
tab.unfocusedActiveBackground #fe8041
tab.unfocusedActiveBorder #491f27
tab.unfocusedActiveBorderTop #fd1890
tab.unfocusedActiveForeground #518d43
tab.unfocusedActiveModifiedBorder #7ab139
tab.unfocusedHoverBackground #598d04
tab.unfocusedHoverBorder #b62199
tab.unfocusedHoverForeground #7f3d50
tab.unfocusedInactiveBackground #a9f8e0
tab.unfocusedInactiveForeground #b73d70
tab.unfocusedInactiveModifiedBorder #4c8a48
terminal.ansiBlack #30b227
terminal.ansiBlue #bc54f0
terminal.ansiBrightBlack #0f5030
terminal.ansiBrightBlue #ab111b
terminal.ansiBrightCyan #253648
terminal.ansiBrightGreen #b593fd
terminal.ansiBrightMagenta #dc3189
terminal.ansiBrightRed #bd0929
terminal.ansiBrightWhite #4fe351
terminal.ansiBrightYellow #bc7d31
terminal.ansiCyan #b950a4
terminal.ansiGreen #8c0224
terminal.ansiMagenta #cca1db
terminal.ansiRed #536999
terminal.ansiWhite #6fc18b
terminal.ansiYellow #d1055b
terminal.background #734a0b
terminal.border #81c761
terminal.dropBackground #32a5ee
terminal.findMatchBackground #6e54c7
terminal.findMatchBorder #2b0f97
terminal.findMatchHighlightBackground #a99a05
terminal.findMatchHighlightBorder #1e6da9
terminal.foreground #5d09a1
terminal.hoverHighlightBackground #04f404
terminal.inactiveSelectionBackground #7dcc04
terminal.selectionBackground #b4bc18
terminal.selectionForeground #786814
terminal.tab.activeBorder #706537
terminalCommandDecoration.defaultBackground #e1f5ee
terminalCommandDecoration.errorBackground #606591
terminalCommandDecoration.successBackground #ba8a4c
terminalCursor.background #d5dec5
terminalCursor.foreground #62a3e7
terminalOverviewRuler.cursorForeground #6eb103
terminalOverviewRuler.findMatchForeground #64a6b0
terminalStickyScroll.background #1057f4
terminalStickyScrollHover.background #19ace6
testing.coverCountBadgeBackground #15d58b
testing.coverCountBadgeForeground #fae7eb
testing.coveredBackground #77876b
testing.coveredBorder #0042c8
testing.coveredGutterBackground #a2c3e8
testing.iconErrored #80a7d4
testing.iconFailed #a49d4a
testing.iconPassed #6a75a3
testing.iconQueued #f9ef8a
testing.iconSkipped #426a07
testing.iconUnset #a5f928
testing.message.error.decorationForeground #0db9ed
testing.message.error.lineBackground #2d696a
testing.message.info.decorationForeground #de66f7
testing.message.info.lineBackground #04503b
testing.messagePeekBorder #ec9cc3
testing.messagePeekHeaderBackground #fe10a1
testing.peekBorder #b61ecd
testing.peekHeaderBackground #ae52e5
testing.runAction #030a12
testing.uncoveredBackground #d8fdea
testing.uncoveredBorder #eeb309
testing.uncoveredBranchBackground #b87352
testing.uncoveredGutterBackground #a9971b
textBlockQuote.background #bd0e26
textBlockQuote.border #b65bb6
textCodeBlock.background #8c7a0e
textLink.activeForeground #59dd8b
textLink.foreground #32847a
textPreformat.background #7e4c5e
textPreformat.foreground #0999b9
textSeparator.foreground #3753d8
titleBar.activeBackground #840922
titleBar.activeForeground #4fb14a
titleBar.border #4df209
titleBar.inactiveBackground #9a8695
titleBar.inactiveForeground #9b88d7
toolbar.activeBackground #575ae1
toolbar.hoverBackground #985336
toolbar.hoverOutline #e945cd
tree.inactiveIndentGuidesStroke #d79767
tree.indentGuidesStroke #d860ec
tree.tableColumnsBorder #ec3dbc
tree.tableOddRowsBackground #0e8d4c
walkThrough.embeddedEditorBackground #888c1f
walkthrough.stepTitle.foreground #a73e35
welcomePage.background #86dbc8
welcomePage.progress.background #a1bfd9
welcomePage.progress.foreground #683734
welcomePage.tileBackground #010e8c
welcomePage.tileBorder #a922af
welcomePage.tileHoverBackground #87b05c
widget.border #f2bbe1
widget.shadow #17b038
window.activeBorder #2554f9
window.inactiveBorder #cf7d7c 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
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...
main*
Button.tsx
fetchUser
31
~/my-project
$
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 }!` ;
}