Skip to main content
Icon Group | Coding Theme
Home Theme VS Code Icon Group A professional theme for Visual Studio Code inspired by Icon Group's brand identity. Features navy blue backgrounds, gold accents, and healthcare-focused aesthetics reflecting Icon Group's leadership in cancer care.
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 #006FB930 activityBar.activeBackground #7C439915 activityBar.activeBorder #7C4399 activityBar.activeFocusBorder #7C4399 activityBar.background #F4F7FA activityBar.border #7C439930 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #5D6F7F italic variable, string constant.other.placeholder #15406F — constant.other.color #006FB9 — invalid, invalid.illegal #D63B30 — 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}!`;
}
Icon Group — Icon Group Light main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Light+
activityBar.dropBorder #7C4399
activityBar.foreground #15406F
activityBar.inactiveForeground #15406F70
activityBarBadge.background #006FB9
activityBarBadge.foreground #FFFFFF
activityBarTop.activeBackground #7C439915
activityBarTop.activeBorder #7C4399
activityBarTop.background #F4F7FA
activityBarTop.dropBorder #7C4399
activityBarTop.foreground #15406F
activityBarTop.inactiveForeground #15406F70
activityErrorBadge.background #D63B30
activityErrorBadge.foreground #FFFFFF
activityWarningBadge.background #C49A00
activityWarningBadge.foreground #FFFFFF
agentSessionReadIndicator.foreground #006FB9
agentSessionSelectedBadge.border #006FB940
agentSessionSelectedUnfocusedBadge.border #15406F40
agentStatusIndicator.background #F4F7FA
aiCustomizationManagement.sashBorder #006FB9
badge.background #006FB9
badge.foreground #FFFFFF
banner.background #006FB9
banner.foreground #FFFFFF
banner.iconForeground #FFFFFF
breadcrumb.activeSelectionForeground #006FB9
breadcrumb.background #FFFFFF
breadcrumb.focusForeground #15406F
breadcrumb.foreground #6B7D8E
breadcrumbPicker.background #FFFFFF
button.background #006FB9
button.border #006FB900
button.foreground #FFFFFF
button.hoverBackground #005A96
button.secondaryBackground #F4F7FA
button.secondaryBorder #006FB940
button.secondaryForeground #15406F
button.secondaryHoverBackground #E8EFF6
button.separator #FFFFFF40
charts.blue #006FB9
charts.foreground #15406F
charts.green #009572
charts.lines #6B7D8E
charts.orange #B87333
charts.purple #7C4399
charts.red #D63B30
charts.yellow #C49A00
chat.avatarBackground #006FB9
chat.avatarForeground #FFFFFF
chat.checkpointSeparator #006FB930
chat.editedFileForeground #7C4399
chat.inputWorkingBorderColor1 #006FB9
chat.inputWorkingBorderColor2 #005A96
chat.inputWorkingBorderColor3 #006FB9
chat.linesAddedForeground #009572CC
chat.linesRemovedForeground #D63B30CC
chat.requestBackground #F4F7FA
chat.requestBorder #006FB930
chat.requestBubbleBackground #F4F7FAE6
chat.requestBubbleHoverBackground #E8EFF6E6
chat.requestCodeBorder #006FB920
chat.slashCommandBackground #006FB9
chat.slashCommandForeground #FFFFFF
chat.thinkingShimmer #006FB930
chatManagement.sashBorder #006FB9
checkbox.background #FFFFFF
checkbox.border #006FB950
checkbox.disabled.background #F4F7FA
checkbox.disabled.foreground #6B7D8E
checkbox.foreground #006FB9
checkbox.selectBackground #FFFFFF
checkbox.selectBorder #006FB9
commandCenter.activeBackground #15406F25
commandCenter.activeBorder #15406F50
commandCenter.activeForeground #15406F
commandCenter.background #15406F15
commandCenter.border #15406F30
commandCenter.debuggingBackground #006FB920
commandCenter.foreground #15406F
commandCenter.inactiveBorder #15406F15
commandCenter.inactiveForeground #15406F70
commentsView.resolvedIcon #009572
commentsView.unresolvedIcon #C49A00
contrastActiveBorder #006FB900
contrastBorder #006FB900
debugConsole.errorForeground #D63B30
debugConsole.infoForeground #006FB9
debugConsole.sourceForeground #6B7D8E
debugConsole.warningForeground #C49A00
debugConsoleInputIcon.foreground #006FB9
debugExceptionWidget.background #D63B3015
debugExceptionWidget.border #D63B3060
debugIcon.breakpointCurrentStackframeForeground #C49A00
debugIcon.breakpointDisabledForeground #6B7D8E
debugIcon.breakpointForeground #D63B30
debugIcon.breakpointStackframeForeground #009572
debugIcon.breakpointUnverifiedForeground #C49A00
debugIcon.continueForeground #009572
debugIcon.disconnectForeground #D63B30
debugIcon.pauseForeground #C49A00
debugIcon.restartForeground #009572
debugIcon.startForeground #009572
debugIcon.stepBackForeground #006FB9
debugIcon.stepIntoForeground #006FB9
debugIcon.stepOutForeground #006FB9
debugIcon.stepOverForeground #006FB9
debugIcon.stopForeground #D63B30
debugTokenExpression.boolean #B87333
debugTokenExpression.error #D63B30
debugTokenExpression.name #7C4399
debugTokenExpression.number #B87333
debugTokenExpression.string #009572
debugTokenExpression.type #7C4399
debugTokenExpression.value #009572
debugToolBar.background #FFFFFF
debugView.exceptionLabelBackground #D63B30
debugView.exceptionLabelForeground #FFFFFF
debugView.stateLabelBackground #006FB9
debugView.stateLabelForeground #FFFFFF
debugView.valueChangedHighlight #006FB960
descriptionForeground #6B7D8E
diffEditor.border #7C439920
diffEditor.diagonalFill #6B7D8E15
diffEditor.insertedLineBackground #00957210
diffEditor.insertedTextBackground #00957220
diffEditor.insertedTextBorder #00957250
diffEditor.move.border #006FB960
diffEditor.moveActive.border #006FB9
diffEditor.removedLineBackground #D63B3010
diffEditor.removedTextBackground #D63B3020
diffEditor.removedTextBorder #D63B3050
diffEditor.unchangedCodeBackground #FFFFFF80
diffEditor.unchangedRegionBackground #F4F7FA
diffEditor.unchangedRegionForeground #6B7D8E
diffEditor.unchangedRegionShadow #05101A15
diffEditorGutter.insertedLineBackground #00957220
diffEditorGutter.removedLineBackground #D63B3020
diffEditorOverview.insertedForeground #00957260
diffEditorOverview.removedForeground #D63B3060
disabledForeground #6B7D8E
dropdown.background #FFFFFF
dropdown.border #006FB950
dropdown.foreground #15406F
dropdown.listBackground #FFFFFF
editor.background #FFFFFF
editor.compositionBorder #006FB9
editor.findMatchBackground #006FB950
editor.findMatchBorder #006FB9
editor.findMatchForeground #15406F
editor.findMatchHighlightBackground #006FB930
editor.findMatchHighlightBorder #006FB960
editor.findMatchHighlightForeground #15406F
editor.findRangeHighlightBackground #006FB915
editor.findRangeHighlightBorder #006FB900
editor.focusedStackFrameHighlightBackground #00957220
editor.foldBackground #006FB910
editor.foldPlaceholderForeground #6B7D8E
editor.foreground #15406F
editor.hoverHighlightBackground #006FB915
editor.inactiveLineHighlightBackground #F4F7FA80
editor.inactiveSelectionBackground #006FB920
editor.inlineValuesBackground #006FB910
editor.inlineValuesForeground #6B7D8E
editor.lineHighlightBackground #F4F7FA
editor.lineHighlightBorder #006FB910
editor.linkedEditingBackground #006FB920
editor.placeholder.foreground #6B7D8E
editor.rangeHighlightBackground #006FB910
editor.rangeHighlightBorder #006FB900
editor.selectionBackground #006FB930
editor.selectionForeground #15406F
editor.selectionHighlightBackground #006FB920
editor.selectionHighlightBorder #006FB940
editor.stackFrameHighlightBackground #C49A0020
editor.symbolHighlightBackground #006FB920
editor.symbolHighlightBorder #006FB940
editor.wordHighlightBackground #006FB920
editor.wordHighlightBorder #006FB940
editor.wordHighlightStrongBackground #006FB930
editor.wordHighlightStrongBorder #006FB960
editor.wordHighlightTextBackground #006FB915
editor.wordHighlightTextBorder #006FB930
editorActionList.background #FFFFFF
editorActionList.focusBackground #006FB930
editorActionList.focusForeground #15406F
editorActionList.foreground #15406F
editorBracketHighlight.foreground1 #006FB9
editorBracketHighlight.foreground2 #7C4399
editorBracketHighlight.foreground3 #B8860B
editorBracketHighlight.foreground4 #009572
editorBracketHighlight.foreground5 #9B59B6
editorBracketHighlight.foreground6 #2E8B6A
editorBracketHighlight.unexpectedBracket.foreground #D63B30
editorBracketMatch.border #006FB960
editorBracketMatch.foreground #006FB9
editorBracketPairGuide.activeBackground1 #006FB980
editorBracketPairGuide.activeBackground2 #7C439980
editorBracketPairGuide.activeBackground3 #B8860B80
editorBracketPairGuide.activeBackground4 #00957280
editorBracketPairGuide.activeBackground5 #9B59B680
editorBracketPairGuide.activeBackground6 #2E8B6A80
editorBracketPairGuide.background1 #006FB940
editorBracketPairGuide.background2 #7C439940
editorBracketPairGuide.background3 #B8860B40
editorBracketPairGuide.background4 #00957240
editorBracketPairGuide.background5 #9B59B640
editorBracketPairGuide.background6 #2E8B6A40
editorCodeLens.foreground #6B7D8E
editorCommentsWidget.rangeActiveBackground #006FB915
editorCommentsWidget.rangeBackground #006FB908
editorCommentsWidget.replyInputBackground #FFFFFF
editorCommentsWidget.resolvedBorder #00957250
editorCommentsWidget.unresolvedBorder #C49A00
editorCursor.background #FFFFFF
editorCursor.foreground #006FB9
editorError.background #D63B3010
editorError.border #D63B3000
editorError.foreground #D63B30
editorGhostText.background #006FB900
editorGhostText.border #006FB900
editorGhostText.foreground #15406F66
editorGroup.border #7C439920
editorGroup.dropBackground #006FB920
editorGroup.dropIntoPromptBackground #FFFFFF
editorGroup.dropIntoPromptBorder #006FB950
editorGroup.dropIntoPromptForeground #15406F
editorGroup.emptyBackground #FFFFFF
editorGroup.focusedEmptyBorder #006FB940
editorGroupHeader.border #7C439915
editorGroupHeader.noTabsBackground #FFFFFF
editorGroupHeader.tabsBackground #F4F7FA
editorGroupHeader.tabsBorder #7C439920
editorGutter.addedBackground #009572
editorGutter.addedSecondaryBackground #00957260
editorGutter.background #FFFFFF
editorGutter.commentDraftGlyphForeground #006FB980
editorGutter.commentGlyphForeground #006FB9
editorGutter.commentRangeForeground #6B7D8E40
editorGutter.commentUnresolvedGlyphForeground #C49A00
editorGutter.deletedBackground #D63B30
editorGutter.deletedSecondaryBackground #D63B3060
editorGutter.foldingControlForeground #6B7D8E
editorGutter.itemBackground #FFFFFF
editorGutter.itemGlyphForeground #006FB9
editorGutter.modifiedBackground #7C4399
editorGutter.modifiedSecondaryBackground #7C439960
editorHint.border #00957200
editorHint.foreground #009572
editorHoverWidget.background #FFFFFF
editorHoverWidget.border #006FB950
editorHoverWidget.foreground #15406F
editorHoverWidget.highlightForeground #006FB9
editorHoverWidget.statusBarBackground #F4F7FA
editorIndentGuide.activeBackground1 #006FB9
editorIndentGuide.activeBackground2 #7C4399
editorIndentGuide.activeBackground3 #B8860B
editorIndentGuide.activeBackground4 #009572
editorIndentGuide.activeBackground5 #9B59B6
editorIndentGuide.activeBackground6 #2E8B6A
editorIndentGuide.background1 #006FB920
editorIndentGuide.background2 #7C439920
editorIndentGuide.background3 #B8860B20
editorIndentGuide.background4 #00957220
editorIndentGuide.background5 #9B59B620
editorIndentGuide.background6 #2E8B6A20
editorInfo.background #006FB910
editorInfo.border #006FB900
editorInfo.foreground #006FB9
editorInlayHint.background #F4F7FA
editorInlayHint.foreground #15406F70
editorInlayHint.parameterBackground #F4F7FA
editorInlayHint.parameterForeground #15406F70
editorInlayHint.typeBackground #F4F7FA
editorInlayHint.typeForeground #15406F
editorLightBulb.foreground #C49A00
editorLightBulbAi.foreground #006FB9
editorLightBulbAutoFix.foreground #009572
editorLineNumber.activeForeground #006FB9
editorLineNumber.dimmedForeground #6B7D8E50
editorLineNumber.foreground #7C4399
editorLink.activeForeground #006FB9
editorMarkerNavigation.background #FFFFFF
editorMarkerNavigationError.background #D63B3020
editorMarkerNavigationError.headerBackground #D63B3015
editorMarkerNavigationInfo.background #006FB920
editorMarkerNavigationInfo.headerBackground #006FB915
editorMarkerNavigationWarning.background #C49A0020
editorMarkerNavigationWarning.headerBackground #C49A0015
editorMinimap.inlineChatInserted #00957230
editorMinimap.inlineChatRemoved #D63B3030
editorMultiCursor.primary.background #FFFFFF
editorMultiCursor.primary.foreground #006FB9
editorMultiCursor.secondary.background #FFFFFF
editorMultiCursor.secondary.foreground #7C4399
editorOverviewRuler.addedForeground #009572
editorOverviewRuler.background #FFFFFF
editorOverviewRuler.border #006FB920
editorOverviewRuler.bracketMatchForeground #006FB960
editorOverviewRuler.commentDraftForeground #006FB950
editorOverviewRuler.commentForeground #006FB930
editorOverviewRuler.commentUnresolvedForeground #C49A0060
editorOverviewRuler.commonContentForeground #6B7D8E40
editorOverviewRuler.currentContentForeground #00957260
editorOverviewRuler.deletedForeground #D63B30
editorOverviewRuler.errorForeground #D63B30
editorOverviewRuler.findMatchForeground #006FB9CC
editorOverviewRuler.incomingContentForeground #7C439960
editorOverviewRuler.infoForeground #006FB9
editorOverviewRuler.inlineChatInserted #00957260
editorOverviewRuler.inlineChatRemoved #D63B3060
editorOverviewRuler.modifiedForeground #7C4399
editorOverviewRuler.rangeHighlightForeground #006FB999
editorOverviewRuler.selectionHighlightForeground #006FB999
editorOverviewRuler.warningForeground #C49A00
editorOverviewRuler.wordHighlightForeground #006FB999
editorOverviewRuler.wordHighlightStrongForeground #006FB9CC
editorOverviewRuler.wordHighlightTextForeground #006FB960
editorPane.background #FFFFFF
editorRuler.foreground #CBD5E130
editorSnippetFinalTabstopHighlightBackground #00957220
editorSnippetFinalTabstopHighlightBorder #00957200
editorSnippetTabstopHighlightBackground #006FB920
editorSnippetTabstopHighlightBorder #006FB900
editorStickyScroll.background #F4F7FA
editorStickyScroll.border #7C439915
editorStickyScroll.shadow #05101A15
editorStickyScrollGutter.background #F4F7FA
editorStickyScrollHover.background #E8EFF6
editorSuggestWidget.background #FFFFFF
editorSuggestWidget.border #006FB950
editorSuggestWidget.focusHighlightForeground #006FB9
editorSuggestWidget.foreground #15406F
editorSuggestWidget.highlightForeground #006FB9
editorSuggestWidget.selectedBackground #006FB950
editorSuggestWidget.selectedForeground #15406F
editorSuggestWidget.selectedIconForeground #15406F
editorSuggestWidgetStatus.foreground #6B7D8E
editorUnicodeHighlight.background #C49A0015
editorUnicodeHighlight.border #C49A00
editorUnnecessaryCode.border #6B7D8E40
editorUnnecessaryCode.opacity #00000077
editorWarning.background #C49A0010
editorWarning.border #C49A0000
editorWarning.foreground #C49A00
editorWhitespace.foreground #CBD5E150
editorWidget.background #FFFFFF
editorWidget.border #006FB950
editorWidget.foreground #15406F
editorWidget.resizeBorder #006FB9
errorForeground #D63B30
extensionBadge.remoteBackground #006FB9
extensionBadge.remoteForeground #FFFFFF
extensionButton.background #006FB9
extensionButton.border #006FB900
extensionButton.foreground #FFFFFF
extensionButton.hoverBackground #005A96
extensionButton.prominentBackground #006FB9
extensionButton.prominentForeground #FFFFFF
extensionButton.prominentHoverBackground #005A96
extensionButton.separator #FFFFFF40
extensionIcon.preReleaseForeground #006FB9
extensionIcon.privateForeground #6B7D8E
extensionIcon.sponsorForeground #7C4399
extensionIcon.starForeground #C49A00
extensionIcon.verifiedForeground #009572
focusBorder #006FB9
foreground #15406F
gauge.background #FFFFFF
gauge.border #006FB920
gauge.errorBackground #D63B3020
gauge.errorForeground #D63B30
gauge.foreground #15406F
gauge.warningBackground #C49A0020
gauge.warningForeground #C49A00
git.blame.editorDecorationForeground #6B7D8E80
gitDecoration.addedResourceForeground #009572
gitDecoration.conflictingResourceForeground #C49A00
gitDecoration.deletedResourceForeground #D63B30
gitDecoration.ignoredResourceForeground #6B7D8E
gitDecoration.modifiedResourceForeground #7C4399
gitDecoration.renamedResourceForeground #006FB9
gitDecoration.stageDeletedResourceForeground #D63B30CC
gitDecoration.stageModifiedResourceForeground #7C4399CC
gitDecoration.submoduleResourceForeground #2E8B6A
gitDecoration.untrackedResourceForeground #009572
icon.foreground #006FB9
inlineChat.background #F4F7FA
inlineChat.border #006FB930
inlineChat.foreground #15406F
inlineChat.shadow #05101A20
inlineChatDiff.inserted #00957220
inlineChatDiff.removed #D63B3015
inlineChatInput.background #FFFFFF
inlineChatInput.border #006FB950
inlineChatInput.focusBorder #006FB9
inlineChatInput.placeholderForeground #15406F70
inlineEdit.gutterIndicator.background #FFFFFF
inlineEdit.gutterIndicator.primaryBackground #006FB915
inlineEdit.gutterIndicator.primaryBorder #006FB9
inlineEdit.gutterIndicator.primaryForeground #006FB9
inlineEdit.gutterIndicator.secondaryBackground #7C439915
inlineEdit.gutterIndicator.secondaryBorder #7C4399
inlineEdit.gutterIndicator.secondaryForeground #7C4399
inlineEdit.gutterIndicator.successfulBackground #00957215
inlineEdit.gutterIndicator.successfulBorder #009572
inlineEdit.gutterIndicator.successfulForeground #009572
inlineEdit.modifiedBackground #7C439910
inlineEdit.modifiedBorder #7C439940
inlineEdit.modifiedChangedLineBackground #7C439915
inlineEdit.modifiedChangedTextBackground #7C439925
inlineEdit.originalBackground #D63B3008
inlineEdit.originalBorder #D63B3025
inlineEdit.originalChangedLineBackground #D63B3010
inlineEdit.originalChangedTextBackground #D63B3020
inlineEdit.tabWillAcceptModifiedBorder #00957260
inlineEdit.tabWillAcceptOriginalBorder #D63B3040
input.background #FFFFFF
input.border #006FB950
input.foreground #15406F
input.placeholderForeground #6B7D8E
inputOption.activeBackground #006FB930
inputOption.activeBorder #006FB9
inputOption.activeForeground #15406F
inputOption.hoverBackground #006FB915
inputValidation.errorBackground #D63B3015
inputValidation.errorBorder #D63B30
inputValidation.errorForeground #D63B30
inputValidation.infoBackground #006FB915
inputValidation.infoBorder #006FB9
inputValidation.infoForeground #006FB9
inputValidation.warningBackground #C49A0015
inputValidation.warningBorder #C49A00
inputValidation.warningForeground #C49A00
interactive.activeCodeBorder #006FB9
interactive.inactiveCodeBorder #006FB920
keybindingLabel.background #006FB915
keybindingLabel.border #006FB930
keybindingLabel.bottomBorder #006FB950
keybindingLabel.foreground #15406F
keybindingTable.headerBackground #F4F7FA
keybindingTable.rowsBackground #F4F7FA80
list.activeSelectionBackground #006FB940
list.activeSelectionForeground #FFFFFF
list.activeSelectionIconForeground #FFFFFF
list.deemphasizedForeground #6B7D8E
list.dropBackground #006FB920
list.dropBetweenBackground #006FB9
list.errorForeground #D63B30
list.filterMatchBorder #006FB960
list.focusAndSelectionOutline #006FB9
list.focusBackground #006FB930
list.focusForeground #15406F
list.focusHighlightForeground #006FB9
list.focusOutline #006FB960
list.highlightForeground #006FB9
list.hoverBackground #006FB915
list.hoverForeground #15406F
list.inactiveFocusBackground #006FB915
list.inactiveFocusOutline #006FB940
list.inactiveSelectionBackground #006FB920
list.inactiveSelectionForeground #15406F
list.inactiveSelectionIconForeground #15406F
list.invalidItemForeground #D63B30
list.warningForeground #C49A00
listFilterWidget.background #FFFFFF
listFilterWidget.noMatchesOutline #D63B30
listFilterWidget.outline #006FB9
listFilterWidget.shadow #05101A30
markdownAlert.caution.foreground #D63B30
markdownAlert.important.foreground #7C4399
markdownAlert.note.foreground #006FB9
markdownAlert.tip.foreground #009572
markdownAlert.warning.foreground #C49A00
mcpIcon.starForeground #C49A00
menu.background #FFFFFF
menu.border #006FB930
menu.foreground #15406F
menu.selectionBackground #006FB930
menu.selectionBorder #006FB900
menu.selectionForeground #15406F
menu.separatorBackground #006FB920
menubar.selectionBackground #006FB930
menubar.selectionBorder #006FB900
menubar.selectionForeground #15406F
merge.border #006FB950
merge.commonContentBackground #6B7D8E15
merge.commonHeaderBackground #6B7D8E30
merge.currentContentBackground #00957220
merge.currentHeaderBackground #00957250
merge.incomingContentBackground #7C439920
merge.incomingHeaderBackground #7C439950
mergeEditor.change.background #006FB915
mergeEditor.change.word.background #006FB930
mergeEditor.changeBase.background #6B7D8E10
mergeEditor.changeBase.word.background #6B7D8E20
mergeEditor.conflict.handled.minimapOverViewRuler #009572
mergeEditor.conflict.handledFocused.border #009572
mergeEditor.conflict.handledUnfocused.border #00957240
mergeEditor.conflict.input1.background #00957215
mergeEditor.conflict.input2.background #7C439915
mergeEditor.conflict.unhandled.minimapOverViewRuler #C49A00
mergeEditor.conflict.unhandledFocused.border #C49A00
mergeEditor.conflict.unhandledUnfocused.border #C49A0060
mergeEditor.conflictingLines.background #C49A0015
minimap.background #FFFFFF
minimap.chatEditHighlight #006FB930
minimap.errorHighlight #D63B30
minimap.findMatchHighlight #006FB980
minimap.foregroundOpacity #000000FF
minimap.infoHighlight #006FB9
minimap.selectionHighlight #006FB950
minimap.selectionOccurrenceHighlight #006FB930
minimap.warningHighlight #C49A00
minimapGutter.addedBackground #009572
minimapGutter.deletedBackground #D63B30
minimapGutter.modifiedBackground #7C4399
minimapSlider.activeBackground #006FB970
minimapSlider.background #006FB930
minimapSlider.hoverBackground #006FB950
multiDiffEditor.background #FFFFFF
multiDiffEditor.border #7C439920
multiDiffEditor.headerBackground #F4F7FA
notebook.cellBorderColor #7C439920
notebook.cellEditorBackground #FFFFFF
notebook.cellHoverBackground #E8EFF6
notebook.cellInsertionIndicator #006FB9
notebook.cellStatusBarItemHoverBackground #006FB920
notebook.cellToolbarSeparator #7C439915
notebook.editorBackground #FFFFFF
notebook.focusedCellBackground #F4F7FA
notebook.focusedCellBorder #006FB9
notebook.focusedEditorBorder #006FB9
notebook.inactiveFocusedCellBorder #006FB940
notebook.inactiveSelectedCellBorder #006FB920
notebook.outputContainerBackgroundColor #F4F7FA
notebook.outputContainerBorderColor #7C439915
notebook.selectedCellBackground #006FB915
notebook.selectedCellBorder #006FB960
notebook.symbolHighlightBackground #006FB920
notebookEditorOverviewRuler.runningCellForeground #006FB9
notebookScrollbarSlider.activeBackground #006FB970
notebookScrollbarSlider.background #006FB930
notebookScrollbarSlider.hoverBackground #006FB950
notebookStatusErrorIcon.foreground #D63B30
notebookStatusRunningIcon.foreground #006FB9
notebookStatusSuccessIcon.foreground #009572
notificationCenter.border #006FB920
notificationCenterHeader.background #F0E6C8
notificationCenterHeader.foreground #15406F
notificationLink.foreground #006FB9
notifications.background #FFFFFF
notifications.border #006FB920
notifications.foreground #15406F
notificationsErrorIcon.foreground #D63B30
notificationsInfoIcon.foreground #006FB9
notificationsWarningIcon.foreground #C49A00
notificationToast.border #006FB920
outputView.background #F4F7FA
outputViewStickyScroll.background #F4F7FA
panel.background #F4F7FA
panel.border #7C439920
panel.dropBorder #7C4399
panelInput.border #006FB950
panelSection.border #7C439920
panelSection.dropBackground #006FB920
panelSectionHeader.background #7C439915
panelSectionHeader.border #7C439920
panelSectionHeader.foreground #0E2A4A
panelStickyScroll.background #F4F7FA
panelStickyScroll.border #7C439915
panelStickyScroll.shadow #05101A15
panelTitle.activeBorder #7C4399
panelTitle.activeForeground #7C4399
panelTitle.border #7C439915
panelTitle.inactiveForeground #15406F60
panelTitleBadge.background #006FB9
panelTitleBadge.foreground #FFFFFF
peekView.border #006FB9
peekViewEditor.background #15406F
peekViewEditor.matchHighlightBackground #006FB950
peekViewEditor.matchHighlightBorder #006FB980
peekViewEditorGutter.background #15406F
peekViewEditorStickyScroll.background #15406F
peekViewEditorStickyScrollGutter.background #15406F
peekViewResult.background #0B2240
peekViewResult.fileForeground #FFFFFF
peekViewResult.lineForeground #B0BEC5
peekViewResult.matchHighlightBackground #006FB950
peekViewResult.selectionBackground #006FB950
peekViewResult.selectionForeground #FFFFFF
peekViewTitle.background #081A30
peekViewTitleDescription.foreground #B0BEC5
peekViewTitleLabel.foreground #006FB9
pickerGroup.border #006FB920
pickerGroup.foreground #006FB9
ports.iconRunningProcessForeground #009572
problemsErrorIcon.foreground #D63B30
problemsInfoIcon.foreground #006FB9
problemsWarningIcon.foreground #C49A00
profileBadge.background #006FB9
profileBadge.foreground #FFFFFF
profiles.sashBorder #006FB9
progressBar.background #006FB9
quickInput.background #FFFFFF
quickInput.border #006FB925
quickInput.foreground #15406F
quickInputList.focusBackground #006FB930
quickInputList.focusForeground #15406F
quickInputList.focusIconForeground #15406F
quickInputList.hoverBackground #E8EFF6
quickInputTitle.background #F4F7FA
radio.activeBackground #006FB9
radio.activeBorder #006FB9
radio.activeForeground #FFFFFF
radio.inactiveBackground #FFFFFF
radio.inactiveBorder #006FB940
radio.inactiveForeground #15406F
radio.inactiveHoverBackground #E8EFF6
sash.hoverBorder #006FB9
scmGraph.foreground1 #006FB9
scmGraph.foreground2 #7C4399
scmGraph.foreground3 #009572
scmGraph.foreground4 #C49A00
scmGraph.foreground5 #009572
scmGraph.historyItemBaseRefColor #009572
scmGraph.historyItemHoverAdditionsForeground #009572
scmGraph.historyItemHoverDeletionsForeground #D63B30
scmGraph.historyItemHoverLabelForeground #15406F
scmGraph.historyItemRefColor #006FB9
scmGraph.historyItemRemoteRefColor #7C4399
scrollbar.background #FFFFFF00
scrollbar.shadow #05101A50
scrollbarSlider.activeBackground #006FB970
scrollbarSlider.background #006FB930
scrollbarSlider.hoverBackground #006FB950
search.resultsInfoForeground #6B7D8E
searchEditor.findMatchBackground #006FB930
searchEditor.findMatchBorder #006FB960
searchEditor.textInputBorder #006FB950
selection.background #006FB950
settings.checkboxBackground #FFFFFF
settings.checkboxBorder #006FB950
settings.checkboxForeground #006FB9
settings.dropdownBackground #FFFFFF
settings.dropdownBorder #006FB950
settings.dropdownForeground #15406F
settings.dropdownListBorder #006FB920
settings.focusedRowBackground #006FB910
settings.focusedRowBorder #006FB930
settings.headerBorder #7C439915
settings.headerForeground #15406F
settings.modifiedItemIndicator #006FB9
settings.numberInputBackground #FFFFFF
settings.numberInputBorder #006FB950
settings.numberInputForeground #15406F
settings.rowHoverBackground #006FB910
settings.sashBorder #006FB9
settings.settingsHeaderHoverForeground #006FB9
settings.textInputBackground #FFFFFF
settings.textInputBorder #006FB950
settings.textInputForeground #15406F
sideBar.background #F4F7FA
sideBar.border #7C439930
sideBar.dropBackground #006FB920
sideBar.foreground #15406F
sideBarActivityBarTop.border #7C439920
sideBarSectionHeader.background #7C439915
sideBarSectionHeader.border #7C439920
sideBarSectionHeader.foreground #0E2A4A
sideBarStickyScroll.background #F4F7FA
sideBarStickyScroll.border #7C439915
sideBarStickyScroll.shadow #05101A15
sideBarTitle.background #F4F7FA
sideBarTitle.border #7C439915
sideBarTitle.foreground #7C4399
sideBySideEditor.horizontalBorder #7C439920
sideBySideEditor.verticalBorder #7C439920
simpleFindWidget.sashBorder #006FB9
statusBar.background #15406F
statusBar.border #0E2A4A
statusBar.debuggingBackground #006FB9
statusBar.debuggingBorder #006FB9CC
statusBar.debuggingForeground #FFFFFF
statusBar.focusBorder #006FB9
statusBar.foreground #FFFFFF
statusBar.noFolderBackground #0E2A4A
statusBar.noFolderBorder #0E2A4A
statusBar.noFolderForeground #FFFFFF
statusBarItem.activeBackground #0E2A4A80
statusBarItem.compactHoverBackground #0E2A4A60
statusBarItem.errorBackground #D63B30
statusBarItem.errorForeground #FFFFFF
statusBarItem.errorHoverBackground #D63B30CC
statusBarItem.errorHoverForeground #FFFFFF
statusBarItem.focusBorder #006FB9
statusBarItem.hoverBackground #0E2A4A80
statusBarItem.hoverForeground #FFFFFF
statusBarItem.offlineBackground #6B7D8E
statusBarItem.offlineForeground #FFFFFF
statusBarItem.offlineHoverBackground #6B7D8ECC
statusBarItem.offlineHoverForeground #FFFFFF
statusBarItem.prominentBackground #006FB9
statusBarItem.prominentForeground #FFFFFF
statusBarItem.prominentHoverBackground #005A96
statusBarItem.prominentHoverForeground #FFFFFF
statusBarItem.remoteBackground #006FB9
statusBarItem.remoteForeground #FFFFFF
statusBarItem.remoteHoverBackground #006FB9CC
statusBarItem.remoteHoverForeground #FFFFFF
statusBarItem.warningBackground #C49A00
statusBarItem.warningForeground #FFFFFF
statusBarItem.warningHoverBackground #C49A00CC
statusBarItem.warningHoverForeground #FFFFFF
symbolIcon.arrayForeground #B87333
symbolIcon.booleanForeground #B87333
symbolIcon.classForeground #7C4399
symbolIcon.colorForeground #006FB9
symbolIcon.constantForeground #B87333
symbolIcon.constructorForeground #006FB9
symbolIcon.enumeratorForeground #7C4399
symbolIcon.enumeratorMemberForeground #B87333
symbolIcon.eventForeground #C49A00
symbolIcon.fieldForeground #006FB9
symbolIcon.fileForeground #6B7D8E
symbolIcon.folderForeground #006FB9
symbolIcon.functionForeground #006FB9
symbolIcon.interfaceForeground #7C4399
symbolIcon.keyForeground #006FB9
symbolIcon.keywordForeground #7C4399
symbolIcon.methodForeground #006FB9
symbolIcon.moduleForeground #006FB9
symbolIcon.namespaceForeground #006FB9
symbolIcon.nullForeground #6B7D8E
symbolIcon.numberForeground #B87333
symbolIcon.objectForeground #006FB9
symbolIcon.operatorForeground #006FB9
symbolIcon.packageForeground #006FB9
symbolIcon.propertyForeground #15406F
symbolIcon.referenceForeground #006FB9
symbolIcon.snippetForeground #009572
symbolIcon.stringForeground #009572
symbolIcon.structForeground #7C4399
symbolIcon.textForeground #15406F
symbolIcon.typeParameterForeground #7C4399
symbolIcon.unitForeground #B87333
symbolIcon.variableForeground #15406F
tab.activeBackground #FFFFFF
tab.activeBorder #7C4399
tab.activeBorderTop #7C439900
tab.activeForeground #15406F
tab.activeModifiedBorder #7C4399
tab.border #7C439920
tab.dragAndDropBorder #7C4399
tab.hoverBackground #F4F7FA
tab.hoverBorder #7C439940
tab.hoverForeground #15406F
tab.inactiveBackground #F4F7FA
tab.inactiveForeground #15406F70
tab.inactiveModifiedBorder #7C439960
tab.lastPinnedBorder #7C439930
tab.selectedBackground #FFFFFF
tab.selectedBorderTop #7C4399
tab.selectedForeground #15406F
tab.unfocusedActiveBackground #FFFFFF
tab.unfocusedActiveBorder #7C439960
tab.unfocusedActiveBorderTop #7C439900
tab.unfocusedActiveForeground #15406FCC
tab.unfocusedActiveModifiedBorder #7C4399CC
tab.unfocusedHoverBackground #F4F7FA
tab.unfocusedHoverBorder #7C439930
tab.unfocusedHoverForeground #15406FCC
tab.unfocusedInactiveBackground #F4F7FA
tab.unfocusedInactiveForeground #15406F50
tab.unfocusedInactiveModifiedBorder #7C439950
terminal.ansiBlack #05101A
terminal.ansiBlue #15406F
terminal.ansiBrightBlack #6B7D8E
terminal.ansiBrightBlue #006FB9
terminal.ansiBrightCyan #009572
terminal.ansiBrightGreen #2ECC71
terminal.ansiBrightMagenta #9B59B6
terminal.ansiBrightRed #E74C3C
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #F39C12
terminal.ansiCyan #00897B
terminal.ansiGreen #009572
terminal.ansiMagenta #7C4399
terminal.ansiRed #D63B30
terminal.ansiWhite #FFFFFF
terminal.ansiYellow #B8860B
terminal.background #FFFFFF
terminal.border #7C439920
terminal.dropBackground #006FB920
terminal.findMatchBackground #006FB960
terminal.findMatchBorder #006FB9
terminal.findMatchHighlightBackground #006FB940
terminal.findMatchHighlightBorder #006FB980
terminal.foreground #15406F
terminal.hoverHighlightBackground #006FB920
terminal.inactiveSelectionBackground #006FB920
terminal.initialHintForeground #6B7D8E
terminal.selectionBackground #006FB940
terminal.selectionForeground #15406F
terminal.tab.activeBorder #7C4399
terminalCommandDecoration.defaultBackground #006FB940
terminalCommandDecoration.errorBackground #D63B3060
terminalCommandDecoration.successBackground #00957260
terminalCommandGuide.foreground #006FB920
terminalCursor.background #FFFFFF
terminalCursor.foreground #006FB9
terminalOverviewRuler.border #7C439920
terminalOverviewRuler.cursorForeground #006FB9
terminalOverviewRuler.findMatchForeground #006FB9CC
terminalStickyScroll.background #F4F7FA
terminalStickyScroll.border #7C439915
terminalStickyScrollHover.background #E8EFF6
terminalSymbolIcon.aliasForeground #006FB9
terminalSymbolIcon.argumentForeground #B87333
terminalSymbolIcon.branchForeground #009572
terminalSymbolIcon.commitForeground #006FB9
terminalSymbolIcon.fileForeground #6B7D8E
terminalSymbolIcon.flagForeground #C49A00
terminalSymbolIcon.folderForeground #006FB9
terminalSymbolIcon.inlineSuggestionForeground #6B7D8E
terminalSymbolIcon.methodForeground #006FB9
terminalSymbolIcon.optionForeground #15406F
terminalSymbolIcon.optionValueForeground #009572
terminalSymbolIcon.pullRequestDoneForeground #009572
terminalSymbolIcon.pullRequestForeground #006FB9
terminalSymbolIcon.remoteForeground #7C4399
terminalSymbolIcon.stashForeground #7C4399
terminalSymbolIcon.symbolicLinkFileForeground #006FB980
terminalSymbolIcon.symbolicLinkFolderForeground #006FB980
terminalSymbolIcon.symbolText #15406F
terminalSymbolIcon.tagForeground #7C4399
testing.coverCountBadgeBackground #006FB9
testing.coverCountBadgeForeground #FFFFFF
testing.coveredBackground #00957210
testing.coveredBorder #00957230
testing.coveredGutterBackground #00957240
testing.iconErrored #D63B30
testing.iconErrored.retired #D63B3050
testing.iconFailed #D63B30
testing.iconFailed.retired #D63B3050
testing.iconPassed #009572
testing.iconPassed.retired #00957250
testing.iconQueued #C49A00
testing.iconQueued.retired #C49A0050
testing.iconSkipped #6B7D8E
testing.iconSkipped.retired #6B7D8E50
testing.iconUnset #6B7D8E
testing.iconUnset.retired #6B7D8E50
testing.message.error.badgeBackground #D63B30
testing.message.error.badgeBorder #D63B3060
testing.message.error.badgeForeground #FFFFFF
testing.message.error.lineBackground #D63B3010
testing.message.info.decorationForeground #006FB9
testing.message.info.lineBackground #006FB910
testing.messagePeekBorder #006FB9
testing.messagePeekHeaderBackground #006FB915
testing.peekBorder #D63B30
testing.peekHeaderBackground #D63B3015
testing.runAction #009572
testing.uncoveredBackground #D63B3010
testing.uncoveredBorder #D63B3030
testing.uncoveredBranchBackground #D63B3020
testing.uncoveredGutterBackground #D63B3040
textBlockQuote.background #F4F7FA
textBlockQuote.border #006FB960
textCodeBlock.background #F4F7FA
textLink.activeForeground #006FB9
textLink.foreground #006FB9
textPreformat.background #F4F7FA
textPreformat.border #006FB920
textPreformat.foreground #009572
textSeparator.foreground #006FB920
titleBar.activeBackground #F4F7FA
titleBar.activeForeground #15406F
titleBar.border #7C439930
titleBar.inactiveBackground #F4F7FA
titleBar.inactiveForeground #15406F70
toolbar.activeBackground #006FB930
toolbar.hoverBackground #006FB920
toolbar.hoverOutline #006FB900
tree.inactiveIndentGuidesStroke #7C439915
tree.indentGuidesStroke #7C439930
tree.tableColumnsBorder #7C439915
tree.tableOddRowsBackground #F4F7FA80
walkThrough.embeddedEditorBackground #F4F7FA
walkthrough.stepTitle.foreground #15406F
welcomePage.background #FFFFFF
welcomePage.progress.background #F4F7FA
welcomePage.progress.foreground #006FB9
welcomePage.tileBackground #F4F7FA
welcomePage.tileBorder #7C439915
welcomePage.tileHoverBackground #E8EFF6
widget.border #006FB920
widget.shadow #05101A30
window.activeBorder #006FB900
window.inactiveBorder #006FB900 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 #006FB9 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #7C4399 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #006FB9 —
meta.block variable.other #15406F —
support.other.variable, string.other.link #15406F —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #B87333 —
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 #009572 —
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 #006FB9 —
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 #006FB9 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #15406F —
variable.language #7C4399 italic
entity.name.method.js #006FB9 italic
meta.class-method.js entity.name.function.js, variable.function.constructor #006FB9 —
entity.other.attribute-name #7C4399 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #006FB9 italic
entity.other.attribute-name.class #006FB9 —
source.sass keyword.control #006FB9 —
constant.character.escape #006FB9 —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #006FB9 italic
source.js constant.other.object.key.js string.unquoted.label.js #15406F italic
source.json meta.structure.dictionary.json support.type.property-name.json #006FB9 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #7C4399 —
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 #009572 —
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 #006FB9 —
text.html.markdown, punctuation.definition.list_item.markdown #15406F —
text.html.markdown markup.inline.raw.markdown #7C4399 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #006FB9 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #006FB9 —
markup.italic #7C4399 italic
markup.bold, markup.bold string #7C4399 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 #7C4399 bold
markup.underline #009572 underline
markup.quote punctuation.definition.blockquote.markdown #006FB9 —
string.other.link.title.markdown #006FB9 —
string.other.link.description.title.markdown #7C4399 —
constant.other.reference.link.markdown #009572 —
markup.raw.block.fenced.markdown #15406F —
punctuation.definition.fenced.markdown #15406F —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #15406F —
variable.language.fenced.markdown #006FB9 —
meta.separator #006FB9 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}!`;
}