Skip to main content
Home Theme VS Code South Australia A professional theme for Visual Studio Code featuring South Australia's iconic blue and red colour palette.
South Australia | 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 #01216940 activityBar.activeBackground #0A0C1850 activityBar.activeBorder #012169 activityBar.activeFocusBorder #012169 activityBar.background #050710 activityBar.border #050710 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #A8B4D080 italic variable, string constant.other.placeholder #E8EDF3 — constant.other.color #012169 — invalid, invalid.illegal #E4002B — 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}!`;
}
South Australia — South Australia Dark main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
activityBar.dropBorder #012169
activityBar.foreground #E8EDF3
activityBar.inactiveForeground #A8B4D080
activityBarBadge.background #012169
activityBarBadge.foreground #E8EDF3
activityBarTop.activeBackground #0A0C1850
activityBarTop.activeBorder #012169
activityBarTop.background #050710
activityBarTop.dropBorder #012169
activityBarTop.foreground #E8EDF3
activityBarTop.inactiveForeground #A8B4D080
activityErrorBadge.background #E4002B
activityErrorBadge.foreground #E8EDF3
activityWarningBadge.background #FFCC2C
activityWarningBadge.foreground #E8EDF3
agentSessionReadIndicator.foreground #012169
agentSessionSelectedBadge.border #01216950
agentSessionSelectedUnfocusedBadge.border #E8EDF350
agentStatusIndicator.background #161928
aiCustomizationManagement.sashBorder #012169
badge.background #012169
badge.foreground #E8EDF3
banner.background #012169
banner.foreground #E8EDF3
banner.iconForeground #E8EDF3
breadcrumb.activeSelectionForeground #012169
breadcrumb.background #0A0C18
breadcrumb.focusForeground #E8EDF3
breadcrumb.foreground #A8B4D0
breadcrumbPicker.background #111420
button.background #012169
button.border #01216900
button.foreground #E8EDF3
button.hoverBackground #001550
button.secondaryBackground #161928
button.secondaryBorder #01216950
button.secondaryForeground #E8EDF3
button.secondaryHoverBackground #202438
button.separator #E8EDF340
charts.blue #012169
charts.foreground #E8EDF3
charts.green #339D37
charts.lines #A8B4D080
charts.orange #7EB8DA
charts.purple #F03050
charts.red #E4002B
charts.yellow #FFCC2C
chat.avatarBackground #012169
chat.avatarForeground #E8EDF3
chat.checkpointSeparator #01216950
chat.editedFileForeground #012169
chat.inputWorkingBorderColor1 #012169
chat.inputWorkingBorderColor2 #001550
chat.inputWorkingBorderColor3 #012169
chat.linesAddedForeground #339D37CC
chat.linesRemovedForeground #E4002BCC
chat.requestBackground #161928
chat.requestBorder #01216950
chat.requestBubbleBackground #161928E6
chat.requestBubbleHoverBackground #202438E6
chat.requestCodeBorder #01216930
chat.slashCommandBackground #012169
chat.slashCommandForeground #E8EDF3
chat.thinkingShimmer #01216940
chatManagement.sashBorder #012169
checkbox.background #1A1D2A
checkbox.border #01216950
checkbox.disabled.background #1A1D2A80
checkbox.disabled.foreground #A8B4D060
checkbox.foreground #012169
checkbox.selectBackground #1A1D2A
checkbox.selectBorder #012169
commandCenter.activeBackground #E8EDF325
commandCenter.activeBorder #E8EDF350
commandCenter.activeForeground #E8EDF3
commandCenter.background #E8EDF315
commandCenter.border #E8EDF330
commandCenter.debuggingBackground #339D3730
commandCenter.foreground #E8EDF3
commandCenter.inactiveBorder #E8EDF320
commandCenter.inactiveForeground #A8B4D080
commentsView.resolvedIcon #339D37
commentsView.unresolvedIcon #FFCC2C
contrastActiveBorder #01216900
contrastBorder #01216900
debugConsole.errorForeground #E4002B
debugConsole.infoForeground #5B9BD5
debugConsole.sourceForeground #A8B4D0
debugConsole.warningForeground #FFCC2C
debugConsoleInputIcon.foreground #012169
debugExceptionWidget.background #E4002B20
debugExceptionWidget.border #E4002B80
debugIcon.breakpointCurrentStackframeForeground #FFCC2C
debugIcon.breakpointDisabledForeground #A8B4D080
debugIcon.breakpointForeground #E4002B
debugIcon.breakpointStackframeForeground #339D37
debugIcon.breakpointUnverifiedForeground #FFCC2C
debugIcon.continueForeground #339D37
debugIcon.disconnectForeground #E4002B
debugIcon.pauseForeground #FFCC2C
debugIcon.restartForeground #339D37
debugIcon.startForeground #339D37
debugIcon.stepBackForeground #012169
debugIcon.stepIntoForeground #012169
debugIcon.stepOutForeground #012169
debugIcon.stepOverForeground #012169
debugIcon.stopForeground #E4002B
debugTokenExpression.boolean #7EB8DA
debugTokenExpression.error #E4002B
debugTokenExpression.name #F03050
debugTokenExpression.number #7EB8DA
debugTokenExpression.string #6BBE27
debugTokenExpression.type #F03050
debugTokenExpression.value #6BBE27
debugToolBar.background #111420
debugView.exceptionLabelBackground #E4002B80
debugView.exceptionLabelForeground #E8EDF3
debugView.stateLabelBackground #01216950
debugView.stateLabelForeground #E8EDF3
debugView.valueChangedHighlight #01216980
descriptionForeground #A8B4D0
diffEditor.border #01216920
diffEditor.diagonalFill #01216920
diffEditor.insertedLineBackground #339D3715
diffEditor.insertedTextBackground #339D3720
diffEditor.insertedTextBorder #339D3750
diffEditor.move.border #01216980
diffEditor.moveActive.border #012169
diffEditor.removedLineBackground #E4002B15
diffEditor.removedTextBackground #E4002B20
diffEditor.removedTextBorder #E4002B50
diffEditor.unchangedCodeBackground #0A0C1880
diffEditor.unchangedRegionBackground #111420
diffEditor.unchangedRegionForeground #A8B4D080
diffEditor.unchangedRegionShadow #00000030
diffEditorGutter.insertedLineBackground #339D3730
diffEditorGutter.removedLineBackground #E4002B30
diffEditorOverview.insertedForeground #339D3780
diffEditorOverview.removedForeground #E4002B80
disabledForeground #A8B4D060
dropdown.background #1A1D2A
dropdown.border #01216950
dropdown.foreground #E8EDF3
dropdown.listBackground #111420
editor.background #0A0C18
editor.compositionBorder #012169
editor.findMatchBackground #01216980
editor.findMatchBorder #012169
editor.findMatchForeground #E8EDF3
editor.findMatchHighlightBackground #01216950
editor.findMatchHighlightBorder #01216980
editor.findMatchHighlightForeground #E8EDF3
editor.findRangeHighlightBackground #01216920
editor.findRangeHighlightBorder #01216900
editor.focusedStackFrameHighlightBackground #339D3730
editor.foldBackground #01216915
editor.foldPlaceholderForeground #A8B4D080
editor.foreground #E8EDF3
editor.hoverHighlightBackground #01216925
editor.inactiveLineHighlightBackground #1A1D2A80
editor.inactiveSelectionBackground #01216930
editor.inlineValuesBackground #01216915
editor.inlineValuesForeground #A8B4D0CC
editor.lineHighlightBackground #1A1D2A
editor.lineHighlightBorder #01216915
editor.linkedEditingBackground #01216930
editor.placeholder.foreground #A8B4D080
editor.rangeHighlightBackground #01216915
editor.rangeHighlightBorder #01216900
editor.selectionBackground #01216950
editor.selectionForeground #E8EDF3
editor.selectionHighlightBackground #01216930
editor.selectionHighlightBorder #01216950
editor.stackFrameHighlightBackground #FFCC2C30
editor.symbolHighlightBackground #01216930
editor.symbolHighlightBorder #01216950
editor.wordHighlightBackground #01216930
editor.wordHighlightBorder #01216950
editor.wordHighlightStrongBackground #01216950
editor.wordHighlightStrongBorder #01216980
editor.wordHighlightTextBackground #01216920
editor.wordHighlightTextBorder #01216940
editorActionList.background #111420
editorActionList.focusBackground #01216940
editorActionList.focusForeground #E8EDF3
editorActionList.foreground #E8EDF3
editorBracketHighlight.foreground1 #4477BB
editorBracketHighlight.foreground2 #E4002B
editorBracketHighlight.foreground3 #FFCC2C
editorBracketHighlight.foreground4 #6BBE27
editorBracketHighlight.foreground5 #5B9BD5
editorBracketHighlight.foreground6 #7EB8DA
editorBracketHighlight.unexpectedBracket.foreground #E4002B
editorBracketMatch.border #01216980
editorBracketMatch.foreground #012169
editorBracketPairGuide.activeBackground1 #4477BB80
editorBracketPairGuide.activeBackground2 #E4002B80
editorBracketPairGuide.activeBackground3 #FFCC2C80
editorBracketPairGuide.activeBackground4 #6BBE2780
editorBracketPairGuide.activeBackground5 #5B9BD580
editorBracketPairGuide.activeBackground6 #7EB8DA80
editorBracketPairGuide.background1 #4477BB40
editorBracketPairGuide.background2 #E4002B40
editorBracketPairGuide.background3 #FFCC2C40
editorBracketPairGuide.background4 #6BBE2740
editorBracketPairGuide.background5 #5B9BD540
editorBracketPairGuide.background6 #7EB8DA40
editorCodeLens.foreground #A8B4D080
editorCommentsWidget.rangeActiveBackground #01216920
editorCommentsWidget.rangeBackground #01216910
editorCommentsWidget.replyInputBackground #1A1D2A
editorCommentsWidget.resolvedBorder #339D3750
editorCommentsWidget.unresolvedBorder #FFCC2C
editorCursor.background #0A0C18
editorCursor.foreground #012169
editorError.background #E4002B15
editorError.border #E4002B00
editorError.foreground #E4002B
editorGhostText.background #01216900
editorGhostText.border #01216900
editorGhostText.foreground #01216980
editorGroup.border #01216920
editorGroup.dropBackground #01216930
editorGroup.dropIntoPromptBackground #111420
editorGroup.dropIntoPromptBorder #01216950
editorGroup.dropIntoPromptForeground #E8EDF3
editorGroup.emptyBackground #0A0C18
editorGroup.focusedEmptyBorder #01216950
editorGroupHeader.border #01216920
editorGroupHeader.noTabsBackground #0A0C18
editorGroupHeader.tabsBackground #111420
editorGroupHeader.tabsBorder #01216920
editorGutter.addedBackground #339D37
editorGutter.addedSecondaryBackground #339D3780
editorGutter.background #0A0C18
editorGutter.commentDraftGlyphForeground #01216980
editorGutter.commentGlyphForeground #012169
editorGutter.commentRangeForeground #A8B4D050
editorGutter.commentUnresolvedGlyphForeground #FFCC2C
editorGutter.deletedBackground #E4002B
editorGutter.deletedSecondaryBackground #E4002B80
editorGutter.foldingControlForeground #A8B4D080
editorGutter.itemBackground #111420
editorGutter.itemGlyphForeground #012169
editorGutter.modifiedBackground #012169
editorGutter.modifiedSecondaryBackground #01216980
editorHint.border #339D3700
editorHint.foreground #339D37
editorHoverWidget.background #111420
editorHoverWidget.border #01216950
editorHoverWidget.foreground #E8EDF3
editorHoverWidget.highlightForeground #012169
editorHoverWidget.statusBarBackground #161928
editorIndentGuide.activeBackground1 #4477BB
editorIndentGuide.activeBackground2 #E4002B
editorIndentGuide.activeBackground3 #FFCC2C
editorIndentGuide.activeBackground4 #6BBE27
editorIndentGuide.activeBackground5 #5B9BD5
editorIndentGuide.activeBackground6 #7EB8DA
editorIndentGuide.background1 #4477BB25
editorIndentGuide.background2 #E4002B25
editorIndentGuide.background3 #FFCC2C25
editorIndentGuide.background4 #6BBE2725
editorIndentGuide.background5 #5B9BD525
editorIndentGuide.background6 #7EB8DA25
editorInfo.background #5B9BD515
editorInfo.border #5B9BD500
editorInfo.foreground #5B9BD5
editorInlayHint.background #1A1D2A
editorInlayHint.foreground #A8B4D0
editorInlayHint.parameterBackground #1A1D2A
editorInlayHint.parameterForeground #A8B4D0
editorInlayHint.typeBackground #1A1D2A
editorInlayHint.typeForeground #6BBE27
editorLightBulb.foreground #FFCC2C
editorLightBulbAi.foreground #012169
editorLightBulbAutoFix.foreground #339D37
editorLineNumber.activeForeground #012169
editorLineNumber.dimmedForeground #A8B4D050
editorLineNumber.foreground #F03050
editorLink.activeForeground #012169
editorMarkerNavigation.background #111420
editorMarkerNavigationError.background #E4002B30
editorMarkerNavigationError.headerBackground #E4002B20
editorMarkerNavigationInfo.background #5B9BD530
editorMarkerNavigationInfo.headerBackground #5B9BD520
editorMarkerNavigationWarning.background #FFCC2C30
editorMarkerNavigationWarning.headerBackground #FFCC2C20
editorMinimap.inlineChatInserted #339D3740
editorMinimap.inlineChatRemoved #E4002B40
editorMultiCursor.primary.background #0A0C18
editorMultiCursor.primary.foreground #012169
editorMultiCursor.secondary.background #0A0C18
editorMultiCursor.secondary.foreground #F03050
editorOverviewRuler.addedForeground #339D37
editorOverviewRuler.background #0A0C18
editorOverviewRuler.border #01216920
editorOverviewRuler.bracketMatchForeground #01216980
editorOverviewRuler.commentDraftForeground #01216960
editorOverviewRuler.commentForeground #01216940
editorOverviewRuler.commentUnresolvedForeground #FFCC2C80
editorOverviewRuler.commonContentForeground #A8B4D050
editorOverviewRuler.currentContentForeground #339D3780
editorOverviewRuler.deletedForeground #E4002B
editorOverviewRuler.errorForeground #E4002B
editorOverviewRuler.findMatchForeground #012169CC
editorOverviewRuler.incomingContentForeground #01216980
editorOverviewRuler.infoForeground #5B9BD5
editorOverviewRuler.inlineChatInserted #339D3780
editorOverviewRuler.inlineChatRemoved #E4002B80
editorOverviewRuler.modifiedForeground #012169
editorOverviewRuler.rangeHighlightForeground #01216999
editorOverviewRuler.selectionHighlightForeground #01216999
editorOverviewRuler.warningForeground #FFCC2C
editorOverviewRuler.wordHighlightForeground #01216999
editorOverviewRuler.wordHighlightStrongForeground #012169CC
editorOverviewRuler.wordHighlightTextForeground #01216980
editorPane.background #0A0C18
editorRuler.foreground #F0305030
editorSnippetFinalTabstopHighlightBackground #339D3730
editorSnippetFinalTabstopHighlightBorder #339D3700
editorSnippetTabstopHighlightBackground #01216930
editorSnippetTabstopHighlightBorder #01216900
editorStickyScroll.background #111420
editorStickyScroll.border #01216920
editorStickyScroll.shadow #00000030
editorStickyScrollGutter.background #111420
editorStickyScrollHover.background #202438
editorSuggestWidget.background #111420
editorSuggestWidget.border #01216950
editorSuggestWidget.focusHighlightForeground #012169
editorSuggestWidget.foreground #E8EDF3
editorSuggestWidget.highlightForeground #012169
editorSuggestWidget.selectedBackground #01216950
editorSuggestWidget.selectedForeground #E8EDF3
editorSuggestWidget.selectedIconForeground #E8EDF3
editorSuggestWidgetStatus.foreground #A8B4D080
editorUnicodeHighlight.background #FFCC2C20
editorUnicodeHighlight.border #FFCC2C
editorUnnecessaryCode.border #A8B4D050
editorUnnecessaryCode.opacity #000000AA
editorWarning.background #FFCC2C15
editorWarning.border #FFCC2C00
editorWarning.foreground #FFCC2C
editorWhitespace.foreground #F0305050
editorWidget.background #111420
editorWidget.border #01216950
editorWidget.foreground #E8EDF3
editorWidget.resizeBorder #012169
errorForeground #E4002B
extensionBadge.remoteBackground #012169
extensionBadge.remoteForeground #E8EDF3
extensionButton.background #012169
extensionButton.border #01216900
extensionButton.foreground #E8EDF3
extensionButton.hoverBackground #001550
extensionButton.prominentBackground #012169
extensionButton.prominentForeground #E8EDF3
extensionButton.prominentHoverBackground #001550
extensionButton.separator #E8EDF340
extensionIcon.preReleaseForeground #012169
extensionIcon.privateForeground #A8B4D080
extensionIcon.sponsorForeground #F03050
extensionIcon.starForeground #FFCC2C
extensionIcon.verifiedForeground #339D37
focusBorder #012169
foreground #E8EDF3
gauge.background #111420
gauge.border #01216930
gauge.errorBackground #E4002B30
gauge.errorForeground #E4002B
gauge.foreground #E8EDF3
gauge.warningBackground #FFCC2C30
gauge.warningForeground #FFCC2C
git.blame.editorDecorationForeground #A8B4D060
gitDecoration.addedResourceForeground #339D37
gitDecoration.conflictingResourceForeground #FFCC2C
gitDecoration.deletedResourceForeground #E4002B
gitDecoration.ignoredResourceForeground #A8B4D080
gitDecoration.modifiedResourceForeground #012169
gitDecoration.renamedResourceForeground #012169
gitDecoration.stageDeletedResourceForeground #E4002BCC
gitDecoration.stageModifiedResourceForeground #012169CC
gitDecoration.submoduleResourceForeground #6BBE27
gitDecoration.untrackedResourceForeground #339D37
icon.foreground #012169
inlineChat.background #111420
inlineChat.border #01216950
inlineChat.foreground #E8EDF3
inlineChat.shadow #00000080
inlineChatDiff.inserted #339D3730
inlineChatDiff.removed #E4002B30
inlineChatInput.background #1A1D2A
inlineChatInput.border #01216950
inlineChatInput.focusBorder #012169
inlineChatInput.placeholderForeground #A8B4D080
inlineEdit.gutterIndicator.background #111420
inlineEdit.gutterIndicator.primaryBackground #01216920
inlineEdit.gutterIndicator.primaryBorder #012169
inlineEdit.gutterIndicator.primaryForeground #012169
inlineEdit.gutterIndicator.secondaryBackground #F0305020
inlineEdit.gutterIndicator.secondaryBorder #F03050
inlineEdit.gutterIndicator.secondaryForeground #F03050
inlineEdit.gutterIndicator.successfulBackground #339D3720
inlineEdit.gutterIndicator.successfulBorder #339D37
inlineEdit.gutterIndicator.successfulForeground #339D37
inlineEdit.modifiedBackground #01216915
inlineEdit.modifiedBorder #01216950
inlineEdit.modifiedChangedLineBackground #01216920
inlineEdit.modifiedChangedTextBackground #01216930
inlineEdit.originalBackground #E4002B10
inlineEdit.originalBorder #E4002B30
inlineEdit.originalChangedLineBackground #E4002B15
inlineEdit.originalChangedTextBackground #E4002B25
inlineEdit.tabWillAcceptModifiedBorder #339D3780
inlineEdit.tabWillAcceptOriginalBorder #E4002B50
input.background #1A1D2A
input.border #01216950
input.foreground #E8EDF3
input.placeholderForeground #A8B4D080
inputOption.activeBackground #01216940
inputOption.activeBorder #012169
inputOption.activeForeground #E8EDF3
inputOption.hoverBackground #01216920
inputValidation.errorBackground #E4002B20
inputValidation.errorBorder #E4002B
inputValidation.errorForeground #E4002B
inputValidation.infoBackground #5B9BD520
inputValidation.infoBorder #5B9BD5
inputValidation.infoForeground #5B9BD5
inputValidation.warningBackground #FFCC2C20
inputValidation.warningBorder #FFCC2C
inputValidation.warningForeground #FFCC2C
interactive.activeCodeBorder #012169
interactive.inactiveCodeBorder #01216930
keybindingLabel.background #01216920
keybindingLabel.border #01216940
keybindingLabel.bottomBorder #01216960
keybindingLabel.foreground #E8EDF3
keybindingTable.headerBackground #161928
keybindingTable.rowsBackground #0A0C1880
list.activeSelectionBackground #01216950
list.activeSelectionForeground #E8EDF3
list.activeSelectionIconForeground #E8EDF3
list.deemphasizedForeground #A8B4D080
list.dropBackground #01216930
list.dropBetweenBackground #012169
list.errorForeground #E4002B
list.filterMatchBorder #01216980
list.focusAndSelectionOutline #012169
list.focusBackground #01216940
list.focusForeground #E8EDF3
list.focusHighlightForeground #012169
list.focusOutline #01216980
list.highlightForeground #4477BB
list.hoverBackground #01216920
list.hoverForeground #E8EDF3
list.inactiveFocusBackground #01216920
list.inactiveFocusOutline #01216950
list.inactiveSelectionBackground #01216930
list.inactiveSelectionForeground #E8EDF3
list.inactiveSelectionIconForeground #E8EDF3
list.invalidItemForeground #E4002B
list.warningForeground #FFCC2C
listFilterWidget.background #1A1D2A
listFilterWidget.noMatchesOutline #E4002B
listFilterWidget.outline #012169
listFilterWidget.shadow #00000050
markdownAlert.caution.foreground #E4002B
markdownAlert.important.foreground #F03050
markdownAlert.note.foreground #5B9BD5
markdownAlert.tip.foreground #339D37
markdownAlert.warning.foreground #FFCC2C
mcpIcon.starForeground #FFCC2C
menu.background #111420
menu.border #01216920
menu.foreground #E8EDF3
menu.selectionBackground #01216950
menu.selectionBorder #01216900
menu.selectionForeground #E8EDF3
menu.separatorBackground #01216930
menubar.selectionBackground #01216950
menubar.selectionBorder #01216900
menubar.selectionForeground #E8EDF3
merge.border #01216950
merge.commonContentBackground #A8B4D020
merge.commonHeaderBackground #A8B4D050
merge.currentContentBackground #339D3720
merge.currentHeaderBackground #339D3750
merge.incomingContentBackground #01216920
merge.incomingHeaderBackground #01216950
mergeEditor.change.background #01216920
mergeEditor.change.word.background #01216940
mergeEditor.changeBase.background #A8B4D015
mergeEditor.changeBase.word.background #A8B4D030
mergeEditor.conflict.handled.minimapOverViewRuler #339D37
mergeEditor.conflict.handledFocused.border #339D37
mergeEditor.conflict.handledUnfocused.border #339D3750
mergeEditor.conflict.input1.background #339D3720
mergeEditor.conflict.input2.background #01216920
mergeEditor.conflict.unhandled.minimapOverViewRuler #FFCC2C
mergeEditor.conflict.unhandledFocused.border #FFCC2C
mergeEditor.conflict.unhandledUnfocused.border #FFCC2C80
mergeEditor.conflictingLines.background #FFCC2C20
minimap.background #0A0C18
minimap.chatEditHighlight #01216940
minimap.errorHighlight #E4002B
minimap.findMatchHighlight #01216980
minimap.foregroundOpacity #000000FF
minimap.infoHighlight #5B9BD5
minimap.selectionHighlight #01216950
minimap.selectionOccurrenceHighlight #01216940
minimap.warningHighlight #FFCC2C
minimapGutter.addedBackground #339D37
minimapGutter.deletedBackground #E4002B
minimapGutter.modifiedBackground #012169
minimapSlider.activeBackground #01216970
minimapSlider.background #01216930
minimapSlider.hoverBackground #01216950
multiDiffEditor.background #0A0C18
multiDiffEditor.border #01216920
multiDiffEditor.headerBackground #111420
notebook.cellBorderColor #01216930
notebook.cellEditorBackground #111420
notebook.cellHoverBackground #202438
notebook.cellInsertionIndicator #012169
notebook.cellStatusBarItemHoverBackground #01216930
notebook.cellToolbarSeparator #01216920
notebook.editorBackground #0A0C18
notebook.focusedCellBackground #161928
notebook.focusedCellBorder #012169
notebook.focusedEditorBorder #012169
notebook.inactiveFocusedCellBorder #01216950
notebook.inactiveSelectedCellBorder #01216930
notebook.outputContainerBackgroundColor #050710
notebook.outputContainerBorderColor #01216920
notebook.selectedCellBackground #01216920
notebook.selectedCellBorder #01216980
notebook.symbolHighlightBackground #01216930
notebookEditorOverviewRuler.runningCellForeground #012169
notebookScrollbarSlider.activeBackground #01216970
notebookScrollbarSlider.background #01216930
notebookScrollbarSlider.hoverBackground #01216950
notebookStatusErrorIcon.foreground #E4002B
notebookStatusRunningIcon.foreground #012169
notebookStatusSuccessIcon.foreground #339D37
notificationCenter.border #01216920
notificationCenterHeader.background #111420
notificationCenterHeader.foreground #E8EDF3
notificationLink.foreground #012169
notifications.background #111420
notifications.border #01216920
notifications.foreground #E8EDF3
notificationsErrorIcon.foreground #E4002B
notificationsInfoIcon.foreground #5B9BD5
notificationsWarningIcon.foreground #FFCC2C
notificationToast.border #01216920
outputView.background #111420
outputViewStickyScroll.background #111420
panel.background #111420
panel.border #01216920
panel.dropBorder #012169
panelInput.border #01216950
panelSection.border #01216920
panelSection.dropBackground #01216930
panelSectionHeader.background #11142080
panelSectionHeader.border #01216920
panelSectionHeader.foreground #012169
panelStickyScroll.background #111420
panelStickyScroll.border #01216920
panelStickyScroll.shadow #00000030
panelTitle.activeBorder #012169
panelTitle.activeForeground #012169
panelTitle.border #01216920
panelTitle.inactiveForeground #A8B4D080
panelTitleBadge.background #012169
panelTitleBadge.foreground #E8EDF3
peekView.border #012169
peekViewEditor.background #0A0C18
peekViewEditor.matchHighlightBackground #01216950
peekViewEditor.matchHighlightBorder #01216980
peekViewEditorGutter.background #0A0C18
peekViewEditorStickyScroll.background #111420
peekViewEditorStickyScrollGutter.background #111420
peekViewResult.background #111420
peekViewResult.fileForeground #E8EDF3
peekViewResult.lineForeground #A8B4D0
peekViewResult.matchHighlightBackground #01216950
peekViewResult.selectionBackground #01216950
peekViewResult.selectionForeground #E8EDF3
peekViewTitle.background #000000
peekViewTitleDescription.foreground #A8B4D0
peekViewTitleLabel.foreground #012169
pickerGroup.border #01216930
pickerGroup.foreground #012169
ports.iconRunningProcessForeground #339D37
problemsErrorIcon.foreground #E4002B
problemsInfoIcon.foreground #5B9BD5
problemsWarningIcon.foreground #FFCC2C
profileBadge.background #012169
profileBadge.foreground #E8EDF3
profiles.sashBorder #012169
progressBar.background #012169
quickInput.background #111420
quickInput.border #01216930
quickInput.foreground #E8EDF3
quickInputList.focusBackground #01216940
quickInputList.focusForeground #E8EDF3
quickInputList.focusIconForeground #E8EDF3
quickInputList.hoverBackground #202438
quickInputTitle.background #161928
radio.activeBackground #012169
radio.activeBorder #012169
radio.activeForeground #E8EDF3
radio.inactiveBackground #1A1D2A
radio.inactiveBorder #01216950
radio.inactiveForeground #A8B4D0
radio.inactiveHoverBackground #202438
sash.hoverBorder #012169
scmGraph.foreground1 #012169
scmGraph.foreground2 #F03050
scmGraph.foreground3 #6BBE27
scmGraph.foreground4 #FFCC2C
scmGraph.foreground5 #339D37
scmGraph.historyItemBaseRefColor #6BBE27
scmGraph.historyItemHoverAdditionsForeground #339D37
scmGraph.historyItemHoverDeletionsForeground #E4002B
scmGraph.historyItemHoverLabelForeground #E8EDF3
scmGraph.historyItemRefColor #012169
scmGraph.historyItemRemoteRefColor #F03050
scrollbar.background #0A0C1800
scrollbar.shadow #00000050
scrollbarSlider.activeBackground #01216970
scrollbarSlider.background #01216930
scrollbarSlider.hoverBackground #01216950
search.resultsInfoForeground #A8B4D0
searchEditor.findMatchBackground #01216940
searchEditor.findMatchBorder #01216980
searchEditor.textInputBorder #01216950
selection.background #01216950
settings.checkboxBackground #1A1D2A
settings.checkboxBorder #01216950
settings.checkboxForeground #012169
settings.dropdownBackground #1A1D2A
settings.dropdownBorder #01216950
settings.dropdownForeground #E8EDF3
settings.dropdownListBorder #01216930
settings.focusedRowBackground #01216915
settings.focusedRowBorder #01216940
settings.headerBorder #01216920
settings.headerForeground #E8EDF3
settings.modifiedItemIndicator #012169
settings.numberInputBackground #1A1D2A
settings.numberInputBorder #01216950
settings.numberInputForeground #E8EDF3
settings.rowHoverBackground #01216915
settings.sashBorder #012169
settings.settingsHeaderHoverForeground #012169
settings.textInputBackground #1A1D2A
settings.textInputBorder #01216950
settings.textInputForeground #E8EDF3
sideBar.background #111420
sideBar.border #01216920
sideBar.dropBackground #01216930
sideBar.foreground #E8EDF3
sideBarActivityBarTop.border #01216920
sideBarSectionHeader.background #11142080
sideBarSectionHeader.border #01216920
sideBarSectionHeader.foreground #012169
sideBarStickyScroll.background #111420
sideBarStickyScroll.border #01216920
sideBarStickyScroll.shadow #00000030
sideBarTitle.background #111420
sideBarTitle.border #01216920
sideBarTitle.foreground #012169
sideBySideEditor.horizontalBorder #01216920
sideBySideEditor.verticalBorder #01216920
simpleFindWidget.sashBorder #012169
statusBar.background #050710
statusBar.border #050710
statusBar.debuggingBackground #339D37
statusBar.debuggingBorder #339D3780
statusBar.debuggingForeground #E8EDF3
statusBar.focusBorder #012169
statusBar.foreground #E8EDF3
statusBar.noFolderBackground #050710
statusBar.noFolderBorder #050710
statusBar.noFolderForeground #E8EDF3
statusBarItem.activeBackground #01216950
statusBarItem.compactHoverBackground #01216940
statusBarItem.errorBackground #E4002B
statusBarItem.errorForeground #E8EDF3
statusBarItem.errorHoverBackground #E4002BCC
statusBarItem.errorHoverForeground #E8EDF3
statusBarItem.focusBorder #012169
statusBarItem.hoverBackground #01216930
statusBarItem.hoverForeground #E8EDF3
statusBarItem.offlineBackground #A8B4D080
statusBarItem.offlineForeground #E8EDF3
statusBarItem.offlineHoverBackground #A8B4D060
statusBarItem.offlineHoverForeground #E8EDF3
statusBarItem.prominentBackground #012169
statusBarItem.prominentForeground #E8EDF3
statusBarItem.prominentHoverBackground #001550
statusBarItem.prominentHoverForeground #E8EDF3
statusBarItem.remoteBackground #F03050
statusBarItem.remoteForeground #E8EDF3
statusBarItem.remoteHoverBackground #F03050CC
statusBarItem.remoteHoverForeground #E8EDF3
statusBarItem.warningBackground #FFCC2C
statusBarItem.warningForeground #050710
statusBarItem.warningHoverBackground #FFCC2CCC
statusBarItem.warningHoverForeground #050710
symbolIcon.arrayForeground #7EB8DA
symbolIcon.booleanForeground #7EB8DA
symbolIcon.classForeground #F03050
symbolIcon.colorForeground #012169
symbolIcon.constantForeground #7EB8DA
symbolIcon.constructorForeground #4D80C4
symbolIcon.enumeratorForeground #F03050
symbolIcon.enumeratorMemberForeground #7EB8DA
symbolIcon.eventForeground #FFCC2C
symbolIcon.fieldForeground #012169
symbolIcon.fileForeground #A8B4D0
symbolIcon.folderForeground #012169
symbolIcon.functionForeground #4D80C4
symbolIcon.interfaceForeground #F03050
symbolIcon.keyForeground #012169
symbolIcon.keywordForeground #F03050
symbolIcon.methodForeground #4D80C4
symbolIcon.moduleForeground #012169
symbolIcon.namespaceForeground #012169
symbolIcon.nullForeground #A8B4D080
symbolIcon.numberForeground #7EB8DA
symbolIcon.objectForeground #012169
symbolIcon.operatorForeground #4D80C4
symbolIcon.packageForeground #012169
symbolIcon.propertyForeground #E8EDF3
symbolIcon.referenceForeground #012169
symbolIcon.snippetForeground #6BBE27
symbolIcon.stringForeground #6BBE27
symbolIcon.structForeground #F03050
symbolIcon.textForeground #E8EDF3
symbolIcon.typeParameterForeground #F03050
symbolIcon.unitForeground #7EB8DA
symbolIcon.variableForeground #E8EDF3
tab.activeBackground #0A0C18
tab.activeBorder #012169
tab.activeBorderTop #01216900
tab.activeForeground #E8EDF3
tab.activeModifiedBorder #012169
tab.border #01216920
tab.dragAndDropBorder #012169
tab.hoverBackground #11142080
tab.hoverBorder #01216950
tab.hoverForeground #E8EDF3
tab.inactiveBackground #111420
tab.inactiveForeground #A8B4D080
tab.inactiveModifiedBorder #01216980
tab.lastPinnedBorder #01216940
tab.selectedBackground #0A0C18
tab.selectedBorderTop #012169
tab.selectedForeground #E8EDF3
tab.unfocusedActiveBackground #0A0C18
tab.unfocusedActiveBorder #01216980
tab.unfocusedActiveBorderTop #01216900
tab.unfocusedActiveForeground #E8EDF3CC
tab.unfocusedActiveModifiedBorder #012169CC
tab.unfocusedHoverBackground #11142060
tab.unfocusedHoverBorder #01216930
tab.unfocusedHoverForeground #E8EDF3CC
tab.unfocusedInactiveBackground #111420
tab.unfocusedInactiveForeground #A8B4D060
tab.unfocusedInactiveModifiedBorder #01216960
terminal.ansiBlack #0A0C18
terminal.ansiBlue #012169
terminal.ansiBrightBlack #78797E
terminal.ansiBrightBlue #3366AA
terminal.ansiBrightCyan #7EB8DA
terminal.ansiBrightGreen #78D65B
terminal.ansiBrightMagenta #E4002B
terminal.ansiBrightRed #FF4D5E
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFE066
terminal.ansiCyan #5B9BD5
terminal.ansiGreen #6BBE27
terminal.ansiMagenta #8B1A4A
terminal.ansiRed #E4002B
terminal.ansiWhite #E8EDF3
terminal.ansiYellow #FFCC2C
terminal.background #0A0C18
terminal.border #01216920
terminal.dropBackground #01216930
terminal.findMatchBackground #01216980
terminal.findMatchBorder #012169
terminal.findMatchHighlightBackground #01216950
terminal.findMatchHighlightBorder #01216980
terminal.foreground #E8EDF3
terminal.hoverHighlightBackground #01216930
terminal.inactiveSelectionBackground #01216930
terminal.initialHintForeground #A8B4D080
terminal.selectionBackground #01216950
terminal.selectionForeground #E8EDF3
terminal.tab.activeBorder #012169
terminalCommandDecoration.defaultBackground #01216950
terminalCommandDecoration.errorBackground #E4002B80
terminalCommandDecoration.successBackground #339D3780
terminalCommandGuide.foreground #01216930
terminalCursor.background #0A0C18
terminalCursor.foreground #012169
terminalOverviewRuler.border #01216920
terminalOverviewRuler.cursorForeground #012169
terminalOverviewRuler.findMatchForeground #012169CC
terminalStickyScroll.background #111420
terminalStickyScroll.border #01216920
terminalStickyScrollHover.background #202438
terminalSymbolIcon.aliasForeground #012169
terminalSymbolIcon.argumentForeground #7EB8DA
terminalSymbolIcon.branchForeground #339D37
terminalSymbolIcon.commitForeground #012169
terminalSymbolIcon.fileForeground #A8B4D0
terminalSymbolIcon.flagForeground #FFCC2C
terminalSymbolIcon.folderForeground #012169
terminalSymbolIcon.inlineSuggestionForeground #A8B4D080
terminalSymbolIcon.methodForeground #4D80C4
terminalSymbolIcon.optionForeground #E8EDF3
terminalSymbolIcon.optionValueForeground #6BBE27
terminalSymbolIcon.pullRequestDoneForeground #339D37
terminalSymbolIcon.pullRequestForeground #012169
terminalSymbolIcon.remoteForeground #F03050
terminalSymbolIcon.stashForeground #012169
terminalSymbolIcon.symbolicLinkFileForeground #01216980
terminalSymbolIcon.symbolicLinkFolderForeground #01216980
terminalSymbolIcon.symbolText #E8EDF3
terminalSymbolIcon.tagForeground #F03050
testing.coverCountBadgeBackground #012169
testing.coverCountBadgeForeground #E8EDF3
testing.coveredBackground #339D3715
testing.coveredBorder #339D3740
testing.coveredGutterBackground #339D3750
testing.iconErrored #E4002B
testing.iconErrored.retired #E4002B60
testing.iconFailed #E4002B
testing.iconFailed.retired #E4002B60
testing.iconPassed #339D37
testing.iconPassed.retired #339D3760
testing.iconQueued #FFCC2C
testing.iconQueued.retired #FFCC2C60
testing.iconSkipped #A8B4D080
testing.iconSkipped.retired #A8B4D050
testing.iconUnset #A8B4D080
testing.iconUnset.retired #A8B4D050
testing.message.error.badgeBackground #E4002B
testing.message.error.badgeBorder #E4002B80
testing.message.error.badgeForeground #E8EDF3
testing.message.error.lineBackground #E4002B15
testing.message.info.decorationForeground #5B9BD5
testing.message.info.lineBackground #5B9BD515
testing.messagePeekBorder #5B9BD5
testing.messagePeekHeaderBackground #5B9BD520
testing.peekBorder #E4002B
testing.peekHeaderBackground #E4002B20
testing.runAction #339D37
testing.uncoveredBackground #E4002B15
testing.uncoveredBorder #E4002B40
testing.uncoveredBranchBackground #E4002B30
testing.uncoveredGutterBackground #E4002B50
textBlockQuote.background #161928
textBlockQuote.border #01216980
textCodeBlock.background #1A1D2A
textLink.activeForeground #012169
textLink.foreground #012169CC
textPreformat.background #1A1D2A
textPreformat.border #01216930
textPreformat.foreground #6BBE27
textSeparator.foreground #01216930
titleBar.activeBackground #050710
titleBar.activeForeground #E8EDF3
titleBar.border #050710
titleBar.inactiveBackground #050710
titleBar.inactiveForeground #A8B4D080
toolbar.activeBackground #01216940
toolbar.hoverBackground #01216930
toolbar.hoverOutline #01216900
tree.inactiveIndentGuidesStroke #01216920
tree.indentGuidesStroke #01216940
tree.tableColumnsBorder #01216920
tree.tableOddRowsBackground #0A0C1850
walkThrough.embeddedEditorBackground #111420
walkthrough.stepTitle.foreground #E8EDF3
welcomePage.background #0A0C18
welcomePage.progress.background #1A1D2A
welcomePage.progress.foreground #012169
welcomePage.tileBackground #111420
welcomePage.tileBorder #01216920
welcomePage.tileHoverBackground #202438
widget.border #01216930
widget.shadow #00000050
window.activeBorder #01216900
window.inactiveBorder #01216900 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 #4D80C4 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #F03050 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #4D80C4 —
meta.block variable.other #E8EDF3 —
support.other.variable, string.other.link #E8EDF3 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #7EB8DA —
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 #6BBE27 —
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 #4D80C4 —
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 #4D80C4 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #E8EDF3 —
variable.language #F03050 italic
entity.name.method.js #4D80C4 italic
meta.class-method.js entity.name.function.js, variable.function.constructor #4D80C4 —
entity.other.attribute-name #F03050 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #4D80C4 italic
entity.other.attribute-name.class #4D80C4 —
source.sass keyword.control #4D80C4 —
constant.character.escape #6BBE27 —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #4D80C4 italic
source.js constant.other.object.key.js string.unquoted.label.js #E8EDF3 italic
source.json meta.structure.dictionary.json support.type.property-name.json #012169 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #F03050 —
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 #6BBE27 —
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 #7EB8DA —
text.html.markdown, punctuation.definition.list_item.markdown #E8EDF3 —
text.html.markdown markup.inline.raw.markdown #F03050 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #4D80C4 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #012169 —
markup.italic #F03050 italic
markup.bold, markup.bold string #F03050 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 #F03050 bold
markup.underline #6BBE27 underline
markup.quote punctuation.definition.blockquote.markdown #5B9BD5 —
string.other.link.title.markdown #4D80C4 —
string.other.link.description.title.markdown #F03050 —
constant.other.reference.link.markdown #6BBE27 —
markup.raw.block.fenced.markdown #E8EDF3 —
punctuation.definition.fenced.markdown #E8EDF3 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #E8EDF3 —
variable.language.fenced.markdown #4D80C4 —
meta.separator #012169 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}!`;
}