Chalkdraw

Name: Chalkdraw
Author: Michael Volakis

Publisher: Michael VolakisThemes in package: 4

A chalkboard-inspired theme in four variants — Deep, Flat and Cool (dark) and Paper (light) — designed to minimize eye strain.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Chalkdraw — Chalkdraw Cool

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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 $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#5E97FF
activityBar.activeFocusBorder#5E97FF
activityBar.background#16191D
activityBar.border#25292E
activityBar.dropBorder#5E97FF
activityBar.foreground#E4EAF3
activityBar.inactiveForeground#8C97A5
activityBarBadge.background#5E97FF
activityBarBadge.foreground#1A1D21
activityBarTop.activeBorder#5E97FF
activityBarTop.dropBorder#5E97FF
activityBarTop.foreground#E4EAF3
activityBarTop.inactiveForeground#8C97A5
activityErrorBadge.background#E06C75
activityErrorBadge.foreground#1A1D21
activityWarningBadge.background#E5C07B
activityWarningBadge.foreground#1A1D21
badge.background#5E97FF
badge.foreground#1A1D21
banner.background#16191D
banner.foreground#ABBFD6
banner.iconForeground#5E97FF
breadcrumb.activeSelectionForeground#5E97FF
breadcrumb.background#1A1D21
breadcrumb.focusForeground#E4EAF3
breadcrumb.foreground#5F6A79
breadcrumbPicker.background#16191D
button.background#5E97FF
button.foreground#1A1D21
button.hoverBackground#96BCFF
button.secondaryBackground#1A1E23
button.secondaryBorder#25292E
button.secondaryForeground#E4EAF3
button.secondaryHoverBackground#21262C
charts.blue#5E97FF
charts.foreground#8C97A5
charts.green#4FC9B0
charts.lines#25292E
charts.orange#75BF85
charts.purple#7AA2F7
charts.red#E06C75
charts.yellow#E5C07B
checkbox.background#0E1013
checkbox.border#25292E
checkbox.foreground#E4EAF3
commandCenter.activeBackground#1A1E23
commandCenter.activeBorder#25292E
commandCenter.background#16191D
commandCenter.border#25292E
commandCenter.foreground#8C97A5
commandCenter.inactiveBorder#25292E
commandCenter.inactiveForeground#5F6A79
commentsView.resolvedIcon#5F6A79
commentsView.unresolvedIcon#5E97FF
contrastBorder#25292E
debugConsole.errorForeground#E06C75
debugConsole.infoForeground#8C97A5
debugConsole.sourceForeground#5F6A79
debugConsole.warningForeground#E5C07B
debugConsoleInputIcon.foreground#5E97FF
debugExceptionWidget.background#16191D
debugExceptionWidget.border#25292E
debugIcon.breakpointCurrentStackframeForeground#E5C07B
debugIcon.breakpointDisabledForeground#4E5460
debugIcon.breakpointForeground#E06C75
debugIcon.breakpointStackframeForeground#8C97A5
debugIcon.breakpointUnverifiedForeground#5F6A79
debugIcon.continueForeground#5E97FF
debugIcon.disconnectForeground#E06C75
debugIcon.pauseForeground#5E97FF
debugIcon.restartForeground#4FC9B0
debugIcon.startForeground#4FC9B0
debugIcon.stepBackForeground#5E97FF
debugIcon.stepIntoForeground#5E97FF
debugIcon.stepOutForeground#5E97FF
debugIcon.stepOverForeground#5E97FF
debugIcon.stopForeground#E06C75
debugTokenExpression.boolean#F29790
debugTokenExpression.error#E06C75
debugTokenExpression.name#ABBFD6
debugTokenExpression.number#E2B3ED
debugTokenExpression.string#75BF85
debugTokenExpression.type#4FC9B0
debugTokenExpression.value#ABBFD6
debugToolBar.background#16191D
debugToolBar.border#25292E
debugView.exceptionLabelBackground#E06C75
debugView.exceptionLabelForeground#1A1D21
debugView.stateLabelBackground#0E1013
debugView.stateLabelForeground#E4EAF3
debugView.valueChangedHighlight#5E97FF
descriptionForeground#5F6A79
diffEditor.border#25292E
diffEditor.diagonalFill#25292E
diffEditor.insertedLineBackground#4FC9B017
diffEditor.insertedTextBackground#4FC9B024
diffEditor.removedLineBackground#E06C7517
diffEditor.removedTextBackground#E06C7524
diffEditor.unchangedRegionBackground#16191D
diffEditorOverview.insertedForeground#4FC9B099
diffEditorOverview.removedForeground#E06C7599
disabledForeground#5F6A79
dropdown.background#16191D
dropdown.border#25292E
dropdown.foreground#ABBFD6
dropdown.listBackground#16191D
editor.background#1A1D21
editor.findMatchBackground#5E97FF61
editor.findMatchHighlightBackground#5E97FF33
editor.findRangeHighlightBackground#5E97FF1A
editor.focusedStackFrameHighlightBackground#4FC9B029
editor.foreground#ABBFD6
editor.hoverHighlightBackground#5E97FF24
editor.inactiveSelectionBackground#5E97FF24
editor.inlineValuesForeground#6D7681
editor.lineHighlightBackground#22262B
editor.lineHighlightBorder#22262B
editor.linkedEditingBackground#5E97FF24
editor.rangeHighlightBackground#5E97FF1A
editor.selectionBackground#5E97FF47
editor.selectionHighlightBackground#5E97FF24
editor.selectionHighlightBorder#5E97FF47
editor.snippetTabstopHighlightBackground#5E97FF24
editor.stackFrameHighlightBackground#E5C07B29
editor.symbolHighlightBackground#5E97FF2E
editor.wordHighlightBackground#5E97FF1F
editor.wordHighlightStrongBackground#5E97FF2E
editorActiveLineNumber.foreground#5E97FF
editorBracketHighlight.foreground1#788696
editorBracketHighlight.foreground2#788696
editorBracketHighlight.foreground3#788696
editorBracketHighlight.foreground4#788696
editorBracketHighlight.foreground5#788696
editorBracketHighlight.foreground6#788696
editorBracketHighlight.unexpectedBracket.foreground#E06C75
editorBracketMatch.background#5E97FF24
editorBracketMatch.border#4E5460
editorCodeLens.foreground#6D7681
editorCommentsWidget.rangeActiveBackground#5E97FF29
editorCommentsWidget.rangeBackground#5E97FF1A
editorCommentsWidget.resolvedBorder#25292E
editorCommentsWidget.unresolvedBorder#5E97FF
editorCursor.foreground#ABBFD6
editorError.foreground#E06C75
editorGhostText.foreground#6D7681
editorGroup.border#25292E
editorGroup.dropBackground#5E97FF2E
editorGroupHeader.border#25292E
editorGroupHeader.noTabsBackground#16191D
editorGroupHeader.tabsBackground#16191D
editorGroupHeader.tabsBorder#25292E
editorGutter.addedBackground#4FC9B0
editorGutter.background#1A1D21
editorGutter.commentGlyphForeground#5F6A79
editorGutter.commentRangeForeground#4E5460
editorGutter.deletedBackground#E06C75
editorGutter.modifiedBackground#E5C07B
editorHint.foreground#5F6A79
editorHoverWidget.background#16191D
editorHoverWidget.border#25292E
editorHoverWidget.statusBarBackground#1A1E23
editorIndentGuide.activeBackground1#4E5460
editorIndentGuide.background1#25292E
editorInfo.foreground#5E97FF
editorInlayHint.background#4E546040
editorInlayHint.foreground#6D7681
editorLightBulb.foreground#E5C07B
editorLightBulbAutoFix.foreground#5E97FF
editorLineNumber.activeForeground#5E97FF
editorLineNumber.foreground#5E6976
editorLink.activeForeground#5E97FF
editorMarkerNavigationError.background#E06C75
editorMarkerNavigationError.headerBackground#16191D
editorMarkerNavigationInfo.background#5E97FF
editorMarkerNavigationInfo.headerBackground#16191D
editorMarkerNavigationWarning.background#E5C07B
editorMarkerNavigationWarning.headerBackground#16191D
editorOverviewRuler.addedForeground#4FC9B099
editorOverviewRuler.border#25292E
editorOverviewRuler.deletedForeground#E06C7599
editorOverviewRuler.errorForeground#E06C75
editorOverviewRuler.findMatchForeground#5E97FF80
editorOverviewRuler.infoForeground#5E97FF
editorOverviewRuler.modifiedForeground#E5C07B99
editorOverviewRuler.selectionHighlightForeground#5E97FF59
editorOverviewRuler.warningForeground#E5C07B
editorRuler.foreground#25292E
editorStickyScroll.background#1A1D21
editorStickyScroll.border#25292E
editorStickyScrollHover.background#22262B
editorSuggestWidget.background#16191D
editorSuggestWidget.border#25292E
editorSuggestWidget.focusHighlightForeground#5E97FF
editorSuggestWidget.foreground#ABBFD6
editorSuggestWidget.highlightForeground#5E97FF
editorSuggestWidget.selectedBackground#22262B
editorSuggestWidget.selectedForeground#E4EAF3
editorSuggestWidget.selectedIconForeground#5E97FF
editorUnnecessaryCode.opacity#0000008C
editorWarning.foreground#E5C07B
editorWhitespace.foreground#4E5460
editorWidget.background#16191D
editorWidget.border#25292E
editorWidget.foreground#ABBFD6
errorForeground#E06C75
extensionBadge.remoteBackground#5E97FF
extensionButton.background#5E97FF
extensionButton.border#25292E
extensionButton.foreground#1A1D21
extensionButton.hoverBackground#96BCFF
extensionButton.prominentBackground#5E97FF
extensionButton.prominentForeground#1A1D21
extensionButton.prominentHoverBackground#96BCFF
extensionIcon.preReleaseForeground#7AA2F7
extensionIcon.privateForeground#5F6A79
extensionIcon.sponsorForeground#E06C75
extensionIcon.starForeground#E5C07B
extensionIcon.verifiedForeground#4FC9B0
focusBorder#5E97FF
foreground#8C97A5
gitDecoration.addedResourceForeground#A5D2CB
gitDecoration.conflictingResourceForeground#D8BDD9
gitDecoration.deletedResourceForeground#E5BCB8
gitDecoration.ignoredResourceForeground#575552
gitDecoration.modifiedResourceForeground#D6C6A4
gitDecoration.renamedResourceForeground#A5D2CB
gitDecoration.stageDeletedResourceForeground#E5BCB8
gitDecoration.stageModifiedResourceForeground#A5D2CB
gitDecoration.submoduleResourceForeground#B8C8E7
gitDecoration.untrackedResourceForeground#B2D1B7
icon.foreground#8C97A5
input.background#0E1013
input.border#25292E
input.foreground#ABBFD6
input.placeholderForeground#5F6A79
inputOption.activeBackground#5E97FF33
inputOption.activeBorder#5E97FF
inputOption.activeForeground#E4EAF3
inputOption.hoverBackground#5E97FF24
inputValidation.errorBackground#16191D
inputValidation.errorBorder#E06C75
inputValidation.errorForeground#E4EAF3
inputValidation.infoBackground#16191D
inputValidation.infoBorder#5E97FF
inputValidation.infoForeground#E4EAF3
inputValidation.warningBackground#16191D
inputValidation.warningBorder#E5C07B
inputValidation.warningForeground#E4EAF3
keybindingLabel.background#0E1013
keybindingLabel.border#25292E
keybindingLabel.bottomBorder#25292E
keybindingLabel.foreground#8C97A5
list.activeSelectionBackground#22262B
list.activeSelectionForeground#E4EAF3
list.deemphasizedForeground#5F6A79
list.dropBackground#5E97FF29
list.dropBetweenBackground#5E97FF
list.errorForeground#E06C75
list.filterMatchBackground#5E97FF38
list.filterMatchBorder#5E97FF66
list.focusBackground#22262B
list.focusForeground#E4EAF3
list.focusHighlightForeground#5E97FF
list.focusOutline#25292E
list.highlightForeground#5E97FF
list.hoverBackground#22262B
list.hoverForeground#E4EAF3
list.inactiveSelectionBackground#22262B
list.inactiveSelectionForeground#E4EAF3
list.invalidItemForeground#E06C75
list.warningForeground#E5C07B
listFilterWidget.background#16191D
listFilterWidget.noMatchesOutline#E06C75
listFilterWidget.outline#5E97FF
menu.background#16191D
menu.border#25292E
menu.foreground#8C97A5
menu.selectionBackground#22262B
menu.selectionBorder#00000000
menu.selectionForeground#E4EAF3
menu.separatorBackground#25292E
menubar.selectionBackground#22262B
menubar.selectionBorder#00000000
menubar.selectionForeground#E4EAF3
merge.border#25292E
merge.commonContentBackground#4E546024
merge.commonHeaderBackground#4E54604D
merge.currentContentBackground#5E97FF24
merge.currentHeaderBackground#5E97FF4D
merge.incomingContentBackground#4FC9B024
merge.incomingHeaderBackground#4FC9B04D
minimap.background#1A1D21
minimap.errorHighlight#E06C75
minimap.findMatchHighlight#5E97FF
minimap.warningHighlight#E5C07B
minimapGutter.addedBackground#4FC9B0
minimapGutter.deletedBackground#E06C75
minimapGutter.modifiedBackground#E5C07B
minimapSlider.activeBackground#4E5460B3
minimapSlider.background#4E546066
minimapSlider.hoverBackground#4E54608C
multiDiffEditor.background#1A1D21
multiDiffEditor.border#25292E
multiDiffEditor.headerBackground#16191D
notebook.cellBorderColor#25292E
notebook.cellEditorBackground#1A1D21
notebook.cellHoverBackground#22262B
notebook.cellToolbarSeparator#25292E
notebook.editorBackground#1A1D21
notebook.focusedCellBorder#5E97FF
notebook.inactiveSelectedCellBorder#25292E
notebook.selectedCellBackground#22262B
notebook.selectedCellBorder#25292E
notebook.symbolHighlightBackground#5E97FF24
notebookStatusErrorIcon.foreground#E06C75
notebookStatusRunningIcon.foreground#5E97FF
notebookStatusSuccessIcon.foreground#4FC9B0
notificationCenter.border#25292E
notificationCenterHeader.background#16191D
notificationCenterHeader.foreground#5F6A79
notificationLink.foreground#5E97FF
notifications.background#16191D
notifications.border#25292E
notifications.foreground#ABBFD6
notificationsErrorIcon.foreground#E06C75
notificationsInfoIcon.foreground#5E97FF
notificationsWarningIcon.foreground#E5C07B
notificationToast.border#25292E
panel.background#16191D
panel.border#25292E
panelInput.border#25292E
panelSection.border#25292E
panelSectionHeader.background#16191D
panelSectionHeader.foreground#5F6A79
panelTitle.activeBorder#5E97FF
panelTitle.activeForeground#E4EAF3
panelTitle.border#00000000
panelTitle.inactiveForeground#8C97A5
peekView.border#25292E
peekViewEditor.background#1A1D21
peekViewEditor.matchHighlightBackground#5E97FF47
peekViewEditor.matchHighlightBorder#5E97FF66
peekViewResult.background#16191D
peekViewResult.fileForeground#E4EAF3
peekViewResult.lineForeground#8C97A5
peekViewResult.matchHighlightBackground#5E97FF47
peekViewResult.selectionBackground#22262B
peekViewResult.selectionForeground#E4EAF3
peekViewTitle.background#16191D
peekViewTitleDescription.foreground#5F6A79
peekViewTitleLabel.foreground#E4EAF3
pickerGroup.border#25292E
pickerGroup.foreground#5F6A79
problemsErrorIcon.foreground#E06C75
problemsInfoIcon.foreground#5E97FF
problemsWarningIcon.foreground#E5C07B
profileBadge.background#0E1013
profileBadge.foreground#E4EAF3
progressBar.background#5E97FF
quickInput.background#16191D
quickInput.foreground#ABBFD6
quickInputList.focusBackground#22262B
quickInputList.focusForeground#E4EAF3
quickInputTitle.background#16191D
radio.activeBackground#5E97FF33
radio.activeBorder#5E97FF
radio.activeForeground#E4EAF3
radio.inactiveBorder#25292E
sash.hoverBorder#5E97FF
scrollbar.shadow#00000059
scrollbarSlider.activeBackground#4E5460FF
scrollbarSlider.background#4E546099
scrollbarSlider.hoverBackground#4E5460CC
search.resultsInfoForeground#5F6A79
searchEditor.findMatchBackground#5E97FF33
searchEditor.findMatchBorder#5E97FF59
selection.background#5E97FF47
settings.checkboxBackground#0E1013
settings.checkboxBorder#25292E
settings.dropdownBackground#16191D
settings.dropdownBorder#25292E
settings.focusedRowBackground#22262B
settings.focusedRowBorder#25292E
settings.headerBorder#25292E
settings.headerForeground#E4EAF3
settings.modifiedItemIndicator#5E97FF
settings.numberInputBackground#0E1013
settings.numberInputBorder#25292E
settings.rowHoverBackground#22262B
settings.sashBorder#25292E
settings.textInputBackground#0E1013
settings.textInputBorder#25292E
sideBar.background#16191D
sideBar.border#25292E
sideBar.foreground#B4BFCC
sideBarSectionHeader.background#16191D
sideBarSectionHeader.border#25292E
sideBarSectionHeader.foreground#5F6A79
sideBarTitle.border#25292E
sideBarTitle.foreground#5F6A79
statusBar.background#13161A
statusBar.border#25292E
statusBar.debuggingBackground#13161A
statusBar.debuggingForeground#E5C07B
statusBar.focusBorder#5E97FF
statusBar.foreground#8C97A5
statusBar.noFolderBackground#13161A
statusBar.noFolderForeground#8C97A5
statusBarItem.activeBackground#22262B
statusBarItem.compactHoverBackground#1A1E23
statusBarItem.errorBackground#13161A
statusBarItem.errorForeground#E06C75
statusBarItem.focusBorder#5E97FF
statusBarItem.hoverBackground#1A1E23
statusBarItem.offlineBackground#E06C75
statusBarItem.offlineForeground#1A1D21
statusBarItem.prominentBackground#0E1013
statusBarItem.prominentForeground#E4EAF3
statusBarItem.remoteBackground#5E97FF
statusBarItem.remoteForeground#1A1D21
statusBarItem.remoteHoverBackground#96BCFF
statusBarItem.warningBackground#13161A
statusBarItem.warningForeground#E5C07B
strongForeground#E4EAF3
surface.background#16191D
surface.border#25292E
symbolIcon.classForeground#4FC9B0
symbolIcon.constantForeground#D19B6C
symbolIcon.constructorForeground#7AA2F7
symbolIcon.enumeratorForeground#4FC9B0
symbolIcon.enumeratorMemberForeground#D19B6C
symbolIcon.eventForeground#7AA2F7
symbolIcon.fieldForeground#ABBFD6
symbolIcon.functionForeground#7AA2F7
symbolIcon.interfaceForeground#4FC9B0
symbolIcon.keywordForeground#F29790
symbolIcon.methodForeground#7AA2F7
symbolIcon.namespaceForeground#4FC9B0
symbolIcon.operatorForeground#788696
symbolIcon.propertyForeground#ABBFD6
symbolIcon.stringForeground#75BF85
symbolIcon.structForeground#4FC9B0
symbolIcon.typeParameterForeground#4FC9B0
symbolIcon.variableForeground#ABBFD6
tab.activeBackground#1A1D21
tab.activeBorder#1A1D21
tab.activeBorderTop#5E97FF
tab.activeForeground#E4EAF3
tab.activeModifiedBorder#E5C07B
tab.border#25292E
tab.dragAndDropBorder#5E97FF
tab.hoverForeground#E4EAF3
tab.inactiveBackground#16191D
tab.inactiveForeground#8C97A5
tab.inactiveModifiedBorder#927D55
tab.lastPinnedBorder#25292E
tab.selectedBorderTop#5E97FF
tab.unfocusedActiveBorderTop#4E5460
tab.unfocusedActiveForeground#8C97A5
tab.unfocusedActiveModifiedBorder#927D55
tab.unfocusedHoverBackground#16191D
tab.unfocusedHoverForeground#8C97A5
tab.unfocusedInactiveForeground#5F6A79
terminal.ansiBlack#16191D
terminal.ansiBlue#F29790
terminal.ansiBrightBlack#4E5460
terminal.ansiBrightBlue#F5AEA8
terminal.ansiBrightCyan#76D5C1
terminal.ansiBrightGreen#93CDA0
terminal.ansiBrightMagenta#97B6F9
terminal.ansiBrightRed#E78C93
terminal.ansiBrightWhite#E4EAF3
terminal.ansiBrightYellow#EBCE98
terminal.ansiCyan#4FC9B0
terminal.ansiGreen#75BF85
terminal.ansiMagenta#7AA2F7
terminal.ansiRed#E06C75
terminal.ansiWhite#ABBFD6
terminal.ansiYellow#E5C07B
terminal.background#16191D
terminal.border#25292E
terminal.findMatchBackground#5E97FF61
terminal.findMatchBorder#5E97FF80
terminal.findMatchHighlightBackground#5E97FF33
terminal.findMatchHighlightBorder#5E97FF4D
terminal.foreground#ABBFD6
terminal.inactiveSelectionBackground#5E97FF24
terminal.initialHintForeground#5F6A79
terminal.selectionBackground#5E97FF47
terminalCommandDecoration.defaultBackground#4E5460
terminalCommandDecoration.errorBackground#E06C75
terminalCommandDecoration.successBackground#4FC9B0
terminalCommandGuide.foreground#25292E
terminalCursor.foreground#ABBFD6
terminalOverviewRuler.cursorForeground#ABBFD6
terminalOverviewRuler.findMatchForeground#5E97FF80
terminalStickyScroll.background#16191D
terminalStickyScroll.border#25292E
terminalStickyScrollHover.background#22262B
testing.coveredBackground#4FC9B01F
testing.coveredBorder#4FC9B04D
testing.coveredGutterBackground#4FC9B066
testing.iconErrored#E06C75
testing.iconFailed#E06C75
testing.iconPassed#4FC9B0
testing.iconQueued#E5C07B
testing.iconSkipped#5F6A79
testing.iconUnset#5F6A79
testing.messagePeekBorder#5E97FF
testing.messagePeekHeaderBackground#16191D
testing.peekBorder#E06C75
testing.peekHeaderBackground#16191D
testing.uncoveredBackground#E06C751A
testing.uncoveredBorder#E06C7547
testing.uncoveredBranchBackground#E5C07B40
testing.uncoveredGutterBackground#E06C7559
textBlockQuote.background#16191D
textBlockQuote.border#25292E
textCodeBlock.background#16191D
textLink.activeForeground#96BCFF
textLink.foreground#5E97FF
textPreformat.background#0E1013
textPreformat.border#25292E
textPreformat.foreground#75BF85
textSeparator.foreground#25292E
titleBar.activeBackground#16191D
titleBar.activeForeground#8C97A5
titleBar.border#25292E
titleBar.inactiveBackground#16191D
titleBar.inactiveForeground#5F6A79
toolbar.activeBackground#22262B
toolbar.hoverBackground#1A1E23
toolbar.hoverOutline#25292E
tree.inactiveIndentGuidesStroke#25292E
tree.indentGuidesStroke#25292E
tree.tableColumnsBorder#25292E
tree.tableOddRowsBackground#4E54601F
walkThrough.embeddedEditorBackground#1A1D21
walkthrough.stepTitle.foreground#E4EAF3
welcomePage.background#1A1D21
welcomePage.progress.background#0E1013
welcomePage.progress.foreground#5E97FF
welcomePage.tileBackground#16191D
welcomePage.tileBorder#25292E
welcomePage.tileHoverBackground#1A1E23
widget.border#25292E
widget.shadow#00000066
window.activeBorder#25292E
window.inactiveBorder#25292E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text, emphasis, strong, markup.italic, markup.bold, comment, keyword, variable.parameter, entity.name.type	—
comment, punctuation.definition.comment	#6D7681	—
punctuation, keyword.operator, meta.brace, punctuation.separator, punctuation.terminator, punctuation.accessor	#788696	—
variable, variable.other, variable.parameter, meta.object-literal.key, support.type.property-name, entity.name.variable, entity.other.attribute-name	#ABBFD6	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other, storage, storage.type, storage.modifier, constant.language, support.type.primitive, variable.language	#F29790	—
entity.name.type, entity.name.class, entity.name.namespace, support.class, support.type, entity.other.inherited-class, entity.name.tag	#4FC9B0	—
entity.name.function, support.function, meta.function-call, variable.function, entity.name.function.member	#7AA2F7	—
string, string.template, punctuation.definition.string, string.regexp	#75BF85	—
constant.numeric, constant.other.color, constant.character.escape	#E2B3ED	—
variable.other.constant	#D19B6C	—
variable.parameter, variable.parameter.function, meta.function.parameters variable	#FFC491	—
entity.name.import, storage.modifier.import, meta.import string.quoted, meta.import string	#98CDDF	—
variable.other.property, variable.other.object.property, variable.other.member, meta.object-literal.key, meta.structure.dictionary.key, support.type.property-name.json, entity.name.variable.field	#ABBFD6	—
support.type.property-name.css	#ABBFD6	—
support.constant.property-value.css, keyword.other.unit	#E2B3ED	—
string.quoted.double.json	#75BF85	—
keyword.other.sql, keyword.other.DML	#F29790	—
entity.name.function.decorator, meta.decorator, entity.name.package	#4FC9B0	—
constant.other.placeholder, meta.template.expression	#788696	—
invalid, invalid.illegal	#E06C75	—
invalid.deprecated	#E5C07B	—
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown	#F29790	—
markup.bold, punctuation.definition.bold.markdown	#ABBFD6	—
markup.italic, punctuation.definition.italic.markdown	#4FC9B0	—
markup.inline.raw, markup.fenced_code, markup.raw	#75BF85	—
markup.underline.link, string.other.link, markup.link	#7AA2F7	—
markup.quote, beginning.punctuation.definition.quote.markdown	#6D7681	—
markup.list, beginning.punctuation.definition.list.markdown	#788696	—
markup.inserted	#75BF85	—
markup.deleted	#E06C75	—
comment, keyword, storage, variable.parameter, entity.name.type, entity.other.attribute-name, markup.italic, markup.bold	—

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Chalkdraw — Chalkdraw Deep

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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 $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#7AA2F7
activityBar.activeFocusBorder#7AA2F7
activityBar.background#1D1D1D
activityBar.border#2D2F32
activityBar.dropBorder#7AA2F7
activityBar.foreground#E6EAEF
activityBar.inactiveForeground#8B939C
activityBarBadge.background#7AA2F7
activityBarBadge.foreground#181818
activityBarTop.activeBorder#7AA2F7
activityBarTop.dropBorder#7AA2F7
activityBarTop.foreground#E6EAEF
activityBarTop.inactiveForeground#8B939C
activityErrorBadge.background#E06C75
activityErrorBadge.foreground#181818
activityWarningBadge.background#E5C07B
activityWarningBadge.foreground#181818
badge.background#7AA2F7
badge.foreground#181818
banner.background#1D1D1D
banner.foreground#ABBFD6
banner.iconForeground#7AA2F7
breadcrumb.activeSelectionForeground#7AA2F7
breadcrumb.background#181818
breadcrumb.focusForeground#E6EAEF
breadcrumb.foreground#6D7681
breadcrumbPicker.background#1D1D1D
button.background#7AA2F7
button.foreground#181818
button.hoverBackground#8AADF8
button.secondaryBackground#222223
button.secondaryBorder#2D2F32
button.secondaryForeground#E6EAEF
button.secondaryHoverBackground#2A2A2C
charts.blue#7AA2F7
charts.foreground#8B939C
charts.green#4FC9B0
charts.lines#2D2F32
charts.orange#75BF85
charts.purple#7AA2F7
charts.red#E06C75
charts.yellow#E5C07B
checkbox.background#131313
checkbox.border#2D2F32
checkbox.foreground#E6EAEF
commandCenter.activeBackground#222223
commandCenter.activeBorder#2D2F32
commandCenter.background#1D1D1D
commandCenter.border#2D2F32
commandCenter.foreground#8B939C
commandCenter.inactiveBorder#2D2F32
commandCenter.inactiveForeground#6D7681
commentsView.resolvedIcon#6D7681
commentsView.unresolvedIcon#7AA2F7
contrastBorder#2D2F32
debugConsole.errorForeground#E06C75
debugConsole.infoForeground#8B939C
debugConsole.sourceForeground#6D7681
debugConsole.warningForeground#E5C07B
debugConsoleInputIcon.foreground#7AA2F7
debugExceptionWidget.background#1D1D1D
debugExceptionWidget.border#2D2F32
debugIcon.breakpointCurrentStackframeForeground#E5C07B
debugIcon.breakpointDisabledForeground#3A3D41
debugIcon.breakpointForeground#E06C75
debugIcon.breakpointStackframeForeground#8B939C
debugIcon.breakpointUnverifiedForeground#6D7681
debugIcon.continueForeground#7AA2F7
debugIcon.disconnectForeground#E06C75
debugIcon.pauseForeground#7AA2F7
debugIcon.restartForeground#4FC9B0
debugIcon.startForeground#4FC9B0
debugIcon.stepBackForeground#7AA2F7
debugIcon.stepIntoForeground#7AA2F7
debugIcon.stepOutForeground#7AA2F7
debugIcon.stepOverForeground#7AA2F7
debugIcon.stopForeground#E06C75
debugTokenExpression.boolean#F29790
debugTokenExpression.error#E06C75
debugTokenExpression.name#ABBFD6
debugTokenExpression.number#E2B3ED
debugTokenExpression.string#75BF85
debugTokenExpression.type#4FC9B0
debugTokenExpression.value#ABBFD6
debugToolBar.background#1D1D1D
debugToolBar.border#2D2F32
debugView.exceptionLabelBackground#E06C75
debugView.exceptionLabelForeground#181818
debugView.stateLabelBackground#131313
debugView.stateLabelForeground#E6EAEF
debugView.valueChangedHighlight#7AA2F7
descriptionForeground#6D7681
diffEditor.border#2D2F32
diffEditor.diagonalFill#2D2F32
diffEditor.insertedLineBackground#4FC9B017
diffEditor.insertedTextBackground#4FC9B024
diffEditor.removedLineBackground#E06C7517
diffEditor.removedTextBackground#E06C7524
diffEditor.unchangedRegionBackground#1D1D1D
diffEditorOverview.insertedForeground#4FC9B099
diffEditorOverview.removedForeground#E06C7599
disabledForeground#6D7681
dropdown.background#1D1D1D
dropdown.border#2D2F32
dropdown.foreground#ABBFD6
dropdown.listBackground#1D1D1D
editor.background#181818
editor.findMatchBackground#7AA2F761
editor.findMatchHighlightBackground#7AA2F733
editor.findRangeHighlightBackground#7AA2F71A
editor.focusedStackFrameHighlightBackground#4FC9B029
editor.foreground#ABBFD6
editor.hoverHighlightBackground#7AA2F724
editor.inactiveSelectionBackground#7AA2F724
editor.inlineValuesForeground#6D7681
editor.lineHighlightBackground#262626
editor.lineHighlightBorder#262626
editor.linkedEditingBackground#7AA2F724
editor.rangeHighlightBackground#7AA2F71A
editor.selectionBackground#7AA2F747
editor.selectionHighlightBackground#7AA2F724
editor.selectionHighlightBorder#7AA2F747
editor.snippetTabstopHighlightBackground#7AA2F724
editor.stackFrameHighlightBackground#E5C07B29
editor.symbolHighlightBackground#7AA2F72E
editor.wordHighlightBackground#7AA2F71F
editor.wordHighlightStrongBackground#7AA2F72E
editorActiveLineNumber.foreground#7AA2F7
editorBracketHighlight.foreground1#788696
editorBracketHighlight.foreground2#788696
editorBracketHighlight.foreground3#788696
editorBracketHighlight.foreground4#788696
editorBracketHighlight.foreground5#788696
editorBracketHighlight.foreground6#788696
editorBracketHighlight.unexpectedBracket.foreground#E06C75
editorBracketMatch.background#7AA2F724
editorBracketMatch.border#3A3D41
editorCodeLens.foreground#6D7681
editorCommentsWidget.rangeActiveBackground#7AA2F729
editorCommentsWidget.rangeBackground#7AA2F71A
editorCommentsWidget.resolvedBorder#2D2F32
editorCommentsWidget.unresolvedBorder#7AA2F7
editorCursor.foreground#ABBFD6
editorError.foreground#E06C75
editorGhostText.foreground#6D7681
editorGroup.border#2D2F32
editorGroup.dropBackground#7AA2F72E
editorGroupHeader.border#2D2F32
editorGroupHeader.noTabsBackground#1D1D1D
editorGroupHeader.tabsBackground#1D1D1D
editorGroupHeader.tabsBorder#2D2F32
editorGutter.addedBackground#4FC9B0
editorGutter.background#181818
editorGutter.commentGlyphForeground#6D7681
editorGutter.commentRangeForeground#3A3D41
editorGutter.deletedBackground#E06C75
editorGutter.modifiedBackground#E5C07B
editorHint.foreground#6D7681
editorHoverWidget.background#1D1D1D
editorHoverWidget.border#2D2F32
editorHoverWidget.statusBarBackground#222223
editorIndentGuide.activeBackground1#3A3D41
editorIndentGuide.background1#2D2F32
editorInfo.foreground#7AA2F7
editorInlayHint.background#3A3D4140
editorInlayHint.foreground#6D7681
editorLightBulb.foreground#E5C07B
editorLightBulbAutoFix.foreground#7AA2F7
editorLineNumber.activeForeground#7AA2F7
editorLineNumber.foreground#5E6976
editorLink.activeForeground#7AA2F7
editorMarkerNavigationError.background#E06C75
editorMarkerNavigationError.headerBackground#1D1D1D
editorMarkerNavigationInfo.background#7AA2F7
editorMarkerNavigationInfo.headerBackground#1D1D1D
editorMarkerNavigationWarning.background#E5C07B
editorMarkerNavigationWarning.headerBackground#1D1D1D
editorOverviewRuler.addedForeground#4FC9B099
editorOverviewRuler.border#2D2F32
editorOverviewRuler.deletedForeground#E06C7599
editorOverviewRuler.errorForeground#E06C75
editorOverviewRuler.findMatchForeground#7AA2F780
editorOverviewRuler.infoForeground#7AA2F7
editorOverviewRuler.modifiedForeground#E5C07B99
editorOverviewRuler.selectionHighlightForeground#7AA2F759
editorOverviewRuler.warningForeground#E5C07B
editorRuler.foreground#2D2F32
editorStickyScroll.background#181818
editorStickyScroll.border#2D2F32
editorStickyScrollHover.background#262626
editorSuggestWidget.background#1D1D1D
editorSuggestWidget.border#2D2F32
editorSuggestWidget.focusHighlightForeground#7AA2F7
editorSuggestWidget.foreground#ABBFD6
editorSuggestWidget.highlightForeground#7AA2F7
editorSuggestWidget.selectedBackground#262626
editorSuggestWidget.selectedForeground#E6EAEF
editorSuggestWidget.selectedIconForeground#7AA2F7
editorUnnecessaryCode.opacity#0000008C
editorWarning.foreground#E5C07B
editorWhitespace.foreground#3A3D41
editorWidget.background#1D1D1D
editorWidget.border#2D2F32
editorWidget.foreground#ABBFD6
errorForeground#E06C75
extensionBadge.remoteBackground#7AA2F7
extensionButton.background#7AA2F7
extensionButton.border#2D2F32
extensionButton.foreground#181818
extensionButton.hoverBackground#8AADF8
extensionButton.prominentBackground#7AA2F7
extensionButton.prominentForeground#181818
extensionButton.prominentHoverBackground#8AADF8
extensionIcon.preReleaseForeground#7AA2F7
extensionIcon.privateForeground#6D7681
extensionIcon.sponsorForeground#E06C75
extensionIcon.starForeground#E5C07B
extensionIcon.verifiedForeground#4FC9B0
focusBorder#7AA2F7
foreground#8B939C
gitDecoration.addedResourceForeground#A5D2CB
gitDecoration.conflictingResourceForeground#D8BDD9
gitDecoration.deletedResourceForeground#E5BCB8
gitDecoration.ignoredResourceForeground#575552
gitDecoration.modifiedResourceForeground#D6C6A4
gitDecoration.renamedResourceForeground#A5D2CB
gitDecoration.stageDeletedResourceForeground#E5BCB8
gitDecoration.stageModifiedResourceForeground#A5D2CB
gitDecoration.submoduleResourceForeground#B8C8E7
gitDecoration.untrackedResourceForeground#B2D1B7
icon.foreground#8B939C
input.background#131313
input.border#2D2F32
input.foreground#ABBFD6
input.placeholderForeground#6D7681
inputOption.activeBackground#7AA2F733
inputOption.activeBorder#7AA2F7
inputOption.activeForeground#E6EAEF
inputOption.hoverBackground#7AA2F724
inputValidation.errorBackground#1D1D1D
inputValidation.errorBorder#E06C75
inputValidation.errorForeground#E6EAEF
inputValidation.infoBackground#1D1D1D
inputValidation.infoBorder#7AA2F7
inputValidation.infoForeground#E6EAEF
inputValidation.warningBackground#1D1D1D
inputValidation.warningBorder#E5C07B
inputValidation.warningForeground#E6EAEF
keybindingLabel.background#131313
keybindingLabel.border#2D2F32
keybindingLabel.bottomBorder#2D2F32
keybindingLabel.foreground#8B939C
list.activeSelectionBackground#262626
list.activeSelectionForeground#E6EAEF
list.deemphasizedForeground#6D7681
list.dropBackground#7AA2F729
list.dropBetweenBackground#7AA2F7
list.errorForeground#E06C75
list.filterMatchBackground#7AA2F738
list.filterMatchBorder#7AA2F766
list.focusBackground#262626
list.focusForeground#E6EAEF
list.focusHighlightForeground#7AA2F7
list.focusOutline#2D2F32
list.highlightForeground#7AA2F7
list.hoverBackground#262626
list.hoverForeground#E6EAEF
list.inactiveSelectionBackground#262626
list.inactiveSelectionForeground#E6EAEF
list.invalidItemForeground#E06C75
list.warningForeground#E5C07B
listFilterWidget.background#1D1D1D
listFilterWidget.noMatchesOutline#E06C75
listFilterWidget.outline#7AA2F7
menu.background#1D1D1D
menu.border#2D2F32
menu.foreground#8B939C
menu.selectionBackground#262626
menu.selectionBorder#00000000
menu.selectionForeground#E6EAEF
menu.separatorBackground#2D2F32
menubar.selectionBackground#262626
menubar.selectionBorder#00000000
menubar.selectionForeground#E6EAEF
merge.border#2D2F32
merge.commonContentBackground#3A3D4124
merge.commonHeaderBackground#3A3D414D
merge.currentContentBackground#7AA2F724
merge.currentHeaderBackground#7AA2F74D
merge.incomingContentBackground#4FC9B024
merge.incomingHeaderBackground#4FC9B04D
minimap.background#181818
minimap.errorHighlight#E06C75
minimap.findMatchHighlight#7AA2F7
minimap.warningHighlight#E5C07B
minimapGutter.addedBackground#4FC9B0
minimapGutter.deletedBackground#E06C75
minimapGutter.modifiedBackground#E5C07B
minimapSlider.activeBackground#3A3D41B3
minimapSlider.background#3A3D4166
minimapSlider.hoverBackground#3A3D418C
multiDiffEditor.background#181818
multiDiffEditor.border#2D2F32
multiDiffEditor.headerBackground#1D1D1D
notebook.cellBorderColor#2D2F32
notebook.cellEditorBackground#181818
notebook.cellHoverBackground#262626
notebook.cellToolbarSeparator#2D2F32
notebook.editorBackground#181818
notebook.focusedCellBorder#7AA2F7
notebook.inactiveSelectedCellBorder#2D2F32
notebook.selectedCellBackground#262626
notebook.selectedCellBorder#2D2F32
notebook.symbolHighlightBackground#7AA2F724
notebookStatusErrorIcon.foreground#E06C75
notebookStatusRunningIcon.foreground#7AA2F7
notebookStatusSuccessIcon.foreground#4FC9B0
notificationCenter.border#2D2F32
notificationCenterHeader.background#1D1D1D
notificationCenterHeader.foreground#6D7681
notificationLink.foreground#7AA2F7
notifications.background#1D1D1D
notifications.border#2D2F32
notifications.foreground#ABBFD6
notificationsErrorIcon.foreground#E06C75
notificationsInfoIcon.foreground#7AA2F7
notificationsWarningIcon.foreground#E5C07B
notificationToast.border#2D2F32
panel.background#1D1D1D
panel.border#2D2F32
panelInput.border#2D2F32
panelSection.border#2D2F32
panelSectionHeader.background#1D1D1D
panelSectionHeader.foreground#6D7681
panelTitle.activeBorder#7AA2F7
panelTitle.activeForeground#E6EAEF
panelTitle.border#00000000
panelTitle.inactiveForeground#8B939C
peekView.border#2D2F32
peekViewEditor.background#181818
peekViewEditor.matchHighlightBackground#7AA2F747
peekViewEditor.matchHighlightBorder#7AA2F766
peekViewResult.background#1D1D1D
peekViewResult.fileForeground#E6EAEF
peekViewResult.lineForeground#8B939C
peekViewResult.matchHighlightBackground#7AA2F747
peekViewResult.selectionBackground#262626
peekViewResult.selectionForeground#E6EAEF
peekViewTitle.background#1D1D1D
peekViewTitleDescription.foreground#6D7681
peekViewTitleLabel.foreground#E6EAEF
pickerGroup.border#2D2F32
pickerGroup.foreground#6D7681
problemsErrorIcon.foreground#E06C75
problemsInfoIcon.foreground#7AA2F7
problemsWarningIcon.foreground#E5C07B
profileBadge.background#131313
profileBadge.foreground#E6EAEF
progressBar.background#7AA2F7
quickInput.background#1D1D1D
quickInput.foreground#ABBFD6
quickInputList.focusBackground#262626
quickInputList.focusForeground#E6EAEF
quickInputTitle.background#1D1D1D
radio.activeBackground#7AA2F733
radio.activeBorder#7AA2F7
radio.activeForeground#E6EAEF
radio.inactiveBorder#2D2F32
sash.hoverBorder#7AA2F7
scrollbar.shadow#00000059
scrollbarSlider.activeBackground#3A3D41FF
scrollbarSlider.background#3A3D4199
scrollbarSlider.hoverBackground#3A3D41CC
search.resultsInfoForeground#6D7681
searchEditor.findMatchBackground#7AA2F733
searchEditor.findMatchBorder#7AA2F759
selection.background#7AA2F747
settings.checkboxBackground#131313
settings.checkboxBorder#2D2F32
settings.dropdownBackground#1D1D1D
settings.dropdownBorder#2D2F32
settings.focusedRowBackground#262626
settings.focusedRowBorder#2D2F32
settings.headerBorder#2D2F32
settings.headerForeground#E6EAEF
settings.modifiedItemIndicator#7AA2F7
settings.numberInputBackground#131313
settings.numberInputBorder#2D2F32
settings.rowHoverBackground#262626
settings.sashBorder#2D2F32
settings.textInputBackground#131313
settings.textInputBorder#2D2F32
sideBar.background#1D1D1D
sideBar.border#2D2F32
sideBar.foreground#B6BEC7
sideBarSectionHeader.background#1D1D1D
sideBarSectionHeader.border#2D2F32
sideBarSectionHeader.foreground#6D7681
sideBarTitle.border#2D2F32
sideBarTitle.foreground#6D7681
statusBar.background#1D1D1D
statusBar.border#2D2F32
statusBar.debuggingBackground#1D1D1D
statusBar.debuggingForeground#E5C07B
statusBar.focusBorder#7AA2F7
statusBar.foreground#8B939C
statusBar.noFolderBackground#1D1D1D
statusBar.noFolderForeground#8B939C
statusBarItem.activeBackground#262626
statusBarItem.compactHoverBackground#222223
statusBarItem.errorBackground#1D1D1D
statusBarItem.errorForeground#E06C75
statusBarItem.focusBorder#7AA2F7
statusBarItem.hoverBackground#222223
statusBarItem.offlineBackground#E06C75
statusBarItem.offlineForeground#181818
statusBarItem.prominentBackground#131313
statusBarItem.prominentForeground#E6EAEF
statusBarItem.remoteBackground#7AA2F7
statusBarItem.remoteForeground#181818
statusBarItem.remoteHoverBackground#8AADF8
statusBarItem.warningBackground#1D1D1D
statusBarItem.warningForeground#E5C07B
strongForeground#E6EAEF
surface.background#1D1D1D
surface.border#2D2F32
symbolIcon.classForeground#4FC9B0
symbolIcon.constantForeground#D19B6C
symbolIcon.constructorForeground#7AA2F7
symbolIcon.enumeratorForeground#4FC9B0
symbolIcon.enumeratorMemberForeground#D19B6C
symbolIcon.eventForeground#7AA2F7
symbolIcon.fieldForeground#ABBFD6
symbolIcon.functionForeground#7AA2F7
symbolIcon.interfaceForeground#4FC9B0
symbolIcon.keywordForeground#F29790
symbolIcon.methodForeground#7AA2F7
symbolIcon.namespaceForeground#4FC9B0
symbolIcon.operatorForeground#788696
symbolIcon.propertyForeground#ABBFD6
symbolIcon.stringForeground#75BF85
symbolIcon.structForeground#4FC9B0
symbolIcon.typeParameterForeground#4FC9B0
symbolIcon.variableForeground#ABBFD6
tab.activeBackground#181818
tab.activeBorder#181818
tab.activeBorderTop#7AA2F7
tab.activeForeground#E6EAEF
tab.activeModifiedBorder#E5C07B
tab.border#2D2F32
tab.dragAndDropBorder#7AA2F7
tab.hoverForeground#E6EAEF
tab.inactiveBackground#1D1D1D
tab.inactiveForeground#8B939C
tab.inactiveModifiedBorder#957F55
tab.lastPinnedBorder#2D2F32
tab.selectedBorderTop#7AA2F7
tab.unfocusedActiveBorderTop#3A3D41
tab.unfocusedActiveForeground#8B939C
tab.unfocusedActiveModifiedBorder#957F55
tab.unfocusedHoverBackground#1D1D1D
tab.unfocusedHoverForeground#8B939C
tab.unfocusedInactiveForeground#6D7681
terminal.ansiBlack#1D1D1D
terminal.ansiBlue#F29790
terminal.ansiBrightBlack#3A3D41
terminal.ansiBrightBlue#F5AEA8
terminal.ansiBrightCyan#76D5C1
terminal.ansiBrightGreen#93CDA0
terminal.ansiBrightMagenta#97B6F9
terminal.ansiBrightRed#E78C93
terminal.ansiBrightWhite#E6EAEF
terminal.ansiBrightYellow#EBCE98
terminal.ansiCyan#4FC9B0
terminal.ansiGreen#75BF85
terminal.ansiMagenta#7AA2F7
terminal.ansiRed#E06C75
terminal.ansiWhite#ABBFD6
terminal.ansiYellow#E5C07B
terminal.background#1D1D1D
terminal.border#2D2F32
terminal.findMatchBackground#7AA2F761
terminal.findMatchBorder#7AA2F780
terminal.findMatchHighlightBackground#7AA2F733
terminal.findMatchHighlightBorder#7AA2F74D
terminal.foreground#ABBFD6
terminal.inactiveSelectionBackground#7AA2F724
terminal.initialHintForeground#6D7681
terminal.selectionBackground#7AA2F747
terminalCommandDecoration.defaultBackground#3A3D41
terminalCommandDecoration.errorBackground#E06C75
terminalCommandDecoration.successBackground#4FC9B0
terminalCommandGuide.foreground#2D2F32
terminalCursor.foreground#ABBFD6
terminalOverviewRuler.cursorForeground#ABBFD6
terminalOverviewRuler.findMatchForeground#7AA2F780
terminalStickyScroll.background#1D1D1D
terminalStickyScroll.border#2D2F32
terminalStickyScrollHover.background#262626
testing.coveredBackground#4FC9B01F
testing.coveredBorder#4FC9B04D
testing.coveredGutterBackground#4FC9B066
testing.iconErrored#E06C75
testing.iconFailed#E06C75
testing.iconPassed#4FC9B0
testing.iconQueued#E5C07B
testing.iconSkipped#6D7681
testing.iconUnset#6D7681
testing.messagePeekBorder#7AA2F7
testing.messagePeekHeaderBackground#1D1D1D
testing.peekBorder#E06C75
testing.peekHeaderBackground#1D1D1D
testing.uncoveredBackground#E06C751A
testing.uncoveredBorder#E06C7547
testing.uncoveredBranchBackground#E5C07B40
testing.uncoveredGutterBackground#E06C7559
textBlockQuote.background#1D1D1D
textBlockQuote.border#2D2F32
textCodeBlock.background#1D1D1D
textLink.activeForeground#8EB0F8
textLink.foreground#7AA2F7
textPreformat.background#131313
textPreformat.border#2D2F32
textPreformat.foreground#75BF85
textSeparator.foreground#2D2F32
titleBar.activeBackground#1D1D1D
titleBar.activeForeground#8B939C
titleBar.border#2D2F32
titleBar.inactiveBackground#1D1D1D
titleBar.inactiveForeground#6D7681
toolbar.activeBackground#262626
toolbar.hoverBackground#222223
toolbar.hoverOutline#2D2F32
tree.inactiveIndentGuidesStroke#2D2F32
tree.indentGuidesStroke#2D2F32
tree.tableColumnsBorder#2D2F32
tree.tableOddRowsBackground#3A3D411F
walkThrough.embeddedEditorBackground#181818
walkthrough.stepTitle.foreground#E6EAEF
welcomePage.background#181818
welcomePage.progress.background#131313
welcomePage.progress.foreground#7AA2F7
welcomePage.tileBackground#1D1D1D
welcomePage.tileBorder#2D2F32
welcomePage.tileHoverBackground#222223
widget.border#2D2F32
widget.shadow#00000066
window.activeBorder#2D2F32
window.inactiveBorder#2D2F32

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text, emphasis, strong, markup.italic, markup.bold, comment, keyword, variable.parameter, entity.name.type	—
comment, punctuation.definition.comment	#6D7681	—
punctuation, keyword.operator, meta.brace, punctuation.separator, punctuation.terminator, punctuation.accessor	#788696	—
variable, variable.other, variable.parameter, meta.object-literal.key, support.type.property-name, entity.name.variable, entity.other.attribute-name	#ABBFD6	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other, storage, storage.type, storage.modifier, constant.language, support.type.primitive, variable.language	#F29790	—
entity.name.type, entity.name.class, entity.name.namespace, support.class, support.type, entity.other.inherited-class, entity.name.tag	#4FC9B0	—
entity.name.function, support.function, meta.function-call, variable.function, entity.name.function.member	#7AA2F7	—
string, string.template, punctuation.definition.string, string.regexp	#75BF85	—
constant.numeric, constant.other.color, constant.character.escape	#E2B3ED	—
variable.other.constant	#D19B6C	—
variable.parameter, variable.parameter.function, meta.function.parameters variable	#FFC491	—
entity.name.import, storage.modifier.import, meta.import string.quoted, meta.import string	#98CDDF	—
variable.other.property, variable.other.object.property, variable.other.member, meta.object-literal.key, meta.structure.dictionary.key, support.type.property-name.json, entity.name.variable.field	#ABBFD6	—
support.type.property-name.css	#ABBFD6	—
support.constant.property-value.css, keyword.other.unit	#E2B3ED	—
string.quoted.double.json	#75BF85	—
keyword.other.sql, keyword.other.DML	#F29790	—
entity.name.function.decorator, meta.decorator, entity.name.package	#4FC9B0	—
constant.other.placeholder, meta.template.expression	#788696	—
invalid, invalid.illegal	#E06C75	—
invalid.deprecated	#E5C07B	—
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown	#F29790	—
markup.bold, punctuation.definition.bold.markdown	#ABBFD6	—
markup.italic, punctuation.definition.italic.markdown	#4FC9B0	—
markup.inline.raw, markup.fenced_code, markup.raw	#75BF85	—
markup.underline.link, string.other.link, markup.link	#7AA2F7	—
markup.quote, beginning.punctuation.definition.quote.markdown	#6D7681	—
markup.list, beginning.punctuation.definition.list.markdown	#788696	—
markup.inserted	#75BF85	—
markup.deleted	#E06C75	—
comment, keyword, storage, variable.parameter, entity.name.type, entity.other.attribute-name, markup.italic, markup.bold	—

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Chalkdraw — Chalkdraw Flat

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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 $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#7AA2F7
activityBar.activeFocusBorder#7AA2F7
activityBar.background#151515
activityBar.border#2D2F32
activityBar.dropBorder#7AA2F7
activityBar.foreground#E6EAEF
activityBar.inactiveForeground#8B939C
activityBarBadge.background#7AA2F7
activityBarBadge.foreground#1C1C1C
activityBarTop.activeBorder#7AA2F7
activityBarTop.dropBorder#7AA2F7
activityBarTop.foreground#E6EAEF
activityBarTop.inactiveForeground#8B939C
activityErrorBadge.background#E06C75
activityErrorBadge.foreground#1C1C1C
activityWarningBadge.background#E5C07B
activityWarningBadge.foreground#1C1C1C
badge.background#7AA2F7
badge.foreground#1C1C1C
banner.background#151515
banner.foreground#ABBFD6
banner.iconForeground#7AA2F7
breadcrumb.activeSelectionForeground#7AA2F7
breadcrumb.background#1C1C1C
breadcrumb.focusForeground#E6EAEF
breadcrumb.foreground#6D7681
breadcrumbPicker.background#151515
button.background#7AA2F7
button.foreground#1C1C1C
button.hoverBackground#8AADF8
button.secondaryBackground#1A1B1B
button.secondaryBorder#2D2F32
button.secondaryForeground#E6EAEF
button.secondaryHoverBackground#222425
charts.blue#7AA2F7
charts.foreground#8B939C
charts.green#4FC9B0
charts.lines#2D2F32
charts.orange#75BF85
charts.purple#7AA2F7
charts.red#E06C75
charts.yellow#E5C07B
checkbox.background#0E0E0E
checkbox.border#2D2F32
checkbox.foreground#E6EAEF
commandCenter.activeBackground#1A1B1B
commandCenter.activeBorder#2D2F32
commandCenter.background#151515
commandCenter.border#2D2F32
commandCenter.foreground#8B939C
commandCenter.inactiveBorder#2D2F32
commandCenter.inactiveForeground#6D7681
commentsView.resolvedIcon#6D7681
commentsView.unresolvedIcon#7AA2F7
contrastBorder#2D2F32
debugConsole.errorForeground#E06C75
debugConsole.infoForeground#8B939C
debugConsole.sourceForeground#6D7681
debugConsole.warningForeground#E5C07B
debugConsoleInputIcon.foreground#7AA2F7
debugExceptionWidget.background#151515
debugExceptionWidget.border#2D2F32
debugIcon.breakpointCurrentStackframeForeground#E5C07B
debugIcon.breakpointDisabledForeground#3A3D41
debugIcon.breakpointForeground#E06C75
debugIcon.breakpointStackframeForeground#8B939C
debugIcon.breakpointUnverifiedForeground#6D7681
debugIcon.continueForeground#7AA2F7
debugIcon.disconnectForeground#E06C75
debugIcon.pauseForeground#7AA2F7
debugIcon.restartForeground#4FC9B0
debugIcon.startForeground#4FC9B0
debugIcon.stepBackForeground#7AA2F7
debugIcon.stepIntoForeground#7AA2F7
debugIcon.stepOutForeground#7AA2F7
debugIcon.stepOverForeground#7AA2F7
debugIcon.stopForeground#E06C75
debugTokenExpression.boolean#F29790
debugTokenExpression.error#E06C75
debugTokenExpression.name#ABBFD6
debugTokenExpression.number#E2B3ED
debugTokenExpression.string#75BF85
debugTokenExpression.type#4FC9B0
debugTokenExpression.value#ABBFD6
debugToolBar.background#151515
debugToolBar.border#2D2F32
debugView.exceptionLabelBackground#E06C75
debugView.exceptionLabelForeground#1C1C1C
debugView.stateLabelBackground#0E0E0E
debugView.stateLabelForeground#E6EAEF
debugView.valueChangedHighlight#7AA2F7
descriptionForeground#6D7681
diffEditor.border#2D2F32
diffEditor.diagonalFill#2D2F32
diffEditor.insertedLineBackground#4FC9B017
diffEditor.insertedTextBackground#4FC9B024
diffEditor.removedLineBackground#E06C7517
diffEditor.removedTextBackground#E06C7524
diffEditor.unchangedRegionBackground#151515
diffEditorOverview.insertedForeground#4FC9B099
diffEditorOverview.removedForeground#E06C7599
disabledForeground#6D7681
dropdown.background#151515
dropdown.border#2D2F32
dropdown.foreground#ABBFD6
dropdown.listBackground#151515
editor.background#1C1C1C
editor.findMatchBackground#7AA2F761
editor.findMatchHighlightBackground#7AA2F733
editor.findRangeHighlightBackground#7AA2F71A
editor.focusedStackFrameHighlightBackground#4FC9B029
editor.foreground#ABBFD6
editor.hoverHighlightBackground#7AA2F724
editor.inactiveSelectionBackground#7AA2F724
editor.inlineValuesForeground#6D7681
editor.lineHighlightBackground#292929
editor.lineHighlightBorder#292929
editor.linkedEditingBackground#7AA2F724
editor.rangeHighlightBackground#7AA2F71A
editor.selectionBackground#7AA2F747
editor.selectionHighlightBackground#7AA2F724
editor.selectionHighlightBorder#7AA2F747
editor.snippetTabstopHighlightBackground#7AA2F724
editor.stackFrameHighlightBackground#E5C07B29
editor.symbolHighlightBackground#7AA2F72E
editor.wordHighlightBackground#7AA2F71F
editor.wordHighlightStrongBackground#7AA2F72E
editorActiveLineNumber.foreground#7AA2F7
editorBracketHighlight.foreground1#788696
editorBracketHighlight.foreground2#788696
editorBracketHighlight.foreground3#788696
editorBracketHighlight.foreground4#788696
editorBracketHighlight.foreground5#788696
editorBracketHighlight.foreground6#788696
editorBracketHighlight.unexpectedBracket.foreground#E06C75
editorBracketMatch.background#7AA2F724
editorBracketMatch.border#3A3D41
editorCodeLens.foreground#6D7681
editorCommentsWidget.rangeActiveBackground#7AA2F729
editorCommentsWidget.rangeBackground#7AA2F71A
editorCommentsWidget.resolvedBorder#2D2F32
editorCommentsWidget.unresolvedBorder#7AA2F7
editorCursor.foreground#ABBFD6
editorError.foreground#E06C75
editorGhostText.foreground#6D7681
editorGroup.border#2D2F32
editorGroup.dropBackground#7AA2F72E
editorGroupHeader.border#2D2F32
editorGroupHeader.noTabsBackground#151515
editorGroupHeader.tabsBackground#151515
editorGroupHeader.tabsBorder#2D2F32
editorGutter.addedBackground#4FC9B0
editorGutter.background#1C1C1C
editorGutter.commentGlyphForeground#6D7681
editorGutter.commentRangeForeground#3A3D41
editorGutter.deletedBackground#E06C75
editorGutter.modifiedBackground#E5C07B
editorHint.foreground#6D7681
editorHoverWidget.background#151515
editorHoverWidget.border#2D2F32
editorHoverWidget.statusBarBackground#1A1B1B
editorIndentGuide.activeBackground1#3A3D41
editorIndentGuide.background1#2D2F32
editorInfo.foreground#7AA2F7
editorInlayHint.background#3A3D4140
editorInlayHint.foreground#6D7681
editorLightBulb.foreground#E5C07B
editorLightBulbAutoFix.foreground#7AA2F7
editorLineNumber.activeForeground#7AA2F7
editorLineNumber.foreground#5E6976
editorLink.activeForeground#7AA2F7
editorMarkerNavigationError.background#E06C75
editorMarkerNavigationError.headerBackground#151515
editorMarkerNavigationInfo.background#7AA2F7
editorMarkerNavigationInfo.headerBackground#151515
editorMarkerNavigationWarning.background#E5C07B
editorMarkerNavigationWarning.headerBackground#151515
editorOverviewRuler.addedForeground#4FC9B099
editorOverviewRuler.border#2D2F32
editorOverviewRuler.deletedForeground#E06C7599
editorOverviewRuler.errorForeground#E06C75
editorOverviewRuler.findMatchForeground#7AA2F780
editorOverviewRuler.infoForeground#7AA2F7
editorOverviewRuler.modifiedForeground#E5C07B99
editorOverviewRuler.selectionHighlightForeground#7AA2F759
editorOverviewRuler.warningForeground#E5C07B
editorRuler.foreground#2D2F32
editorStickyScroll.background#1C1C1C
editorStickyScroll.border#2D2F32
editorStickyScrollHover.background#292929
editorSuggestWidget.background#151515
editorSuggestWidget.border#2D2F32
editorSuggestWidget.focusHighlightForeground#7AA2F7
editorSuggestWidget.foreground#ABBFD6
editorSuggestWidget.highlightForeground#7AA2F7
editorSuggestWidget.selectedBackground#292929
editorSuggestWidget.selectedForeground#E6EAEF
editorSuggestWidget.selectedIconForeground#7AA2F7
editorUnnecessaryCode.opacity#0000008C
editorWarning.foreground#E5C07B
editorWhitespace.foreground#3A3D41
editorWidget.background#151515
editorWidget.border#2D2F32
editorWidget.foreground#ABBFD6
errorForeground#E06C75
extensionBadge.remoteBackground#7AA2F7
extensionButton.background#7AA2F7
extensionButton.border#2D2F32
extensionButton.foreground#1C1C1C
extensionButton.hoverBackground#8AADF8
extensionButton.prominentBackground#7AA2F7
extensionButton.prominentForeground#1C1C1C
extensionButton.prominentHoverBackground#8AADF8
extensionIcon.preReleaseForeground#7AA2F7
extensionIcon.privateForeground#6D7681
extensionIcon.sponsorForeground#E06C75
extensionIcon.starForeground#E5C07B
extensionIcon.verifiedForeground#4FC9B0
focusBorder#7AA2F7
foreground#8B939C
gitDecoration.addedResourceForeground#A5D2CB
gitDecoration.conflictingResourceForeground#D8BDD9
gitDecoration.deletedResourceForeground#E5BCB8
gitDecoration.ignoredResourceForeground#575552
gitDecoration.modifiedResourceForeground#D6C6A4
gitDecoration.renamedResourceForeground#A5D2CB
gitDecoration.stageDeletedResourceForeground#E5BCB8
gitDecoration.stageModifiedResourceForeground#A5D2CB
gitDecoration.submoduleResourceForeground#B8C8E7
gitDecoration.untrackedResourceForeground#B2D1B7
icon.foreground#8B939C
input.background#0E0E0E
input.border#2D2F32
input.foreground#ABBFD6
input.placeholderForeground#6D7681
inputOption.activeBackground#7AA2F733
inputOption.activeBorder#7AA2F7
inputOption.activeForeground#E6EAEF
inputOption.hoverBackground#7AA2F724
inputValidation.errorBackground#151515
inputValidation.errorBorder#E06C75
inputValidation.errorForeground#E6EAEF
inputValidation.infoBackground#151515
inputValidation.infoBorder#7AA2F7
inputValidation.infoForeground#E6EAEF
inputValidation.warningBackground#151515
inputValidation.warningBorder#E5C07B
inputValidation.warningForeground#E6EAEF
keybindingLabel.background#0E0E0E
keybindingLabel.border#2D2F32
keybindingLabel.bottomBorder#2D2F32
keybindingLabel.foreground#8B939C
list.activeSelectionBackground#292929
list.activeSelectionForeground#E6EAEF
list.deemphasizedForeground#6D7681
list.dropBackground#7AA2F729
list.dropBetweenBackground#7AA2F7
list.errorForeground#E06C75
list.filterMatchBackground#7AA2F738
list.filterMatchBorder#7AA2F766
list.focusBackground#292929
list.focusForeground#E6EAEF
list.focusHighlightForeground#7AA2F7
list.focusOutline#2D2F32
list.highlightForeground#7AA2F7
list.hoverBackground#292929
list.hoverForeground#E6EAEF
list.inactiveSelectionBackground#292929
list.inactiveSelectionForeground#E6EAEF
list.invalidItemForeground#E06C75
list.warningForeground#E5C07B
listFilterWidget.background#151515
listFilterWidget.noMatchesOutline#E06C75
listFilterWidget.outline#7AA2F7
menu.background#151515
menu.border#2D2F32
menu.foreground#8B939C
menu.selectionBackground#292929
menu.selectionBorder#00000000
menu.selectionForeground#E6EAEF
menu.separatorBackground#2D2F32
menubar.selectionBackground#292929
menubar.selectionBorder#00000000
menubar.selectionForeground#E6EAEF
merge.border#2D2F32
merge.commonContentBackground#3A3D4124
merge.commonHeaderBackground#3A3D414D
merge.currentContentBackground#7AA2F724
merge.currentHeaderBackground#7AA2F74D
merge.incomingContentBackground#4FC9B024
merge.incomingHeaderBackground#4FC9B04D
minimap.background#1C1C1C
minimap.errorHighlight#E06C75
minimap.findMatchHighlight#7AA2F7
minimap.warningHighlight#E5C07B
minimapGutter.addedBackground#4FC9B0
minimapGutter.deletedBackground#E06C75
minimapGutter.modifiedBackground#E5C07B
minimapSlider.activeBackground#3A3D41B3
minimapSlider.background#3A3D4166
minimapSlider.hoverBackground#3A3D418C
multiDiffEditor.background#1C1C1C
multiDiffEditor.border#2D2F32
multiDiffEditor.headerBackground#151515
notebook.cellBorderColor#2D2F32
notebook.cellEditorBackground#1C1C1C
notebook.cellHoverBackground#292929
notebook.cellToolbarSeparator#2D2F32
notebook.editorBackground#1C1C1C
notebook.focusedCellBorder#7AA2F7
notebook.inactiveSelectedCellBorder#2D2F32
notebook.selectedCellBackground#292929
notebook.selectedCellBorder#2D2F32
notebook.symbolHighlightBackground#7AA2F724
notebookStatusErrorIcon.foreground#E06C75
notebookStatusRunningIcon.foreground#7AA2F7
notebookStatusSuccessIcon.foreground#4FC9B0
notificationCenter.border#2D2F32
notificationCenterHeader.background#151515
notificationCenterHeader.foreground#6D7681
notificationLink.foreground#7AA2F7
notifications.background#151515
notifications.border#2D2F32
notifications.foreground#ABBFD6
notificationsErrorIcon.foreground#E06C75
notificationsInfoIcon.foreground#7AA2F7
notificationsWarningIcon.foreground#E5C07B
notificationToast.border#2D2F32
panel.background#151515
panel.border#2D2F32
panelInput.border#2D2F32
panelSection.border#2D2F32
panelSectionHeader.background#151515
panelSectionHeader.foreground#6D7681
panelTitle.activeBorder#7AA2F7
panelTitle.activeForeground#E6EAEF
panelTitle.border#00000000
panelTitle.inactiveForeground#8B939C
peekView.border#2D2F32
peekViewEditor.background#1C1C1C
peekViewEditor.matchHighlightBackground#7AA2F747
peekViewEditor.matchHighlightBorder#7AA2F766
peekViewResult.background#151515
peekViewResult.fileForeground#E6EAEF
peekViewResult.lineForeground#8B939C
peekViewResult.matchHighlightBackground#7AA2F747
peekViewResult.selectionBackground#292929
peekViewResult.selectionForeground#E6EAEF
peekViewTitle.background#151515
peekViewTitleDescription.foreground#6D7681
peekViewTitleLabel.foreground#E6EAEF
pickerGroup.border#2D2F32
pickerGroup.foreground#6D7681
problemsErrorIcon.foreground#E06C75
problemsInfoIcon.foreground#7AA2F7
problemsWarningIcon.foreground#E5C07B
profileBadge.background#0E0E0E
profileBadge.foreground#E6EAEF
progressBar.background#7AA2F7
quickInput.background#151515
quickInput.foreground#ABBFD6
quickInputList.focusBackground#292929
quickInputList.focusForeground#E6EAEF
quickInputTitle.background#151515
radio.activeBackground#7AA2F733
radio.activeBorder#7AA2F7
radio.activeForeground#E6EAEF
radio.inactiveBorder#2D2F32
sash.hoverBorder#7AA2F7
scrollbar.shadow#00000059
scrollbarSlider.activeBackground#3A3D41FF
scrollbarSlider.background#3A3D4199
scrollbarSlider.hoverBackground#3A3D41CC
search.resultsInfoForeground#6D7681
searchEditor.findMatchBackground#7AA2F733
searchEditor.findMatchBorder#7AA2F759
selection.background#7AA2F747
settings.checkboxBackground#0E0E0E
settings.checkboxBorder#2D2F32
settings.dropdownBackground#151515
settings.dropdownBorder#2D2F32
settings.focusedRowBackground#292929
settings.focusedRowBorder#2D2F32
settings.headerBorder#2D2F32
settings.headerForeground#E6EAEF
settings.modifiedItemIndicator#7AA2F7
settings.numberInputBackground#0E0E0E
settings.numberInputBorder#2D2F32
settings.rowHoverBackground#292929
settings.sashBorder#2D2F32
settings.textInputBackground#0E0E0E
settings.textInputBorder#2D2F32
sideBar.background#151515
sideBar.border#2D2F32
sideBar.foreground#B6BEC7
sideBarSectionHeader.background#151515
sideBarSectionHeader.border#2D2F32
sideBarSectionHeader.foreground#6D7681
sideBarTitle.border#2D2F32
sideBarTitle.foreground#6D7681
statusBar.background#151515
statusBar.border#2D2F32
statusBar.debuggingBackground#151515
statusBar.debuggingForeground#E5C07B
statusBar.focusBorder#7AA2F7
statusBar.foreground#8B939C
statusBar.noFolderBackground#151515
statusBar.noFolderForeground#8B939C
statusBarItem.activeBackground#292929
statusBarItem.compactHoverBackground#1A1B1B
statusBarItem.errorBackground#151515
statusBarItem.errorForeground#E06C75
statusBarItem.focusBorder#7AA2F7
statusBarItem.hoverBackground#1A1B1B
statusBarItem.offlineBackground#E06C75
statusBarItem.offlineForeground#1C1C1C
statusBarItem.prominentBackground#0E0E0E
statusBarItem.prominentForeground#E6EAEF
statusBarItem.remoteBackground#7AA2F7
statusBarItem.remoteForeground#1C1C1C
statusBarItem.remoteHoverBackground#8AADF8
statusBarItem.warningBackground#151515
statusBarItem.warningForeground#E5C07B
strongForeground#E6EAEF
surface.background#151515
surface.border#2D2F32
symbolIcon.classForeground#4FC9B0
symbolIcon.constantForeground#D19B6C
symbolIcon.constructorForeground#7AA2F7
symbolIcon.enumeratorForeground#4FC9B0
symbolIcon.enumeratorMemberForeground#D19B6C
symbolIcon.eventForeground#7AA2F7
symbolIcon.fieldForeground#ABBFD6
symbolIcon.functionForeground#7AA2F7
symbolIcon.interfaceForeground#4FC9B0
symbolIcon.keywordForeground#F29790
symbolIcon.methodForeground#7AA2F7
symbolIcon.namespaceForeground#4FC9B0
symbolIcon.operatorForeground#788696
symbolIcon.propertyForeground#ABBFD6
symbolIcon.stringForeground#75BF85
symbolIcon.structForeground#4FC9B0
symbolIcon.typeParameterForeground#4FC9B0
symbolIcon.variableForeground#ABBFD6
tab.activeBackground#1C1C1C
tab.activeBorder#1C1C1C
tab.activeBorderTop#7AA2F7
tab.activeForeground#E6EAEF
tab.activeModifiedBorder#E5C07B
tab.border#2D2F32
tab.dragAndDropBorder#7AA2F7
tab.hoverForeground#E6EAEF
tab.inactiveBackground#151515
tab.inactiveForeground#8B939C
tab.inactiveModifiedBorder#927C52
tab.lastPinnedBorder#2D2F32
tab.selectedBorderTop#7AA2F7
tab.unfocusedActiveBorderTop#3A3D41
tab.unfocusedActiveForeground#8B939C
tab.unfocusedActiveModifiedBorder#927C52
tab.unfocusedHoverBackground#151515
tab.unfocusedHoverForeground#8B939C
tab.unfocusedInactiveForeground#6D7681
terminal.ansiBlack#151515
terminal.ansiBlue#F29790
terminal.ansiBrightBlack#3A3D41
terminal.ansiBrightBlue#F5AEA8
terminal.ansiBrightCyan#76D5C1
terminal.ansiBrightGreen#93CDA0
terminal.ansiBrightMagenta#97B6F9
terminal.ansiBrightRed#E78C93
terminal.ansiBrightWhite#E6EAEF
terminal.ansiBrightYellow#EBCE98
terminal.ansiCyan#4FC9B0
terminal.ansiGreen#75BF85
terminal.ansiMagenta#7AA2F7
terminal.ansiRed#E06C75
terminal.ansiWhite#ABBFD6
terminal.ansiYellow#E5C07B
terminal.background#151515
terminal.border#2D2F32
terminal.findMatchBackground#7AA2F761
terminal.findMatchBorder#7AA2F780
terminal.findMatchHighlightBackground#7AA2F733
terminal.findMatchHighlightBorder#7AA2F74D
terminal.foreground#ABBFD6
terminal.inactiveSelectionBackground#7AA2F724
terminal.initialHintForeground#6D7681
terminal.selectionBackground#7AA2F747
terminalCommandDecoration.defaultBackground#3A3D41
terminalCommandDecoration.errorBackground#E06C75
terminalCommandDecoration.successBackground#4FC9B0
terminalCommandGuide.foreground#2D2F32
terminalCursor.foreground#ABBFD6
terminalOverviewRuler.cursorForeground#ABBFD6
terminalOverviewRuler.findMatchForeground#7AA2F780
terminalStickyScroll.background#151515
terminalStickyScroll.border#2D2F32
terminalStickyScrollHover.background#292929
testing.coveredBackground#4FC9B01F
testing.coveredBorder#4FC9B04D
testing.coveredGutterBackground#4FC9B066
testing.iconErrored#E06C75
testing.iconFailed#E06C75
testing.iconPassed#4FC9B0
testing.iconQueued#E5C07B
testing.iconSkipped#6D7681
testing.iconUnset#6D7681
testing.messagePeekBorder#7AA2F7
testing.messagePeekHeaderBackground#151515
testing.peekBorder#E06C75
testing.peekHeaderBackground#151515
testing.uncoveredBackground#E06C751A
testing.uncoveredBorder#E06C7547
testing.uncoveredBranchBackground#E5C07B40
testing.uncoveredGutterBackground#E06C7559
textBlockQuote.background#151515
textBlockQuote.border#2D2F32
textCodeBlock.background#151515
textLink.activeForeground#8EB0F8
textLink.foreground#7AA2F7
textPreformat.background#0E0E0E
textPreformat.border#2D2F32
textPreformat.foreground#75BF85
textSeparator.foreground#2D2F32
titleBar.activeBackground#151515
titleBar.activeForeground#8B939C
titleBar.border#2D2F32
titleBar.inactiveBackground#151515
titleBar.inactiveForeground#6D7681
toolbar.activeBackground#292929
toolbar.hoverBackground#1A1B1B
toolbar.hoverOutline#2D2F32
tree.inactiveIndentGuidesStroke#2D2F32
tree.indentGuidesStroke#2D2F32
tree.tableColumnsBorder#2D2F32
tree.tableOddRowsBackground#3A3D411F
walkThrough.embeddedEditorBackground#1C1C1C
walkthrough.stepTitle.foreground#E6EAEF
welcomePage.background#1C1C1C
welcomePage.progress.background#0E0E0E
welcomePage.progress.foreground#7AA2F7
welcomePage.tileBackground#151515
welcomePage.tileBorder#2D2F32
welcomePage.tileHoverBackground#1A1B1B
widget.border#2D2F32
widget.shadow#00000066
window.activeBorder#2D2F32
window.inactiveBorder#2D2F32

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text, emphasis, strong, markup.italic, markup.bold, comment, keyword, variable.parameter, entity.name.type	—
comment, punctuation.definition.comment	#6D7681	—
punctuation, keyword.operator, meta.brace, punctuation.separator, punctuation.terminator, punctuation.accessor	#788696	—
variable, variable.other, variable.parameter, meta.object-literal.key, support.type.property-name, entity.name.variable, entity.other.attribute-name	#ABBFD6	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other, storage, storage.type, storage.modifier, constant.language, support.type.primitive, variable.language	#F29790	—
entity.name.type, entity.name.class, entity.name.namespace, support.class, support.type, entity.other.inherited-class, entity.name.tag	#4FC9B0	—
entity.name.function, support.function, meta.function-call, variable.function, entity.name.function.member	#7AA2F7	—
string, string.template, punctuation.definition.string, string.regexp	#75BF85	—
constant.numeric, constant.other.color, constant.character.escape	#E2B3ED	—
variable.other.constant	#D19B6C	—
variable.parameter, variable.parameter.function, meta.function.parameters variable	#FFC491	—
entity.name.import, storage.modifier.import, meta.import string.quoted, meta.import string	#98CDDF	—
variable.other.property, variable.other.object.property, variable.other.member, meta.object-literal.key, meta.structure.dictionary.key, support.type.property-name.json, entity.name.variable.field	#ABBFD6	—
support.type.property-name.css	#ABBFD6	—
support.constant.property-value.css, keyword.other.unit	#E2B3ED	—
string.quoted.double.json	#75BF85	—
keyword.other.sql, keyword.other.DML	#F29790	—
entity.name.function.decorator, meta.decorator, entity.name.package	#4FC9B0	—
constant.other.placeholder, meta.template.expression	#788696	—
invalid, invalid.illegal	#E06C75	—
invalid.deprecated	#E5C07B	—
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown	#F29790	—
markup.bold, punctuation.definition.bold.markdown	#ABBFD6	—
markup.italic, punctuation.definition.italic.markdown	#4FC9B0	—
markup.inline.raw, markup.fenced_code, markup.raw	#75BF85	—
markup.underline.link, string.other.link, markup.link	#7AA2F7	—
markup.quote, beginning.punctuation.definition.quote.markdown	#6D7681	—
markup.list, beginning.punctuation.definition.list.markdown	#788696	—
markup.inserted	#75BF85	—
markup.deleted	#E06C75	—
comment, keyword, storage, variable.parameter, entity.name.type, entity.other.attribute-name, markup.italic, markup.bold	—

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Chalkdraw — Chalkdraw Paper

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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 $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#2E6DA8
activityBar.activeFocusBorder#2E6DA8
activityBar.background#E2DCCE
activityBar.border#D9D3C7
activityBar.dropBorder#2E6DA8
activityBar.foreground#2F2B26
activityBar.inactiveForeground#6E675D
activityBarBadge.background#2E6DA8
activityBarBadge.foreground#FFFFFF
activityBarTop.activeBorder#2E6DA8
activityBarTop.dropBorder#2E6DA8
activityBarTop.foreground#2F2B26
activityBarTop.inactiveForeground#6E675D
activityErrorBadge.background#B3413B
activityErrorBadge.foreground#FFFFFF
activityWarningBadge.background#8A6A18
activityWarningBadge.foreground#FFFFFF
badge.background#2E6DA8
badge.foreground#FFFFFF
banner.background#E2DCCE
banner.foreground#202E3E
banner.iconForeground#2E6DA8
breadcrumb.activeSelectionForeground#2E6DA8
breadcrumb.background#EBE6DA
breadcrumb.focusForeground#2F2B26
breadcrumb.foreground#8C8579
breadcrumbPicker.background#E2DCCE
button.background#2E6DA8
button.foreground#FFFFFF
button.hoverBackground#286094
button.secondaryBackground#DDD7C9
button.secondaryBorder#D9D3C7
button.secondaryForeground#2F2B26
button.secondaryHoverBackground#D5CFC1
charts.blue#2E6DA8
charts.foreground#6E675D
charts.green#1F7F6E
charts.lines#D9D3C7
charts.orange#29743F
charts.purple#2C59C8
charts.red#B3413B
charts.yellow#8A6A18
checkbox.background#DFD9CC
checkbox.border#D9D3C7
checkbox.foreground#2F2B26
commandCenter.activeBackground#DDD7C9
commandCenter.activeBorder#D9D3C7
commandCenter.background#E2DCCE
commandCenter.border#D9D3C7
commandCenter.foreground#6E675D
commandCenter.inactiveBorder#D9D3C7
commandCenter.inactiveForeground#8C8579
commentsView.resolvedIcon#8C8579
commentsView.unresolvedIcon#2E6DA8
contrastBorder#D9D3C7
debugConsole.errorForeground#B3413B
debugConsole.infoForeground#6E675D
debugConsole.sourceForeground#8C8579
debugConsole.warningForeground#8A6A18
debugConsoleInputIcon.foreground#2E6DA8
debugExceptionWidget.background#E2DCCE
debugExceptionWidget.border#D9D3C7
debugIcon.breakpointCurrentStackframeForeground#8A6A18
debugIcon.breakpointDisabledForeground#C6BFB2
debugIcon.breakpointForeground#B3413B
debugIcon.breakpointStackframeForeground#6E675D
debugIcon.breakpointUnverifiedForeground#8C8579
debugIcon.continueForeground#2E6DA8
debugIcon.disconnectForeground#B3413B
debugIcon.pauseForeground#2E6DA8
debugIcon.restartForeground#1F7F6E
debugIcon.startForeground#1F7F6E
debugIcon.stepBackForeground#2E6DA8
debugIcon.stepIntoForeground#2E6DA8
debugIcon.stepOutForeground#2E6DA8
debugIcon.stepOverForeground#2E6DA8
debugIcon.stopForeground#B3413B
debugTokenExpression.boolean#B7272D
debugTokenExpression.error#B3413B
debugTokenExpression.name#202E3E
debugTokenExpression.number#7C5186
debugTokenExpression.string#29743F
debugTokenExpression.type#006D5C
debugTokenExpression.value#202E3E
debugToolBar.background#E2DCCE
debugToolBar.border#D9D3C7
debugView.exceptionLabelBackground#B3413B
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#DFD9CC
debugView.stateLabelForeground#2F2B26
debugView.valueChangedHighlight#2E6DA8
descriptionForeground#8C8579
diffEditor.border#D9D3C7
diffEditor.diagonalFill#D9D3C7
diffEditor.insertedLineBackground#1F7F6E1C
diffEditor.insertedTextBackground#1F7F6E29
diffEditor.removedLineBackground#B3413B1C
diffEditor.removedTextBackground#B3413B29
diffEditor.unchangedRegionBackground#E2DCCE
diffEditorOverview.insertedForeground#1F7F6E99
diffEditorOverview.removedForeground#B3413B99
disabledForeground#8C8579
dropdown.background#E2DCCE
dropdown.border#D9D3C7
dropdown.foreground#202E3E
dropdown.listBackground#E2DCCE
editor.background#EBE6DA
editor.findMatchBackground#2E6DA861
editor.findMatchHighlightBackground#2E6DA833
editor.findRangeHighlightBackground#2E6DA81A
editor.focusedStackFrameHighlightBackground#1F7F6E29
editor.foreground#202E3E
editor.hoverHighlightBackground#2E6DA824
editor.inactiveSelectionBackground#2E6DA824
editor.inlineValuesForeground#4E5D6F
editor.lineHighlightBackground#CFCABF
editor.lineHighlightBorder#CFCABF
editor.linkedEditingBackground#2E6DA824
editor.rangeHighlightBackground#2E6DA81A
editor.selectionBackground#2E6DA847
editor.selectionHighlightBackground#2E6DA824
editor.selectionHighlightBorder#2E6DA847
editor.snippetTabstopHighlightBackground#2E6DA824
editor.stackFrameHighlightBackground#8A6A1829
editor.symbolHighlightBackground#2E6DA82E
editor.wordHighlightBackground#2E6DA81F
editor.wordHighlightStrongBackground#2E6DA82E
editorActiveLineNumber.foreground#0E4CFF
editorBracketHighlight.foreground1#576474
editorBracketHighlight.foreground2#576474
editorBracketHighlight.foreground3#576474
editorBracketHighlight.foreground4#576474
editorBracketHighlight.foreground5#576474
editorBracketHighlight.foreground6#576474
editorBracketHighlight.unexpectedBracket.foreground#B3413B
editorBracketMatch.background#2E6DA824
editorBracketMatch.border#C6BFB2
editorCodeLens.foreground#4E5D6F
editorCommentsWidget.rangeActiveBackground#2E6DA829
editorCommentsWidget.rangeBackground#2E6DA81A
editorCommentsWidget.resolvedBorder#D9D3C7
editorCommentsWidget.unresolvedBorder#2E6DA8
editorCursor.foreground#202E3E
editorError.foreground#B3413B
editorGhostText.foreground#4E5D6F
editorGroup.border#D9D3C7
editorGroup.dropBackground#2E6DA82E
editorGroupHeader.border#D9D3C7
editorGroupHeader.noTabsBackground#E2DCCE
editorGroupHeader.tabsBackground#E2DCCE
editorGroupHeader.tabsBorder#D9D3C7
editorGutter.addedBackground#1F7F6E
editorGutter.background#EBE6DA
editorGutter.commentGlyphForeground#8C8579
editorGutter.commentRangeForeground#C6BFB2
editorGutter.deletedBackground#B3413B
editorGutter.modifiedBackground#8A6A18
editorHint.foreground#8C8579
editorHoverWidget.background#E2DCCE
editorHoverWidget.border#D9D3C7
editorHoverWidget.statusBarBackground#DDD7C9
editorIndentGuide.activeBackground1#C6BFB2
editorIndentGuide.background1#D9D3C7
editorInfo.foreground#2E6DA8
editorInlayHint.background#C6BFB240
editorInlayHint.foreground#4E5D6F
editorLightBulb.foreground#8A6A18
editorLightBulbAutoFix.foreground#2E6DA8
editorLineNumber.activeForeground#0E4CFF
editorLineNumber.foreground#798593
editorLink.activeForeground#2E6DA8
editorMarkerNavigationError.background#B3413B
editorMarkerNavigationError.headerBackground#E2DCCE
editorMarkerNavigationInfo.background#2E6DA8
editorMarkerNavigationInfo.headerBackground#E2DCCE
editorMarkerNavigationWarning.background#8A6A18
editorMarkerNavigationWarning.headerBackground#E2DCCE
editorOverviewRuler.addedForeground#1F7F6E99
editorOverviewRuler.border#D9D3C7
editorOverviewRuler.deletedForeground#B3413B99
editorOverviewRuler.errorForeground#B3413B
editorOverviewRuler.findMatchForeground#2E6DA880
editorOverviewRuler.infoForeground#2E6DA8
editorOverviewRuler.modifiedForeground#8A6A1899
editorOverviewRuler.selectionHighlightForeground#2E6DA859
editorOverviewRuler.warningForeground#8A6A18
editorRuler.foreground#D9D3C7
editorStickyScroll.background#EBE6DA
editorStickyScroll.border#D9D3C7
editorStickyScrollHover.background#CFCABF
editorSuggestWidget.background#E2DCCE
editorSuggestWidget.border#D9D3C7
editorSuggestWidget.focusHighlightForeground#2E6DA8
editorSuggestWidget.foreground#202E3E
editorSuggestWidget.highlightForeground#2E6DA8
editorSuggestWidget.selectedBackground#CFCABF
editorSuggestWidget.selectedForeground#2F2B26
editorSuggestWidget.selectedIconForeground#2E6DA8
editorUnnecessaryCode.opacity#0000008C
editorWarning.foreground#8A6A18
editorWhitespace.foreground#C6BFB2
editorWidget.background#E2DCCE
editorWidget.border#D9D3C7
editorWidget.foreground#202E3E
errorForeground#B3413B
extensionBadge.remoteBackground#2E6DA8
extensionButton.background#2E6DA8
extensionButton.border#D9D3C7
extensionButton.foreground#FFFFFF
extensionButton.hoverBackground#286094
extensionButton.prominentBackground#2E6DA8
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#286094
extensionIcon.preReleaseForeground#2C59C8
extensionIcon.privateForeground#8C8579
extensionIcon.sponsorForeground#B3413B
extensionIcon.starForeground#8A6A18
extensionIcon.verifiedForeground#1F7F6E
focusBorder#2E6DA8
foreground#6E675D
gitDecoration.addedResourceForeground#358077
gitDecoration.conflictingResourceForeground#88628A
gitDecoration.deletedResourceForeground#99605B
gitDecoration.ignoredResourceForeground#9A9893
gitDecoration.modifiedResourceForeground#866E3B
gitDecoration.renamedResourceForeground#358077
gitDecoration.stageDeletedResourceForeground#99605B
gitDecoration.stageModifiedResourceForeground#358077
gitDecoration.submoduleResourceForeground#5C719E
gitDecoration.untrackedResourceForeground#517E5A
icon.foreground#6E675D
input.background#DFD9CC
input.border#D9D3C7
input.foreground#202E3E
input.placeholderForeground#8C8579
inputOption.activeBackground#2E6DA833
inputOption.activeBorder#2E6DA8
inputOption.activeForeground#2F2B26
inputOption.hoverBackground#2E6DA824
inputValidation.errorBackground#E2DCCE
inputValidation.errorBorder#B3413B
inputValidation.errorForeground#2F2B26
inputValidation.infoBackground#E2DCCE
inputValidation.infoBorder#2E6DA8
inputValidation.infoForeground#2F2B26
inputValidation.warningBackground#E2DCCE
inputValidation.warningBorder#8A6A18
inputValidation.warningForeground#2F2B26
keybindingLabel.background#DFD9CC
keybindingLabel.border#D9D3C7
keybindingLabel.bottomBorder#D9D3C7
keybindingLabel.foreground#6E675D
list.activeSelectionBackground#CFCABF
list.activeSelectionForeground#2F2B26
list.deemphasizedForeground#8C8579
list.dropBackground#2E6DA829
list.dropBetweenBackground#2E6DA8
list.errorForeground#B3413B
list.filterMatchBackground#2E6DA838
list.filterMatchBorder#2E6DA866
list.focusBackground#CFCABF
list.focusForeground#2F2B26
list.focusHighlightForeground#2E6DA8
list.focusOutline#D9D3C7
list.highlightForeground#2E6DA8
list.hoverBackground#CFCABF
list.hoverForeground#2F2B26
list.inactiveSelectionBackground#CFCABF
list.inactiveSelectionForeground#2F2B26
list.invalidItemForeground#B3413B
list.warningForeground#8A6A18
listFilterWidget.background#E2DCCE
listFilterWidget.noMatchesOutline#B3413B
listFilterWidget.outline#2E6DA8
menu.background#E2DCCE
menu.border#D9D3C7
menu.foreground#6E675D
menu.selectionBackground#CFCABF
menu.selectionBorder#00000000
menu.selectionForeground#2F2B26
menu.separatorBackground#D9D3C7
menubar.selectionBackground#CFCABF
menubar.selectionBorder#00000000
menubar.selectionForeground#2F2B26
merge.border#D9D3C7
merge.commonContentBackground#C6BFB224
merge.commonHeaderBackground#C6BFB24D
merge.currentContentBackground#2E6DA824
merge.currentHeaderBackground#2E6DA84D
merge.incomingContentBackground#1F7F6E24
merge.incomingHeaderBackground#1F7F6E4D
minimap.background#EBE6DA
minimap.errorHighlight#B3413B
minimap.findMatchHighlight#2E6DA8
minimap.warningHighlight#8A6A18
minimapGutter.addedBackground#1F7F6E
minimapGutter.deletedBackground#B3413B
minimapGutter.modifiedBackground#8A6A18
minimapSlider.activeBackground#C6BFB2B3
minimapSlider.background#C6BFB266
minimapSlider.hoverBackground#C6BFB28C
multiDiffEditor.background#EBE6DA
multiDiffEditor.border#D9D3C7
multiDiffEditor.headerBackground#E2DCCE
notebook.cellBorderColor#D9D3C7
notebook.cellEditorBackground#EBE6DA
notebook.cellHoverBackground#CFCABF
notebook.cellToolbarSeparator#D9D3C7
notebook.editorBackground#EBE6DA
notebook.focusedCellBorder#2E6DA8
notebook.inactiveSelectedCellBorder#D9D3C7
notebook.selectedCellBackground#CFCABF
notebook.selectedCellBorder#D9D3C7
notebook.symbolHighlightBackground#2E6DA824
notebookStatusErrorIcon.foreground#B3413B
notebookStatusRunningIcon.foreground#2E6DA8
notebookStatusSuccessIcon.foreground#1F7F6E
notificationCenter.border#D9D3C7
notificationCenterHeader.background#E2DCCE
notificationCenterHeader.foreground#8C8579
notificationLink.foreground#2E6DA8
notifications.background#E2DCCE
notifications.border#D9D3C7
notifications.foreground#202E3E
notificationsErrorIcon.foreground#B3413B
notificationsInfoIcon.foreground#2E6DA8
notificationsWarningIcon.foreground#8A6A18
notificationToast.border#D9D3C7
panel.background#E2DCCE
panel.border#D9D3C7
panelInput.border#D9D3C7
panelSection.border#D9D3C7
panelSectionHeader.background#E2DCCE
panelSectionHeader.foreground#8C8579
panelTitle.activeBorder#2E6DA8
panelTitle.activeForeground#2F2B26
panelTitle.border#00000000
panelTitle.inactiveForeground#6E675D
peekView.border#D9D3C7
peekViewEditor.background#EBE6DA
peekViewEditor.matchHighlightBackground#2E6DA847
peekViewEditor.matchHighlightBorder#2E6DA866
peekViewResult.background#E2DCCE
peekViewResult.fileForeground#2F2B26
peekViewResult.lineForeground#6E675D
peekViewResult.matchHighlightBackground#2E6DA847
peekViewResult.selectionBackground#CFCABF
peekViewResult.selectionForeground#2F2B26
peekViewTitle.background#E2DCCE
peekViewTitleDescription.foreground#8C8579
peekViewTitleLabel.foreground#2F2B26
pickerGroup.border#D9D3C7
pickerGroup.foreground#8C8579
problemsErrorIcon.foreground#B3413B
problemsInfoIcon.foreground#2E6DA8
problemsWarningIcon.foreground#8A6A18
profileBadge.background#DFD9CC
profileBadge.foreground#2F2B26
progressBar.background#2E6DA8
quickInput.background#E2DCCE
quickInput.foreground#202E3E
quickInputList.focusBackground#CFCABF
quickInputList.focusForeground#2F2B26
quickInputTitle.background#E2DCCE
radio.activeBackground#2E6DA833
radio.activeBorder#2E6DA8
radio.activeForeground#2F2B26
radio.inactiveBorder#D9D3C7
sash.hoverBorder#2E6DA8
scrollbar.shadow#00000014
scrollbarSlider.activeBackground#C6BFB2FF
scrollbarSlider.background#C6BFB299
scrollbarSlider.hoverBackground#C6BFB2CC
search.resultsInfoForeground#8C8579
searchEditor.findMatchBackground#2E6DA833
searchEditor.findMatchBorder#2E6DA859
selection.background#2E6DA847
settings.checkboxBackground#DFD9CC
settings.checkboxBorder#D9D3C7
settings.dropdownBackground#E2DCCE
settings.dropdownBorder#D9D3C7
settings.focusedRowBackground#CFCABF
settings.focusedRowBorder#D9D3C7
settings.headerBorder#D9D3C7
settings.headerForeground#2F2B26
settings.modifiedItemIndicator#2E6DA8
settings.numberInputBackground#DFD9CC
settings.numberInputBorder#D9D3C7
settings.rowHoverBackground#CFCABF
settings.sashBorder#D9D3C7
settings.textInputBackground#DFD9CC
settings.textInputBorder#D9D3C7
sideBar.background#E2DCCE
sideBar.border#D9D3C7
sideBar.foreground#4A443C
sideBarSectionHeader.background#E2DCCE
sideBarSectionHeader.border#D9D3C7
sideBarSectionHeader.foreground#8C8579
sideBarTitle.border#D9D3C7
sideBarTitle.foreground#8C8579
statusBar.background#E2DCCE
statusBar.border#D9D3C7
statusBar.debuggingBackground#E2DCCE
statusBar.debuggingForeground#8A6A18
statusBar.focusBorder#2E6DA8
statusBar.foreground#6E675D
statusBar.noFolderBackground#E2DCCE
statusBar.noFolderForeground#6E675D
statusBarItem.activeBackground#CFCABF
statusBarItem.compactHoverBackground#DDD7C9
statusBarItem.errorBackground#E2DCCE
statusBarItem.errorForeground#B3413B
statusBarItem.focusBorder#2E6DA8
statusBarItem.hoverBackground#DDD7C9
statusBarItem.offlineBackground#B3413B
statusBarItem.offlineForeground#FFFFFF
statusBarItem.prominentBackground#DFD9CC
statusBarItem.prominentForeground#2F2B26
statusBarItem.remoteBackground#2E6DA8
statusBarItem.remoteForeground#FFFFFF
statusBarItem.remoteHoverBackground#286094
statusBarItem.warningBackground#E2DCCE
statusBarItem.warningForeground#8A6A18
strongForeground#2F2B26
surface.background#E2DCCE
surface.border#D9D3C7
symbolIcon.classForeground#006D5C
symbolIcon.constantForeground#7C3E2E
symbolIcon.constructorForeground#2C59C8
symbolIcon.enumeratorForeground#006D5C
symbolIcon.enumeratorMemberForeground#7C3E2E
symbolIcon.eventForeground#2C59C8
symbolIcon.fieldForeground#202E3E
symbolIcon.functionForeground#2C59C8
symbolIcon.interfaceForeground#006D5C
symbolIcon.keywordForeground#B7272D
symbolIcon.methodForeground#2C59C8
symbolIcon.namespaceForeground#006D5C
symbolIcon.operatorForeground#576474
symbolIcon.propertyForeground#202E3E
symbolIcon.stringForeground#29743F
symbolIcon.structForeground#006D5C
symbolIcon.typeParameterForeground#006D5C
symbolIcon.variableForeground#202E3E
tab.activeBackground#EBE6DA
tab.activeBorder#EBE6DA
tab.activeBorderTop#2E6DA8
tab.activeForeground#2F2B26
tab.activeModifiedBorder#8A6A18
tab.border#D9D3C7
tab.dragAndDropBorder#2E6DA8
tab.hoverForeground#2F2B26
tab.inactiveBackground#E2DCCE
tab.inactiveForeground#6E675D
tab.inactiveModifiedBorder#AD9861
tab.lastPinnedBorder#D9D3C7
tab.selectedBorderTop#2E6DA8
tab.unfocusedActiveBorderTop#C6BFB2
tab.unfocusedActiveForeground#6E675D
tab.unfocusedActiveModifiedBorder#AD9861
tab.unfocusedHoverBackground#E2DCCE
tab.unfocusedHoverForeground#6E675D
tab.unfocusedInactiveForeground#8C8579
terminal.ansiBlack#E2DCCE
terminal.ansiBlue#B7272D
terminal.ansiBrightBlack#8C8579
terminal.ansiBrightBlue#8F1E23
terminal.ansiBrightCyan#005548
terminal.ansiBrightGreen#205A31
terminal.ansiBrightMagenta#22459C
terminal.ansiBrightRed#8C332E
terminal.ansiBrightWhite#4A443C
terminal.ansiBrightYellow#6C5313
terminal.ansiCyan#006D5C
terminal.ansiGreen#29743F
terminal.ansiMagenta#2C59C8
terminal.ansiRed#B3413B
terminal.ansiWhite#202E3E
terminal.ansiYellow#8A6A18
terminal.background#E2DCCE
terminal.border#D9D3C7
terminal.findMatchBackground#2E6DA861
terminal.findMatchBorder#2E6DA880
terminal.findMatchHighlightBackground#2E6DA833
terminal.findMatchHighlightBorder#2E6DA84D
terminal.foreground#202E3E
terminal.inactiveSelectionBackground#2E6DA824
terminal.initialHintForeground#8C8579
terminal.selectionBackground#2E6DA847
terminalCommandDecoration.defaultBackground#C6BFB2
terminalCommandDecoration.errorBackground#B3413B
terminalCommandDecoration.successBackground#1F7F6E
terminalCommandGuide.foreground#D9D3C7
terminalCursor.foreground#202E3E
terminalOverviewRuler.cursorForeground#202E3E
terminalOverviewRuler.findMatchForeground#2E6DA880
terminalStickyScroll.background#E2DCCE
terminalStickyScroll.border#D9D3C7
terminalStickyScrollHover.background#CFCABF
testing.coveredBackground#1F7F6E1F
testing.coveredBorder#1F7F6E4D
testing.coveredGutterBackground#1F7F6E66
testing.iconErrored#B3413B
testing.iconFailed#B3413B
testing.iconPassed#1F7F6E
testing.iconQueued#8A6A18
testing.iconSkipped#8C8579
testing.iconUnset#8C8579
testing.messagePeekBorder#2E6DA8
testing.messagePeekHeaderBackground#E2DCCE
testing.peekBorder#B3413B
testing.peekHeaderBackground#E2DCCE
testing.uncoveredBackground#B3413B1A
testing.uncoveredBorder#B3413B47
testing.uncoveredBranchBackground#8A6A1840
testing.uncoveredGutterBackground#B3413B59
textBlockQuote.background#E2DCCE
textBlockQuote.border#D9D3C7
textCodeBlock.background#E2DCCE
textLink.activeForeground#275D8F
textLink.foreground#2E6DA8
textPreformat.background#DFD9CC
textPreformat.border#D9D3C7
textPreformat.foreground#29743F
textSeparator.foreground#D9D3C7
titleBar.activeBackground#E2DCCE
titleBar.activeForeground#6E675D
titleBar.border#D9D3C7
titleBar.inactiveBackground#E2DCCE
titleBar.inactiveForeground#8C8579
toolbar.activeBackground#CFCABF
toolbar.hoverBackground#DDD7C9
toolbar.hoverOutline#D9D3C7
tree.inactiveIndentGuidesStroke#D9D3C7
tree.indentGuidesStroke#D9D3C7
tree.tableColumnsBorder#D9D3C7
tree.tableOddRowsBackground#C6BFB21F
walkThrough.embeddedEditorBackground#EBE6DA
walkthrough.stepTitle.foreground#2F2B26
welcomePage.background#EBE6DA
welcomePage.progress.background#DFD9CC
welcomePage.progress.foreground#2E6DA8
welcomePage.tileBackground#E2DCCE
welcomePage.tileBorder#D9D3C7
welcomePage.tileHoverBackground#DDD7C9
widget.border#D9D3C7
widget.shadow#0000001F
window.activeBorder#D9D3C7
window.inactiveBorder#D9D3C7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text, emphasis, strong, markup.italic, markup.bold, comment, keyword, variable.parameter, entity.name.type	—
comment, punctuation.definition.comment	#4E5D6F	—
punctuation, keyword.operator, meta.brace, punctuation.separator, punctuation.terminator, punctuation.accessor	#576474	—
variable, variable.other, variable.parameter, meta.object-literal.key, support.type.property-name, entity.name.variable, entity.other.attribute-name	#202E3E	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other, storage, storage.type, storage.modifier, constant.language, support.type.primitive, variable.language	#B7272D	—
entity.name.type, entity.name.class, entity.name.namespace, support.class, support.type, entity.other.inherited-class, entity.name.tag	#006D5C	—
entity.name.function, support.function, meta.function-call, variable.function, entity.name.function.member	#2C59C8	—
string, string.template, punctuation.definition.string, string.regexp	#29743F	—
constant.numeric, constant.other.color, constant.character.escape	#7C5186	—
variable.other.constant	#7C3E2E	—
variable.parameter, variable.parameter.function, meta.function.parameters variable	#985500	—
entity.name.import, storage.modifier.import, meta.import string.quoted, meta.import string	#01535E	—
variable.other.property, variable.other.object.property, variable.other.member, meta.object-literal.key, meta.structure.dictionary.key, support.type.property-name.json, entity.name.variable.field	#202E3E	—
support.type.property-name.css	#202E3E	—
support.constant.property-value.css, keyword.other.unit	#7C5186	—
string.quoted.double.json	#29743F	—
keyword.other.sql, keyword.other.DML	#B7272D	—
entity.name.function.decorator, meta.decorator, entity.name.package	#006D5C	—
constant.other.placeholder, meta.template.expression	#576474	—
invalid, invalid.illegal	#B3413B	—
invalid.deprecated	#8A6A18	—
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown	#B7272D	—
markup.bold, punctuation.definition.bold.markdown	#202E3E	—
markup.italic, punctuation.definition.italic.markdown	#006D5C	—
markup.inline.raw, markup.fenced_code, markup.raw	#29743F	—
markup.underline.link, string.other.link, markup.link	#2C59C8	—
markup.quote, beginning.punctuation.definition.quote.markdown	#4E5D6F	—
markup.list, beginning.punctuation.definition.list.markdown	#576474	—
markup.inserted	#29743F	—
markup.deleted	#B3413B	—
comment, keyword, storage, variable.parameter, entity.name.type, entity.other.attribute-name, markup.italic, markup.bold	—