Skip to main content
Home Theme VS Code Classical Dark Theme A simple dark theme for Visual Studio Code inspired by the classic color scheme.
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 #4570B8 activityBar.activeBackground #3574F015 activityBar.activeBorder #3574F0 activityBar.activeFocusBorder #3574F0 activityBar.background #232527 activityBar.border #2C2E33 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python #BCBEC4 — emphasis — italic strong — bold markup.underline — underline markup.strikethrough — strikethrough comment
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}!`;
}
Classical Dark Theme — Classical Dark
3
Open Editors fetchUser.ts index.ts README.md fetchUser.ts
index.ts
README.md
src main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
Classical Dark Theme | Coding Theme
activityBar.dropBorder #3574F0
activityBar.foreground #DFE1E5
activityBar.inactiveForeground #80858C
activityBarBadge.background #3574F0
activityBarBadge.foreground #FFFFFF
activityBarTop.activeBackground #3574F015
activityBarTop.activeBorder #3574F0
activityBarTop.background #232527
activityBarTop.dropBorder #3574F0
activityBarTop.foreground #DFE1E5
activityBarTop.inactiveForeground #A8ACB3
badge.background #366ACE
badge.foreground #FFFFFF
breadcrumb.activeSelectionForeground #CED0D6
breadcrumb.background #1E1F22
breadcrumb.focusForeground #DFE1E5
breadcrumb.foreground #9DA0A8
breadcrumbPicker.background #2B2D30
button.background #3574F0
button.border #3574F0
button.foreground #FFFFFF
button.hoverBackground #366ACE
button.secondaryBackground #2B2D30
button.secondaryForeground #DFE1E5
button.secondaryHoverBackground #393B40
button.separator #FFFFFF40
chart.axis #4E5157
chart.guide #393B40
chart.line #43454A
charts.blue #548AF7
charts.foreground #BCBEC4
charts.green #5FAD65
charts.lines #43454A
charts.orange #E08855
charts.purple #C77DBB
charts.red #E47474
charts.yellow #F2C55C
chat.avatarBackground #43454A
chat.avatarForeground #DFE1E5
chat.requestBackground #232527
chat.requestBorder #2C2E33
chat.slashCommandBackground #393B40
chat.slashCommandForeground #DFE1E5
checkbox.background #393B40
checkbox.border #4E5157
checkbox.foreground #DFE1E5
checkbox.selectBackground #3574F0
checkbox.selectBorder #3574F0
commandCenter.activeBackground #43454A
commandCenter.activeBorder #2C2E33
commandCenter.activeForeground #DFE1E5
commandCenter.background #393B40
commandCenter.border #2C2E33
commandCenter.debuggingBackground #5E3838B3
commandCenter.foreground #CED0D6
commandCenter.inactiveBorder #2C2E33
commandCenter.inactiveForeground #A8ACB3
debugConsole.errorForeground #E47474
debugConsole.infoForeground #6B9BFA
debugConsole.sourceForeground #6AAB73
debugConsole.warningForeground #D6AE58
debugConsoleInputIcon.foreground #548AF7
debugIcon.breakpointCurrentStackframeForeground #F2C55C
debugIcon.breakpointDisabledForeground #80858C
debugIcon.breakpointForeground #E47474
debugIcon.breakpointStackframeForeground #D6AE58
debugIcon.breakpointUnverifiedForeground #A8ACB3
debugIcon.continueForeground #5FAD65
debugIcon.disconnectForeground #9DA0A8
debugIcon.pauseForeground #548AF7
debugIcon.restartForeground #5FAD65
debugIcon.startForeground #5FAD65
debugIcon.stepBackForeground #548AF7
debugIcon.stepIntoForeground #548AF7
debugIcon.stepOutForeground #548AF7
debugIcon.stepOverForeground #548AF7
debugIcon.stopForeground #E47474
debugTokenExpression.boolean #CF8E6D
debugTokenExpression.error #E47474
debugTokenExpression.name #C77DBB
debugTokenExpression.number #2AACB8
debugTokenExpression.string #6AAB73
debugTokenExpression.value #F0AC81
debugToolBar.background #2B2D30
debugToolBar.border #43454A
debugView.exceptionLabelBackground #5E3838
debugView.exceptionLabelForeground #DFE1E5
debugView.stateLabelBackground #393B40
debugView.stateLabelForeground #B4B8BF
debugView.valueChangedHighlight #375FAD
descriptionForeground #A8ACB3
diffEditor.border #43454A
diffEditor.diagonalFill #43454A60
diffEditor.insertedLineBackground #25362740
diffEditor.insertedTextBackground #375239AA
diffEditor.insertedTextBorder #00000000
diffEditor.removedLineBackground #40292940
diffEditor.removedTextBackground #5E383880
diffEditor.removedTextBorder #00000000
diffEditor.unchangedCodeBackground #2B2D3040
diffEditor.unchangedRegionBackground #2B2D3080
diffEditor.unchangedRegionForeground #9DA0A8
diffEditorGutter.insertedLineBackground #25362740
diffEditorGutter.removedLineBackground #40292940
diffEditorOverview.insertedForeground #57965C
diffEditorOverview.removedForeground #BD5757
disabledForeground #80858C
dropdown.background #393B40
dropdown.border #4E5157
dropdown.foreground #DFE1E5
dropdown.listBackground #2B2D30
editor.background #1E1F22
editor.findMatchBackground #705A1E
editor.findMatchBorder #B3AE60
editor.findMatchForeground #DFE1E5
editor.findMatchHighlightBackground #D5B77822
editor.findMatchHighlightBorder #D5B77844
editor.findMatchHighlightForeground #DFE1E5
editor.findRangeHighlightBackground #5480F018
editor.findRangeHighlightBorder #00000000
editor.focusedStackFrameHighlightBackground #1A3B2D80
editor.foldBackground #393B40A0
editor.foldPlaceholderForeground #A8ACB3
editor.foreground #BCBEC4
editor.hoverHighlightBackground #FFFFFF10
editor.inactiveSelectionBackground #1857C255
editor.lineHighlightBackground #26282E
editor.lineHighlightBorder #00000000
editor.linkedEditingBackground #35538F60
editor.placeholder.foreground #A8ACB3
editor.rangeHighlightBackground #5480F018
editor.rangeHighlightBorder #00000000
editor.selectionBackground #1857C2CC
editor.selectionForeground #DFE1E5
editor.selectionHighlightBackground #1857C230
editor.selectionHighlightBorder #1857C260
editor.snippetFinalTabstopHighlightBackground #35538F60
editor.snippetFinalTabstopHighlightBorder #3574F0
editor.snippetTabstopHighlightBackground #35538F40
editor.stackFrameHighlightBackground #2A509180
editor.symbolHighlightBackground #9B6DF540
editor.symbolHighlightBorder #9B6DF562
editor.wordHighlightBackground #0DC4B030
editor.wordHighlightBorder #0DC4B058
editor.wordHighlightStrongBackground #E0558540
editor.wordHighlightStrongBorder #E0558562
editor.wordHighlightTextBackground #CF8E6D28
editor.wordHighlightTextBorder #CF8E6D48
editorActionList.background #2B2D30
editorActionList.focusBackground #4570B8
editorActionList.focusForeground #FFFFFF
editorActionList.foreground #DFE1E5
editorBracketHighlight.foreground1 #D5B778
editorBracketHighlight.foreground2 #56A8F5
editorBracketHighlight.foreground3 #6AAB73
editorBracketHighlight.foreground4 #C77DBB
editorBracketHighlight.foreground5 #2AACB8
editorBracketHighlight.foreground6 #B3AE60
editorBracketHighlight.unexpectedBracket.foreground #E47474
editorBracketMatch.background #43454A60
editorBracketMatch.border #4E5157
editorBracketPairGuide.activeBackground1 #D5B778
editorBracketPairGuide.activeBackground2 #56A8F5
editorBracketPairGuide.activeBackground3 #6AAB73
editorBracketPairGuide.activeBackground4 #C77DBB
editorBracketPairGuide.activeBackground5 #2AACB8
editorBracketPairGuide.activeBackground6 #B3AE60
editorBracketPairGuide.background1 #D5B77840
editorBracketPairGuide.background2 #56A8F540
editorBracketPairGuide.background3 #6AAB7340
editorBracketPairGuide.background4 #C77DBB40
editorBracketPairGuide.background5 #2AACB840
editorBracketPairGuide.background6 #B3AE6040
editorCodeLens.foreground #A8ACB3
editorCursor.background #1E1F22
editorCursor.foreground #CED0D6
editorError.background #DB5C5C18
editorError.border #00000000
editorError.foreground #E47474
editorGhostText.background #00000000
editorGhostText.border #00000000
editorGhostText.foreground #80858C
editorGroup.border #2C2E33
editorGroup.dropBackground #35538F40
editorGroup.emptyBackground #1E1F22
editorGroupHeader.border #2C2E33
editorGroupHeader.noTabsBackground #232527
editorGroupHeader.tabsBackground #232527
editorGroupHeader.tabsBorder #2C2E33
editorGutter.addedBackground #57965C
editorGutter.background #1E1F22
editorGutter.commentRangeForeground #80858C
editorGutter.deletedBackground #BD5757
editorGutter.foldingControlForeground #A8ACB3
editorGutter.modifiedBackground #375FAD
editorHint.border #00000000
editorHint.foreground #5FAD65
editorHoverWidget.background #393B40
editorHoverWidget.border #2C2E33
editorHoverWidget.foreground #DFE1E5
editorHoverWidget.statusBarBackground #2B2D30
editorIndentGuide.activeBackground1 #666870
editorIndentGuide.background1 #313438
editorInfo.background #548AF718
editorInfo.border #00000000
editorInfo.foreground #548AF7
editorInlayHint.background #2F3135
editorInlayHint.foreground #A8ACB3
editorInlayHint.parameterBackground #2F3135
editorInlayHint.parameterForeground #A8ACB3
editorInlayHint.typeBackground #2F3135
editorInlayHint.typeForeground #A8ACB3
editorLightBulb.foreground #F2C55C
editorLightBulbAutoFix.foreground #548AF7
editorLineNumber.activeForeground #C77DBB
editorLineNumber.foreground #74787F
editorMarkerNavigation.background #2B2D30
editorMarkerNavigationError.background #9C4E4E
editorMarkerNavigationError.headerBackground #5E3838
editorMarkerNavigationInfo.background #366ACE
editorMarkerNavigationInfo.headerBackground #393B40
editorMarkerNavigationWarning.background #9E814A
editorMarkerNavigationWarning.headerBackground #3D3223
editorOverviewRuler.addedForeground #57965CB3
editorOverviewRuler.background #1E1F22
editorOverviewRuler.border #2C2E33
editorOverviewRuler.bracketMatchForeground #4E5157B3
editorOverviewRuler.commonContentForeground #43454AB3
editorOverviewRuler.currentContentForeground #375FADB3
editorOverviewRuler.deletedForeground #BD5757B3
editorOverviewRuler.errorForeground #E47474B3
editorOverviewRuler.findMatchForeground #B3AE60B3
editorOverviewRuler.incomingContentForeground #57965CB3
editorOverviewRuler.infoForeground #548AF7B3
editorOverviewRuler.modifiedForeground #375FADB3
editorOverviewRuler.rangeHighlightForeground #5480F0B3
editorOverviewRuler.selectionHighlightForeground #1857C2B3
editorOverviewRuler.warningForeground #D6AE58B3
editorOverviewRuler.wordHighlightForeground #0DC4B0B3
editorOverviewRuler.wordHighlightStrongForeground #E05585B3
editorOverviewRuler.wordHighlightTextForeground #CF8E6DB3
editorPane.background #1E1F22
editorRuler.foreground #313438
editorStickyScroll.background #252629
editorStickyScroll.border #2C2E33
editorStickyScroll.shadow #00000060
editorStickyScrollHover.background #393B40
editorSuggestWidget.background #2B2D30
editorSuggestWidget.border #2C2E33
editorSuggestWidget.focusHighlightForeground #548AF7
editorSuggestWidget.foreground #BCBEC4
editorSuggestWidget.highlightForeground #548AF7
editorSuggestWidget.selectedBackground #4570B8
editorSuggestWidget.selectedForeground #FFFFFF
editorSuggestWidget.selectedIconForeground #FFFFFF
editorSuggestWidgetStatus.foreground #9DA0A8
editorUnicodeHighlight.background #F2C55C18
editorUnicodeHighlight.border #F2C55C
editorWarning.background #D6AE5818
editorWarning.border #00000000
editorWarning.foreground #D6AE58
editorWhitespace.foreground #80858C
editorWidget.background #2B2D30
editorWidget.border #2C2E33
editorWidget.foreground #DFE1E5
editorWidget.resizeBorder #3574F0
errorForeground #E47474
extensionBadge.remoteBackground #375FAD
extensionBadge.remoteForeground #FFFFFF
extensionButton.background #3574F0
extensionButton.foreground #FFFFFF
extensionButton.hoverBackground #366ACE
extensionButton.prominentBackground #3574F0
extensionButton.prominentForeground #FFFFFF
extensionButton.prominentHoverBackground #366ACE
extensionButton.separator #FFFFFF40
extensionIcon.preReleaseForeground #E08855
extensionIcon.sponsorForeground #C77DBB
extensionIcon.starForeground #F2C55C
extensionIcon.verifiedForeground #548AF7
focusBorder #3574F0
foreground #DFE1E5
gitDecoration.addedResourceForeground #73BD79
gitDecoration.conflictingResourceForeground #C77DBB
gitDecoration.deletedResourceForeground #E47474
gitDecoration.ignoredResourceForeground #80858C
gitDecoration.modifiedResourceForeground #6B9BFA
gitDecoration.renamedResourceForeground #6B9BFA
gitDecoration.stageDeletedResourceForeground #E47474
gitDecoration.stageModifiedResourceForeground #6B9BFA
gitDecoration.submoduleResourceForeground #A8ACB3
gitDecoration.untrackedResourceForeground #73BD79
icon.foreground #B4B8BF
inlineChat.background #2B2D30
inlineChat.border #43454A
inlineChat.foreground #DFE1E5
inlineChat.shadow #00000060
inlineChatDiff.inserted #37523940
inlineChatDiff.removed #5E383840
inlineChatInput.background #393B40
inlineChatInput.border #4E5157
inlineChatInput.focusBorder #3574F0
inlineChatInput.placeholderForeground #A8ACB3
input.background #393B40
input.border #4E5157
input.foreground #DFE1E5
input.placeholderForeground #A8ACB3
inputOption.activeBackground #4570B8
inputOption.activeBorder #3574F0
inputOption.activeForeground #FFFFFF
inputOption.hoverBackground #393B40
inputValidation.errorBackground #5E3838
inputValidation.errorBorder #BD5757
inputValidation.errorForeground #FFFFFF
inputValidation.infoBackground #25324D
inputValidation.infoBorder #375FAD
inputValidation.infoForeground #DFE1E5
inputValidation.warningBackground #3D3223
inputValidation.warningBorder #826A41
inputValidation.warningForeground #FFFFFF
interactive.activeCodeBorder #3574F0
interactive.inactiveCodeBorder #43454A
keybindingLabel.background #393B40
keybindingLabel.border #4E5157
keybindingLabel.bottomBorder #4E5157
keybindingLabel.foreground #DFE1E5
keybindingTable.headerBackground #393B40
keybindingTable.rowsBackground #00000000
list.activeSelectionBackground #4570B8
list.activeSelectionForeground #FFFFFF
list.activeSelectionIconForeground #FFFFFF
list.deemphasizedForeground #80858C
list.dropBackground #35538F40
list.dropBetweenBackground #3574F0
list.errorForeground #E47474
list.filterMatchBackground #2E2D0B
list.filterMatchBorder #B3AE6055
list.focusAndSelectionOutline #00000000
list.focusBackground #4570B8
list.focusForeground #FFFFFF
list.focusHighlightForeground #548AF7
list.focusOutline #00000000
list.highlightForeground #548AF7
list.hoverBackground #393B40
list.hoverForeground #DFE1E5
list.inactiveSelectionBackground #2E436E80
list.inactiveSelectionForeground #DFE1E5
list.inactiveSelectionIconForeground #CED0D6
list.invalidItemForeground #E47474
list.warningForeground #D6AE58
listFilterWidget.background #1E1F22
listFilterWidget.noMatchesOutline #9C4E4E
listFilterWidget.outline #3574F0
listFilterWidget.shadow #00000060
menu.background #2B2D30
menu.border #2C2E33
menu.foreground #DFE1E5
menu.selectionBackground #4570B8
menu.selectionBorder #00000000
menu.selectionForeground #FFFFFF
menu.separatorBackground #43454A
menubar.selectionBackground #393B40
menubar.selectionBorder #00000000
menubar.selectionForeground #DFE1E5
merge.border #00000000
merge.commonContentBackground #43454A40
merge.commonHeaderBackground #43454A80
merge.currentContentBackground #2A509140
merge.currentHeaderBackground #2A509180
merge.incomingContentBackground #1A3B2D40
merge.incomingHeaderBackground #1A3B2D80
mergeEditor.change.background #3574F015
mergeEditor.change.word.background #3574F040
mergeEditor.conflict.handledFocused.border #A8ACB3
mergeEditor.conflict.handledUnfocused.border #4E5157
mergeEditor.conflict.unhandledFocused.border #D6AE58
mergeEditor.conflict.unhandledUnfocused.border #9E814A
minimap.background #1E1F22
minimap.errorHighlight #E47474
minimap.findMatchHighlight #B3AE60B3
minimap.foregroundOpacity #000000C0
minimap.selectionHighlight #1857C2B3
minimap.selectionOccurrenceHighlight #0DC4B060
minimap.warningHighlight #D6AE58
minimapGutter.addedBackground #57965C
minimapGutter.deletedBackground #BD5757
minimapGutter.modifiedBackground #375FAD
minimapSlider.activeBackground #FFFFFF26
minimapSlider.background #FFFFFF08
minimapSlider.hoverBackground #FFFFFF14
multiDiffEditor.background #1E1F22
multiDiffEditor.border #2C2E33
multiDiffEditor.headerBackground #2B2D30
notebook.cellBorderColor #43454A
notebook.cellEditorBackground #1E1F22
notebook.cellHoverBackground #FFFFFF08
notebook.cellInsertionIndicator #3574F0
notebook.cellStatusBarItemHoverBackground #FFFFFF14
notebook.cellToolbarSeparator #43454A
notebook.editorBackground #2B2D30
notebook.focusedCellBackground #FFFFFF0A
notebook.focusedCellBorder #3574F0
notebook.focusedEditorBorder #3574F0
notebook.inactiveFocusedCellBorder #4E5157
notebook.outputContainerBackgroundColor #2B2D30
notebook.outputContainerBorderColor #393B40
notebook.selectedCellBackground #FFFFFF08
notebook.selectedCellBorder #4E5157
notebookEditorOverviewRuler.runningCellForeground #548AF7
notebookScrollbarSlider.activeBackground #FFFFFF4D
notebookScrollbarSlider.background #FFFFFF26
notebookScrollbarSlider.hoverBackground #FFFFFF4D
notebookStatusErrorIcon.foreground #E47474
notebookStatusRunningIcon.foreground #548AF7
notebookStatusSuccessIcon.foreground #5FAD65
notificationCenter.border #43454A
notificationCenterHeader.background #2B2D30
notificationCenterHeader.foreground #B4B8BF
notificationLink.foreground #6B9BFA
notifications.background #393B40
notifications.border #43454A
notifications.foreground #DFE1E5
notificationsErrorIcon.foreground #E47474
notificationsInfoIcon.foreground #548AF7
notificationsWarningIcon.foreground #D6AE58
notificationToast.border #43454A
panel.background #232527
panel.border #2C2E33
panel.dropBorder #3574F0
panelInput.border #43454A
panelSection.border #2C2E33
panelSection.dropBackground #35538F40
panelSectionHeader.background #232527
panelSectionHeader.border #2C2E33
panelSectionHeader.foreground #B4B8BF
panelStickyScroll.background #1E1F22
panelStickyScroll.border #2C2E33
panelStickyScroll.shadow #00000060
panelTitle.activeBorder #3574F0
panelTitle.activeForeground #DFE1E5
panelTitle.border #2C2E33
panelTitle.inactiveForeground #A8ACB3
peekView.border #2C2E33
peekViewEditor.background #2B2D30
peekViewEditor.matchHighlightBackground #2E2D0B
peekViewEditor.matchHighlightBorder #B3AE6055
peekViewEditorGutter.background #2B2D30
peekViewEditorStickyScroll.background #2B2D30
peekViewResult.background #2B2D30
peekViewResult.fileForeground #DFE1E5
peekViewResult.lineForeground #9DA0A8
peekViewResult.matchHighlightBackground #2E2D0B
peekViewResult.selectionBackground #4570B8
peekViewResult.selectionForeground #FFFFFF
peekViewTitle.background #2B2D30
peekViewTitleDescription.foreground #9DA0A8
peekViewTitleLabel.foreground #DFE1E5
pickerGroup.border #2C2E33
pickerGroup.foreground #A8ACB3
ports.iconRunningProcessForeground #5FAD65
problemsErrorIcon.foreground #E47474
problemsInfoIcon.foreground #548AF7
problemsWarningIcon.foreground #D6AE58
progressBar.background #467FF2
quickInput.background #2B2D30
quickInput.foreground #DFE1E5
quickInputList.focusBackground #2E3F5C
quickInputList.focusForeground #DFE1E5
quickInputList.focusIconForeground #DFE1E5
quickInputTitle.background #393B40
sash.hoverBorder #3574F0
scmGraph.foreground1 #548AF7
scmGraph.foreground2 #5FAD65
scmGraph.foreground3 #C77DBB
scmGraph.foreground4 #F2C55C
scmGraph.foreground5 #24A394
scmGraph.historyItemBaseRefColor #5FAD65
scmGraph.historyItemHoverAdditionsForeground #5FAD65
scmGraph.historyItemHoverDefaultLabelBackground #3574F0
scmGraph.historyItemHoverDefaultLabelForeground #FFFFFF
scmGraph.historyItemHoverDeletionsForeground #E47474
scmGraph.historyItemHoverLabelForeground #DFE1E5
scmGraph.historyItemRefColor #548AF7
scmGraph.historyItemRemoteRefColor #C77DBB
scrollbar.shadow #00000060
scrollbarSlider.activeBackground #FFFFFF4D
scrollbarSlider.background #FFFFFF26
scrollbarSlider.hoverBackground #FFFFFF4D
searchEditor.findMatchBackground #2E2D0B
searchEditor.findMatchBorder #B3AE6055
selection.background #4570B8
settings.checkboxBackground #393B40
settings.checkboxBorder #4E5157
settings.checkboxForeground #DFE1E5
settings.dropdownBackground #393B40
settings.dropdownBorder #4E5157
settings.dropdownForeground #DFE1E5
settings.dropdownListBorder #43454A
settings.focusedRowBackground #3574F010
settings.focusedRowBorder #3574F0
settings.headerBorder #393B40
settings.headerForeground #DFE1E5
settings.modifiedItemIndicator #375FAD
settings.numberInputBackground #393B40
settings.numberInputBorder #4E5157
settings.numberInputForeground #DFE1E5
settings.rowHoverBackground #3574F008
settings.sashBorder #43454A
settings.settingsHeaderHoverForeground #F0F1F2
settings.textInputBackground #393B40
settings.textInputBorder #4E5157
settings.textInputForeground #DFE1E5
sideBar.background #232527
sideBar.border #2C2E33
sideBar.dropBackground #35538F40
sideBar.foreground #B4B8BF
sideBarActivityBarTop.border #2C2E33
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #2C2E33
sideBarSectionHeader.foreground #B4B8BF
sideBarStickyScroll.background #323438
sideBarStickyScroll.border #2C2E33
sideBarStickyScroll.shadow #00000060
sideBarTitle.background #232527
sideBarTitle.foreground #B4B8BF
statusBar.background #232527
statusBar.border #2C2E33
statusBar.debuggingBackground #5E3838
statusBar.debuggingBorder #00000000
statusBar.debuggingForeground #DFE1E5
statusBar.focusBorder #3574F0
statusBar.foreground #9DA0A8
statusBar.noFolderBackground #232527
statusBar.noFolderBorder #2C2E33
statusBar.noFolderForeground #9DA0A8
statusBarItem.activeBackground #FFFFFF26
statusBarItem.compactHoverBackground #FFFFFF26
statusBarItem.errorBackground #9C4E4E
statusBarItem.errorForeground #FFFFFF
statusBarItem.errorHoverBackground #BD5757
statusBarItem.errorHoverForeground #FFFFFF
statusBarItem.focusBorder #3574F0
statusBarItem.hoverBackground #FFFFFF14
statusBarItem.hoverForeground #DFE1E5
statusBarItem.offlineBackground #9C4E4E
statusBarItem.offlineForeground #FFFFFF
statusBarItem.offlineHoverBackground #BD5757
statusBarItem.offlineHoverForeground #FFFFFF
statusBarItem.prominentBackground #393B40
statusBarItem.prominentForeground #DFE1E5
statusBarItem.prominentHoverBackground #43454A
statusBarItem.remoteBackground #57965C
statusBarItem.remoteForeground #1E1F22
statusBarItem.remoteHoverBackground #5FAD65
statusBarItem.remoteHoverForeground #1E1F22
statusBarItem.warningBackground #9E814A
statusBarItem.warningForeground #1E1F22
statusBarItem.warningHoverBackground #BA9752
statusBarItem.warningHoverForeground #1E1F22
symbolIcon.arrayForeground #F0AC81
symbolIcon.booleanForeground #CF8E6D
symbolIcon.classForeground #16BAAC
symbolIcon.colorForeground #6AAB73
symbolIcon.constantForeground #C77DBB
symbolIcon.constructorForeground #56A8F5
symbolIcon.enumeratorForeground #C77DBB
symbolIcon.enumeratorMemberForeground #C77DBB
symbolIcon.eventForeground #C77DBB
symbolIcon.fieldForeground #C77DBB
symbolIcon.fileForeground #9DA0A8
symbolIcon.folderForeground #F2C55C
symbolIcon.functionForeground #56A8F5
symbolIcon.interfaceForeground #16BAAC
symbolIcon.keyForeground #B3AE60
symbolIcon.keywordForeground #CF8E6D
symbolIcon.methodForeground #56A8F5
symbolIcon.moduleForeground #D5B778
symbolIcon.namespaceForeground #16BAAC
symbolIcon.nullForeground #CF8E6D
symbolIcon.numberForeground #2AACB8
symbolIcon.objectForeground #C77DBB
symbolIcon.operatorForeground #BCBEC4
symbolIcon.packageForeground #D5B778
symbolIcon.propertyForeground #C77DBB
symbolIcon.referenceForeground #548AF7
symbolIcon.snippetForeground #73BD79
symbolIcon.stringForeground #6AAB73
symbolIcon.structForeground #16BAAC
symbolIcon.textForeground #BCBEC4
symbolIcon.typeParameterForeground #16BAAC
symbolIcon.unitForeground #2AACB8
symbolIcon.variableForeground #BCBEC4
tab.activeBackground #1E1F22
tab.activeBorder #1E1F22
tab.activeBorderTop #3574F0
tab.activeForeground #DFE1E5
tab.activeModifiedBorder #3574F0
tab.border #2C2E33
tab.dragAndDropBorder #3574F0
tab.hoverBackground #393B40
tab.hoverBorder #00000000
tab.hoverForeground #DFE1E5
tab.inactiveBackground #232527
tab.inactiveForeground #B4B8BF
tab.inactiveModifiedBorder #6B9BFA
tab.lastPinnedBorder #4E5157
tab.selectedBackground #1E1F22
tab.selectedBorderTop #3574F0
tab.selectedForeground #DFE1E5
tab.unfocusedActiveBackground #1E1F22
tab.unfocusedActiveBorderTop #4E5157
tab.unfocusedActiveForeground #B4B8BF
tab.unfocusedActiveModifiedBorder #A8ACB3
tab.unfocusedHoverBackground #393B40
tab.unfocusedHoverForeground #CED0D6
tab.unfocusedInactiveForeground #A8ACB3
tab.unfocusedInactiveModifiedBorder #A8ACB3
terminal.ansiBlack #393B40
terminal.ansiBlue #56A8F5
terminal.ansiBrightBlack #7A7E86
terminal.ansiBrightBlue #57AAF7
terminal.ansiBrightCyan #42C3D4
terminal.ansiBrightGreen #7A7E86
terminal.ansiBrightMagenta #9C9CFF
terminal.ansiBrightRed #FA6F7C
terminal.ansiBrightWhite #F0F1F2
terminal.ansiBrightYellow #B3AE60
terminal.ansiCyan #2AACB8
terminal.ansiGreen #6AAB73
terminal.ansiMagenta #C77DBB
terminal.ansiRed #E47474
terminal.ansiWhite #BCBEC4
terminal.ansiYellow #D5B778
terminal.background #232527
terminal.border #2C2E33
terminal.findMatchBackground #705A1EB3
terminal.findMatchBorder #B3AE60
terminal.findMatchHighlightBackground #D5B77822
terminal.findMatchHighlightBorder #00000000
terminal.findMatchHighlightForeground #DFE1E5
terminal.foreground #BCBEC4
terminal.hoverHighlightBackground #FFFFFF08
terminal.inactiveSelectionBackground #43454A99
terminal.selectionBackground #35538FCC
terminalCommandDecoration.defaultBackground #A8ACB3
terminalCommandDecoration.errorBackground #E47474
terminalCommandDecoration.successBackground #5FAD65
terminalCursor.background #232527
terminalCursor.foreground #CED0D6
terminalOverviewRuler.cursorForeground #CED0D6
terminalOverviewRuler.findMatchForeground #B3AE60
terminalStickyScroll.background #393B40
terminalStickyScroll.border #2C2E33
terminalStickyScrollHover.background #43454A
testing.coveredBackground #37523930
testing.coveredBorder #57965C
testing.coveredGutterBackground #57965C
testing.iconErrored #E47474
testing.iconErrored.retired #5E3838
testing.iconFailed #E47474
testing.iconFailed.retired #5E3838
testing.iconPassed #5FAD65
testing.iconPassed.retired #375239
testing.iconQueued #A8ACB3
testing.iconQueued.retired #393B40
testing.iconSkipped #BA9752
testing.iconSkipped.retired #3D3223
testing.iconUnset #A8ACB3
testing.iconUnset.retired #393B40
testing.message.error.lineBackground #DB5C5C18
testing.message.info.decorationForeground #A8ACB3
testing.message.info.lineBackground #00000000
testing.peekBorder #43454A
testing.peekHeaderBackground #2B2D30
testing.runAction #5FAD65
testing.uncoveredBackground #5E383830
testing.uncoveredBorder #BD5757
testing.uncoveredBranchBackground #5E383830
testing.uncoveredGutterBackground #BD5757
textBlockQuote.background #2B2D30
textBlockQuote.border #43454A
textCodeBlock.background #393B40
textLink.activeForeground #6B9BFA
textLink.foreground #6B9BFA
textPreformat.foreground #6AAB73
textSeparator.foreground #43454A
titleBar.activeBackground #232527
titleBar.activeForeground #DFE1E5
titleBar.border #2C2E33
titleBar.inactiveBackground #232527
titleBar.inactiveForeground #A8ACB3
toolbar.activeBackground #FFFFFF26
toolbar.hoverBackground #FFFFFF14
toolbar.hoverOutline #00000000
tree.inactiveIndentGuidesStroke #43454A
tree.indentGuidesStroke #4E5157
tree.tableColumnsBorder #2C2E33
tree.tableOddRowsBackground #FFFFFF03
walkThrough.embeddedEditorBackground #1E1F22
walkthrough.stepTitle.foreground #DFE1E5
welcomePage.background #1E1F22
welcomePage.progress.background #393B40
welcomePage.progress.foreground #3574F0
welcomePage.tileBackground #2B2D30
welcomePage.tileBorder #43454A
welcomePage.tileHoverBackground #393B40
widget.border #2C2E33
widget.shadow #00000060
window.activeBorder #1E1F22
window.inactiveBorder #1E1F22 comment.block.documentation, comment.line.documentation #7A7E86 —
keyword.other.documentation, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc #7A7E86 —
storage.modifier, keyword.operator.noexcept #CF8E6D —
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator #C77DBB —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike #CF8E6D —
keyword.other.unit #2AACB8 —
constant.language #CF8E6D —
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent #2AACB8 —
variable.other.enummember #C77DBB —
variable.other.constant #BCBEC4 —
constant.character, constant.other.option #CF8E6D —
constant.character.escape #CF8E6D —
constant.other.placeholder #CF8E6D —
string, meta.embedded.assembly #6AAB73 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #CF8E6D —
meta.template.expression #BCBEC4 —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #CF8E6D —
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal #56A8F5 —
meta.preprocessor, entity.name.function.preprocessor #CF8E6D —
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #16BAAC —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby #16BAAC —
variable, meta.definition.variable.name, support.variable, entity.name.variable #BCBEC4 —
meta.attribute.python, meta.indexed-name.python #BCBEC4 —
meta.object-literal.key, variable.other.property, variable.other.object.property, variable.other.object.access, variable.other.member, support.variable.property, support.variable.property.dom #C77DBB —
support.type.property-name.json, support.type.property-name.json.comments, entity.name.tag.yaml, entity.name.tag.toml, meta.structure.dictionary.key.python #BCBEC4 —
variable.language, variable.parameter.function.language.python, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python #CF8E6D —
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded #BCBEC4 —
meta.decorator, punctuation.decorator, storage.type.annotation, storage.type.annotation.java, meta.declaration.annotation.java, meta.function.decorator.python, entity.name.function.decorator, entity.name.function.decorator.python, support.attribute.builtin, meta.attribute.cs #B3AE60 —
entity.other.attribute-name #BCBEC4 —
support.class.component, support.class.component.jsx, support.class.component.tsx, meta.tag.attributes.jsx entity.other.attribute-name, meta.tag.attributes.tsx entity.other.attribute-name #9C9CFF —
entity.name.tag.css, entity.name.tag.less #D5B778 —
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss #D5B778 —
punctuation.definition.tag #80858C —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #6AAB73 —
meta.preprocessor.string #6AAB73 —
meta.preprocessor.numeric #2AACB8 —
variable.function, entity.name.function.call, meta.function-call entity.name.function, meta.function-call.generic.python entity.name.function #56A8F5 —
support.function.builtin, support.function.builtin.python, support.function.magic.python, support.function.kernel.ruby, support.function.builtin.shell #56A8F5 —
variable.parameter, variable.parameter.function, variable.parameter.function-call, meta.function.parameters variable #BCBEC4 —
variable.other.readwrite.instance.ruby, variable.other.readwrite.class.ruby, variable.other.constant.ruby #BCBEC4 —
variable.other.php, punctuation.definition.variable.php #BCBEC4 —
storage.modifier.lifetime.rust, entity.name.lifetime.rust, punctuation.definition.lifetime.rust #16BAAC —
constant.other.enum.java #C77DBB —
storage.type.primitive.cpp, storage.type.built-in.cpp, storage.type.built-in.primitive.cpp, support.type.built-in.cpp, support.type.built-in.primitive.cpp #16BAAC —
entity.name.type.template.cpp, entity.name.type.parameter.cpp, storage.type.template.cpp #16BAAC —
keyword.control.satisfies.ts, keyword.control.satisfies.tsx #CF8E6D —
entity.tag.directive.yaml, punctuation.definition.directive.begin.yaml #B3AE60 —
storage.type.tag-handle.yaml, entity.name.type.tag.yaml #16BAAC —
entity.name.section.toml, entity.name.table.toml, entity.other.attribute-name.table.toml #BCBEC4 —
constant.other.time.datetime.offset.toml, constant.other.time.datetime.local.toml, constant.other.time.date.toml, constant.other.time.time.toml #2AACB8 —
entity.name.tag.namespace.xml, entity.other.attribute-name.namespace.xml, entity.name.tag.namespace #16BAAC —
meta.mapping.key.json5, string.unquoted.key.json5, entity.name.tag.json5 #BCBEC4 —
entity.name.section.group-title.ini, entity.name.section.ini, keyword.other.definition.ini, variable.other.key.env, entity.name.tag.env, support.type.property-name.ini #BCBEC4 —
markup.heading #56A8F5 bold
markup.italic #C77DBB italic
punctuation.definition.quote.begin.markdown #7A7E86 —
punctuation.definition.list.begin.markdown #548AF7 —
markup.inline.raw #6AAB73 —
string.other.link.title.markdown, markup.underline.link.markdown #6B9BFA —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #6AAB73 —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #42C3D4 —
keyword.operator.or.regexp, keyword.control.anchor.regexp #56A8F5 —
keyword.operator.quantifier.regexp #B3AE60 —
support.function.git-rebase #56A8F5 —
constant.sha.git-rebase #2AACB8 —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #BCBEC4 —
entity.name.label #32B8AF —
fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline 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
31
32
33
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}!`;
}
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 $