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