Skip to main content
Home Theme VS Code Banjo Loans A bold VS Code colour theme featuring electric blue accents and deep purple backgrounds, inspired by the Banjo Loans visual identity. Built and published by Lucid Labs on behalf of Banjo Loans. All trademarks belong to their respective owners.
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 #0039F630 activityBar.activeBackground #0039F615 activityBar.activeBorder #0039F6 activityBar.activeFocusBorder #0039F6 activityBar.background #F4F4F8 activityBar.border #0039F630 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #636363 italic variable, string constant.other.placeholder #111111 — constant.other.color #0039F6 — invalid, invalid.illegal #D43030 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
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}!`;
}
Banjo Loans — Banjo Light main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Light+
Banjo Loans | Coding Theme
activityBar.dropBorder #0039F6
activityBar.foreground #111111
activityBar.inactiveForeground #11111170
activityBarBadge.background #0039F6
activityBarBadge.foreground #FFFFFF
activityBarTop.activeBackground #0039F615
activityBarTop.activeBorder #0039F6
activityBarTop.background #F4F4F8
activityBarTop.dropBorder #0039F6
activityBarTop.foreground #111111
activityBarTop.inactiveForeground #11111170
activityErrorBadge.background #D43030
activityErrorBadge.foreground #FFFFFF
activityWarningBadge.background #A85020
activityWarningBadge.foreground #FFFFFF
agentSessionReadIndicator.foreground #0039F6
agentSessionSelectedBadge.border #0039F640
agentSessionSelectedUnfocusedBadge.border #11111140
agentStatusIndicator.background #F4F4F8
aiCustomizationManagement.sashBorder #0039F6
badge.background #0039F6
badge.foreground #FFFFFF
banner.background #0039F6
banner.foreground #FFFFFF
banner.iconForeground #FFFFFF
breadcrumb.activeSelectionForeground #0039F6
breadcrumb.background #FFFFFF
breadcrumb.focusForeground #111111
breadcrumb.foreground #636363
breadcrumbPicker.background #FFFFFF
button.background #0039F6
button.border #0039F600
button.foreground #FFFFFF
button.hoverBackground #0030D0
button.secondaryBackground #F4F4F8
button.secondaryBorder #0039F640
button.secondaryForeground #111111
button.secondaryHoverBackground #E8E8F0
button.separator #FFFFFF40
charts.blue #0039F6
charts.foreground #111111
charts.green #2E8B30
charts.lines #636363
charts.orange #A85020
charts.purple #0039F6
charts.red #D43030
charts.yellow #A85020
chat.avatarBackground #0039F6
chat.avatarForeground #FFFFFF
chat.checkpointSeparator #0039F630
chat.editedFileForeground #0039F6
chat.inputWorkingBorderColor1 #0039F6
chat.inputWorkingBorderColor2 #0030D0
chat.inputWorkingBorderColor3 #0039F6
chat.linesAddedForeground #2E8B30CC
chat.linesRemovedForeground #D43030CC
chat.requestBackground #F4F4F8
chat.requestBorder #0039F630
chat.requestBubbleBackground #F4F4F8E6
chat.requestBubbleHoverBackground #E8E8F0E6
chat.requestCodeBorder #0039F620
chat.slashCommandBackground #0039F6
chat.slashCommandForeground #FFFFFF
chat.thinkingShimmer #0039F630
chatManagement.sashBorder #0039F6
checkbox.background #FFFFFF
checkbox.border #0039F650
checkbox.disabled.background #F4F4F8
checkbox.disabled.foreground #636363
checkbox.foreground #0039F6
checkbox.selectBackground #FFFFFF
checkbox.selectBorder #0039F6
commandCenter.activeBackground #11111125
commandCenter.activeBorder #11111150
commandCenter.activeForeground #111111
commandCenter.background #11111115
commandCenter.border #11111130
commandCenter.debuggingBackground #2E8B3020
commandCenter.foreground #111111
commandCenter.inactiveBorder #11111115
commandCenter.inactiveForeground #11111170
commentsView.resolvedIcon #2E8B30
commentsView.unresolvedIcon #A85020
contrastActiveBorder #0039F600
contrastBorder #0039F600
debugConsole.errorForeground #D43030
debugConsole.infoForeground #0039F6
debugConsole.sourceForeground #636363
debugConsole.warningForeground #A85020
debugConsoleInputIcon.foreground #0039F6
debugExceptionWidget.background #D4303015
debugExceptionWidget.border #D4303060
debugIcon.breakpointCurrentStackframeForeground #A85020
debugIcon.breakpointDisabledForeground #636363
debugIcon.breakpointForeground #D43030
debugIcon.breakpointStackframeForeground #2E8B30
debugIcon.breakpointUnverifiedForeground #A85020
debugIcon.continueForeground #2E8B30
debugIcon.disconnectForeground #D43030
debugIcon.pauseForeground #A85020
debugIcon.restartForeground #2E8B30
debugIcon.startForeground #2E8B30
debugIcon.stepBackForeground #0039F6
debugIcon.stepIntoForeground #0039F6
debugIcon.stepOutForeground #0039F6
debugIcon.stepOverForeground #0039F6
debugIcon.stopForeground #D43030
debugTokenExpression.boolean #A85020
debugTokenExpression.error #D43030
debugTokenExpression.name #0039F6
debugTokenExpression.number #A85020
debugTokenExpression.string #3D6B30
debugTokenExpression.type #0039F6
debugTokenExpression.value #3D6B30
debugToolBar.background #FFFFFF
debugView.exceptionLabelBackground #D43030
debugView.exceptionLabelForeground #FFFFFF
debugView.stateLabelBackground #0039F6
debugView.stateLabelForeground #FFFFFF
debugView.valueChangedHighlight #0039F660
descriptionForeground #636363
diffEditor.border #0039F620
diffEditor.diagonalFill #63636315
diffEditor.insertedLineBackground #2E8B3010
diffEditor.insertedTextBackground #2E8B3020
diffEditor.insertedTextBorder #2E8B3050
diffEditor.move.border #0039F660
diffEditor.moveActive.border #0039F6
diffEditor.removedLineBackground #D4303010
diffEditor.removedTextBackground #D4303020
diffEditor.removedTextBorder #D4303050
diffEditor.unchangedCodeBackground #FFFFFF80
diffEditor.unchangedRegionBackground #F4F4F8
diffEditor.unchangedRegionForeground #636363
diffEditor.unchangedRegionShadow #11111115
diffEditorGutter.insertedLineBackground #2E8B3020
diffEditorGutter.removedLineBackground #D4303020
diffEditorOverview.insertedForeground #2E8B3060
diffEditorOverview.removedForeground #D4303060
disabledForeground #636363
dropdown.background #FFFFFF
dropdown.border #0039F650
dropdown.foreground #111111
dropdown.listBackground #FFFFFF
editor.background #FFFFFF
editor.compositionBorder #0039F6
editor.findMatchBackground #0039F68050
editor.findMatchBorder #0039F680
editor.findMatchForeground #111111
editor.findMatchHighlightBackground #0039F68030
editor.findMatchHighlightBorder #0039F68060
editor.findMatchHighlightForeground #111111
editor.findRangeHighlightBackground #0039F615
editor.findRangeHighlightBorder #0039F600
editor.focusedStackFrameHighlightBackground #2E8B3020
editor.foldBackground #0039F610
editor.foldPlaceholderForeground #636363
editor.foreground #111111
editor.hoverHighlightBackground #0039F615
editor.inactiveLineHighlightBackground #F4F4F880
editor.inactiveSelectionBackground #0039F620
editor.inlineValuesBackground #0039F610
editor.inlineValuesForeground #636363
editor.lineHighlightBackground #F4F4F8
editor.lineHighlightBorder #0039F610
editor.linkedEditingBackground #0039F620
editor.placeholder.foreground #636363
editor.rangeHighlightBackground #0039F610
editor.rangeHighlightBorder #0039F600
editor.selectionBackground #0039F630
editor.selectionForeground #111111
editor.selectionHighlightBackground #0039F620
editor.selectionHighlightBorder #0039F640
editor.stackFrameHighlightBackground #A8502020
editor.symbolHighlightBackground #0039F620
editor.symbolHighlightBorder #0039F640
editor.wordHighlightBackground #0039F620
editor.wordHighlightBorder #0039F640
editor.wordHighlightStrongBackground #0039F630
editor.wordHighlightStrongBorder #0039F660
editor.wordHighlightTextBackground #0039F615
editor.wordHighlightTextBorder #0039F630
editorActionList.background #FFFFFF
editorActionList.focusBackground #0039F630
editorActionList.focusForeground #111111
editorActionList.foreground #111111
editorBracketHighlight.foreground1 #0039F6
editorBracketHighlight.foreground2 #D8613C
editorBracketHighlight.foreground3 #A85020
editorBracketHighlight.foreground4 #2E8B30
editorBracketHighlight.foreground5 #8B30A8
editorBracketHighlight.foreground6 #3D6B30
editorBracketHighlight.unexpectedBracket.foreground #D43030
editorBracketMatch.border #0039F660
editorBracketMatch.foreground #0039F6
editorBracketPairGuide.activeBackground1 #0039F680
editorBracketPairGuide.activeBackground2 #D8613C80
editorBracketPairGuide.activeBackground3 #A8502080
editorBracketPairGuide.activeBackground4 #2E8B3080
editorBracketPairGuide.activeBackground5 #8B30A880
editorBracketPairGuide.activeBackground6 #3D6B3080
editorBracketPairGuide.background1 #0039F640
editorBracketPairGuide.background2 #D8613C40
editorBracketPairGuide.background3 #A8502040
editorBracketPairGuide.background4 #2E8B3040
editorBracketPairGuide.background5 #8B30A840
editorBracketPairGuide.background6 #3D6B3040
editorCodeLens.foreground #636363
editorCommentsWidget.rangeActiveBackground #0039F615
editorCommentsWidget.rangeBackground #0039F608
editorCommentsWidget.replyInputBackground #FFFFFF
editorCommentsWidget.resolvedBorder #2E8B3050
editorCommentsWidget.unresolvedBorder #A85020
editorCursor.background #FFFFFF
editorCursor.foreground #0039F6
editorError.background #D4303010
editorError.border #D4303000
editorError.foreground #D43030
editorGhostText.background #0039F600
editorGhostText.border #0039F600
editorGhostText.foreground #11111166
editorGroup.border #0039F620
editorGroup.dropBackground #0039F620
editorGroup.dropIntoPromptBackground #FFFFFF
editorGroup.dropIntoPromptBorder #0039F650
editorGroup.dropIntoPromptForeground #111111
editorGroup.emptyBackground #FFFFFF
editorGroup.focusedEmptyBorder #0039F640
editorGroupHeader.border #0039F615
editorGroupHeader.noTabsBackground #FFFFFF
editorGroupHeader.tabsBackground #F4F4F8
editorGroupHeader.tabsBorder #0039F620
editorGutter.addedBackground #2E8B30
editorGutter.addedSecondaryBackground #2E8B3060
editorGutter.background #FFFFFF
editorGutter.commentDraftGlyphForeground #0039F680
editorGutter.commentGlyphForeground #0039F6
editorGutter.commentRangeForeground #63636340
editorGutter.commentUnresolvedGlyphForeground #A85020
editorGutter.deletedBackground #D43030
editorGutter.deletedSecondaryBackground #D4303060
editorGutter.foldingControlForeground #636363
editorGutter.itemBackground #FFFFFF
editorGutter.itemGlyphForeground #0039F6
editorGutter.modifiedBackground #30003C
editorGutter.modifiedSecondaryBackground #0039F660
editorHint.border #2E8B3000
editorHint.foreground #2E8B30
editorHoverWidget.background #FFFFFF
editorHoverWidget.border #0039F650
editorHoverWidget.foreground #111111
editorHoverWidget.highlightForeground #0039F6
editorHoverWidget.statusBarBackground #F4F4F8
editorIndentGuide.activeBackground1 #0039F6
editorIndentGuide.activeBackground2 #D8613C
editorIndentGuide.activeBackground3 #A85020
editorIndentGuide.activeBackground4 #2E8B30
editorIndentGuide.activeBackground5 #8B30A8
editorIndentGuide.activeBackground6 #3D6B30
editorIndentGuide.background1 #0039F620
editorIndentGuide.background2 #D8613C20
editorIndentGuide.background3 #A8502020
editorIndentGuide.background4 #2E8B3020
editorIndentGuide.background5 #8B30A820
editorIndentGuide.background6 #3D6B3020
editorInfo.background #0039F610
editorInfo.border #0039F600
editorInfo.foreground #0039F6
editorInlayHint.background #F4F4F8
editorInlayHint.foreground #11111170
editorInlayHint.parameterBackground #F4F4F8
editorInlayHint.parameterForeground #11111170
editorInlayHint.typeBackground #F4F4F8
editorInlayHint.typeForeground #111111
editorLightBulb.foreground #A85020
editorLightBulbAi.foreground #0039F6
editorLightBulbAutoFix.foreground #2E8B30
editorLineNumber.activeForeground #0039F6
editorLineNumber.dimmedForeground #63636350
editorLineNumber.foreground #0039F6
editorLink.activeForeground #0039F6
editorMarkerNavigation.background #FFFFFF
editorMarkerNavigationError.background #D4303020
editorMarkerNavigationError.headerBackground #D4303015
editorMarkerNavigationInfo.background #0039F620
editorMarkerNavigationInfo.headerBackground #0039F615
editorMarkerNavigationWarning.background #A8502020
editorMarkerNavigationWarning.headerBackground #A8502015
editorMinimap.inlineChatInserted #2E8B3030
editorMinimap.inlineChatRemoved #D4303030
editorMultiCursor.primary.background #FFFFFF
editorMultiCursor.primary.foreground #0039F6
editorMultiCursor.secondary.background #FFFFFF
editorMultiCursor.secondary.foreground #0039F6
editorOverviewRuler.addedForeground #2E8B30
editorOverviewRuler.background #FFFFFF
editorOverviewRuler.border #0039F620
editorOverviewRuler.bracketMatchForeground #0039F660
editorOverviewRuler.commentDraftForeground #0039F650
editorOverviewRuler.commentForeground #0039F630
editorOverviewRuler.commentUnresolvedForeground #A8502060
editorOverviewRuler.commonContentForeground #63636340
editorOverviewRuler.currentContentForeground #2E8B3060
editorOverviewRuler.deletedForeground #D43030
editorOverviewRuler.errorForeground #D43030
editorOverviewRuler.findMatchForeground #0039F6CC
editorOverviewRuler.incomingContentForeground #0039F660
editorOverviewRuler.infoForeground #0039F6
editorOverviewRuler.inlineChatInserted #2E8B3060
editorOverviewRuler.inlineChatRemoved #D4303060
editorOverviewRuler.modifiedForeground #0039F6
editorOverviewRuler.rangeHighlightForeground #0039F699
editorOverviewRuler.selectionHighlightForeground #0039F699
editorOverviewRuler.warningForeground #A85020
editorOverviewRuler.wordHighlightForeground #0039F699
editorOverviewRuler.wordHighlightStrongForeground #0039F6CC
editorOverviewRuler.wordHighlightTextForeground #0039F660
editorPane.background #FFFFFF
editorRuler.foreground #CCCCCC30
editorSnippetFinalTabstopHighlightBackground #2E8B3020
editorSnippetFinalTabstopHighlightBorder #2E8B3000
editorSnippetTabstopHighlightBackground #0039F620
editorSnippetTabstopHighlightBorder #0039F600
editorStickyScroll.background #F4F4F8
editorStickyScroll.border #0039F615
editorStickyScroll.shadow #11111115
editorStickyScrollGutter.background #F4F4F8
editorStickyScrollHover.background #E8E8F0
editorSuggestWidget.background #FFFFFF
editorSuggestWidget.border #0039F650
editorSuggestWidget.focusHighlightForeground #0039F6
editorSuggestWidget.foreground #111111
editorSuggestWidget.highlightForeground #0039F6
editorSuggestWidget.selectedBackground #0039F650
editorSuggestWidget.selectedForeground #111111
editorSuggestWidget.selectedIconForeground #111111
editorSuggestWidgetStatus.foreground #636363
editorUnicodeHighlight.background #A8502015
editorUnicodeHighlight.border #A85020
editorUnnecessaryCode.border #63636340
editorUnnecessaryCode.opacity #00000077
editorWarning.background #A8502010
editorWarning.border #A8502000
editorWarning.foreground #A85020
editorWhitespace.foreground #CCCCCC50
editorWidget.background #FFFFFF
editorWidget.border #0039F650
editorWidget.foreground #111111
editorWidget.resizeBorder #0039F6
errorForeground #D43030
extensionBadge.remoteBackground #0039F6
extensionBadge.remoteForeground #FFFFFF
extensionButton.background #0039F6
extensionButton.border #0039F600
extensionButton.foreground #FFFFFF
extensionButton.hoverBackground #0030D0
extensionButton.prominentBackground #0039F6
extensionButton.prominentForeground #FFFFFF
extensionButton.prominentHoverBackground #0030D0
extensionButton.separator #FFFFFF40
extensionIcon.preReleaseForeground #0039F6
extensionIcon.privateForeground #636363
extensionIcon.sponsorForeground #0039F6
extensionIcon.starForeground #A85020
extensionIcon.verifiedForeground #2E8B30
focusBorder #0039F6
foreground #111111
gauge.background #FFFFFF
gauge.border #0039F620
gauge.errorBackground #D4303020
gauge.errorForeground #D43030
gauge.foreground #111111
gauge.warningBackground #A8502020
gauge.warningForeground #A85020
git.blame.editorDecorationForeground #63636380
gitDecoration.addedResourceForeground #2E8B30
gitDecoration.conflictingResourceForeground #A85020
gitDecoration.deletedResourceForeground #D43030
gitDecoration.ignoredResourceForeground #636363
gitDecoration.modifiedResourceForeground #0039F6
gitDecoration.renamedResourceForeground #0039F6
gitDecoration.stageDeletedResourceForeground #D43030CC
gitDecoration.stageModifiedResourceForeground #0039F6CC
gitDecoration.submoduleResourceForeground #3D6B30
gitDecoration.untrackedResourceForeground #2E8B30
icon.foreground #0039F6
inlineChat.background #F4F4F8
inlineChat.border #0039F630
inlineChat.foreground #111111
inlineChat.shadow #11111120
inlineChatDiff.inserted #2E8B3020
inlineChatDiff.removed #D4303015
inlineChatInput.background #FFFFFF
inlineChatInput.border #0039F650
inlineChatInput.focusBorder #0039F6
inlineChatInput.placeholderForeground #11111170
inlineEdit.gutterIndicator.background #FFFFFF
inlineEdit.gutterIndicator.primaryBackground #0039F615
inlineEdit.gutterIndicator.primaryBorder #0039F6
inlineEdit.gutterIndicator.primaryForeground #0039F6
inlineEdit.gutterIndicator.secondaryBackground #0039F615
inlineEdit.gutterIndicator.secondaryBorder #0039F6
inlineEdit.gutterIndicator.secondaryForeground #0039F6
inlineEdit.gutterIndicator.successfulBackground #2E8B3015
inlineEdit.gutterIndicator.successfulBorder #2E8B30
inlineEdit.gutterIndicator.successfulForeground #2E8B30
inlineEdit.modifiedBackground #0039F610
inlineEdit.modifiedBorder #0039F640
inlineEdit.modifiedChangedLineBackground #0039F615
inlineEdit.modifiedChangedTextBackground #0039F625
inlineEdit.originalBackground #D4303008
inlineEdit.originalBorder #D4303025
inlineEdit.originalChangedLineBackground #D4303010
inlineEdit.originalChangedTextBackground #D4303020
inlineEdit.tabWillAcceptModifiedBorder #2E8B3060
inlineEdit.tabWillAcceptOriginalBorder #D4303040
input.background #FFFFFF
input.border #0039F650
input.foreground #111111
input.placeholderForeground #636363
inputOption.activeBackground #0039F630
inputOption.activeBorder #0039F6
inputOption.activeForeground #111111
inputOption.hoverBackground #0039F615
inputValidation.errorBackground #D4303015
inputValidation.errorBorder #D43030
inputValidation.errorForeground #D43030
inputValidation.infoBackground #0039F615
inputValidation.infoBorder #0039F6
inputValidation.infoForeground #0039F6
inputValidation.warningBackground #A8502015
inputValidation.warningBorder #A85020
inputValidation.warningForeground #A85020
interactive.activeCodeBorder #0039F6
interactive.inactiveCodeBorder #0039F620
keybindingLabel.background #0039F615
keybindingLabel.border #0039F630
keybindingLabel.bottomBorder #0039F650
keybindingLabel.foreground #111111
keybindingTable.headerBackground #F4F4F8
keybindingTable.rowsBackground #F4F4F880
list.activeSelectionBackground #0039F640
list.activeSelectionForeground #FFFFFF
list.activeSelectionIconForeground #FFFFFF
list.deemphasizedForeground #636363
list.dropBackground #0039F620
list.dropBetweenBackground #0039F6
list.errorForeground #D43030
list.filterMatchBorder #0039F660
list.focusAndSelectionOutline #0039F6
list.focusBackground #0039F630
list.focusForeground #111111
list.focusHighlightForeground #0039F6
list.focusOutline #0039F660
list.highlightForeground #0039F6
list.hoverBackground #0039F615
list.hoverForeground #111111
list.inactiveFocusBackground #0039F615
list.inactiveFocusOutline #0039F640
list.inactiveSelectionBackground #0039F620
list.inactiveSelectionForeground #111111
list.inactiveSelectionIconForeground #111111
list.invalidItemForeground #D43030
list.warningForeground #A85020
listFilterWidget.background #FFFFFF
listFilterWidget.noMatchesOutline #D43030
listFilterWidget.outline #0039F6
listFilterWidget.shadow #11111130
markdownAlert.caution.foreground #D43030
markdownAlert.important.foreground #0039F6
markdownAlert.note.foreground #0039F6
markdownAlert.tip.foreground #2E8B30
markdownAlert.warning.foreground #A85020
mcpIcon.starForeground #A85020
menu.background #FFFFFF
menu.border #0039F630
menu.foreground #111111
menu.selectionBackground #0039F630
menu.selectionBorder #0039F600
menu.selectionForeground #111111
menu.separatorBackground #0039F620
menubar.selectionBackground #0039F630
menubar.selectionBorder #0039F600
menubar.selectionForeground #111111
merge.border #0039F650
merge.commonContentBackground #63636315
merge.commonHeaderBackground #63636330
merge.currentContentBackground #2E8B3020
merge.currentHeaderBackground #2E8B3050
merge.incomingContentBackground #0039F620
merge.incomingHeaderBackground #0039F650
mergeEditor.change.background #0039F615
mergeEditor.change.word.background #0039F630
mergeEditor.changeBase.background #63636310
mergeEditor.changeBase.word.background #63636320
mergeEditor.conflict.handled.minimapOverViewRuler #2E8B30
mergeEditor.conflict.handledFocused.border #2E8B30
mergeEditor.conflict.handledUnfocused.border #2E8B3040
mergeEditor.conflict.input1.background #2E8B3015
mergeEditor.conflict.input2.background #0039F615
mergeEditor.conflict.unhandled.minimapOverViewRuler #A85020
mergeEditor.conflict.unhandledFocused.border #A85020
mergeEditor.conflict.unhandledUnfocused.border #A8502060
mergeEditor.conflictingLines.background #A8502015
minimap.background #FFFFFF
minimap.chatEditHighlight #0039F630
minimap.errorHighlight #D43030
minimap.findMatchHighlight #0039F680
minimap.foregroundOpacity #000000FF
minimap.infoHighlight #0039F6
minimap.selectionHighlight #0039F650
minimap.selectionOccurrenceHighlight #0039F630
minimap.warningHighlight #A85020
minimapGutter.addedBackground #2E8B30
minimapGutter.deletedBackground #D43030
minimapGutter.modifiedBackground #0039F6
minimapSlider.activeBackground #0039F670
minimapSlider.background #0039F630
minimapSlider.hoverBackground #0039F650
multiDiffEditor.background #FFFFFF
multiDiffEditor.border #0039F620
multiDiffEditor.headerBackground #F4F4F8
notebook.cellBorderColor #0039F620
notebook.cellEditorBackground #FFFFFF
notebook.cellHoverBackground #E8E8F0
notebook.cellInsertionIndicator #0039F6
notebook.cellStatusBarItemHoverBackground #0039F620
notebook.cellToolbarSeparator #0039F615
notebook.editorBackground #FFFFFF
notebook.focusedCellBackground #F4F4F8
notebook.focusedCellBorder #0039F6
notebook.focusedEditorBorder #0039F6
notebook.inactiveFocusedCellBorder #0039F640
notebook.inactiveSelectedCellBorder #0039F620
notebook.outputContainerBackgroundColor #F4F4F8
notebook.outputContainerBorderColor #0039F615
notebook.selectedCellBackground #0039F615
notebook.selectedCellBorder #0039F660
notebook.symbolHighlightBackground #0039F620
notebookEditorOverviewRuler.runningCellForeground #0039F6
notebookScrollbarSlider.activeBackground #0039F670
notebookScrollbarSlider.background #0039F630
notebookScrollbarSlider.hoverBackground #0039F650
notebookStatusErrorIcon.foreground #D43030
notebookStatusRunningIcon.foreground #0039F6
notebookStatusSuccessIcon.foreground #2E8B30
notificationCenter.border #0039F620
notificationCenterHeader.background #F4F4F8
notificationCenterHeader.foreground #111111
notificationLink.foreground #0039F6
notifications.background #FFFFFF
notifications.border #0039F620
notifications.foreground #111111
notificationsErrorIcon.foreground #D43030
notificationsInfoIcon.foreground #0039F6
notificationsWarningIcon.foreground #A85020
notificationToast.border #0039F620
outputView.background #F4F4F8
outputViewStickyScroll.background #F4F4F8
panel.background #F4F4F8
panel.border #0039F620
panel.dropBorder #0039F6
panelInput.border #0039F650
panelSection.border #0039F620
panelSection.dropBackground #0039F620
panelSectionHeader.background #0039F615
panelSectionHeader.border #0039F620
panelSectionHeader.foreground #30003C
panelStickyScroll.background #F4F4F8
panelStickyScroll.border #0039F615
panelStickyScroll.shadow #11111115
panelTitle.activeBorder #0039F6
panelTitle.activeForeground #0039F6
panelTitle.border #0039F615
panelTitle.inactiveForeground #11111160
panelTitleBadge.background #0039F6
panelTitleBadge.foreground #FFFFFF
peekView.border #0039F6
peekViewEditor.background #30003C
peekViewEditor.matchHighlightBackground #0039F650
peekViewEditor.matchHighlightBorder #0039F680
peekViewEditorGutter.background #30003C
peekViewEditorStickyScroll.background #30003C
peekViewEditorStickyScrollGutter.background #30003C
peekViewResult.background #1A1024
peekViewResult.fileForeground #FFFFFF
peekViewResult.lineForeground #A4A4B8
peekViewResult.matchHighlightBackground #0039F650
peekViewResult.selectionBackground #0039F650
peekViewResult.selectionForeground #FFFFFF
peekViewTitle.background #0A0610
peekViewTitleDescription.foreground #636363
peekViewTitleLabel.foreground #0039F6
pickerGroup.border #0039F620
pickerGroup.foreground #0039F6
ports.iconRunningProcessForeground #2E8B30
problemsErrorIcon.foreground #D43030
problemsInfoIcon.foreground #0039F6
problemsWarningIcon.foreground #A85020
profileBadge.background #0039F6
profileBadge.foreground #FFFFFF
profiles.sashBorder #0039F6
progressBar.background #0039F6
quickInput.background #FFFFFF
quickInput.border #0039F625
quickInput.foreground #111111
quickInputList.focusBackground #0039F630
quickInputList.focusForeground #111111
quickInputList.focusIconForeground #111111
quickInputList.hoverBackground #E8E8F0
quickInputTitle.background #F4F4F8
radio.activeBackground #0039F6
radio.activeBorder #0039F6
radio.activeForeground #FFFFFF
radio.inactiveBackground #FFFFFF
radio.inactiveBorder #0039F640
radio.inactiveForeground #111111
radio.inactiveHoverBackground #E8E8F0
sash.hoverBorder #0039F6
scmGraph.foreground1 #0039F6
scmGraph.foreground2 #0039F6
scmGraph.foreground3 #3D6B30
scmGraph.foreground4 #A85020
scmGraph.foreground5 #2E8B30
scmGraph.historyItemBaseRefColor #3D6B30
scmGraph.historyItemHoverAdditionsForeground #2E8B30
scmGraph.historyItemHoverDeletionsForeground #D43030
scmGraph.historyItemHoverLabelForeground #111111
scmGraph.historyItemRefColor #0039F6
scmGraph.historyItemRemoteRefColor #0039F6
scrollbar.background #FFFFFF00
scrollbar.shadow #11111150
scrollbarSlider.activeBackground #0039F670
scrollbarSlider.background #0039F630
scrollbarSlider.hoverBackground #0039F650
search.resultsInfoForeground #636363
searchEditor.findMatchBackground #0039F630
searchEditor.findMatchBorder #0039F660
searchEditor.textInputBorder #0039F650
selection.background #0039F650
settings.checkboxBackground #FFFFFF
settings.checkboxBorder #0039F650
settings.checkboxForeground #0039F6
settings.dropdownBackground #FFFFFF
settings.dropdownBorder #0039F650
settings.dropdownForeground #111111
settings.dropdownListBorder #0039F620
settings.focusedRowBackground #0039F610
settings.focusedRowBorder #0039F630
settings.headerBorder #0039F615
settings.headerForeground #111111
settings.modifiedItemIndicator #0039F6
settings.numberInputBackground #FFFFFF
settings.numberInputBorder #0039F650
settings.numberInputForeground #111111
settings.rowHoverBackground #0039F610
settings.sashBorder #0039F6
settings.settingsHeaderHoverForeground #0039F6
settings.textInputBackground #FFFFFF
settings.textInputBorder #0039F650
settings.textInputForeground #111111
sideBar.background #F4F4F8
sideBar.border #0039F630
sideBar.dropBackground #0039F620
sideBar.foreground #111111
sideBarActivityBarTop.border #0039F620
sideBarSectionHeader.background #0039F615
sideBarSectionHeader.border #0039F620
sideBarSectionHeader.foreground #30003C
sideBarStickyScroll.background #F4F4F8
sideBarStickyScroll.border #0039F615
sideBarStickyScroll.shadow #11111115
sideBarTitle.background #F4F4F8
sideBarTitle.border #0039F615
sideBarTitle.foreground #0039F6
sideBySideEditor.horizontalBorder #0039F620
sideBySideEditor.verticalBorder #0039F620
simpleFindWidget.sashBorder #0039F6
statusBar.background #0039F6
statusBar.border #0030D0
statusBar.debuggingBackground #2E8B30
statusBar.debuggingBorder #2E8B30CC
statusBar.debuggingForeground #FFFFFF
statusBar.focusBorder #0039F6
statusBar.foreground #FFFFFF
statusBar.noFolderBackground #0030D0
statusBar.noFolderBorder #0030D0
statusBar.noFolderForeground #FFFFFF
statusBarItem.activeBackground #0030D080
statusBarItem.compactHoverBackground #0030D060
statusBarItem.errorBackground #D43030
statusBarItem.errorForeground #FFFFFF
statusBarItem.errorHoverBackground #D43030CC
statusBarItem.errorHoverForeground #FFFFFF
statusBarItem.focusBorder #0039F6
statusBarItem.hoverBackground #0030D080
statusBarItem.hoverForeground #FFFFFF
statusBarItem.offlineBackground #636363
statusBarItem.offlineForeground #FFFFFF
statusBarItem.offlineHoverBackground #636363CC
statusBarItem.offlineHoverForeground #FFFFFF
statusBarItem.prominentBackground #0039F6
statusBarItem.prominentForeground #FFFFFF
statusBarItem.prominentHoverBackground #0030D0
statusBarItem.prominentHoverForeground #FFFFFF
statusBarItem.remoteBackground #0039F6
statusBarItem.remoteForeground #FFFFFF
statusBarItem.remoteHoverBackground #0039F6CC
statusBarItem.remoteHoverForeground #FFFFFF
statusBarItem.warningBackground #A85020
statusBarItem.warningForeground #FFFFFF
statusBarItem.warningHoverBackground #A85020CC
statusBarItem.warningHoverForeground #FFFFFF
symbolIcon.arrayForeground #A85020
symbolIcon.booleanForeground #A85020
symbolIcon.classForeground #0039F6
symbolIcon.colorForeground #0039F6
symbolIcon.constantForeground #A85020
symbolIcon.constructorForeground #30003C
symbolIcon.enumeratorForeground #0039F6
symbolIcon.enumeratorMemberForeground #A85020
symbolIcon.eventForeground #A85020
symbolIcon.fieldForeground #0039F6
symbolIcon.fileForeground #636363
symbolIcon.folderForeground #0039F6
symbolIcon.functionForeground #30003C
symbolIcon.interfaceForeground #0039F6
symbolIcon.keyForeground #0039F6
symbolIcon.keywordForeground #0039F6
symbolIcon.methodForeground #30003C
symbolIcon.moduleForeground #0039F6
symbolIcon.namespaceForeground #0039F6
symbolIcon.nullForeground #636363
symbolIcon.numberForeground #A85020
symbolIcon.objectForeground #0039F6
symbolIcon.operatorForeground #30003C
symbolIcon.packageForeground #0039F6
symbolIcon.propertyForeground #111111
symbolIcon.referenceForeground #0039F6
symbolIcon.snippetForeground #3D6B30
symbolIcon.stringForeground #3D6B30
symbolIcon.structForeground #0039F6
symbolIcon.textForeground #111111
symbolIcon.typeParameterForeground #0039F6
symbolIcon.unitForeground #A85020
symbolIcon.variableForeground #111111
tab.activeBackground #FFFFFF
tab.activeBorder #0039F6
tab.activeBorderTop #0039F600
tab.activeForeground #111111
tab.activeModifiedBorder #0039F6
tab.border #0039F620
tab.dragAndDropBorder #0039F6
tab.hoverBackground #F4F4F8
tab.hoverBorder #0039F640
tab.hoverForeground #111111
tab.inactiveBackground #F4F4F8
tab.inactiveForeground #11111170
tab.inactiveModifiedBorder #0039F660
tab.lastPinnedBorder #0039F630
tab.selectedBackground #FFFFFF
tab.selectedBorderTop #0039F6
tab.selectedForeground #111111
tab.unfocusedActiveBackground #FFFFFF
tab.unfocusedActiveBorder #0039F660
tab.unfocusedActiveBorderTop #0039F600
tab.unfocusedActiveForeground #111111CC
tab.unfocusedActiveModifiedBorder #0039F6CC
tab.unfocusedHoverBackground #F4F4F8
tab.unfocusedHoverBorder #0039F630
tab.unfocusedHoverForeground #111111CC
tab.unfocusedInactiveBackground #F4F4F8
tab.unfocusedInactiveForeground #11111150
tab.unfocusedInactiveModifiedBorder #0039F650
terminal.ansiBlack #111111
terminal.ansiBlue #0039F6
terminal.ansiBrightBlack #636363
terminal.ansiBrightBlue #1050FF
terminal.ansiBrightCyan #20887A
terminal.ansiBrightGreen #3AA040
terminal.ansiBrightMagenta #A040C0
terminal.ansiBrightRed #E04040
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #B86020
terminal.ansiCyan #1B7264
terminal.ansiGreen #2E8B30
terminal.ansiMagenta #8B30A8
terminal.ansiRed #D43030
terminal.ansiWhite #FFFFFF
terminal.ansiYellow #A85020
terminal.background #FFFFFF
terminal.border #0039F620
terminal.dropBackground #0039F620
terminal.findMatchBackground #0039F68060
terminal.findMatchBorder #0039F6
terminal.findMatchHighlightBackground #0039F68040
terminal.findMatchHighlightBorder #0039F680
terminal.foreground #111111
terminal.hoverHighlightBackground #0039F620
terminal.inactiveSelectionBackground #0039F620
terminal.initialHintForeground #636363
terminal.selectionBackground #0039F640
terminal.selectionForeground #111111
terminal.tab.activeBorder #0039F6
terminalCommandDecoration.defaultBackground #0039F640
terminalCommandDecoration.errorBackground #D4303060
terminalCommandDecoration.successBackground #2E8B3060
terminalCommandGuide.foreground #0039F620
terminalCursor.background #FFFFFF
terminalCursor.foreground #0039F6
terminalOverviewRuler.border #0039F620
terminalOverviewRuler.cursorForeground #0039F6
terminalOverviewRuler.findMatchForeground #0039F6CC
terminalStickyScroll.background #F4F4F8
terminalStickyScroll.border #0039F615
terminalStickyScrollHover.background #E8E8F0
terminalSymbolIcon.aliasForeground #0039F6
terminalSymbolIcon.argumentForeground #A85020
terminalSymbolIcon.branchForeground #2E8B30
terminalSymbolIcon.commitForeground #0039F6
terminalSymbolIcon.fileForeground #636363
terminalSymbolIcon.flagForeground #A85020
terminalSymbolIcon.folderForeground #0039F6
terminalSymbolIcon.inlineSuggestionForeground #636363
terminalSymbolIcon.methodForeground #30003C
terminalSymbolIcon.optionForeground #111111
terminalSymbolIcon.optionValueForeground #3D6B30
terminalSymbolIcon.pullRequestDoneForeground #2E8B30
terminalSymbolIcon.pullRequestForeground #0039F6
terminalSymbolIcon.remoteForeground #0039F6
terminalSymbolIcon.stashForeground #0039F6
terminalSymbolIcon.symbolicLinkFileForeground #0039F680
terminalSymbolIcon.symbolicLinkFolderForeground #0039F680
terminalSymbolIcon.symbolText #111111
terminalSymbolIcon.tagForeground #0039F6
testing.coverCountBadgeBackground #0039F6
testing.coverCountBadgeForeground #FFFFFF
testing.coveredBackground #2E8B3010
testing.coveredBorder #2E8B3030
testing.coveredGutterBackground #2E8B3040
testing.iconErrored #D43030
testing.iconErrored.retired #D4303050
testing.iconFailed #D43030
testing.iconFailed.retired #D4303050
testing.iconPassed #2E8B30
testing.iconPassed.retired #2E8B3050
testing.iconQueued #A85020
testing.iconQueued.retired #A8502050
testing.iconSkipped #636363
testing.iconSkipped.retired #63636350
testing.iconUnset #636363
testing.iconUnset.retired #63636350
testing.message.error.badgeBackground #D43030
testing.message.error.badgeBorder #D4303060
testing.message.error.badgeForeground #FFFFFF
testing.message.error.lineBackground #D4303010
testing.message.info.decorationForeground #0039F6
testing.message.info.lineBackground #0039F610
testing.messagePeekBorder #0039F6
testing.messagePeekHeaderBackground #0039F615
testing.peekBorder #D43030
testing.peekHeaderBackground #D4303015
testing.runAction #2E8B30
testing.uncoveredBackground #D4303010
testing.uncoveredBorder #D4303030
testing.uncoveredBranchBackground #D4303020
testing.uncoveredGutterBackground #D4303040
textBlockQuote.background #F4F4F8
textBlockQuote.border #0039F660
textCodeBlock.background #F4F4F8
textLink.activeForeground #0039F6
textLink.foreground #0039F6
textPreformat.background #F4F4F8
textPreformat.border #0039F620
textPreformat.foreground #3D6B30
textSeparator.foreground #0039F620
titleBar.activeBackground #F4F4F8
titleBar.activeForeground #111111
titleBar.border #0039F630
titleBar.inactiveBackground #F4F4F8
titleBar.inactiveForeground #11111170
toolbar.activeBackground #0039F630
toolbar.hoverBackground #0039F620
toolbar.hoverOutline #0039F600
tree.inactiveIndentGuidesStroke #0039F615
tree.indentGuidesStroke #0039F630
tree.tableColumnsBorder #0039F615
tree.tableOddRowsBackground #F4F4F880
walkThrough.embeddedEditorBackground #F4F4F8
walkthrough.stepTitle.foreground #111111
welcomePage.background #FFFFFF
welcomePage.progress.background #F4F4F8
welcomePage.progress.foreground #0039F6
welcomePage.tileBackground #F4F4F8
welcomePage.tileBorder #0039F615
welcomePage.tileHoverBackground #E8E8F0
widget.border #0039F620
widget.shadow #11111130
window.activeBorder #0039F600
window.inactiveBorder #0039F600 keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #30003C —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #D8613C —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #30003C —
meta.block variable.other #111111 —
support.other.variable, string.other.link #111111 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #A85020 —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #3D6B30 —
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #0039F6 —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #0039F6 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #111111 —
variable.language #0039F6 italic
entity.name.method.js #30003C italic
meta.class-method.js entity.name.function.js, variable.function.constructor #30003C —
entity.other.attribute-name #0039F6 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #A85020 italic
entity.other.attribute-name.class #A85020 —
source.sass keyword.control #0039F6 —
constant.character.escape #2E8B30 —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #30003C italic
source.js constant.other.object.key.js string.unquoted.label.js #111111 italic
source.json meta.structure.dictionary.json support.type.property-name.json #0039F6 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #0039F6 —
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 #3D6B30 —
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 #A85020 —
text.html.markdown, punctuation.definition.list_item.markdown #111111 —
text.html.markdown markup.inline.raw.markdown #A85020 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #30003C —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #0039F6 —
markup.italic #0039F6 italic
markup.bold, markup.bold string #0039F6 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #0039F6 bold
markup.underline #3D6B30 underline
markup.quote punctuation.definition.blockquote.markdown #636363 —
string.other.link.title.markdown #0039F6 —
string.other.link.description.title.markdown #0039F6 —
constant.other.reference.link.markdown #3D6B30 —
markup.raw.block.fenced.markdown #111111 —
punctuation.definition.fenced.markdown #111111 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #111111 —
variable.language.fenced.markdown #0039F6 —
meta.separator #0039F6 bold
Open Editors fetchUser.ts index.ts README.md My-Project src components fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline fetchUser.ts
index.ts
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
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 $
31
export interface User {
id: string;
name: string;
role: "admin" | "member";
tags: string[];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser(id: string): Promise<User | null> {
if (!id) {
return null;
}
const response = await fetch(`/api/users/${id}`, {
method: "GET",
headers: { Accept: "application/json" },
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return (await response.json()) as User;
}
function greet(user: User): string {
// Simple greeting function that uses the user's name
return `Hello, ${user.name}!`;
}