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