Skip to main content
Perfection Fresh | Coding Theme
Home Theme VS Code Perfection Fresh A vibrant VS Code colour theme featuring red seal accents and fresh produce greens, inspired by the Perfection Fresh Australia visual identity. Built and published by Lucid Labs on behalf of Perfection Fresh. All trademarks belong to their respective owners.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
actionBar.toggledBackground #CC293640 activityBar.activeBackground #14141450 activityBar.activeBorder #CC2936 activityBar.activeFocusBorder #CC2936 activityBar.background #0A0A0A activityBar.border #0A0A0A tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #A0A0A080 italic variable, string constant.other.placeholder #E8E6E2 — constant.other.color #CC2936 — invalid, invalid.illegal #E05050 — 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}!`;
}
Perfection Fresh — Perfection Dark main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
activityBar.dropBorder #CC2936
activityBar.foreground #E8E6E2
activityBar.inactiveForeground #A0A0A080
activityBarBadge.background #CC2936
activityBarBadge.foreground #E8E6E2
activityBarTop.activeBackground #14141450
activityBarTop.activeBorder #CC2936
activityBarTop.background #0A0A0A
activityBarTop.dropBorder #CC2936
activityBarTop.foreground #E8E6E2
activityBarTop.inactiveForeground #A0A0A080
activityErrorBadge.background #E05050
activityErrorBadge.foreground #E8E6E2
activityWarningBadge.background #F0C850
activityWarningBadge.foreground #E8E6E2
agentSessionReadIndicator.foreground #CC2936
agentSessionSelectedBadge.border #CC293650
agentSessionSelectedUnfocusedBadge.border #E8E6E250
agentStatusIndicator.background #1C1C1C
aiCustomizationManagement.sashBorder #CC2936
badge.background #CC2936
badge.foreground #E8E6E2
banner.background #CC2936
banner.foreground #E8E6E2
banner.iconForeground #E8E6E2
breadcrumb.activeSelectionForeground #CC2936
breadcrumb.background #141414
breadcrumb.focusForeground #E8E6E2
breadcrumb.foreground #A0A0A0
breadcrumbPicker.background #101010
button.background #CC2936
button.border #CC293600
button.foreground #E8E6E2
button.hoverBackground #B0222D
button.secondaryBackground #1C1C1C
button.secondaryBorder #CC293650
button.secondaryForeground #E8E6E2
button.secondaryHoverBackground #282828
button.separator #E8E6E240
charts.blue #CC2936
charts.foreground #E8E6E2
charts.green #4DAF5C
charts.lines #A0A0A080
charts.orange #F0C850
charts.purple #E8525E
charts.red #E05050
charts.yellow #F0C850
chat.avatarBackground #CC2936
chat.avatarForeground #FFFFFF
chat.checkpointSeparator #CC293650
chat.editedFileForeground #4DB88A
chat.inputWorkingBorderColor1 #CC2936
chat.inputWorkingBorderColor2 #B0222D
chat.inputWorkingBorderColor3 #CC2936
chat.linesAddedForeground #4DAF5CCC
chat.linesRemovedForeground #E05050CC
chat.requestBackground #1C1C1C
chat.requestBorder #CC293650
chat.requestBubbleBackground #1C1C1CE6
chat.requestBubbleHoverBackground #282828E6
chat.requestCodeBorder #CC293630
chat.slashCommandBackground #CC2936
chat.slashCommandForeground #E8E6E2
chat.thinkingShimmer #CC293640
chatManagement.sashBorder #CC2936
checkbox.background #242424
checkbox.border #CC293650
checkbox.disabled.background #24242480
checkbox.disabled.foreground #A0A0A060
checkbox.foreground #CC2936
checkbox.selectBackground #242424
checkbox.selectBorder #CC2936
commandCenter.activeBackground #E8E6E225
commandCenter.activeBorder #E8E6E250
commandCenter.activeForeground #E8E6E2
commandCenter.background #E8E6E215
commandCenter.border #E8E6E230
commandCenter.debuggingBackground #4DAF5C30
commandCenter.foreground #E8E6E2
commandCenter.inactiveBorder #E8E6E220
commandCenter.inactiveForeground #A0A0A080
commentsView.resolvedIcon #4DAF5C
commentsView.unresolvedIcon #F0C850
contrastActiveBorder #CC293600
contrastBorder #CC293600
debugConsole.errorForeground #E05050
debugConsole.infoForeground #5AABE0
debugConsole.sourceForeground #A0A0A0
debugConsole.warningForeground #F0C850
debugConsoleInputIcon.foreground #CC2936
debugExceptionWidget.background #E0505020
debugExceptionWidget.border #E0505080
debugIcon.breakpointCurrentStackframeForeground #F0C850
debugIcon.breakpointDisabledForeground #A0A0A080
debugIcon.breakpointForeground #E05050
debugIcon.breakpointStackframeForeground #4DAF5C
debugIcon.breakpointUnverifiedForeground #F0C850
debugIcon.continueForeground #4DAF5C
debugIcon.disconnectForeground #E05050
debugIcon.pauseForeground #F0C850
debugIcon.restartForeground #4DAF5C
debugIcon.startForeground #4DAF5C
debugIcon.stepBackForeground #CC2936
debugIcon.stepIntoForeground #CC2936
debugIcon.stepOutForeground #CC2936
debugIcon.stepOverForeground #CC2936
debugIcon.stopForeground #E05050
debugTokenExpression.boolean #F0C850
debugTokenExpression.error #E05050
debugTokenExpression.name #E8525E
debugTokenExpression.number #F0C850
debugTokenExpression.string #78D68A
debugTokenExpression.type #E8525E
debugTokenExpression.value #78D68A
debugToolBar.background #101010
debugView.exceptionLabelBackground #E0505080
debugView.exceptionLabelForeground #E8E6E2
debugView.stateLabelBackground #CC293650
debugView.stateLabelForeground #E8E6E2
debugView.valueChangedHighlight #CC293680
descriptionForeground #A0A0A0
diffEditor.border #CC293620
diffEditor.diagonalFill #CC293620
diffEditor.insertedLineBackground #4DAF5C15
diffEditor.insertedTextBackground #4DAF5C20
diffEditor.insertedTextBorder #4DAF5C50
diffEditor.move.border #CC293680
diffEditor.moveActive.border #CC2936
diffEditor.removedLineBackground #E0505015
diffEditor.removedTextBackground #E0505020
diffEditor.removedTextBorder #E0505050
diffEditor.unchangedCodeBackground #14141480
diffEditor.unchangedRegionBackground #101010
diffEditor.unchangedRegionForeground #A0A0A080
diffEditor.unchangedRegionShadow #00000030
diffEditorGutter.insertedLineBackground #4DAF5C30
diffEditorGutter.removedLineBackground #E0505030
diffEditorOverview.insertedForeground #4DAF5C80
diffEditorOverview.removedForeground #E0505080
disabledForeground #A0A0A060
dropdown.background #242424
dropdown.border #CC293650
dropdown.foreground #E8E6E2
dropdown.listBackground #101010
editor.background #141414
editor.compositionBorder #CC2936
editor.findMatchBackground #CC293680
editor.findMatchBorder #CC2936
editor.findMatchForeground #E8E6E2
editor.findMatchHighlightBackground #CC293650
editor.findMatchHighlightBorder #CC293680
editor.findMatchHighlightForeground #E8E6E2
editor.findRangeHighlightBackground #CC293620
editor.findRangeHighlightBorder #CC293600
editor.focusedStackFrameHighlightBackground #4DAF5C30
editor.foldBackground #CC293615
editor.foldPlaceholderForeground #A0A0A080
editor.foreground #E8E6E2
editor.hoverHighlightBackground #CC293625
editor.inactiveLineHighlightBackground #24242480
editor.inactiveSelectionBackground #CC293630
editor.inlineValuesBackground #CC293615
editor.inlineValuesForeground #A0A0A0CC
editor.lineHighlightBackground #242424
editor.lineHighlightBorder #CC293615
editor.linkedEditingBackground #CC293630
editor.placeholder.foreground #A0A0A080
editor.rangeHighlightBackground #CC293615
editor.rangeHighlightBorder #CC293600
editor.selectionBackground #CC293650
editor.selectionForeground #E8E6E2
editor.selectionHighlightBackground #CC293630
editor.selectionHighlightBorder #CC293650
editor.stackFrameHighlightBackground #F0C85030
editor.symbolHighlightBackground #CC293630
editor.symbolHighlightBorder #CC293650
editor.wordHighlightBackground #CC293630
editor.wordHighlightBorder #CC293650
editor.wordHighlightStrongBackground #CC293650
editor.wordHighlightStrongBorder #CC293680
editor.wordHighlightTextBackground #CC293620
editor.wordHighlightTextBorder #CC293640
editorActionList.background #101010
editorActionList.focusBackground #CC293640
editorActionList.focusForeground #E8E6E2
editorActionList.foreground #E8E6E2
editorBracketHighlight.foreground1 #CC2936
editorBracketHighlight.foreground2 #78D68A
editorBracketHighlight.foreground3 #F0C850
editorBracketHighlight.foreground4 #5AABE0
editorBracketHighlight.foreground5 #D070B8
editorBracketHighlight.foreground6 #4DB8A0
editorBracketHighlight.unexpectedBracket.foreground #E05050
editorBracketMatch.border #CC293680
editorBracketMatch.foreground #CC2936
editorBracketPairGuide.activeBackground1 #CC293680
editorBracketPairGuide.activeBackground2 #78D68A80
editorBracketPairGuide.activeBackground3 #F0C85080
editorBracketPairGuide.activeBackground4 #5AABE080
editorBracketPairGuide.activeBackground5 #D070B880
editorBracketPairGuide.activeBackground6 #4DB8A080
editorBracketPairGuide.background1 #CC293640
editorBracketPairGuide.background2 #78D68A40
editorBracketPairGuide.background3 #F0C85040
editorBracketPairGuide.background4 #5AABE040
editorBracketPairGuide.background5 #D070B840
editorBracketPairGuide.background6 #4DB8A040
editorCodeLens.foreground #A0A0A080
editorCommentsWidget.rangeActiveBackground #CC293620
editorCommentsWidget.rangeBackground #CC293610
editorCommentsWidget.replyInputBackground #242424
editorCommentsWidget.resolvedBorder #4DAF5C50
editorCommentsWidget.unresolvedBorder #F0C850
editorCursor.background #141414
editorCursor.foreground #CC2936
editorError.background #E0505015
editorError.border #E0505000
editorError.foreground #E05050
editorGhostText.background #CC293600
editorGhostText.border #CC293600
editorGhostText.foreground #CC293680
editorGroup.border #CC293620
editorGroup.dropBackground #CC293630
editorGroup.dropIntoPromptBackground #101010
editorGroup.dropIntoPromptBorder #CC293650
editorGroup.dropIntoPromptForeground #E8E6E2
editorGroup.emptyBackground #141414
editorGroup.focusedEmptyBorder #CC293650
editorGroupHeader.border #CC293620
editorGroupHeader.noTabsBackground #141414
editorGroupHeader.tabsBackground #101010
editorGroupHeader.tabsBorder #CC293620
editorGutter.addedBackground #4DAF5C
editorGutter.addedSecondaryBackground #4DAF5C80
editorGutter.background #141414
editorGutter.commentDraftGlyphForeground #CC293680
editorGutter.commentGlyphForeground #CC2936
editorGutter.commentRangeForeground #A0A0A050
editorGutter.commentUnresolvedGlyphForeground #F0C850
editorGutter.deletedBackground #E05050
editorGutter.deletedSecondaryBackground #E0505080
editorGutter.foldingControlForeground #A0A0A080
editorGutter.itemBackground #101010
editorGutter.itemGlyphForeground #CC2936
editorGutter.modifiedBackground #4DB88A
editorGutter.modifiedSecondaryBackground #4DB88A80
editorHint.border #4DAF5C00
editorHint.foreground #4DAF5C
editorHoverWidget.background #101010
editorHoverWidget.border #CC293650
editorHoverWidget.foreground #E8E6E2
editorHoverWidget.highlightForeground #CC2936
editorHoverWidget.statusBarBackground #1C1C1C
editorIndentGuide.activeBackground1 #CC2936
editorIndentGuide.activeBackground2 #78D68A
editorIndentGuide.activeBackground3 #F0C850
editorIndentGuide.activeBackground4 #5AABE0
editorIndentGuide.activeBackground5 #D070B8
editorIndentGuide.activeBackground6 #4DB8A0
editorIndentGuide.background1 #CC293625
editorIndentGuide.background2 #78D68A25
editorIndentGuide.background3 #F0C85025
editorIndentGuide.background4 #5AABE025
editorIndentGuide.background5 #D070B825
editorIndentGuide.background6 #4DB8A025
editorInfo.background #5AABE015
editorInfo.border #5AABE000
editorInfo.foreground #5AABE0
editorInlayHint.background #242424
editorInlayHint.foreground #A0A0A0
editorInlayHint.parameterBackground #242424
editorInlayHint.parameterForeground #A0A0A0
editorInlayHint.typeBackground #242424
editorInlayHint.typeForeground #78D68A
editorLightBulb.foreground #F0C850
editorLightBulbAi.foreground #CC2936
editorLightBulbAutoFix.foreground #4DAF5C
editorLineNumber.activeForeground #CC2936
editorLineNumber.dimmedForeground #A0A0A050
editorLineNumber.foreground #A0A0A0
editorLink.activeForeground #CC2936
editorMarkerNavigation.background #101010
editorMarkerNavigationError.background #E0505030
editorMarkerNavigationError.headerBackground #E0505020
editorMarkerNavigationInfo.background #5AABE030
editorMarkerNavigationInfo.headerBackground #5AABE020
editorMarkerNavigationWarning.background #F0C85030
editorMarkerNavigationWarning.headerBackground #F0C85020
editorMinimap.inlineChatInserted #4DAF5C40
editorMinimap.inlineChatRemoved #E0505040
editorMultiCursor.primary.background #141414
editorMultiCursor.primary.foreground #CC2936
editorMultiCursor.secondary.background #141414
editorMultiCursor.secondary.foreground #E8525E
editorOverviewRuler.addedForeground #4DAF5C
editorOverviewRuler.background #141414
editorOverviewRuler.border #CC293620
editorOverviewRuler.bracketMatchForeground #CC293680
editorOverviewRuler.commentDraftForeground #CC293660
editorOverviewRuler.commentForeground #CC293640
editorOverviewRuler.commentUnresolvedForeground #F0C85080
editorOverviewRuler.commonContentForeground #A0A0A050
editorOverviewRuler.currentContentForeground #4DAF5C80
editorOverviewRuler.deletedForeground #E05050
editorOverviewRuler.errorForeground #E05050
editorOverviewRuler.findMatchForeground #CC2936CC
editorOverviewRuler.incomingContentForeground #1B563380
editorOverviewRuler.infoForeground #5AABE0
editorOverviewRuler.inlineChatInserted #4DAF5C80
editorOverviewRuler.inlineChatRemoved #E0505080
editorOverviewRuler.modifiedForeground #4DB88A
editorOverviewRuler.rangeHighlightForeground #CC293699
editorOverviewRuler.selectionHighlightForeground #CC293699
editorOverviewRuler.warningForeground #F0C850
editorOverviewRuler.wordHighlightForeground #CC293699
editorOverviewRuler.wordHighlightStrongForeground #CC2936CC
editorOverviewRuler.wordHighlightTextForeground #CC293680
editorPane.background #141414
editorRuler.foreground #A0A0A030
editorSnippetFinalTabstopHighlightBackground #4DAF5C30
editorSnippetFinalTabstopHighlightBorder #4DAF5C00
editorSnippetTabstopHighlightBackground #CC293630
editorSnippetTabstopHighlightBorder #CC293600
editorStickyScroll.background #101010
editorStickyScroll.border #CC293620
editorStickyScroll.shadow #00000030
editorStickyScrollGutter.background #101010
editorStickyScrollHover.background #282828
editorSuggestWidget.background #101010
editorSuggestWidget.border #CC293650
editorSuggestWidget.focusHighlightForeground #CC2936
editorSuggestWidget.foreground #E8E6E2
editorSuggestWidget.highlightForeground #CC2936
editorSuggestWidget.selectedBackground #CC293650
editorSuggestWidget.selectedForeground #E8E6E2
editorSuggestWidget.selectedIconForeground #E8E6E2
editorSuggestWidgetStatus.foreground #A0A0A080
editorUnicodeHighlight.background #F0C85020
editorUnicodeHighlight.border #F0C850
editorUnnecessaryCode.border #A0A0A050
editorUnnecessaryCode.opacity #000000AA
editorWarning.background #F0C85015
editorWarning.border #F0C85000
editorWarning.foreground #F0C850
editorWhitespace.foreground #A0A0A050
editorWidget.background #101010
editorWidget.border #CC293650
editorWidget.foreground #E8E6E2
editorWidget.resizeBorder #CC2936
errorForeground #E05050
extensionBadge.remoteBackground #CC2936
extensionBadge.remoteForeground #E8E6E2
extensionButton.background #CC2936
extensionButton.border #CC293600
extensionButton.foreground #E8E6E2
extensionButton.hoverBackground #B0222D
extensionButton.prominentBackground #CC2936
extensionButton.prominentForeground #E8E6E2
extensionButton.prominentHoverBackground #B0222D
extensionButton.separator #E8E6E240
extensionIcon.preReleaseForeground #CC2936
extensionIcon.privateForeground #A0A0A080
extensionIcon.sponsorForeground #E8525E
extensionIcon.starForeground #F0C850
extensionIcon.verifiedForeground #4DAF5C
focusBorder #CC2936
foreground #E8E6E2
gauge.background #101010
gauge.border #CC293630
gauge.errorBackground #E0505030
gauge.errorForeground #E05050
gauge.foreground #E8E6E2
gauge.warningBackground #F0C85030
gauge.warningForeground #F0C850
git.blame.editorDecorationForeground #A0A0A060
gitDecoration.addedResourceForeground #4DAF5C
gitDecoration.conflictingResourceForeground #F0C850
gitDecoration.deletedResourceForeground #E05050
gitDecoration.ignoredResourceForeground #A0A0A080
gitDecoration.modifiedResourceForeground #4DB88A
gitDecoration.renamedResourceForeground #CC2936
gitDecoration.stageDeletedResourceForeground #E05050CC
gitDecoration.stageModifiedResourceForeground #4DB88ACC
gitDecoration.submoduleResourceForeground #78D68A
gitDecoration.untrackedResourceForeground #4DAF5C
icon.foreground #CC2936
inlineChat.background #101010
inlineChat.border #CC293650
inlineChat.foreground #E8E6E2
inlineChat.shadow #00000080
inlineChatDiff.inserted #4DAF5C30
inlineChatDiff.removed #E0505030
inlineChatInput.background #242424
inlineChatInput.border #CC293650
inlineChatInput.focusBorder #CC2936
inlineChatInput.placeholderForeground #A0A0A080
inlineEdit.gutterIndicator.background #101010
inlineEdit.gutterIndicator.primaryBackground #CC293620
inlineEdit.gutterIndicator.primaryBorder #CC2936
inlineEdit.gutterIndicator.primaryForeground #CC2936
inlineEdit.gutterIndicator.secondaryBackground #E8525E20
inlineEdit.gutterIndicator.secondaryBorder #E8525E
inlineEdit.gutterIndicator.secondaryForeground #E8525E
inlineEdit.gutterIndicator.successfulBackground #4DAF5C20
inlineEdit.gutterIndicator.successfulBorder #4DAF5C
inlineEdit.gutterIndicator.successfulForeground #4DAF5C
inlineEdit.modifiedBackground #4DB88A15
inlineEdit.modifiedBorder #4DB88A50
inlineEdit.modifiedChangedLineBackground #4DB88A20
inlineEdit.modifiedChangedTextBackground #4DB88A30
inlineEdit.originalBackground #E0505010
inlineEdit.originalBorder #E0505030
inlineEdit.originalChangedLineBackground #E0505015
inlineEdit.originalChangedTextBackground #E0505025
inlineEdit.tabWillAcceptModifiedBorder #4DAF5C80
inlineEdit.tabWillAcceptOriginalBorder #E0505050
input.background #242424
input.border #CC293650
input.foreground #E8E6E2
input.placeholderForeground #A0A0A080
inputOption.activeBackground #CC293640
inputOption.activeBorder #CC2936
inputOption.activeForeground #E8E6E2
inputOption.hoverBackground #CC293620
inputValidation.errorBackground #E0505020
inputValidation.errorBorder #E05050
inputValidation.errorForeground #E05050
inputValidation.infoBackground #5AABE020
inputValidation.infoBorder #5AABE0
inputValidation.infoForeground #5AABE0
inputValidation.warningBackground #F0C85020
inputValidation.warningBorder #F0C850
inputValidation.warningForeground #F0C850
interactive.activeCodeBorder #CC2936
interactive.inactiveCodeBorder #CC293630
keybindingLabel.background #CC293620
keybindingLabel.border #CC293640
keybindingLabel.bottomBorder #CC293660
keybindingLabel.foreground #E8E6E2
keybindingTable.headerBackground #1C1C1C
keybindingTable.rowsBackground #14141480
list.activeSelectionBackground #CC293650
list.activeSelectionForeground #E8E6E2
list.activeSelectionIconForeground #E8E6E2
list.deemphasizedForeground #A0A0A080
list.dropBackground #CC293630
list.dropBetweenBackground #CC2936
list.errorForeground #E05050
list.filterMatchBorder #CC293680
list.focusAndSelectionOutline #CC2936
list.focusBackground #CC293640
list.focusForeground #E8E6E2
list.focusHighlightForeground #CC2936
list.focusOutline #CC293680
list.highlightForeground #CC2936
list.hoverBackground #CC293620
list.hoverForeground #E8E6E2
list.inactiveFocusBackground #CC293620
list.inactiveFocusOutline #CC293650
list.inactiveSelectionBackground #CC293630
list.inactiveSelectionForeground #E8E6E2
list.inactiveSelectionIconForeground #E8E6E2
list.invalidItemForeground #E05050
list.warningForeground #F0C850
listFilterWidget.background #242424
listFilterWidget.noMatchesOutline #E05050
listFilterWidget.outline #CC2936
listFilterWidget.shadow #00000050
markdownAlert.caution.foreground #E05050
markdownAlert.important.foreground #E8525E
markdownAlert.note.foreground #5AABE0
markdownAlert.tip.foreground #4DAF5C
markdownAlert.warning.foreground #F0C850
mcpIcon.starForeground #F0C850
menu.background #101010
menu.border #CC293620
menu.foreground #E8E6E2
menu.selectionBackground #CC293650
menu.selectionBorder #CC293600
menu.selectionForeground #E8E6E2
menu.separatorBackground #CC293630
menubar.selectionBackground #CC293650
menubar.selectionBorder #CC293600
menubar.selectionForeground #E8E6E2
merge.border #CC293650
merge.commonContentBackground #A0A0A020
merge.commonHeaderBackground #A0A0A050
merge.currentContentBackground #4DAF5C20
merge.currentHeaderBackground #4DAF5C50
merge.incomingContentBackground #1B563320
merge.incomingHeaderBackground #1B563350
mergeEditor.change.background #CC293620
mergeEditor.change.word.background #CC293640
mergeEditor.changeBase.background #A0A0A015
mergeEditor.changeBase.word.background #A0A0A030
mergeEditor.conflict.handled.minimapOverViewRuler #4DAF5C
mergeEditor.conflict.handledFocused.border #4DAF5C
mergeEditor.conflict.handledUnfocused.border #4DAF5C50
mergeEditor.conflict.input1.background #4DAF5C20
mergeEditor.conflict.input2.background #1B563320
mergeEditor.conflict.unhandled.minimapOverViewRuler #F0C850
mergeEditor.conflict.unhandledFocused.border #F0C850
mergeEditor.conflict.unhandledUnfocused.border #F0C85080
mergeEditor.conflictingLines.background #F0C85020
minimap.background #141414
minimap.chatEditHighlight #CC293640
minimap.errorHighlight #E05050
minimap.findMatchHighlight #CC293680
minimap.foregroundOpacity #000000FF
minimap.infoHighlight #5AABE0
minimap.selectionHighlight #CC293650
minimap.selectionOccurrenceHighlight #CC293640
minimap.warningHighlight #F0C850
minimapGutter.addedBackground #4DAF5C
minimapGutter.deletedBackground #E05050
minimapGutter.modifiedBackground #4DB88A
minimapSlider.activeBackground #CC293670
minimapSlider.background #CC293630
minimapSlider.hoverBackground #CC293650
multiDiffEditor.background #141414
multiDiffEditor.border #CC293620
multiDiffEditor.headerBackground #101010
notebook.cellBorderColor #CC293630
notebook.cellEditorBackground #101010
notebook.cellHoverBackground #282828
notebook.cellInsertionIndicator #CC2936
notebook.cellStatusBarItemHoverBackground #CC293630
notebook.cellToolbarSeparator #CC293620
notebook.editorBackground #141414
notebook.focusedCellBackground #1C1C1C
notebook.focusedCellBorder #CC2936
notebook.focusedEditorBorder #CC2936
notebook.inactiveFocusedCellBorder #CC293650
notebook.inactiveSelectedCellBorder #CC293630
notebook.outputContainerBackgroundColor #0A0A0A
notebook.outputContainerBorderColor #CC293620
notebook.selectedCellBackground #CC293620
notebook.selectedCellBorder #CC293680
notebook.symbolHighlightBackground #CC293630
notebookEditorOverviewRuler.runningCellForeground #CC2936
notebookScrollbarSlider.activeBackground #CC293670
notebookScrollbarSlider.background #CC293630
notebookScrollbarSlider.hoverBackground #CC293650
notebookStatusErrorIcon.foreground #E05050
notebookStatusRunningIcon.foreground #CC2936
notebookStatusSuccessIcon.foreground #4DAF5C
notificationCenter.border #CC293620
notificationCenterHeader.background #101010
notificationCenterHeader.foreground #E8E6E2
notificationLink.foreground #CC2936
notifications.background #101010
notifications.border #CC293620
notifications.foreground #E8E6E2
notificationsErrorIcon.foreground #E05050
notificationsInfoIcon.foreground #5AABE0
notificationsWarningIcon.foreground #F0C850
notificationToast.border #CC293620
outputView.background #101010
outputViewStickyScroll.background #101010
panel.background #101010
panel.border #CC293620
panel.dropBorder #CC2936
panelInput.border #CC293650
panelSection.border #CC293620
panelSection.dropBackground #CC293630
panelSectionHeader.background #14141480
panelSectionHeader.border #CC293620
panelSectionHeader.foreground #CC2936
panelStickyScroll.background #101010
panelStickyScroll.border #CC293620
panelStickyScroll.shadow #00000030
panelTitle.activeBorder #CC2936
panelTitle.activeForeground #CC2936
panelTitle.border #CC293620
panelTitle.inactiveForeground #A0A0A080
panelTitleBadge.background #CC2936
panelTitleBadge.foreground #E8E6E2
peekView.border #CC2936
peekViewEditor.background #141414
peekViewEditor.matchHighlightBackground #CC293650
peekViewEditor.matchHighlightBorder #CC293680
peekViewEditorGutter.background #141414
peekViewEditorStickyScroll.background #101010
peekViewEditorStickyScrollGutter.background #101010
peekViewResult.background #101010
peekViewResult.fileForeground #E8E6E2
peekViewResult.lineForeground #A0A0A0
peekViewResult.matchHighlightBackground #CC293650
peekViewResult.selectionBackground #CC293650
peekViewResult.selectionForeground #E8E6E2
peekViewTitle.background #000000
peekViewTitleDescription.foreground #A0A0A0
peekViewTitleLabel.foreground #CC2936
pickerGroup.border #CC293630
pickerGroup.foreground #CC2936
ports.iconRunningProcessForeground #4DAF5C
problemsErrorIcon.foreground #E05050
problemsInfoIcon.foreground #5AABE0
problemsWarningIcon.foreground #F0C850
profileBadge.background #CC2936
profileBadge.foreground #E8E6E2
profiles.sashBorder #CC2936
progressBar.background #CC2936
quickInput.background #101010
quickInput.border #CC293630
quickInput.foreground #E8E6E2
quickInputList.focusBackground #CC293640
quickInputList.focusForeground #E8E6E2
quickInputList.focusIconForeground #E8E6E2
quickInputList.hoverBackground #282828
quickInputTitle.background #1C1C1C
radio.activeBackground #CC2936
radio.activeBorder #CC2936
radio.activeForeground #E8E6E2
radio.inactiveBackground #242424
radio.inactiveBorder #CC293650
radio.inactiveForeground #A0A0A0
radio.inactiveHoverBackground #282828
sash.hoverBorder #CC2936
scmGraph.foreground1 #CC2936
scmGraph.foreground2 #E8525E
scmGraph.foreground3 #78D68A
scmGraph.foreground4 #F0C850
scmGraph.foreground5 #4DAF5C
scmGraph.historyItemBaseRefColor #78D68A
scmGraph.historyItemHoverAdditionsForeground #4DAF5C
scmGraph.historyItemHoverDeletionsForeground #E05050
scmGraph.historyItemHoverLabelForeground #E8E6E2
scmGraph.historyItemRefColor #CC2936
scmGraph.historyItemRemoteRefColor #E8525E
scrollbar.background #14141400
scrollbar.shadow #00000050
scrollbarSlider.activeBackground #CC293670
scrollbarSlider.background #CC293630
scrollbarSlider.hoverBackground #CC293650
search.resultsInfoForeground #A0A0A0
searchEditor.findMatchBackground #CC293640
searchEditor.findMatchBorder #CC293680
searchEditor.textInputBorder #CC293650
selection.background #CC293650
settings.checkboxBackground #242424
settings.checkboxBorder #CC293650
settings.checkboxForeground #CC2936
settings.dropdownBackground #242424
settings.dropdownBorder #CC293650
settings.dropdownForeground #E8E6E2
settings.dropdownListBorder #CC293630
settings.focusedRowBackground #CC293615
settings.focusedRowBorder #CC293640
settings.headerBorder #CC293620
settings.headerForeground #E8E6E2
settings.modifiedItemIndicator #CC2936
settings.numberInputBackground #242424
settings.numberInputBorder #CC293650
settings.numberInputForeground #E8E6E2
settings.rowHoverBackground #CC293615
settings.sashBorder #CC2936
settings.settingsHeaderHoverForeground #CC2936
settings.textInputBackground #242424
settings.textInputBorder #CC293650
settings.textInputForeground #E8E6E2
sideBar.background #101010
sideBar.border #CC293620
sideBar.dropBackground #CC293630
sideBar.foreground #E8E6E2
sideBarActivityBarTop.border #CC293620
sideBarSectionHeader.background #14141480
sideBarSectionHeader.border #CC293620
sideBarSectionHeader.foreground #CC2936
sideBarStickyScroll.background #101010
sideBarStickyScroll.border #CC293620
sideBarStickyScroll.shadow #00000030
sideBarTitle.background #101010
sideBarTitle.border #CC293620
sideBarTitle.foreground #CC2936
sideBySideEditor.horizontalBorder #CC293620
sideBySideEditor.verticalBorder #CC293620
simpleFindWidget.sashBorder #CC2936
statusBar.background #CC2936
statusBar.border #B0222D
statusBar.debuggingBackground #4DAF5C
statusBar.debuggingBorder #4DAF5C80
statusBar.debuggingForeground #141414
statusBar.focusBorder #CC2936
statusBar.foreground #FFFFFF
statusBar.noFolderBackground #B0222D
statusBar.noFolderBorder #B0222D
statusBar.noFolderForeground #FFFFFF
statusBarItem.activeBackground #CC293650
statusBarItem.compactHoverBackground #CC293640
statusBarItem.errorBackground #E05050
statusBarItem.errorForeground #E8E6E2
statusBarItem.errorHoverBackground #E05050CC
statusBarItem.errorHoverForeground #E8E6E2
statusBarItem.focusBorder #CC2936
statusBarItem.hoverBackground #CC293630
statusBarItem.hoverForeground #E8E6E2
statusBarItem.offlineBackground #A0A0A080
statusBarItem.offlineForeground #E8E6E2
statusBarItem.offlineHoverBackground #A0A0A060
statusBarItem.offlineHoverForeground #E8E6E2
statusBarItem.prominentBackground #CC2936
statusBarItem.prominentForeground #E8E6E2
statusBarItem.prominentHoverBackground #B0222D
statusBarItem.prominentHoverForeground #E8E6E2
statusBarItem.remoteBackground #E8525E
statusBarItem.remoteForeground #FFFFFF
statusBarItem.remoteHoverBackground #E8525ECC
statusBarItem.remoteHoverForeground #FFFFFF
statusBarItem.warningBackground #F0C850
statusBarItem.warningForeground #0A0A0A
statusBarItem.warningHoverBackground #F0C850CC
statusBarItem.warningHoverForeground #0A0A0A
symbolIcon.arrayForeground #F0C850
symbolIcon.booleanForeground #F0C850
symbolIcon.classForeground #E8525E
symbolIcon.colorForeground #CC2936
symbolIcon.constantForeground #F0C850
symbolIcon.constructorForeground #4DB88A
symbolIcon.enumeratorForeground #E8525E
symbolIcon.enumeratorMemberForeground #F0C850
symbolIcon.eventForeground #F0C850
symbolIcon.fieldForeground #CC2936
symbolIcon.fileForeground #A0A0A0
symbolIcon.folderForeground #CC2936
symbolIcon.functionForeground #4DB88A
symbolIcon.interfaceForeground #E8525E
symbolIcon.keyForeground #CC2936
symbolIcon.keywordForeground #E8525E
symbolIcon.methodForeground #4DB88A
symbolIcon.moduleForeground #CC2936
symbolIcon.namespaceForeground #CC2936
symbolIcon.nullForeground #A0A0A080
symbolIcon.numberForeground #F0C850
symbolIcon.objectForeground #CC2936
symbolIcon.operatorForeground #4DB88A
symbolIcon.packageForeground #CC2936
symbolIcon.propertyForeground #E8E6E2
symbolIcon.referenceForeground #CC2936
symbolIcon.snippetForeground #78D68A
symbolIcon.stringForeground #78D68A
symbolIcon.structForeground #E8525E
symbolIcon.textForeground #E8E6E2
symbolIcon.typeParameterForeground #E8525E
symbolIcon.unitForeground #F0C850
symbolIcon.variableForeground #E8E6E2
tab.activeBackground #141414
tab.activeBorder #CC2936
tab.activeBorderTop #CC293600
tab.activeForeground #E8E6E2
tab.activeModifiedBorder #4DB88A
tab.border #CC293620
tab.dragAndDropBorder #CC2936
tab.hoverBackground #14141480
tab.hoverBorder #CC293650
tab.hoverForeground #E8E6E2
tab.inactiveBackground #101010
tab.inactiveForeground #A0A0A080
tab.inactiveModifiedBorder #4DB88A80
tab.lastPinnedBorder #CC293640
tab.selectedBackground #141414
tab.selectedBorderTop #CC2936
tab.selectedForeground #E8E6E2
tab.unfocusedActiveBackground #141414
tab.unfocusedActiveBorder #CC293680
tab.unfocusedActiveBorderTop #CC293600
tab.unfocusedActiveForeground #E8E6E2CC
tab.unfocusedActiveModifiedBorder #4DB88ACC
tab.unfocusedHoverBackground #14141460
tab.unfocusedHoverBorder #CC293630
tab.unfocusedHoverForeground #E8E6E2CC
tab.unfocusedInactiveBackground #101010
tab.unfocusedInactiveForeground #A0A0A060
tab.unfocusedInactiveModifiedBorder #4DB88A60
terminal.ansiBlack #0A0A0A
terminal.ansiBlue #5AABE0
terminal.ansiBrightBlack #999999
terminal.ansiBrightBlue #78BFE8
terminal.ansiBrightCyan #68C8B0
terminal.ansiBrightGreen #90E8A0
terminal.ansiBrightMagenta #E090C8
terminal.ansiBrightRed #E87272
terminal.ansiBrightWhite #F0EEEA
terminal.ansiBrightYellow #F8D868
terminal.ansiCyan #4DB8A0
terminal.ansiGreen #78D68A
terminal.ansiMagenta #D070B8
terminal.ansiRed #E05050
terminal.ansiWhite #E8E6E2
terminal.ansiYellow #F0C850
terminal.background #141414
terminal.border #CC293620
terminal.dropBackground #CC293630
terminal.findMatchBackground #CC293680
terminal.findMatchBorder #E8525E
terminal.findMatchHighlightBackground #CC293650
terminal.findMatchHighlightBorder #E8525E80
terminal.foreground #E8E6E2
terminal.hoverHighlightBackground #CC293630
terminal.inactiveSelectionBackground #CC293630
terminal.initialHintForeground #A0A0A080
terminal.selectionBackground #CC293650
terminal.selectionForeground #E8E6E2
terminal.tab.activeBorder #CC2936
terminalCommandDecoration.defaultBackground #CC293650
terminalCommandDecoration.errorBackground #E0505080
terminalCommandDecoration.successBackground #4DAF5C80
terminalCommandGuide.foreground #CC293630
terminalCursor.background #141414
terminalCursor.foreground #CC2936
terminalOverviewRuler.border #CC293620
terminalOverviewRuler.cursorForeground #CC2936
terminalOverviewRuler.findMatchForeground #CC2936CC
terminalStickyScroll.background #101010
terminalStickyScroll.border #CC293620
terminalStickyScrollHover.background #282828
terminalSymbolIcon.aliasForeground #CC2936
terminalSymbolIcon.argumentForeground #F0C850
terminalSymbolIcon.branchForeground #4DAF5C
terminalSymbolIcon.commitForeground #CC2936
terminalSymbolIcon.fileForeground #A0A0A0
terminalSymbolIcon.flagForeground #F0C850
terminalSymbolIcon.folderForeground #CC2936
terminalSymbolIcon.inlineSuggestionForeground #A0A0A080
terminalSymbolIcon.methodForeground #4DB88A
terminalSymbolIcon.optionForeground #E8E6E2
terminalSymbolIcon.optionValueForeground #78D68A
terminalSymbolIcon.pullRequestDoneForeground #4DAF5C
terminalSymbolIcon.pullRequestForeground #CC2936
terminalSymbolIcon.remoteForeground #E8525E
terminalSymbolIcon.stashForeground #4DB88A
terminalSymbolIcon.symbolicLinkFileForeground #CC293680
terminalSymbolIcon.symbolicLinkFolderForeground #CC293680
terminalSymbolIcon.symbolText #E8E6E2
terminalSymbolIcon.tagForeground #E8525E
testing.coverCountBadgeBackground #CC2936
testing.coverCountBadgeForeground #E8E6E2
testing.coveredBackground #4DAF5C15
testing.coveredBorder #4DAF5C40
testing.coveredGutterBackground #4DAF5C50
testing.iconErrored #E05050
testing.iconErrored.retired #E0505060
testing.iconFailed #E05050
testing.iconFailed.retired #E0505060
testing.iconPassed #4DAF5C
testing.iconPassed.retired #4DAF5C60
testing.iconQueued #F0C850
testing.iconQueued.retired #F0C85060
testing.iconSkipped #A0A0A080
testing.iconSkipped.retired #A0A0A050
testing.iconUnset #A0A0A080
testing.iconUnset.retired #A0A0A050
testing.message.error.badgeBackground #E05050
testing.message.error.badgeBorder #E0505080
testing.message.error.badgeForeground #E8E6E2
testing.message.error.lineBackground #E0505015
testing.message.info.decorationForeground #5AABE0
testing.message.info.lineBackground #5AABE015
testing.messagePeekBorder #5AABE0
testing.messagePeekHeaderBackground #5AABE020
testing.peekBorder #E05050
testing.peekHeaderBackground #E0505020
testing.runAction #4DAF5C
testing.uncoveredBackground #E0505015
testing.uncoveredBorder #E0505040
testing.uncoveredBranchBackground #E0505030
testing.uncoveredGutterBackground #E0505050
textBlockQuote.background #1C1C1C
textBlockQuote.border #CC293680
textCodeBlock.background #242424
textLink.activeForeground #CC2936
textLink.foreground #CC2936CC
textPreformat.background #242424
textPreformat.border #CC293630
textPreformat.foreground #78D68A
textSeparator.foreground #CC293630
titleBar.activeBackground #0A0A0A
titleBar.activeForeground #E8E6E2
titleBar.border #0A0A0A
titleBar.inactiveBackground #0A0A0A
titleBar.inactiveForeground #A0A0A080
toolbar.activeBackground #CC293640
toolbar.hoverBackground #CC293630
toolbar.hoverOutline #CC293600
tree.inactiveIndentGuidesStroke #CC293620
tree.indentGuidesStroke #CC293640
tree.tableColumnsBorder #CC293620
tree.tableOddRowsBackground #14141450
walkThrough.embeddedEditorBackground #101010
walkthrough.stepTitle.foreground #E8E6E2
welcomePage.background #141414
welcomePage.progress.background #242424
welcomePage.progress.foreground #CC2936
welcomePage.tileBackground #101010
welcomePage.tileBorder #CC293620
welcomePage.tileHoverBackground #282828
widget.border #CC293630
widget.shadow #00000050
window.activeBorder #CC293600
window.inactiveBorder #CC293600 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 #4DB88A —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #E8525E —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #4DB88A —
meta.block variable.other #E8E6E2 —
support.other.variable, string.other.link #E8E6E2 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #F0C850 —
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 #78D68A —
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 #4DB88A —
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 #4DB88A —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #E8E6E2 —
variable.language #E8525E italic
entity.name.method.js #4DB88A italic
meta.class-method.js entity.name.function.js, variable.function.constructor #4DB88A —
entity.other.attribute-name #E8525E —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #F0C850 italic
entity.other.attribute-name.class #F0C850 —
source.sass keyword.control #4DB88A —
constant.character.escape #4DAF5C —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #4DB88A italic
source.js constant.other.object.key.js string.unquoted.label.js #E8E6E2 italic
source.json meta.structure.dictionary.json support.type.property-name.json #CC2936 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #E8525E —
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 #78D68A —
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 #78D68A —
text.html.markdown, punctuation.definition.list_item.markdown #E8E6E2 —
text.html.markdown markup.inline.raw.markdown #F0C850 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #4DB88A —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #CC2936 —
markup.italic #E8525E italic
markup.bold, markup.bold string #E8525E 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 #E8525E bold
markup.underline #78D68A underline
markup.quote punctuation.definition.blockquote.markdown #A0A0A0 —
string.other.link.title.markdown #4DB88A —
string.other.link.description.title.markdown #E8525E —
constant.other.reference.link.markdown #78D68A —
markup.raw.block.fenced.markdown #E8E6E2 —
punctuation.definition.fenced.markdown #E8E6E2 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #E8E6E2 —
variable.language.fenced.markdown #4DB88A —
meta.separator #CC2936 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}!`;
}