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 #bc2cbf activityBar.activeBackground #82fd05 activityBar.activeBorder #109a6b activityBar.activeFocusBorder #d6248d activityBar.background #e4c75d activityBar.border #589ece 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 2
activityBar.dropBorder
#c9f811
activityBar.foreground #952f40
activityBar.inactiveForeground #711df2
activityBarBadge.background #27bc6f
activityBarBadge.foreground #fc31a4
activityBarTop.activeBorder #4b44fd
activityBarTop.dropBorder #52342d
activityBarTop.foreground #200090
activityBarTop.inactiveForeground #6d9cf9
badge.background #8b3382
badge.foreground #794188
banner.background #f88b11
banner.foreground #a18cc2
banner.iconForeground #33ec0b
breadcrumb.activeSelectionForeground #d625d2
breadcrumb.background #9a5eb9
breadcrumb.focusForeground #367305
breadcrumb.foreground #8bcb69
breadcrumbPicker.background #a32522
button.background #f14455
button.border #469880
button.foreground #5fa241
button.hoverBackground #63ac0b
button.secondaryBackground #0318fd
button.secondaryForeground #60ca58
button.secondaryHoverBackground #9c0e9a
button.separator #0fe369
charts.blue #e52d7d
charts.foreground #252c04
charts.green #d879d5
charts.lines #5cbe2a
charts.orange #5fce48
charts.purple #6e0250
charts.red #2e0dc5
charts.yellow #0c2242
chat.avatarBackground #b4a585
chat.avatarForeground #e1b3f2
chat.requestBackground #941245
chat.requestBorder #9086e8
chat.slashCommandBackground #51b99c
chat.slashCommandForeground #0ed3c3
checkbox.background #6426bf
checkbox.border #169ec3
checkbox.foreground #76b70f
checkbox.selectBackground #80e61b
checkbox.selectBorder #c25b12
commandCenter.activeBackground #f81b07
commandCenter.activeBorder #f94327
commandCenter.activeForeground #88ddac
commandCenter.background #8231ee
commandCenter.border #5dae41
commandCenter.debuggingBackground #871fcc
commandCenter.foreground #44af35
commandCenter.inactiveBorder #3a7e38
commandCenter.inactiveForeground #71123f
commentsView.resolvedIcon #a0c7e2
commentsView.unresolvedIcon #706296
contrastActiveBorder #60aec9
contrastBorder #ea9736
debugConsole.errorForeground #f426d6
debugConsole.infoForeground #741589
debugConsole.sourceForeground #9078a4
debugConsole.warningForeground #82038c
debugConsoleInputIcon.foreground #de6d1e
debugExceptionWidget.background #d95dc2
debugExceptionWidget.border #4704b7
debugIcon.breakpointCurrentStackframeForeground #95582c
debugIcon.breakpointDisabledForeground #1e451a
debugIcon.breakpointForeground #44dca4
debugIcon.breakpointStackframeForeground #ea7698
debugIcon.breakpointUnverifiedForeground #d4da7d
debugIcon.continueForeground #5f3e80
debugIcon.disconnectForeground #45a0a0
debugIcon.pauseForeground #14e6b0
debugIcon.restartForeground #de2ec1
debugIcon.startForeground #ce3279
debugIcon.stepBackForeground #d710f6
debugIcon.stepIntoForeground #5bf791
debugIcon.stepOutForeground #0c0ed5
debugIcon.stepOverForeground #bb674d
debugIcon.stopForeground #73a909
debugTokenExpression.boolean #544e17
debugTokenExpression.error #3df547
debugTokenExpression.name #99a0b0
debugTokenExpression.number #d71899
debugTokenExpression.string #3956f2
debugTokenExpression.value #b2c30f
debugToolBar.background #26447e
debugToolBar.border #b37912
debugView.exceptionLabelBackground #e389a0
debugView.exceptionLabelForeground #7db79f
debugView.stateLabelBackground #c21092
debugView.stateLabelForeground #435a36
debugView.valueChangedHighlight #8d43db
descriptionForeground #5f6898
diffEditor.border #740808
diffEditor.diagonalFill #a3f4cc
diffEditor.insertedLineBackground #66b1c1
diffEditor.insertedTextBackground #289e9f
diffEditor.insertedTextBorder #9f9efe
diffEditor.move.border #578443
diffEditor.moveActive.border #26a4e5
diffEditor.removedLineBackground #53cb8b
diffEditor.removedTextBackground #c47d94
diffEditor.removedTextBorder #603000
diffEditor.unchangedCodeBackground #4e081a
diffEditor.unchangedRegionBackground #65fb06
diffEditor.unchangedRegionForeground #5d45e7
diffEditor.unchangedRegionShadow #90cbad
diffEditorGutter.insertedLineBackground #671c74
diffEditorGutter.removedLineBackground #303d5b
diffEditorOverview.insertedForeground #7fc452
diffEditorOverview.removedForeground #b37ad6
disabledForeground #c9be5e
dropdown.background #e92082
dropdown.border #ed63bc
dropdown.foreground #b3a272
dropdown.listBackground #ac10f6
editor.background #eb7b1a
editor.findMatchBackground #a84060
editor.findMatchBorder #d8a66b
editor.findMatchHighlightBackground #9f1203
editor.findMatchHighlightBorder #d65564
editor.findRangeHighlightBackground #d8fc62
editor.findRangeHighlightBorder #e480d5
editor.focusedStackFrameHighlightBackground #8acf0f
editor.foldBackground #f0f636
editor.foreground #3bfee7
editor.hoverHighlightBackground #f768d0
editor.inactiveSelectionBackground #66c27c
editor.inlineValuesBackground #e39bd3
editor.inlineValuesForeground #ca60ed
editor.lineHighlightBackground #2bfd8e
editor.lineHighlightBorder #39225e
editor.linkedEditingBackground #444fe2
editor.rangeHighlightBackground #667272
editor.rangeHighlightBorder #3334d7
editor.selectionBackground #846633
editor.selectionForeground #3755aa
editor.selectionHighlightBackground #311d2e
editor.selectionHighlightBorder #1cbf20
editor.snippetFinalTabstopHighlightBackground #f5de05
editor.snippetFinalTabstopHighlightBorder #213a23
editor.snippetTabstopHighlightBackground #b3e74f
editor.snippetTabstopHighlightBorder #e09004
editor.stackFrameHighlightBackground #5ebeea
editor.symbolHighlightBackground #d6ae4a
editor.symbolHighlightBorder #cc8fba
editor.wordHighlightBackground #58301d
editor.wordHighlightBorder #93e151
editor.wordHighlightStrongBackground #81ddfc
editor.wordHighlightStrongBorder #54264c
editor.wordHighlightTextBackground #42d0e2
editor.wordHighlightTextBorder #29437f
editorBracketHighlight.foreground1 #f47e74
editorBracketHighlight.foreground2 #4dd153
editorBracketHighlight.foreground3 #00283b
editorBracketHighlight.foreground4 #65754d
editorBracketHighlight.foreground5 #36029f
editorBracketHighlight.foreground6 #9148b3
editorBracketHighlight.unexpectedBracket.foreground #cb642b
editorBracketMatch.background #3bad9a
editorBracketMatch.border #d94fda
editorBracketPairGuide.activeBackground1 #1e47cb
editorBracketPairGuide.activeBackground2 #68d411
editorBracketPairGuide.activeBackground3 #b2cd6e
editorBracketPairGuide.activeBackground4 #982543
editorBracketPairGuide.activeBackground5 #aa0501
editorBracketPairGuide.activeBackground6 #1bda8b
editorBracketPairGuide.background1 #743487
editorBracketPairGuide.background2 #93e7fa
editorBracketPairGuide.background3 #aa2ad0
editorBracketPairGuide.background4 #28a616
editorBracketPairGuide.background5 #6417dd
editorBracketPairGuide.background6 #fd2b1a
editorCodeLens.foreground #2b05c0
editorCommentsWidget.rangeActiveBackground #fa09e3
editorCommentsWidget.rangeBackground #1d98a0
editorCommentsWidget.replyInputBackground #83877d
editorCommentsWidget.resolvedBorder #32c2f3
editorCommentsWidget.unresolvedBorder #439a69
editorCursor.background #c2c098
editorCursor.foreground #74c78f
editorError.background #f2bef0
editorError.border #fd9cc2
editorError.foreground #881ef4
editorGhostText.background #a13025
editorGhostText.border #6911f7
editorGhostText.foreground #035e0a
editorGroup.border #0c9965
editorGroup.dropBackground #b0227a
editorGroup.dropIntoPromptBackground #581fcb
editorGroup.dropIntoPromptBorder #4f7555
editorGroup.dropIntoPromptForeground #787dd9
editorGroup.emptyBackground #46fd05
editorGroup.focusedEmptyBorder #29bd8c
editorGroupHeader.border #4dcb59
editorGroupHeader.noTabsBackground #b8f329
editorGroupHeader.tabsBackground #078882
editorGroupHeader.tabsBorder #e0ace6
editorGutter.addedBackground #82e983
editorGutter.background #2662dd
editorGutter.commentGlyphForeground #d0ac95
editorGutter.commentRangeForeground #1d5acd
editorGutter.commentUnresolvedGlyphForeground #3677be
editorGutter.deletedBackground #91bbc2
editorGutter.foldingControlForeground #a0fe45
editorGutter.modifiedBackground #506510
editorHint.border #670cb5
editorHint.foreground #7cf535
editorHoverWidget.background #c927f7
editorHoverWidget.border #7e5a84
editorHoverWidget.foreground #5ec9f1
editorHoverWidget.highlightForeground #25538d
editorHoverWidget.statusBarBackground #38d0c8
editorIndentGuide.activeBackground #4f0f61
editorIndentGuide.background #980ef9
editorInfo.background #8cd1b1
editorInfo.border #9d5dfe
editorInfo.foreground #4c20eb
editorInlayHint.background #857d09
editorInlayHint.foreground #2528d7
editorInlayHint.parameterBackground #b47562
editorInlayHint.parameterForeground #872246
editorInlayHint.typeBackground #4b39d4
editorInlayHint.typeForeground #1401f1
editorLightBulb.foreground #95cef6
editorLightBulbAi.foreground #7b844b
editorLightBulbAutoFix.foreground #ee319b
editorLineNumber.activeForeground #fbc5e9
editorLineNumber.dimmedForeground #3edd5a
editorLineNumber.foreground #0d7612
editorLink.activeForeground #42298e
editorMarkerNavigation.background #8c2ed5
editorMarkerNavigationError.background #944fda
editorMarkerNavigationError.headerBackground #65eae2
editorMarkerNavigationInfo.background #123892
editorMarkerNavigationInfo.headerBackground #6bf554
editorMarkerNavigationWarning.background #f26b8a
editorMarkerNavigationWarning.headerBackground #eb3323
editorOverviewRuler.addedForeground #922857
editorOverviewRuler.background #fd2304
editorOverviewRuler.border #2afc6c
editorOverviewRuler.bracketMatchForeground #3a1e0e
editorOverviewRuler.commentForeground #f92e8f
editorOverviewRuler.commentUnresolvedForeground #c10fbf
editorOverviewRuler.commonContentForeground #a735b4
editorOverviewRuler.currentContentForeground #a9ee70
editorOverviewRuler.deletedForeground #b780de
editorOverviewRuler.errorForeground #54531c
editorOverviewRuler.findMatchForeground #c8c3eb
editorOverviewRuler.incomingContentForeground #fbe323
editorOverviewRuler.infoForeground #d4a6cf
editorOverviewRuler.inlineChatInserted #4edf10
editorOverviewRuler.inlineChatRemoved #fafb60
editorOverviewRuler.modifiedForeground #e3f3cb
editorOverviewRuler.rangeHighlightForeground #c67e5f
editorOverviewRuler.selectionHighlightForeground #fe7b4c
editorOverviewRuler.warningForeground #e7049d
editorOverviewRuler.wordHighlightForeground #7aba74
editorOverviewRuler.wordHighlightStrongForeground #413ef8
editorOverviewRuler.wordHighlightTextForeground #a2b3ca
editorPane.background #d79dd7
editorRuler.foreground #a825f7
editorStickyScroll.background #32bf16
editorStickyScroll.border #06fb76
editorStickyScroll.shadow #cdf015
editorStickyScrollHover.background #26499f
editorSuggestWidget.background #a731f6
editorSuggestWidget.border #613e1e
editorSuggestWidget.focusHighlightForeground #8285b8
editorSuggestWidget.foreground #65caed
editorSuggestWidget.highlightForeground #7f77f7
editorSuggestWidget.selectedBackground #7aec38
editorSuggestWidget.selectedForeground #fbdbc3
editorSuggestWidget.selectedIconForeground #1c8fdf
editorSuggestWidgetStatus.foreground #5fe852
editorUnicodeHighlight.background #5684e3
editorUnicodeHighlight.border #aab330
editorUnnecessaryCode.border #df42aa
editorUnnecessaryCode.opacity #ad6c3d
editorWarning.background #b133a6
editorWarning.border #3b562c
editorWarning.foreground #689264
editorWatermark.foreground #54a08d
editorWhitespace.foreground #e44ae8
editorWidget.background #f6307f
editorWidget.border #7a3b80
editorWidget.foreground #53335b
editorWidget.resizeBorder #ea490e
errorForeground #37a7b8
extensionBadge.remoteBackground #212f4e
extensionBadge.remoteForeground #cfbe37
extensionButton.background #cc5317
extensionButton.foreground #95d6c1
extensionButton.hoverBackground #018417
extensionButton.prominentBackground #5dd2c2
extensionButton.prominentForeground #58f39a
extensionButton.prominentHoverBackground #623af0
extensionButton.separator #e27809
extensionIcon.preReleaseForeground #564b74
extensionIcon.sponsorForeground #7935c8
extensionIcon.starForeground #e295a0
extensionIcon.verifiedForeground #7d497b
focusBorder #e3996b
foreground #fd95ae
gitDecoration.addedResourceForeground #79457c
gitDecoration.conflictingResourceForeground #b9ef12
gitDecoration.deletedResourceForeground #f3ace0
gitDecoration.ignoredResourceForeground #59b51a
gitDecoration.modifiedResourceForeground #e74af1
gitDecoration.renamedResourceForeground #aae643
gitDecoration.stageDeletedResourceForeground #850940
gitDecoration.stageModifiedResourceForeground #9bb8e4
gitDecoration.submoduleResourceForeground #838396
gitDecoration.untrackedResourceForeground #53da42
icon.foreground #ed2729
inlineChat.background #51743b
inlineChat.border #56df0b
inlineChat.regionHighlight #d5d599
inlineChat.shadow #197936
inlineChatDiff.inserted #45e32d
inlineChatDiff.removed #0c5ff5
inlineChatInput.background #d2a756
inlineChatInput.border #cb89a0
inlineChatInput.focusBorder #b2b794
inlineChatInput.placeholderForeground #16edf6
input.background #36329f
input.border #087dc8
input.foreground #10a58e
input.placeholderForeground #64ad16
inputOption.activeBackground #e44828
inputOption.activeBorder #764224
inputOption.activeForeground #1224e7
inputOption.hoverBackground #89fcf9
inputValidation.errorBackground #c7c097
inputValidation.errorBorder #832d20
inputValidation.errorForeground #7f5fa6
inputValidation.infoBackground #eb5989
inputValidation.infoBorder #72b832
inputValidation.infoForeground #64f69d
inputValidation.warningBackground #113555
inputValidation.warningBorder #37867d
inputValidation.warningForeground #f8633c
interactive.activeCodeBorder #0ec271
interactive.inactiveCodeBorder #0c7880
keybindingLabel.background #10e215
keybindingLabel.border #dea074
keybindingLabel.bottomBorder #e5f3e2
keybindingLabel.foreground #8f7187
keybindingTable.headerBackground #8f6c5e
keybindingTable.rowsBackground #678a2c
list.activeSelectionBackground #fd0b07
list.activeSelectionForeground #000d4a
list.activeSelectionIconForeground #78fd38
list.deemphasizedForeground #72d89a
list.dropBackground #8f2157
list.dropBetweenBackground #a5a169
list.errorForeground #4ac90f
list.filterMatchBackground #4b3be3
list.filterMatchBorder #efedbd
list.focusAndSelectionOutline #6b105d
list.focusBackground #568969
list.focusForeground #f44ed5
list.focusHighlightForeground #072ab4
list.focusOutline #c7d067
list.highlightForeground #d56d9c
list.hoverBackground #cff1d7
list.hoverForeground #190e94
list.inactiveFocusBackground #e1af5b
list.inactiveFocusOutline #ad09dd
list.inactiveSelectionBackground #cc98e4
list.inactiveSelectionForeground #990314
list.inactiveSelectionIconForeground #fe7413
list.invalidItemForeground #bd4a27
list.warningForeground #38840b
listFilterWidget.background #883194
listFilterWidget.noMatchesOutline #4644f3
listFilterWidget.outline #c0fa59
listFilterWidget.shadow #ea64f6
menu.background #e4be6d
menu.border #695364
menu.foreground #46052e
menu.selectionBackground #f3b304
menu.selectionBorder #3fd35e
menu.selectionForeground #3a346a
menu.separatorBackground #e07090
menubar.selectionBackground #f05237
menubar.selectionBorder #5e7bb4
menubar.selectionForeground #10acf5
merge.border #c3c6b1
merge.commonContentBackground #a0e2e8
merge.commonHeaderBackground #606dc3
merge.currentContentBackground #66531d
merge.currentHeaderBackground #93afbf
merge.incomingContentBackground #1c8d8e
merge.incomingHeaderBackground #663ec0
mergeEditor.change.background #6ce9e7
mergeEditor.change.word.background #fd417f
mergeEditor.changeBase.background #1549f3
mergeEditor.changeBase.word.background #872402
mergeEditor.conflict.handled.minimapOverViewRuler #473028
mergeEditor.conflict.handledFocused.border #5139d6
mergeEditor.conflict.handledUnfocused.border #30dc88
mergeEditor.conflict.input1.background #f0e3df
mergeEditor.conflict.input2.background #90c8a6
mergeEditor.conflict.unhandled.minimapOverViewRuler #7ce0a3
mergeEditor.conflict.unhandledFocused.border #4ac7bd
mergeEditor.conflict.unhandledUnfocused.border #30b8ae
mergeEditor.conflictingLines.background #66c018
minimap.background #ccb042
minimap.errorHighlight #6595e5
minimap.findMatchHighlight #c21c2b
minimap.foregroundOpacity #506e7b
minimap.infoHighlight #a8bf95
minimap.selectionHighlight #b3d625
minimap.selectionOccurrenceHighlight #d56cf1
minimap.warningHighlight #35a05c
minimapGutter.addedBackground #a8c8c4
minimapGutter.deletedBackground #3048c7
minimapGutter.modifiedBackground #5fbeb4
minimapSlider.activeBackground #492c28
minimapSlider.background #7d3359
minimapSlider.hoverBackground #d1f956
multiDiffEditor.background #8a1dbb
multiDiffEditor.border #c41ea8
multiDiffEditor.headerBackground #ae7890
notebook.cellBorderColor #2310de
notebook.cellEditorBackground #646f3a
notebook.cellHoverBackground #e61b9d
notebook.cellInsertionIndicator #e359e1
notebook.cellStatusBarItemHoverBackground #7bfd46
notebook.cellToolbarSeparator #0187cd
notebook.editorBackground #7aeddf
notebook.focusedCellBackground #b549e6
notebook.focusedCellBorder #55d7e0
notebook.focusedEditorBorder #db1b19
notebook.inactiveFocusedCellBorder #7cfde6
notebook.inactiveSelectedCellBorder #214722
notebook.outputContainerBackgroundColor #8b0980
notebook.outputContainerBorderColor #41fefe
notebook.selectedCellBackground #69b8d8
notebook.selectedCellBorder #b58802
notebook.symbolHighlightBackground #2cf18d
notebookEditorOverviewRuler.runningCellForeground #7fb22f
notebookScrollbarSlider.activeBackground #044053
notebookScrollbarSlider.background #4137c0
notebookScrollbarSlider.hoverBackground #44d767
notebookStatusErrorIcon.foreground #1b5e8b
notebookStatusRunningIcon.foreground #9fef7a
notebookStatusSuccessIcon.foreground #f55d2b
notificationCenter.border #99eff0
notificationCenterHeader.background #525e9a
notificationCenterHeader.foreground #8cf962
notificationLink.foreground #2b2715
notifications.background #ab0b71
notifications.border #0e85c1
notifications.foreground #f2a5ae
notificationsErrorIcon.foreground #d997c5
notificationsInfoIcon.foreground #0b2b96
notificationsWarningIcon.foreground #e0702c
notificationToast.border #604c82
outputView.background #4cfa2e
outputViewStickyScroll.background #f6ec16
panel.background #0b1aa3
panel.border #95d2c5
panel.dropBorder #084f2b
panelInput.border #1b78a4
panelSection.border #4a00d8
panelSection.dropBackground #c19731
panelSectionHeader.background #9075b3
panelSectionHeader.border #b0ab6a
panelSectionHeader.foreground #0a5673
panelTitle.activeBorder #c0cb6e
panelTitle.activeForeground #33892d
panelTitle.inactiveForeground #9321ad
peekView.border #064d80
peekViewEditor.background #122d67
peekViewEditor.matchHighlightBackground #6cf4d1
peekViewEditor.matchHighlightBorder #8f20d0
peekViewEditorGutter.background #1f2ef0
peekViewEditorStickyScroll.background #da5d73
peekViewResult.background #b4a6a8
peekViewResult.fileForeground #716f9c
peekViewResult.lineForeground #9b62ab
peekViewResult.matchHighlightBackground #992653
peekViewResult.selectionBackground #dbc6f0
peekViewResult.selectionForeground #fd4769
peekViewTitle.background #89accd
peekViewTitleDescription.foreground #7e4401
peekViewTitleLabel.foreground #17c6d3
pickerGroup.border #93c14e
pickerGroup.foreground #b1de28
ports.iconRunningProcessForeground #70b1a5
problemsErrorIcon.foreground #b89d33
problemsInfoIcon.foreground #763b07
problemsWarningIcon.foreground #591484
profileBadge.background #a65a97
profileBadge.foreground #cf5222
progressBar.background #d73a17
quickInput.background #9dcdad
quickInput.foreground #19e147
quickInputList.focusBackground #1d7fae
quickInputList.focusForeground #1a1823
quickInputList.focusIconForeground #cf2a04
quickInputTitle.background #8d6096
sash.hoverBorder #aa6990
scm.historyItemAdditionsForeground #043ce6
scm.historyItemDeletionsForeground #e14df5
scm.historyItemSelectedStatisticsBorder #09a5cc
scm.historyItemStatisticsBorder #dd4c1e
scrollbar.shadow #6b0f2e
scrollbarSlider.activeBackground #702b9a
scrollbarSlider.background #6c1c0e
scrollbarSlider.hoverBackground #df8695
searchEditor.findMatchBackground #72baa5
searchEditor.findMatchBorder #3e9375
selection.background #70855a
settings.checkbox.selectBackground #3a5b62
settings.checkbox.selectBorder #a9f80b
settings.checkboxBackground #415036
settings.checkboxBorder #d10ea6
settings.checkboxForeground #559f62
settings.dropdownBackground #f2f3bd
settings.dropdownBorder #fc1590
settings.dropdownForeground #67bd66
settings.dropdownListBorder #df72ac
settings.focusedRowBackground #1e023a
settings.focusedRowBorder #6457b9
settings.headerBorder #21f2c9
settings.headerForeground #816ca0
settings.modifiedItemIndicator #292958
settings.numberInputBackground #3af81a
settings.numberInputBorder #bd911a
settings.numberInputForeground #9d34b4
settings.rowHoverBackground #3ef443
settings.sashBorder #78f1f3
settings.settingsHeaderHoverForeground #d51a94
settings.textInputBackground #b27a2f
settings.textInputBorder #761ade
settings.textInputForeground #1c9936
sideBar.background #3a4867
sideBar.border #3abd3b
sideBar.foreground #50aad0
sideBarSectionHeader.background #bd9d80
sideBarSectionHeader.border #908b25
sideBarSectionHeader.foreground #1e54b4
sideBySideEditor.horizontalBorder #fb6cc6
sideBySideEditor.verticalBorder #bf0416
simpleFindWidget.sashBorder #5ab95f
statusBar.background #5a1e60
statusBar.border #03d5a8
statusBar.debuggingBackground #c9c3f6
statusBar.debuggingBorder #897333
statusBar.debuggingForeground #724749
statusBar.focusBorder #fd50bf
statusBar.foreground #42e335
statusBar.noFolderBackground #fe3ec5
statusBar.noFolderBorder #04ccab
statusBar.noFolderForeground #977b49
statusBarItem.activeBackground #f98336
statusBarItem.compactHoverBackground #90cf42
statusBarItem.errorBackground #dd8fef
statusBarItem.errorForeground #1c45a0
statusBarItem.errorHoverBackground #eec326
statusBarItem.errorHoverForeground #63b49b
statusBarItem.focusBorder #78e587
statusBarItem.hoverBackground #9026b8
statusBarItem.hoverForeground #7fe935
statusBarItem.offlineBackground #f8d6f4
statusBarItem.offlineForeground #37fac6
statusBarItem.offlineHoverBackground #de351e
statusBarItem.offlineHoverForeground #a9e181
statusBarItem.prominentBackground #1318a9
statusBarItem.prominentForeground #4a3f46
statusBarItem.prominentHoverBackground #5fca62
statusBarItem.prominentHoverForeground #aa2674
statusBarItem.remoteBackground #40673b
statusBarItem.remoteForeground #2a461e
statusBarItem.remoteHoverBackground #4016d5
statusBarItem.remoteHoverForeground #f4ab70
statusBarItem.warningBackground #b21416
statusBarItem.warningForeground #88dc18
statusBarItem.warningHoverBackground #9c7814
statusBarItem.warningHoverForeground #0d4986
symbolIcon.arrayForeground #9475d5
symbolIcon.booleanForeground #cd2520
symbolIcon.classForeground #1563c1
symbolIcon.colorForeground #3898bd
symbolIcon.constantForeground #ae20c8
symbolIcon.constructorForeground #55ad69
symbolIcon.enumeratorForeground #731c02
symbolIcon.enumeratorMemberForeground #189a68
symbolIcon.eventForeground #fde897
symbolIcon.fieldForeground #19d08a
symbolIcon.fileForeground #8253eb
symbolIcon.folderForeground #affa01
symbolIcon.functionForeground #f710d2
symbolIcon.interfaceForeground #8b34c7
symbolIcon.keyForeground #527e5a
symbolIcon.keywordForeground #bb0414
symbolIcon.methodForeground #a8fb62
symbolIcon.moduleForeground #a9634c
symbolIcon.namespaceForeground #6a62ee
symbolIcon.nullForeground #55a209
symbolIcon.numberForeground #549a43
symbolIcon.objectForeground #beaf39
symbolIcon.operatorForeground #887367
symbolIcon.packageForeground #72081d
symbolIcon.propertyForeground #346f60
symbolIcon.referenceForeground #c83703
symbolIcon.snippetForeground #518c4c
symbolIcon.stringForeground #97795a
symbolIcon.structForeground #e78798
symbolIcon.textForeground #33d9f0
symbolIcon.typeParameterForeground #cf5c26
symbolIcon.unitForeground #f1b4ba
symbolIcon.variableForeground #3e78f2
tab.activeBackground #45134c
tab.activeBorder #1e554c
tab.activeBorderTop #3997e9
tab.activeForeground #a0ea68
tab.activeModifiedBorder #81b9b0
tab.border #e0a9e0
tab.dragAndDropBorder #46bf84
tab.hoverBackground #d6e642
tab.hoverBorder #35e047
tab.hoverForeground #fe7b06
tab.inactiveBackground #8009ec
tab.inactiveForeground #61837d
tab.inactiveModifiedBorder #235168
tab.lastPinnedBorder #e37cd2
tab.unfocusedActiveBackground #6743d8
tab.unfocusedActiveBorder #1db735
tab.unfocusedActiveBorderTop #1493c6
tab.unfocusedActiveForeground #d33930
tab.unfocusedActiveModifiedBorder #9ead65
tab.unfocusedHoverBackground #34d063
tab.unfocusedHoverBorder #d1eff5
tab.unfocusedHoverForeground #928f4e
tab.unfocusedInactiveBackground #72cb3e
tab.unfocusedInactiveForeground #6da035
tab.unfocusedInactiveModifiedBorder #199952
terminal.ansiBlack #c9618e
terminal.ansiBlue #d8ee39
terminal.ansiBrightBlack #525afb
terminal.ansiBrightBlue #d613ef
terminal.ansiBrightCyan #4a45ed
terminal.ansiBrightGreen #80f551
terminal.ansiBrightMagenta #c21f13
terminal.ansiBrightRed #d6488e
terminal.ansiBrightWhite #087ca7
terminal.ansiBrightYellow #69fb25
terminal.ansiCyan #942e2b
terminal.ansiGreen #b1e524
terminal.ansiMagenta #aafa90
terminal.ansiRed #0ba566
terminal.ansiWhite #ed0156
terminal.ansiYellow #15aa0a
terminal.background #b5783e
terminal.border #f2d64a
terminal.dropBackground #e718f1
terminal.findMatchBackground #c42cf6
terminal.findMatchBorder #e251c8
terminal.findMatchHighlightBackground #52f106
terminal.findMatchHighlightBorder #7f495a
terminal.foreground #205f38
terminal.hoverHighlightBackground #e483c4
terminal.inactiveSelectionBackground #9e88b2
terminal.selectionBackground #b8f915
terminal.selectionForeground #e8cd92
terminal.tab.activeBorder #432959
terminalCommandDecoration.defaultBackground #e8c270
terminalCommandDecoration.errorBackground #bb4c20
terminalCommandDecoration.successBackground #f6b626
terminalCursor.background #0a4c13
terminalCursor.foreground #e17ce7
terminalOverviewRuler.cursorForeground #74e493
terminalOverviewRuler.findMatchForeground #cda6f7
terminalStickyScroll.background #4bcadc
terminalStickyScrollHover.background #42ca57
testing.coverCountBadgeBackground #176308
testing.coverCountBadgeForeground #c6e1b6
testing.coveredBackground #c8f2c6
testing.coveredBorder #b883c4
testing.coveredGutterBackground #f7e3aa
testing.iconErrored #0b9d16
testing.iconFailed #4271e9
testing.iconPassed #f53244
testing.iconQueued #ec599a
testing.iconSkipped #93cecd
testing.iconUnset #e05584
testing.message.error.decorationForeground #7351ea
testing.message.error.lineBackground #4edd64
testing.message.info.decorationForeground #fc98d0
testing.message.info.lineBackground #d552ea
testing.messagePeekBorder #f518f7
testing.messagePeekHeaderBackground #4ce5c0
testing.peekBorder #bfaf9a
testing.peekHeaderBackground #31ea98
testing.runAction #6849c9
testing.uncoveredBackground #c06ee4
testing.uncoveredBorder #d4ec4d
testing.uncoveredBranchBackground #527c47
testing.uncoveredGutterBackground #990bce
textBlockQuote.background #74d07b
textBlockQuote.border #811443
textCodeBlock.background #d9dbf6
textLink.activeForeground #425370
textLink.foreground #245511
textPreformat.background #f17c40
textPreformat.foreground #6351e4
textSeparator.foreground #f524b5
titleBar.activeBackground #446e57
titleBar.activeForeground #968136
titleBar.border #a2e5b9
titleBar.inactiveBackground #760d4c
titleBar.inactiveForeground #56c30a
toolbar.activeBackground #306199
toolbar.hoverBackground #632d46
toolbar.hoverOutline #da67df
tree.inactiveIndentGuidesStroke #a76b86
tree.indentGuidesStroke #87560a
tree.tableColumnsBorder #39ed40
tree.tableOddRowsBackground #daf5d8
walkThrough.embeddedEditorBackground #167731
walkthrough.stepTitle.foreground #5c372d
welcomePage.background #bcd60e
welcomePage.progress.background #78d957
welcomePage.progress.foreground #996cfe
welcomePage.tileBackground #7c0479
welcomePage.tileBorder #606105
welcomePage.tileHoverBackground #2dd0fa
widget.border #6bed6e
widget.shadow #1a81c0
window.activeBorder #86d52c
window.inactiveBorder #62bbb2 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 }!` ;
}