Skip to main content
Australian Food & Fibre | Coding Theme
Home Theme VS Code Australian Food & Fibre A professional VS Code colour theme inspired by the Australian Food & Fibre (AFF) visual identity. Features deep navy backgrounds with gold accents, evoking Australian cotton fields and agricultural excellence. Built and published by Lucid Labs on behalf of Australian Food & Fibre. All trademarks be
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 #C4A05C40 activityBar.activeBackground #0E182650 activityBar.activeBorder #C4A05C activityBar.activeFocusBorder #C4A05C activityBar.background #080F1A activityBar.border #080F1A tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #8899AA80 italic variable, string constant.other.placeholder #E4E8F0 — constant.other.color #C4A05C — invalid, invalid.illegal #E06050 — 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}!`;
}
Australian Food & Fibre — AFF Dark main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
activityBar.dropBorder #C4A05C
activityBar.foreground #E4E8F0
activityBar.inactiveForeground #8899AA80
activityBarBadge.background #1E3D82
activityBarBadge.foreground #E4E8F0
activityBarTop.activeBackground #0E182650
activityBarTop.activeBorder #C4A05C
activityBarTop.background #080F1A
activityBarTop.dropBorder #C4A05C
activityBarTop.foreground #E4E8F0
activityBarTop.inactiveForeground #8899AA80
activityErrorBadge.background #E06050
activityErrorBadge.foreground #E4E8F0
activityWarningBadge.background #D4B06C
activityWarningBadge.foreground #E4E8F0
agentSessionReadIndicator.foreground #C4A05C
agentSessionSelectedBadge.border #C4A05C50
agentSessionSelectedUnfocusedBadge.border #E4E8F050
agentStatusIndicator.background #142038
aiCustomizationManagement.sashBorder #C4A05C
badge.background #1E3D82
badge.foreground #E4E8F0
banner.background #C4A05C
banner.foreground #E4E8F0
banner.iconForeground #E4E8F0
breadcrumb.activeSelectionForeground #C4A05C
breadcrumb.background #0E1826
breadcrumb.focusForeground #E4E8F0
breadcrumb.foreground #8899AA
breadcrumbPicker.background #0B1320
button.background #1E3D82
button.border #1E3D8200
button.foreground #E4E8F0
button.hoverBackground #162D66
button.secondaryBackground #142038
button.secondaryBorder #C4A05C50
button.secondaryForeground #E4E8F0
button.secondaryHoverBackground #1C2E48
button.separator #E4E8F040
charts.blue #C4A05C
charts.foreground #E4E8F0
charts.green #6BBF5B
charts.lines #8899AA80
charts.orange #D4B06C
charts.purple #5B8CE8
charts.red #E06050
charts.yellow #D4B06C
chat.avatarBackground #C4A05C
chat.avatarForeground #0E1826
chat.checkpointSeparator #C4A05C50
chat.editedFileForeground #5B8CE8
chat.inputWorkingBorderColor1 #1E3D82
chat.inputWorkingBorderColor2 #A88840
chat.inputWorkingBorderColor3 #C4A05C
chat.linesAddedForeground #6BBF5BCC
chat.linesRemovedForeground #E06050CC
chat.requestBackground #142038
chat.requestBorder #C4A05C50
chat.requestBubbleBackground #142038E6
chat.requestBubbleHoverBackground #1C2E48E6
chat.requestCodeBorder #C4A05C30
chat.slashCommandBackground #1E3D82
chat.slashCommandForeground #E4E8F0
chat.thinkingShimmer #C4A05C40
chatManagement.sashBorder #C4A05C
checkbox.background #1A2A42
checkbox.border #C4A05C50
checkbox.disabled.background #1A2A4280
checkbox.disabled.foreground #8899AA60
checkbox.foreground #C4A05C
checkbox.selectBackground #1A2A42
checkbox.selectBorder #C4A05C
commandCenter.activeBackground #E4E8F025
commandCenter.activeBorder #E4E8F050
commandCenter.activeForeground #E4E8F0
commandCenter.background #E4E8F015
commandCenter.border #E4E8F030
commandCenter.debuggingBackground #6BBF5B30
commandCenter.foreground #E4E8F0
commandCenter.inactiveBorder #E4E8F020
commandCenter.inactiveForeground #8899AA80
commentsView.resolvedIcon #6BBF5B
commentsView.unresolvedIcon #D4B06C
contrastActiveBorder #C4A05C00
contrastBorder #C4A05C00
debugConsole.errorForeground #E06050
debugConsole.infoForeground #5B8CE8
debugConsole.sourceForeground #8899AA
debugConsole.warningForeground #D4B06C
debugConsoleInputIcon.foreground #C4A05C
debugExceptionWidget.background #E0605020
debugExceptionWidget.border #E0605080
debugIcon.breakpointCurrentStackframeForeground #D4B06C
debugIcon.breakpointDisabledForeground #8899AA80
debugIcon.breakpointForeground #E06050
debugIcon.breakpointStackframeForeground #6BBF5B
debugIcon.breakpointUnverifiedForeground #D4B06C
debugIcon.continueForeground #6BBF5B
debugIcon.disconnectForeground #E06050
debugIcon.pauseForeground #D4B06C
debugIcon.restartForeground #6BBF5B
debugIcon.startForeground #6BBF5B
debugIcon.stepBackForeground #C4A05C
debugIcon.stepIntoForeground #C4A05C
debugIcon.stepOutForeground #C4A05C
debugIcon.stepOverForeground #C4A05C
debugIcon.stopForeground #E06050
debugTokenExpression.boolean #D4B06C
debugTokenExpression.error #E06050
debugTokenExpression.name #5B8CE8
debugTokenExpression.number #D4B06C
debugTokenExpression.string #8FBF7A
debugTokenExpression.type #5B8CE8
debugTokenExpression.value #8FBF7A
debugToolBar.background #0B1320
debugView.exceptionLabelBackground #E0605080
debugView.exceptionLabelForeground #E4E8F0
debugView.stateLabelBackground #C4A05C50
debugView.stateLabelForeground #E4E8F0
debugView.valueChangedHighlight #C4A05C80
descriptionForeground #8899AA
diffEditor.border #C4A05C20
diffEditor.diagonalFill #C4A05C20
diffEditor.insertedLineBackground #6BBF5B15
diffEditor.insertedTextBackground #6BBF5B20
diffEditor.insertedTextBorder #6BBF5B50
diffEditor.move.border #C4A05C80
diffEditor.moveActive.border #C4A05C
diffEditor.removedLineBackground #E0605015
diffEditor.removedTextBackground #E0605020
diffEditor.removedTextBorder #E0605050
diffEditor.unchangedCodeBackground #0E182680
diffEditor.unchangedRegionBackground #0B1320
diffEditor.unchangedRegionForeground #8899AA80
diffEditor.unchangedRegionShadow #060C1830
diffEditorGutter.insertedLineBackground #6BBF5B30
diffEditorGutter.removedLineBackground #E0605030
diffEditorOverview.insertedForeground #6BBF5B80
diffEditorOverview.removedForeground #E0605080
disabledForeground #8899AA60
dropdown.background #1A2A42
dropdown.border #C4A05C50
dropdown.foreground #E4E8F0
dropdown.listBackground #0B1320
editor.background #0E1826
editor.compositionBorder #C4A05C
editor.findMatchBackground #C4A05C80
editor.findMatchBorder #C4A05C
editor.findMatchForeground #E4E8F0
editor.findMatchHighlightBackground #C4A05C50
editor.findMatchHighlightBorder #C4A05C80
editor.findMatchHighlightForeground #E4E8F0
editor.findRangeHighlightBackground #C4A05C20
editor.findRangeHighlightBorder #C4A05C00
editor.focusedStackFrameHighlightBackground #6BBF5B30
editor.foldBackground #C4A05C15
editor.foldPlaceholderForeground #8899AA80
editor.foreground #E4E8F0
editor.hoverHighlightBackground #C4A05C25
editor.inactiveLineHighlightBackground #1A2A4280
editor.inactiveSelectionBackground #C4A05C30
editor.inlineValuesBackground #C4A05C15
editor.inlineValuesForeground #8899AACC
editor.lineHighlightBackground #1A2A42
editor.lineHighlightBorder #C4A05C15
editor.linkedEditingBackground #C4A05C30
editor.placeholder.foreground #8899AA80
editor.rangeHighlightBackground #C4A05C15
editor.rangeHighlightBorder #C4A05C00
editor.selectionBackground #C4A05C50
editor.selectionForeground #E4E8F0
editor.selectionHighlightBackground #C4A05C30
editor.selectionHighlightBorder #C4A05C50
editor.stackFrameHighlightBackground #D4B06C30
editor.symbolHighlightBackground #C4A05C30
editor.symbolHighlightBorder #C4A05C50
editor.wordHighlightBackground #C4A05C30
editor.wordHighlightBorder #C4A05C50
editor.wordHighlightStrongBackground #C4A05C50
editor.wordHighlightStrongBorder #C4A05C80
editor.wordHighlightTextBackground #C4A05C20
editor.wordHighlightTextBorder #C4A05C40
editorActionList.background #0B1320
editorActionList.focusBackground #C4A05C40
editorActionList.focusForeground #E4E8F0
editorActionList.foreground #E4E8F0
editorBracketHighlight.foreground1 #C4A05C
editorBracketHighlight.foreground2 #5B8CE8
editorBracketHighlight.foreground3 #D87048
editorBracketHighlight.foreground4 #6BBF5B
editorBracketHighlight.foreground5 #C06BDA
editorBracketHighlight.foreground6 #8FBF7A
editorBracketHighlight.unexpectedBracket.foreground #E06050
editorBracketMatch.border #C4A05C80
editorBracketMatch.foreground #C4A05C
editorBracketPairGuide.activeBackground1 #C4A05C80
editorBracketPairGuide.activeBackground2 #5B8CE880
editorBracketPairGuide.activeBackground3 #D8704880
editorBracketPairGuide.activeBackground4 #6BBF5B80
editorBracketPairGuide.activeBackground5 #C06BDA80
editorBracketPairGuide.activeBackground6 #8FBF7A80
editorBracketPairGuide.background1 #C4A05C40
editorBracketPairGuide.background2 #5B8CE840
editorBracketPairGuide.background3 #D8704840
editorBracketPairGuide.background4 #6BBF5B40
editorBracketPairGuide.background5 #C06BDA40
editorBracketPairGuide.background6 #8FBF7A40
editorCodeLens.foreground #8899AA80
editorCommentsWidget.rangeActiveBackground #C4A05C20
editorCommentsWidget.rangeBackground #C4A05C10
editorCommentsWidget.replyInputBackground #1A2A42
editorCommentsWidget.resolvedBorder #6BBF5B50
editorCommentsWidget.unresolvedBorder #D4B06C
editorCursor.background #0E1826
editorCursor.foreground #C4A05C
editorError.background #E0605015
editorError.border #E0605000
editorError.foreground #E06050
editorGhostText.background #C4A05C00
editorGhostText.border #C4A05C00
editorGhostText.foreground #C4A05C80
editorGroup.border #C4A05C20
editorGroup.dropBackground #C4A05C30
editorGroup.dropIntoPromptBackground #0B1320
editorGroup.dropIntoPromptBorder #C4A05C50
editorGroup.dropIntoPromptForeground #E4E8F0
editorGroup.emptyBackground #0E1826
editorGroup.focusedEmptyBorder #C4A05C50
editorGroupHeader.border #C4A05C20
editorGroupHeader.noTabsBackground #0E1826
editorGroupHeader.tabsBackground #0B1320
editorGroupHeader.tabsBorder #C4A05C20
editorGutter.addedBackground #6BBF5B
editorGutter.addedSecondaryBackground #6BBF5B80
editorGutter.background #0E1826
editorGutter.commentDraftGlyphForeground #C4A05C80
editorGutter.commentGlyphForeground #C4A05C
editorGutter.commentRangeForeground #8899AA50
editorGutter.commentUnresolvedGlyphForeground #D4B06C
editorGutter.deletedBackground #E06050
editorGutter.deletedSecondaryBackground #E0605080
editorGutter.foldingControlForeground #8899AA80
editorGutter.itemBackground #0B1320
editorGutter.itemGlyphForeground #C4A05C
editorGutter.modifiedBackground #5B8CE8
editorGutter.modifiedSecondaryBackground #5B8CE880
editorHint.border #6BBF5B00
editorHint.foreground #6BBF5B
editorHoverWidget.background #0B1320
editorHoverWidget.border #C4A05C50
editorHoverWidget.foreground #E4E8F0
editorHoverWidget.highlightForeground #C4A05C
editorHoverWidget.statusBarBackground #142038
editorIndentGuide.activeBackground1 #C4A05C
editorIndentGuide.activeBackground2 #5B8CE8
editorIndentGuide.activeBackground3 #D87048
editorIndentGuide.activeBackground4 #6BBF5B
editorIndentGuide.activeBackground5 #C06BDA
editorIndentGuide.activeBackground6 #8FBF7A
editorIndentGuide.background1 #C4A05C25
editorIndentGuide.background2 #5B8CE825
editorIndentGuide.background3 #D8704825
editorIndentGuide.background4 #6BBF5B25
editorIndentGuide.background5 #C06BDA25
editorIndentGuide.background6 #8FBF7A25
editorInfo.background #5B8CE815
editorInfo.border #5B8CE800
editorInfo.foreground #5B8CE8
editorInlayHint.background #1A2A42
editorInlayHint.foreground #8899AA
editorInlayHint.parameterBackground #1A2A42
editorInlayHint.parameterForeground #8899AA
editorInlayHint.typeBackground #1A2A42
editorInlayHint.typeForeground #8FBF7A
editorLightBulb.foreground #D4B06C
editorLightBulbAi.foreground #C4A05C
editorLightBulbAutoFix.foreground #6BBF5B
editorLineNumber.activeForeground #C4A05C
editorLineNumber.dimmedForeground #8899AA50
editorLineNumber.foreground #8899AA
editorLink.activeForeground #C4A05C
editorMarkerNavigation.background #0B1320
editorMarkerNavigationError.background #E0605030
editorMarkerNavigationError.headerBackground #E0605020
editorMarkerNavigationInfo.background #5B8CE830
editorMarkerNavigationInfo.headerBackground #5B8CE820
editorMarkerNavigationWarning.background #D4B06C30
editorMarkerNavigationWarning.headerBackground #D4B06C20
editorMinimap.inlineChatInserted #6BBF5B40
editorMinimap.inlineChatRemoved #E0605040
editorMultiCursor.primary.background #0E1826
editorMultiCursor.primary.foreground #C4A05C
editorMultiCursor.secondary.background #0E1826
editorMultiCursor.secondary.foreground #5B8CE8
editorOverviewRuler.addedForeground #6BBF5B
editorOverviewRuler.background #0E1826
editorOverviewRuler.border #C4A05C20
editorOverviewRuler.bracketMatchForeground #C4A05C80
editorOverviewRuler.commentDraftForeground #C4A05C60
editorOverviewRuler.commentForeground #C4A05C40
editorOverviewRuler.commentUnresolvedForeground #D4B06C80
editorOverviewRuler.commonContentForeground #8899AA50
editorOverviewRuler.currentContentForeground #6BBF5B80
editorOverviewRuler.deletedForeground #E06050
editorOverviewRuler.errorForeground #E06050
editorOverviewRuler.findMatchForeground #C4A05CCC
editorOverviewRuler.incomingContentForeground #5B8CE880
editorOverviewRuler.infoForeground #5B8CE8
editorOverviewRuler.inlineChatInserted #6BBF5B80
editorOverviewRuler.inlineChatRemoved #E0605080
editorOverviewRuler.modifiedForeground #5B8CE8
editorOverviewRuler.rangeHighlightForeground #C4A05C99
editorOverviewRuler.selectionHighlightForeground #C4A05C99
editorOverviewRuler.warningForeground #D4B06C
editorOverviewRuler.wordHighlightForeground #C4A05C99
editorOverviewRuler.wordHighlightStrongForeground #C4A05CCC
editorOverviewRuler.wordHighlightTextForeground #C4A05C80
editorPane.background #0E1826
editorRuler.foreground #8899AA30
editorSnippetFinalTabstopHighlightBackground #6BBF5B30
editorSnippetFinalTabstopHighlightBorder #6BBF5B00
editorSnippetTabstopHighlightBackground #C4A05C30
editorSnippetTabstopHighlightBorder #C4A05C00
editorStickyScroll.background #0B1320
editorStickyScroll.border #C4A05C20
editorStickyScroll.shadow #060C1830
editorStickyScrollGutter.background #0B1320
editorStickyScrollHover.background #1C2E48
editorSuggestWidget.background #0B1320
editorSuggestWidget.border #C4A05C50
editorSuggestWidget.focusHighlightForeground #C4A05C
editorSuggestWidget.foreground #E4E8F0
editorSuggestWidget.highlightForeground #C4A05C
editorSuggestWidget.selectedBackground #C4A05C50
editorSuggestWidget.selectedForeground #E4E8F0
editorSuggestWidget.selectedIconForeground #E4E8F0
editorSuggestWidgetStatus.foreground #8899AA80
editorUnicodeHighlight.background #D4B06C20
editorUnicodeHighlight.border #D4B06C
editorUnnecessaryCode.border #8899AA50
editorUnnecessaryCode.opacity #000000AA
editorWarning.background #D4B06C15
editorWarning.border #D4B06C00
editorWarning.foreground #D4B06C
editorWhitespace.foreground #8899AA50
editorWidget.background #0B1320
editorWidget.border #C4A05C50
editorWidget.foreground #E4E8F0
editorWidget.resizeBorder #C4A05C
errorForeground #E06050
extensionBadge.remoteBackground #C4A05C
extensionBadge.remoteForeground #E4E8F0
extensionButton.background #C4A05C
extensionButton.border #C4A05C00
extensionButton.foreground #E4E8F0
extensionButton.hoverBackground #A88840
extensionButton.prominentBackground #C4A05C
extensionButton.prominentForeground #E4E8F0
extensionButton.prominentHoverBackground #A88840
extensionButton.separator #E4E8F040
extensionIcon.preReleaseForeground #C4A05C
extensionIcon.privateForeground #8899AA80
extensionIcon.sponsorForeground #5B8CE8
extensionIcon.starForeground #D4B06C
extensionIcon.verifiedForeground #6BBF5B
focusBorder #C4A05C
foreground #E4E8F0
gauge.background #0B1320
gauge.border #C4A05C30
gauge.errorBackground #E0605030
gauge.errorForeground #E06050
gauge.foreground #E4E8F0
gauge.warningBackground #D4B06C30
gauge.warningForeground #D4B06C
git.blame.editorDecorationForeground #8899AA60
gitDecoration.addedResourceForeground #6BBF5B
gitDecoration.conflictingResourceForeground #D4B06C
gitDecoration.deletedResourceForeground #E06050
gitDecoration.ignoredResourceForeground #8899AA80
gitDecoration.modifiedResourceForeground #5B8CE8
gitDecoration.renamedResourceForeground #C4A05C
gitDecoration.stageDeletedResourceForeground #E06050CC
gitDecoration.stageModifiedResourceForeground #5B8CE8CC
gitDecoration.submoduleResourceForeground #8FBF7A
gitDecoration.untrackedResourceForeground #6BBF5B
icon.foreground #C4A05C
inlineChat.background #0B1320
inlineChat.border #C4A05C50
inlineChat.foreground #E4E8F0
inlineChat.shadow #060C1880
inlineChatDiff.inserted #6BBF5B30
inlineChatDiff.removed #E0605030
inlineChatInput.background #1A2A42
inlineChatInput.border #C4A05C50
inlineChatInput.focusBorder #C4A05C
inlineChatInput.placeholderForeground #8899AA80
inlineEdit.gutterIndicator.background #0B1320
inlineEdit.gutterIndicator.primaryBackground #C4A05C20
inlineEdit.gutterIndicator.primaryBorder #C4A05C
inlineEdit.gutterIndicator.primaryForeground #C4A05C
inlineEdit.gutterIndicator.secondaryBackground #5B8CE820
inlineEdit.gutterIndicator.secondaryBorder #5B8CE8
inlineEdit.gutterIndicator.secondaryForeground #5B8CE8
inlineEdit.gutterIndicator.successfulBackground #6BBF5B20
inlineEdit.gutterIndicator.successfulBorder #6BBF5B
inlineEdit.gutterIndicator.successfulForeground #6BBF5B
inlineEdit.modifiedBackground #5B8CE815
inlineEdit.modifiedBorder #5B8CE850
inlineEdit.modifiedChangedLineBackground #5B8CE820
inlineEdit.modifiedChangedTextBackground #5B8CE830
inlineEdit.originalBackground #E0605010
inlineEdit.originalBorder #E0605030
inlineEdit.originalChangedLineBackground #E0605015
inlineEdit.originalChangedTextBackground #E0605025
inlineEdit.tabWillAcceptModifiedBorder #6BBF5B80
inlineEdit.tabWillAcceptOriginalBorder #E0605050
input.background #1A2A42
input.border #C4A05C50
input.foreground #E4E8F0
input.placeholderForeground #8899AA80
inputOption.activeBackground #C4A05C40
inputOption.activeBorder #C4A05C
inputOption.activeForeground #E4E8F0
inputOption.hoverBackground #C4A05C20
inputValidation.errorBackground #E0605020
inputValidation.errorBorder #E06050
inputValidation.errorForeground #E06050
inputValidation.infoBackground #5B8CE820
inputValidation.infoBorder #5B8CE8
inputValidation.infoForeground #5B8CE8
inputValidation.warningBackground #D4B06C20
inputValidation.warningBorder #D4B06C
inputValidation.warningForeground #D4B06C
interactive.activeCodeBorder #C4A05C
interactive.inactiveCodeBorder #C4A05C30
keybindingLabel.background #C4A05C20
keybindingLabel.border #C4A05C40
keybindingLabel.bottomBorder #C4A05C60
keybindingLabel.foreground #E4E8F0
keybindingTable.headerBackground #142038
keybindingTable.rowsBackground #0E182680
list.activeSelectionBackground #C4A05C50
list.activeSelectionForeground #E4E8F0
list.activeSelectionIconForeground #E4E8F0
list.deemphasizedForeground #8899AA80
list.dropBackground #C4A05C30
list.dropBetweenBackground #C4A05C
list.errorForeground #E06050
list.filterMatchBorder #C4A05C80
list.focusAndSelectionOutline #C4A05C
list.focusBackground #C4A05C40
list.focusForeground #E4E8F0
list.focusHighlightForeground #C4A05C
list.focusOutline #C4A05C80
list.highlightForeground #C4A05C
list.hoverBackground #C4A05C20
list.hoverForeground #E4E8F0
list.inactiveFocusBackground #C4A05C20
list.inactiveFocusOutline #C4A05C50
list.inactiveSelectionBackground #C4A05C30
list.inactiveSelectionForeground #E4E8F0
list.inactiveSelectionIconForeground #E4E8F0
list.invalidItemForeground #E06050
list.warningForeground #D4B06C
listFilterWidget.background #1A2A42
listFilterWidget.noMatchesOutline #E06050
listFilterWidget.outline #C4A05C
listFilterWidget.shadow #060C1850
markdownAlert.caution.foreground #E06050
markdownAlert.important.foreground #5B8CE8
markdownAlert.note.foreground #5B8CE8
markdownAlert.tip.foreground #6BBF5B
markdownAlert.warning.foreground #D4B06C
mcpIcon.starForeground #D4B06C
menu.background #0B1320
menu.border #C4A05C20
menu.foreground #E4E8F0
menu.selectionBackground #C4A05C50
menu.selectionBorder #C4A05C00
menu.selectionForeground #E4E8F0
menu.separatorBackground #C4A05C30
menubar.selectionBackground #C4A05C50
menubar.selectionBorder #C4A05C00
menubar.selectionForeground #E4E8F0
merge.border #C4A05C50
merge.commonContentBackground #8899AA20
merge.commonHeaderBackground #8899AA50
merge.currentContentBackground #6BBF5B20
merge.currentHeaderBackground #6BBF5B50
merge.incomingContentBackground #5B8CE820
merge.incomingHeaderBackground #5B8CE850
mergeEditor.change.background #C4A05C20
mergeEditor.change.word.background #C4A05C40
mergeEditor.changeBase.background #8899AA15
mergeEditor.changeBase.word.background #8899AA30
mergeEditor.conflict.handled.minimapOverViewRuler #6BBF5B
mergeEditor.conflict.handledFocused.border #6BBF5B
mergeEditor.conflict.handledUnfocused.border #6BBF5B50
mergeEditor.conflict.input1.background #6BBF5B20
mergeEditor.conflict.input2.background #5B8CE820
mergeEditor.conflict.unhandled.minimapOverViewRuler #D4B06C
mergeEditor.conflict.unhandledFocused.border #D4B06C
mergeEditor.conflict.unhandledUnfocused.border #D4B06C80
mergeEditor.conflictingLines.background #D4B06C20
minimap.background #0E1826
minimap.chatEditHighlight #C4A05C40
minimap.errorHighlight #E06050
minimap.findMatchHighlight #C4A05C80
minimap.foregroundOpacity #000000FF
minimap.infoHighlight #5B8CE8
minimap.selectionHighlight #C4A05C50
minimap.selectionOccurrenceHighlight #C4A05C40
minimap.warningHighlight #D4B06C
minimapGutter.addedBackground #6BBF5B
minimapGutter.deletedBackground #E06050
minimapGutter.modifiedBackground #5B8CE8
minimapSlider.activeBackground #C4A05C70
minimapSlider.background #C4A05C30
minimapSlider.hoverBackground #C4A05C50
multiDiffEditor.background #0E1826
multiDiffEditor.border #C4A05C20
multiDiffEditor.headerBackground #0B1320
notebook.cellBorderColor #C4A05C30
notebook.cellEditorBackground #0B1320
notebook.cellHoverBackground #1C2E48
notebook.cellInsertionIndicator #C4A05C
notebook.cellStatusBarItemHoverBackground #C4A05C30
notebook.cellToolbarSeparator #C4A05C20
notebook.editorBackground #0E1826
notebook.focusedCellBackground #142038
notebook.focusedCellBorder #C4A05C
notebook.focusedEditorBorder #C4A05C
notebook.inactiveFocusedCellBorder #C4A05C50
notebook.inactiveSelectedCellBorder #C4A05C30
notebook.outputContainerBackgroundColor #080F1A
notebook.outputContainerBorderColor #C4A05C20
notebook.selectedCellBackground #C4A05C20
notebook.selectedCellBorder #C4A05C80
notebook.symbolHighlightBackground #C4A05C30
notebookEditorOverviewRuler.runningCellForeground #C4A05C
notebookScrollbarSlider.activeBackground #C4A05C70
notebookScrollbarSlider.background #C4A05C30
notebookScrollbarSlider.hoverBackground #C4A05C50
notebookStatusErrorIcon.foreground #E06050
notebookStatusRunningIcon.foreground #C4A05C
notebookStatusSuccessIcon.foreground #6BBF5B
notificationCenter.border #C4A05C20
notificationCenterHeader.background #0B1320
notificationCenterHeader.foreground #E4E8F0
notificationLink.foreground #C4A05C
notifications.background #0B1320
notifications.border #C4A05C20
notifications.foreground #E4E8F0
notificationsErrorIcon.foreground #E06050
notificationsInfoIcon.foreground #5B8CE8
notificationsWarningIcon.foreground #D4B06C
notificationToast.border #C4A05C20
outputView.background #0B1320
outputViewStickyScroll.background #0B1320
panel.background #0B1320
panel.border #C4A05C20
panel.dropBorder #C4A05C
panelInput.border #C4A05C50
panelSection.border #C4A05C20
panelSection.dropBackground #C4A05C30
panelSectionHeader.background #1A2A4280
panelSectionHeader.border #C4A05C20
panelSectionHeader.foreground #C4A05C
panelStickyScroll.background #0B1320
panelStickyScroll.border #C4A05C20
panelStickyScroll.shadow #060C1830
panelTitle.activeBorder #C4A05C
panelTitle.activeForeground #C4A05C
panelTitle.border #C4A05C20
panelTitle.inactiveForeground #8899AA80
panelTitleBadge.background #1E3D82
panelTitleBadge.foreground #E4E8F0
peekView.border #C4A05C
peekViewEditor.background #0E1826
peekViewEditor.matchHighlightBackground #C4A05C50
peekViewEditor.matchHighlightBorder #C4A05C80
peekViewEditorGutter.background #0E1826
peekViewEditorStickyScroll.background #0B1320
peekViewEditorStickyScrollGutter.background #0B1320
peekViewResult.background #0B1320
peekViewResult.fileForeground #E4E8F0
peekViewResult.lineForeground #8899AA
peekViewResult.matchHighlightBackground #C4A05C50
peekViewResult.selectionBackground #C4A05C50
peekViewResult.selectionForeground #E4E8F0
peekViewTitle.background #060C18
peekViewTitleDescription.foreground #8899AA
peekViewTitleLabel.foreground #C4A05C
pickerGroup.border #C4A05C30
pickerGroup.foreground #C4A05C
ports.iconRunningProcessForeground #6BBF5B
problemsErrorIcon.foreground #E06050
problemsInfoIcon.foreground #5B8CE8
problemsWarningIcon.foreground #D4B06C
profileBadge.background #C4A05C
profileBadge.foreground #E4E8F0
profiles.sashBorder #C4A05C
progressBar.background #C4A05C
quickInput.background #0B1320
quickInput.border #C4A05C30
quickInput.foreground #E4E8F0
quickInputList.focusBackground #C4A05C40
quickInputList.focusForeground #E4E8F0
quickInputList.focusIconForeground #E4E8F0
quickInputList.hoverBackground #1C2E48
quickInputTitle.background #142038
radio.activeBackground #C4A05C
radio.activeBorder #C4A05C
radio.activeForeground #E4E8F0
radio.inactiveBackground #1A2A42
radio.inactiveBorder #C4A05C50
radio.inactiveForeground #8899AA
radio.inactiveHoverBackground #1C2E48
sash.hoverBorder #C4A05C
scmGraph.foreground1 #C4A05C
scmGraph.foreground2 #5B8CE8
scmGraph.foreground3 #8FBF7A
scmGraph.foreground4 #D4B06C
scmGraph.foreground5 #6BBF5B
scmGraph.historyItemBaseRefColor #8FBF7A
scmGraph.historyItemHoverAdditionsForeground #6BBF5B
scmGraph.historyItemHoverDeletionsForeground #E06050
scmGraph.historyItemHoverLabelForeground #E4E8F0
scmGraph.historyItemRefColor #C4A05C
scmGraph.historyItemRemoteRefColor #5B8CE8
scrollbar.background #0E182600
scrollbar.shadow #060C1850
scrollbarSlider.activeBackground #C4A05C70
scrollbarSlider.background #C4A05C30
scrollbarSlider.hoverBackground #C4A05C50
search.resultsInfoForeground #8899AA
searchEditor.findMatchBackground #C4A05C40
searchEditor.findMatchBorder #C4A05C80
searchEditor.textInputBorder #C4A05C50
selection.background #C4A05C50
settings.checkboxBackground #1A2A42
settings.checkboxBorder #C4A05C50
settings.checkboxForeground #C4A05C
settings.dropdownBackground #1A2A42
settings.dropdownBorder #C4A05C50
settings.dropdownForeground #E4E8F0
settings.dropdownListBorder #C4A05C30
settings.focusedRowBackground #C4A05C15
settings.focusedRowBorder #C4A05C40
settings.headerBorder #C4A05C20
settings.headerForeground #E4E8F0
settings.modifiedItemIndicator #C4A05C
settings.numberInputBackground #1A2A42
settings.numberInputBorder #C4A05C50
settings.numberInputForeground #E4E8F0
settings.rowHoverBackground #C4A05C15
settings.sashBorder #C4A05C
settings.settingsHeaderHoverForeground #C4A05C
settings.textInputBackground #1A2A42
settings.textInputBorder #C4A05C50
settings.textInputForeground #E4E8F0
sideBar.background #0B1320
sideBar.border #C4A05C20
sideBar.dropBackground #C4A05C30
sideBar.foreground #E4E8F0
sideBarActivityBarTop.border #C4A05C20
sideBarSectionHeader.background #1A2A4280
sideBarSectionHeader.border #C4A05C20
sideBarSectionHeader.foreground #C4A05C
sideBarStickyScroll.background #0B1320
sideBarStickyScroll.border #C4A05C20
sideBarStickyScroll.shadow #060C1830
sideBarTitle.background #0B1320
sideBarTitle.border #C4A05C20
sideBarTitle.foreground #C4A05C
sideBySideEditor.horizontalBorder #C4A05C20
sideBySideEditor.verticalBorder #C4A05C20
simpleFindWidget.sashBorder #C4A05C
statusBar.background #080F1A
statusBar.border #080F1A
statusBar.debuggingBackground #6BBF5B
statusBar.debuggingBorder #6BBF5B80
statusBar.debuggingForeground #0E1826
statusBar.focusBorder #C4A05C
statusBar.foreground #E4E8F0
statusBar.noFolderBackground #080F1A
statusBar.noFolderBorder #080F1A
statusBar.noFolderForeground #E4E8F0
statusBarItem.activeBackground #C4A05C50
statusBarItem.compactHoverBackground #C4A05C40
statusBarItem.errorBackground #E06050
statusBarItem.errorForeground #E4E8F0
statusBarItem.errorHoverBackground #E06050CC
statusBarItem.errorHoverForeground #E4E8F0
statusBarItem.focusBorder #C4A05C
statusBarItem.hoverBackground #C4A05C30
statusBarItem.hoverForeground #E4E8F0
statusBarItem.offlineBackground #8899AA80
statusBarItem.offlineForeground #E4E8F0
statusBarItem.offlineHoverBackground #8899AA60
statusBarItem.offlineHoverForeground #E4E8F0
statusBarItem.prominentBackground #1E3D82
statusBarItem.prominentForeground #E4E8F0
statusBarItem.prominentHoverBackground #162D66
statusBarItem.prominentHoverForeground #E4E8F0
statusBarItem.remoteBackground #5B8CE8
statusBarItem.remoteForeground #0E1826
statusBarItem.remoteHoverBackground #5B8CE8CC
statusBarItem.remoteHoverForeground #0E1826
statusBarItem.warningBackground #D4B06C
statusBarItem.warningForeground #080F1A
statusBarItem.warningHoverBackground #D4B06CCC
statusBarItem.warningHoverForeground #080F1A
symbolIcon.arrayForeground #D4B06C
symbolIcon.booleanForeground #D4B06C
symbolIcon.classForeground #5B8CE8
symbolIcon.colorForeground #C4A05C
symbolIcon.constantForeground #D4B06C
symbolIcon.constructorForeground #6B9BFF
symbolIcon.enumeratorForeground #5B8CE8
symbolIcon.enumeratorMemberForeground #D4B06C
symbolIcon.eventForeground #D4B06C
symbolIcon.fieldForeground #C4A05C
symbolIcon.fileForeground #8899AA
symbolIcon.folderForeground #C4A05C
symbolIcon.functionForeground #6B9BFF
symbolIcon.interfaceForeground #5B8CE8
symbolIcon.keyForeground #C4A05C
symbolIcon.keywordForeground #5B8CE8
symbolIcon.methodForeground #6B9BFF
symbolIcon.moduleForeground #C4A05C
symbolIcon.namespaceForeground #C4A05C
symbolIcon.nullForeground #8899AA80
symbolIcon.numberForeground #D4B06C
symbolIcon.objectForeground #C4A05C
symbolIcon.operatorForeground #6B9BFF
symbolIcon.packageForeground #C4A05C
symbolIcon.propertyForeground #E4E8F0
symbolIcon.referenceForeground #C4A05C
symbolIcon.snippetForeground #8FBF7A
symbolIcon.stringForeground #8FBF7A
symbolIcon.structForeground #5B8CE8
symbolIcon.textForeground #E4E8F0
symbolIcon.typeParameterForeground #5B8CE8
symbolIcon.unitForeground #D4B06C
symbolIcon.variableForeground #E4E8F0
tab.activeBackground #0E1826
tab.activeBorder #C4A05C
tab.activeBorderTop #C4A05C00
tab.activeForeground #E4E8F0
tab.activeModifiedBorder #5B8CE8
tab.border #C4A05C20
tab.dragAndDropBorder #C4A05C
tab.hoverBackground #1A2A4280
tab.hoverBorder #C4A05C50
tab.hoverForeground #E4E8F0
tab.inactiveBackground #0B1320
tab.inactiveForeground #8899AA80
tab.inactiveModifiedBorder #5B8CE880
tab.lastPinnedBorder #C4A05C40
tab.selectedBackground #0E1826
tab.selectedBorderTop #C4A05C
tab.selectedForeground #E4E8F0
tab.unfocusedActiveBackground #0E1826
tab.unfocusedActiveBorder #C4A05C80
tab.unfocusedActiveBorderTop #C4A05C00
tab.unfocusedActiveForeground #E4E8F0CC
tab.unfocusedActiveModifiedBorder #5B8CE8CC
tab.unfocusedHoverBackground #1A2A4260
tab.unfocusedHoverBorder #C4A05C30
tab.unfocusedHoverForeground #E4E8F0CC
tab.unfocusedInactiveBackground #0B1320
tab.unfocusedInactiveForeground #8899AA60
tab.unfocusedInactiveModifiedBorder #5B8CE860
terminal.ansiBlack #060C18
terminal.ansiBlue #5B8CE8
terminal.ansiBrightBlack #999999
terminal.ansiBrightBlue #6B9BFF
terminal.ansiBrightCyan #78D0D4
terminal.ansiBrightGreen #80D470
terminal.ansiBrightMagenta #D898E8
terminal.ansiBrightRed #E06050
terminal.ansiBrightWhite #F0ECF8
terminal.ansiBrightYellow #E8C870
terminal.ansiCyan #5BB8BF
terminal.ansiGreen #6BBF5B
terminal.ansiMagenta #C06BDA
terminal.ansiRed #E87272
terminal.ansiWhite #E4E8F0
terminal.ansiYellow #D4B06C
terminal.background #0E1826
terminal.border #C4A05C20
terminal.dropBackground #C4A05C30
terminal.findMatchBackground #C4A05C80
terminal.findMatchBorder #D4B06C
terminal.findMatchHighlightBackground #C4A05C50
terminal.findMatchHighlightBorder #D4B06C80
terminal.foreground #E4E8F0
terminal.hoverHighlightBackground #C4A05C30
terminal.inactiveSelectionBackground #C4A05C30
terminal.initialHintForeground #8899AA80
terminal.selectionBackground #C4A05C50
terminal.selectionForeground #E4E8F0
terminal.tab.activeBorder #C4A05C
terminalCommandDecoration.defaultBackground #C4A05C50
terminalCommandDecoration.errorBackground #E8727280
terminalCommandDecoration.successBackground #6BBF5B80
terminalCommandGuide.foreground #C4A05C30
terminalCursor.background #0E1826
terminalCursor.foreground #C4A05C
terminalOverviewRuler.border #C4A05C20
terminalOverviewRuler.cursorForeground #C4A05C
terminalOverviewRuler.findMatchForeground #C4A05CCC
terminalStickyScroll.background #0B1320
terminalStickyScroll.border #C4A05C20
terminalStickyScrollHover.background #1C2E48
terminalSymbolIcon.aliasForeground #C4A05C
terminalSymbolIcon.argumentForeground #D4B06C
terminalSymbolIcon.branchForeground #6BBF5B
terminalSymbolIcon.commitForeground #C4A05C
terminalSymbolIcon.fileForeground #8899AA
terminalSymbolIcon.flagForeground #D4B06C
terminalSymbolIcon.folderForeground #C4A05C
terminalSymbolIcon.inlineSuggestionForeground #8899AA80
terminalSymbolIcon.methodForeground #6B9BFF
terminalSymbolIcon.optionForeground #E4E8F0
terminalSymbolIcon.optionValueForeground #8FBF7A
terminalSymbolIcon.pullRequestDoneForeground #6BBF5B
terminalSymbolIcon.pullRequestForeground #C4A05C
terminalSymbolIcon.remoteForeground #5B8CE8
terminalSymbolIcon.stashForeground #5B8CE8
terminalSymbolIcon.symbolicLinkFileForeground #C4A05C80
terminalSymbolIcon.symbolicLinkFolderForeground #C4A05C80
terminalSymbolIcon.symbolText #E4E8F0
terminalSymbolIcon.tagForeground #5B8CE8
testing.coverCountBadgeBackground #C4A05C
testing.coverCountBadgeForeground #E4E8F0
testing.coveredBackground #6BBF5B15
testing.coveredBorder #6BBF5B40
testing.coveredGutterBackground #6BBF5B50
testing.iconErrored #E06050
testing.iconErrored.retired #E0605060
testing.iconFailed #E06050
testing.iconFailed.retired #E0605060
testing.iconPassed #6BBF5B
testing.iconPassed.retired #6BBF5B60
testing.iconQueued #D4B06C
testing.iconQueued.retired #D4B06C60
testing.iconSkipped #8899AA80
testing.iconSkipped.retired #8899AA50
testing.iconUnset #8899AA80
testing.iconUnset.retired #8899AA50
testing.message.error.badgeBackground #E06050
testing.message.error.badgeBorder #E0605080
testing.message.error.badgeForeground #E4E8F0
testing.message.error.lineBackground #E0605015
testing.message.info.decorationForeground #5B8CE8
testing.message.info.lineBackground #5B8CE815
testing.messagePeekBorder #5B8CE8
testing.messagePeekHeaderBackground #5B8CE820
testing.peekBorder #E06050
testing.peekHeaderBackground #E0605020
testing.runAction #6BBF5B
testing.uncoveredBackground #E0605015
testing.uncoveredBorder #E0605040
testing.uncoveredBranchBackground #E0605030
testing.uncoveredGutterBackground #E0605050
textBlockQuote.background #142038
textBlockQuote.border #C4A05C80
textCodeBlock.background #1A2A42
textLink.activeForeground #C4A05C
textLink.foreground #C4A05CCC
textPreformat.background #1A2A42
textPreformat.border #C4A05C30
textPreformat.foreground #8FBF7A
textSeparator.foreground #C4A05C30
titleBar.activeBackground #080F1A
titleBar.activeForeground #E4E8F0
titleBar.border #080F1A
titleBar.inactiveBackground #080F1A
titleBar.inactiveForeground #8899AA80
toolbar.activeBackground #C4A05C40
toolbar.hoverBackground #C4A05C30
toolbar.hoverOutline #C4A05C00
tree.inactiveIndentGuidesStroke #C4A05C20
tree.indentGuidesStroke #C4A05C40
tree.tableColumnsBorder #C4A05C20
tree.tableOddRowsBackground #0E182650
walkThrough.embeddedEditorBackground #0B1320
walkthrough.stepTitle.foreground #E4E8F0
welcomePage.background #0E1826
welcomePage.progress.background #1A2A42
welcomePage.progress.foreground #C4A05C
welcomePage.tileBackground #0B1320
welcomePage.tileBorder #C4A05C20
welcomePage.tileHoverBackground #1C2E48
widget.border #C4A05C30
widget.shadow #060C1850
window.activeBorder #C4A05C00
window.inactiveBorder #C4A05C00 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 #6B9BFF —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #D87048 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #6B9BFF —
meta.block variable.other #E4E8F0 —
support.other.variable, string.other.link #E4E8F0 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #D4B06C —
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 #8FBF7A —
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 #6B9BFF —
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 #6B9BFF —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #E4E8F0 —
variable.language #5B8CE8 italic
entity.name.method.js #6B9BFF italic
meta.class-method.js entity.name.function.js, variable.function.constructor #6B9BFF —
entity.other.attribute-name #5B8CE8 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #D4B06C italic
entity.other.attribute-name.class #D4B06C —
source.sass keyword.control #6B9BFF —
constant.character.escape #C4A05C —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #6B9BFF italic
source.js constant.other.object.key.js string.unquoted.label.js #E4E8F0 italic
source.json meta.structure.dictionary.json support.type.property-name.json #C4A05C —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #5B8CE8 —
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 #8FBF7A —
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 #C4A05C —
text.html.markdown, punctuation.definition.list_item.markdown #E4E8F0 —
text.html.markdown markup.inline.raw.markdown #5B8CE8 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #6B9BFF —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #C4A05C —
markup.italic #5B8CE8 italic
markup.bold, markup.bold string #5B8CE8 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 #5B8CE8 bold
markup.underline #8FBF7A underline
markup.quote punctuation.definition.blockquote.markdown #C4A05C —
string.other.link.title.markdown #6B9BFF —
string.other.link.description.title.markdown #5B8CE8 —
constant.other.reference.link.markdown #8FBF7A —
markup.raw.block.fenced.markdown #E4E8F0 —
punctuation.definition.fenced.markdown #E4E8F0 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #E4E8F0 —
variable.language.fenced.markdown #6B9BFF —
meta.separator #C4A05C 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}!`;
}