Tinted VSCode

Name: Tinted VSCode
Author: Tinted Theming

Publisher: Tinted ThemingThemes in package: 543

Choose from over 250 Tinted Themes

Open in VS Code GitHub

Color themes

VS Code preview

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

Tinted VSCode — base16-arroz-con-dulce

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.activeBackground#ead6b8
activityBar.background#fff8e7
activityBar.dropBackground#21110b
activityBar.foreground#4a2c20
activityBar.inactiveForeground#c8a77a
activityBarBadge.background#5940a0
activityBarBadge.foreground#21110b
badge.background#fff8e7
badge.foreground#4a2c20
banner.background#ead6b8
banner.foreground#4a2c20
banner.iconForeground#5940a0
breadcrumb.activeSelectionForeground#21110b
breadcrumb.background#f7ebd3
breadcrumb.focusForeground#321c14
breadcrumb.foreground#4a2c20
breadcrumbPicker.background#f7ebd3
button.background#5940a0
button.foreground#21110b
button.hoverBackground#765b45
button.secondaryBackground#8c1f68
button.secondaryForeground#21110b
button.secondaryHoverBackground#765b45
charts.blue#5940a0
charts.foreground#4a2c20
charts.green#a2380c
charts.lines#4a2c20
charts.orange#a3470a
charts.purple#8c1f68
charts.red#a11d48
charts.yellow#855500
checkbox.background#fff8e7
checkbox.foreground#4a2c20
commandCenter.activeBackground#f7ebd3
commandCenter.activeForeground#21110b
commandCenter.background#fff8e7
commandCenter.foreground#4a2c20
debugConsole.errorForeground#a11d48
debugConsole.infoForeground#4a2c20
debugConsole.sourceForeground#4a2c20
debugConsole.warningForeground#855500
debugConsoleInputIcon.foreground#4a2c20
debugExceptionWidget.background#f7ebd3
debugIcon.breakpointCurrentStackframeForeground#855500
debugIcon.breakpointDisabledForeground#765b45
debugIcon.breakpointForeground#a11d48
debugIcon.breakpointStackframeForeground#653221
debugIcon.breakpointUnverifiedForeground#ead6b8
debugIcon.continueForeground#a2380c
debugIcon.disconnectForeground#a11d48
debugIcon.pauseForeground#5940a0
debugIcon.restartForeground#a2380c
debugIcon.startForeground#a2380c
debugIcon.stepBackForeground#653221
debugIcon.stepIntoForeground#98263e
debugIcon.stepOutForeground#8c1f68
debugIcon.stepOverForeground#5940a0
debugIcon.stopForeground#a11d48
debugTokenExpression.boolean#a3470a
debugTokenExpression.error#a11d48
debugTokenExpression.name#8c1f68
debugTokenExpression.number#a3470a
debugTokenExpression.string#a2380c
debugTokenExpression.value#4a2c20
debugToolBar.background#f7ebd3
debugView.stateLabelBackground#5940a0
debugView.stateLabelForeground#21110b
debugView.valueChangedHighlight#5940a0
descriptionForeground#c8a77a
diffEditor.diagonalFill#ead6b8
diffEditor.insertedTextBackground#a2380c20
diffEditor.removedTextBackground#a11d4820
disabledForeground#765b45
dropdown.background#fff8e7
dropdown.foreground#4a2c20
dropdown.listBackground#fff8e7
editor.background#fff8e7
editor.findMatchBackground#8555006f
editor.findMatchHighlightBackground#a3470a6f
editor.findRangeHighlightBackground#f7ebd36f
editor.foreground#4a2c20
editor.hoverHighlightBackground#ead6b86f
editor.inactiveSelectionBackground#ead6b8
editor.lineHighlightBackground#f7ebd3
editor.rangeHighlightBackground#f7ebd36f
editor.selectionBackground#ead6b8
editor.selectionHighlightBackground#f7ebd3
editor.snippetFinalTabstopHighlightBackground#c8a77a
editor.snippetTabstopHighlightBackground#ead6b8
editor.wordHighlightBackground#ead6b86f
editor.wordHighlightStrongBackground#c8a77a6f
editorBracketHighlight.foreground1#a11d48
editorBracketHighlight.foreground2#a3470a
editorBracketHighlight.foreground3#855500
editorBracketHighlight.foreground4#a2380c
editorBracketHighlight.foreground5#5940a0
editorBracketHighlight.foreground6#8c1f68
editorBracketHighlight.unexpectedBracket.foreground#653221
editorBracketMatch.background#ead6b8
editorCodeLens.foreground#ead6b8
editorCursor.foreground#4a2c20
editorError.foreground#a11d48
editorGroup.background#fff8e7
editorGroup.dropBackground#ead6b86f
editorGroup.dropIntoPromptBackground#fff8e7
editorGroup.dropIntoPromptForeground#321c14
editorGroup.emptyBackground#fff8e7
editorGroupHeader.noTabsBackground#f7ebd3
editorGroupHeader.tabsBackground#f7ebd3
editorGutter.addedBackground#a2380c
editorGutter.background#fff8e7
editorGutter.commentRangeForeground#765b45
editorGutter.deletedBackground#a11d48
editorGutter.foldingControlForeground#4a2c20
editorGutter.modifiedBackground#8c1f68
editorHint.foreground#5940a0
editorHoverWidget.background#fff8e7
editorHoverWidget.foreground#4a2c20
editorIndentGuide.activeBackground#765b45
editorIndentGuide.background#c8a77a
editorInfo.foreground#98263e
editorInlayHint.background#f7ebd3
editorInlayHint.foreground#4a2c20
editorInlayHint.parameterBackground#f7ebd3
editorInlayHint.parameterForeground#4a2c20
editorInlayHint.typeBackground#f7ebd3
editorInlayHint.typeForeground#4a2c20
editorLightBulb.foreground#855500
editorLightBulbAutoFix.foreground#5940a0
editorLineNumber.activeForeground#765b45
editorLineNumber.foreground#c8a77a
editorLink.activeForeground#5940a0
editorMarkerNavigation.background#f7ebd3
editorMarkerNavigationError.background#a11d48
editorMarkerNavigationError.headerBackground#a11d4820
editorMarkerNavigationInfo.background#5940a0
editorMarkerNavigationInfo.headerBackground#98263e20
editorMarkerNavigationWarning.background#855500
editorMarkerNavigationWarning.headerBackground#85550020
editorOverviewRuler.addedForeground#a2380c
editorOverviewRuler.bracketMatchForeground#321c14
editorOverviewRuler.commonContentForeground#653221
editorOverviewRuler.currentContentForeground#5940a0
editorOverviewRuler.deletedForeground#a11d48
editorOverviewRuler.errorForeground#a11d48
editorOverviewRuler.findMatchForeground#8555006f
editorOverviewRuler.incomingContentForeground#a2380c
editorOverviewRuler.infoForeground#98263e
editorOverviewRuler.modifiedForeground#8c1f68
editorOverviewRuler.rangeHighlightForeground#c8a77a6f
editorOverviewRuler.selectionHighlightForeground#ead6b86f
editorOverviewRuler.warningForeground#855500
editorOverviewRuler.wordHighlightForeground#21110b6f
editorOverviewRuler.wordHighlightStrongForeground#5940a06f
editorPane.background#fff8e7
editorRuler.foreground#c8a77a
editorSuggestWidget.background#f7ebd3
editorSuggestWidget.focusHighlightForeground#21110b
editorSuggestWidget.foreground#4a2c20
editorSuggestWidget.highlightForeground#5940a0
editorSuggestWidget.selectedBackground#ead6b8
editorSuggestWidget.selectedForeground#321c14
editorWarning.foreground#855500
editorWhitespace.foreground#c8a77a
editorWidget.background#fff8e7
editorWidget.foreground#4a2c20
errorForeground#a11d48
extensionBadge.remoteBackground#a3470a
extensionBadge.remoteForeground#21110b
extensionButton.prominentBackground#a2380c
extensionButton.prominentForeground#21110b
extensionButton.prominentHoverBackground#ead6b8
extensionIcon.preReleaseForeground#a3470a
extensionIcon.starForeground#855500
extensionIcon.verifiedForeground#5940a0
foreground#4a2c20
gitDecoration.addedResourceForeground#a2380c
gitDecoration.conflictingResourceForeground#855500
gitDecoration.deletedResourceForeground#a11d48
gitDecoration.ignoredResourceForeground#c8a77a
gitDecoration.modifiedResourceForeground#8c1f68
gitDecoration.renamedResourceForeground#98263e
gitDecoration.stageDeletedResourceForeground#a11d48
gitDecoration.stageModifiedResourceForeground#8c1f68
gitDecoration.submoduleResourceForeground#653221
gitDecoration.untrackedResourceForeground#a3470a
icon.foreground#765b45
input.background#fff8e7
input.foreground#4a2c20
input.placeholderForeground#c8a77a
inputOption.activeBackground#ead6b8
inputOption.activeBorder#a3470a
inputOption.activeForeground#4a2c20
inputValidation.errorBackground#a11d48
inputValidation.errorBorder#a11d48
inputValidation.errorForeground#4a2c20
inputValidation.infoBackground#5940a0
inputValidation.infoBorder#5940a0
inputValidation.infoForeground#4a2c20
inputValidation.warningBackground#855500
inputValidation.warningBorder#855500
inputValidation.warningForeground#4a2c20
keybindingLabel.background#ead6b8
keybindingLabel.foreground#4a2c20
keybindingTable.headerBackground#ead6b8
keybindingTable.rowsBackground#f7ebd3
list.activeSelectionBackground#ead6b8
list.activeSelectionForeground#4a2c20
list.dropBackground#21110b
list.errorForeground#a11d48
list.filterMatchBackground#ead6b8
list.focusBackground#ead6b8
list.focusForeground#4a2c20
list.highlightForeground#21110b
list.hoverBackground#c8a77a
list.hoverForeground#4a2c20
list.inactiveFocusBackground#ead6b8
list.inactiveSelectionBackground#ead6b8
list.inactiveSelectionForeground#4a2c20
list.invalidItemForeground#a11d48
list.warningForeground#855500
listFilterWidget.background#fff8e7
listFilterWidget.noMatchesOutline#a11d48
menu.background#f7ebd3
menu.foreground#4a2c20
menu.selectionBackground#ead6b8
menu.selectionForeground#4a2c20
menu.separatorBackground#21110b
menubar.selectionBackground#f7ebd3
menubar.selectionForeground#4a2c20
merge.currentContentBackground#5940a040
merge.currentHeaderBackground#5940a040
merge.incomingContentBackground#a2380c60
merge.incomingHeaderBackground#a2380c60
minimap.background#fff8e7
minimap.errorHighlight#a11d48
minimap.findMatchHighlight#8555006f
minimap.selectionHighlight#ead6b86f
minimap.selectionOccurrenceHighlight#c8a77a
minimap.warningHighlight#855500
minimapGutter.addedBackground#a2380c
minimapGutter.deletedBackground#a11d48
minimapGutter.modifiedBackground#8c1f68
notebook.cellBorderColor#c8a77a
notebook.cellEditorBackground#fff8e7
notebook.cellHoverBackground#f7ebd3
notebook.cellToolbarSeparator#ead6b8
notebook.editorBackground#fff8e7
notebook.focusedCellBackground#ead6b8
notebook.focusedCellBorder#5940a0
notebook.focusedEditorBorder#5940a0
notebook.inactiveFocusedCellBorder#c8a77a
notebook.selectedCellBackground#ead6b8
notebookStatusErrorIcon.foreground#a11d48
notebookStatusRunningIcon.foreground#98263e
notebookStatusSuccessIcon.foreground#a2380c
notification.background#ead6b8
notification.buttonBackground#5940a0
notification.buttonForeground#21110b
notification.buttonHoverBackground#ead6b8
notification.errorBackground#a11d48
notification.errorForeground#21110b
notification.foreground#4a2c20
notification.infoBackground#98263e
notification.infoForeground#21110b
notification.warningBackground#855500
notification.warningForeground#21110b
notificationCenterHeader.background#f7ebd3
notificationCenterHeader.foreground#4a2c20
notificationLink.foreground#5940a0
notifications.background#ead6b8
notifications.foreground#4a2c20
notificationsErrorIcon.foreground#a11d48
notificationsInfoIcon.foreground#5940a0
notificationsWarningIcon.foreground#855500
panel.background#fff8e7
panel.dropBackground#f7ebd36f
panel.dropBorder#f7ebd36f
panelTitle.activeForeground#4a2c20
panelTitle.inactiveForeground#c8a77a
peekViewEditor.background#f7ebd3
peekViewEditor.matchHighlightBackground#a3470a6f
peekViewEditorGutter.background#f7ebd3
peekViewResult.background#fff8e7
peekViewResult.fileForeground#4a2c20
peekViewResult.lineForeground#c8a77a
peekViewResult.matchHighlightBackground#a3470a6f
peekViewResult.selectionBackground#ead6b8
peekViewResult.selectionForeground#4a2c20
peekViewTitle.background#ead6b8
peekViewTitleDescription.foreground#c8a77a
peekViewTitleLabel.foreground#4a2c20
pickerGroup.foreground#c8a77a
ports.iconRunningProcessForeground#a3470a
problemsErrorIcon.foreground#a11d48
problemsInfoIcon.foreground#98263e
problemsWarningIcon.foreground#855500
progressBar.background#c8a77a
quickInput.background#f7ebd3
quickInput.foreground#4a2c20
quickInputList.focusBackground#c8a77a
quickInputList.focusForeground#21110b
quickInputList.focusIconForeground#21110b
scrollbar.shadow#f7ebd3
scrollbarSlider.activeBackground#765b456f
scrollbarSlider.background#ead6b86f
scrollbarSlider.hoverBackground#c8a77a6f
searchEditor.findMatchBackground#8555006f
selection.background#5940a0
settings.checkboxBackground#f7ebd3
settings.checkboxForeground#4a2c20
settings.dropdownBackground#f7ebd3
settings.dropdownForeground#4a2c20
settings.focusedRowBackground#ead6b8
settings.headerBorder#4a2c20
settings.headerForeground#4a2c20
settings.modifiedItemForeground#a2380c
settings.modifiedItemIndicator#5940a0
settings.numberInputBackground#f7ebd3
settings.numberInputForeground#4a2c20
settings.rowHoverBackground#ead6b8
settings.sashBorder#4a2c20
settings.textInputBackground#f7ebd3
settings.textInputForeground#4a2c20
sideBar.background#f7ebd3
sideBar.dropBackground#ead6b86f
sideBar.foreground#4a2c20
sideBarSectionHeader.background#c8a77a
sideBarSectionHeader.foreground#4a2c20
sideBarTitle.foreground#4a2c20
statusBar.background#5940a0
statusBar.debuggingBackground#a3470a
statusBar.debuggingForeground#21110b
statusBar.foreground#21110b
statusBar.noFolderBackground#8c1f68
statusBar.noFolderForeground#21110b
statusBarItem.activeBackground#c8a77a
statusBarItem.errorBackground#a11d48
statusBarItem.errorForeground#21110b
statusBarItem.hoverBackground#ead6b8
statusBarItem.prominentBackground#8c1f68
statusBarItem.prominentForeground#21110b
statusBarItem.prominentHoverBackground#a11d48
statusBarItem.remoteBackground#a2380c
statusBarItem.remoteForeground#21110b
statusBarItem.warningBackground#855500
statusBarItem.warningForeground#21110b
symbolIcon.arrayForeground#4a2c20
symbolIcon.booleanForeground#a3470a
symbolIcon.classForeground#855500
symbolIcon.colorForeground#f0f
symbolIcon.constantForeground#a3470a
symbolIcon.constructorForeground#5940a0
symbolIcon.enumeratorForeground#a3470a
symbolIcon.enumeratorMemberForeground#5940a0
symbolIcon.eventForeground#855500
symbolIcon.fieldForeground#a11d48
symbolIcon.fileForeground#4a2c20
symbolIcon.folderForeground#4a2c20
symbolIcon.functionForeground#5940a0
symbolIcon.interfaceForeground#5940a0
symbolIcon.keyForeground#f0f
symbolIcon.keywordForeground#8c1f68
symbolIcon.methodForeground#5940a0
symbolIcon.moduleForeground#4a2c20
symbolIcon.namespaceForeground#4a2c20
symbolIcon.nullForeground#653221
symbolIcon.numberForeground#a3470a
symbolIcon.objectForeground#f0f
symbolIcon.operatorForeground#f0f
symbolIcon.packageForeground#f0f
symbolIcon.propertyForeground#4a2c20
symbolIcon.referenceForeground#f0f
symbolIcon.snippetForeground#4a2c20
symbolIcon.stringForeground#a2380c
symbolIcon.structForeground#855500
symbolIcon.textForeground#4a2c20
symbolIcon.typeParameterForeground#f0f
symbolIcon.unitForeground#f0f
symbolIcon.variableForeground#a11d48
tab.activeBackground#fff8e7
tab.activeForeground#4a2c20
tab.activeModifiedBorder#5940a0
tab.hoverBackground#ead6b8
tab.inactiveBackground#f7ebd3
tab.inactiveForeground#c8a77a
tab.inactiveModifiedBorder#5940a0
tab.unfocusedActiveBackground#fff8e7
tab.unfocusedActiveForeground#765b45
tab.unfocusedActiveModifiedBorder#5940a0
tab.unfocusedHoverBackground#ead6b8
tab.unfocusedInactiveForeground#c8a77a
tab.unfocusedInactiveModifiedBorder#5940a0
terminal.ansiBlack#fff8e7
terminal.ansiBlue#5940a0
terminal.ansiBrightBlack#c8a77a
terminal.ansiBrightBlue#5940a0
terminal.ansiBrightCyan#98263e
terminal.ansiBrightGreen#a2380c
terminal.ansiBrightMagenta#8c1f68
terminal.ansiBrightRed#a11d48
terminal.ansiBrightWhite#21110b
terminal.ansiBrightYellow#855500
terminal.ansiCyan#98263e
terminal.ansiGreen#a2380c
terminal.ansiMagenta#8c1f68
terminal.ansiRed#a11d48
terminal.ansiWhite#4a2c20
terminal.ansiYellow#855500
terminal.background#fff8e7
terminal.foreground#4a2c20
terminalCursor.foreground#4a2c20
terminalOverviewRuler.cursorForeground#ff0000
terminalOverviewRuler.findMatchForeground#ff0000
testing.iconErrored#653221
testing.iconFailed#a11d48
testing.iconPassed#a2380c
testing.iconQueued#855500
testing.iconSkipped#8c1f68
testing.iconUnset#765b45
testing.message.error.decorationForeground#4a2c20
testing.message.error.lineBackground#a11d4820
testing.message.info.decorationForeground#4a2c20
testing.message.info.lineBackground#5940a020
testing.peekHeaderBackground#f7ebd3
testing.runAction#765b45
textBlockQuote.background#f7ebd3
textBlockQuote.border#5940a0
textCodeBlock.background#fff8e7
textLink.activeForeground#98263e
textLink.foreground#5940a0
textPreformat.foreground#5940a0
textSeparator.foreground#f0f
titleBar.activeBackground#fff8e7
titleBar.activeForeground#4a2c20
titleBar.inactiveBackground#f7ebd3
titleBar.inactiveForeground#c8a77a
toolbar.activeBackground#c8a77a
toolbar.hoverBackground#ead6b8
tree.indentGuidesStroke#4a2c20
walkThrough.embeddedEditorBackground#fff8e7
welcomePage.background#fff8e7
welcomePage.buttonBackground#f7ebd3
welcomePage.buttonHoverBackground#ead6b8
welcomePage.progress.background#c8a77a
welcomePage.progress.foreground#5940a0
welcomePage.tileBackground#f7ebd3
welcomePage.tileHoverBackground#ead6b8
widget.shadow#fff8e7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#c8a77a	italic
variable, string constant.other.placeholder, entity.name.variable.parameter, entity.name.variable.local, variable.parameter	#a11d48	—
variable.other.object.property	#5940a0	—
constant.other.color	#a2380c	—
invalid, invalid.illegal	#a11d48	—
invalid.deprecated	#653221	—
keyword, storage.modifier	#8c1f68	—
keyword.control, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.control.as	#8c1f68	—
keyword.other.using, keyword.other.namespace, keyword.other.class, keyword.other.new, keyword.other.event, keyword.other.this, keyword.other.await, keyword.other.var, keyword.other.package, keyword.other.import, variable.language.this, storage.type.ts	#8c1f68	—
keyword.type, storage.type.primitive	#98263e	—
storage.type.function	#5940a0	—
constant.other.color, punctuation, punctuation.section.class.end, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution	#4a2c20	—
punctuation.section.embedded, variable.interpolation	#653221	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#a11d48	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#5940a0	—
meta.block variable.other	#a11d48	—
support.other.variable, string.other.link	#a11d48	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#a3470a	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#a2380c
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#855500	—
storage.type, storage.modifier.package, storage.modifier.import	#855500	—
entity.name.variable.field	#5940a0	—
support.type	#98263e	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#98263e	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#a11d48	—
variable.language	#a11d48	italic
entity.name.method.js	#5940a0	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#5940a0	—
entity.other.attribute-name	#5940a0	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#855500	italic
entity.other.attribute-name.class	#855500	—
source.sass keyword.control	#5940a0	—
markup.inserted	#a2380c	—
markup.deleted	#a11d48	—
markup.changed	#8c1f68	—
string.regexp	#98263e	—
constant.character.escape	#98263e	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#5940a0	italic
source.js constant.other.object.key.js string.unquoted.label.js	#8c1f68	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#5940a0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5940a0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5940a0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5940a0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5940a0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5940a0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5940a0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5940a0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5940a0	—
text.html.markdown, punctuation.definition.list_item.markdown	#4a2c20	—
text.html.markdown markup.inline.raw.markdown	#8c1f68	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#98263e	—
text.html.markdown meta.dummy.line-break	#c8a77a	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#5940a0	—
markup.italic	#a11d48	italic
markup.bold, markup.bold string	#a11d48	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#a11d48	bold
markup.underline	#a3470a	underline
markup.quote punctuation.definition.blockquote.markdown	#98263e	—
markup.quote	—	italic
string.other.link.title.markdown	#5940a0	—
string.other.link.description.title.markdown	#8c1f68	—
constant.other.reference.link.markdown	#855500	—
markup.raw.block	#8c1f68	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#8c1f68	—
variable.language.fenced.markdown	#a11d48	—
meta.separator	#98263e	bold
markup.table	#8c1f68	—
token.info-token	#5940a0	—
token.warn-token	#855500	—
token.error-token	#a11d48	—
token.debug-token	#8c1f68	—

VS Code preview

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

Tinted VSCode — base16-arroz-con-dulce-dark

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.activeBackground#3b241a
activityBar.background#21140f
activityBar.dropBackground#fff8e7
activityBar.foreground#f2dfc0
activityBar.inactiveForeground#a98568
activityBarBadge.background#b99ac8
activityBarBadge.foreground#fff8e7
badge.background#21140f
badge.foreground#f2dfc0
banner.background#3b241a
banner.foreground#f2dfc0
banner.iconForeground#b99ac8
breadcrumb.activeSelectionForeground#fff8e7
breadcrumb.background#2c1a13
breadcrumb.focusForeground#f8ebd3
breadcrumb.foreground#f2dfc0
breadcrumbPicker.background#2c1a13
button.background#b99ac8
button.foreground#fff8e7
button.hoverBackground#c8a77a
button.secondaryBackground#d58ab4
button.secondaryForeground#fff8e7
button.secondaryHoverBackground#c8a77a
charts.blue#b99ac8
charts.foreground#f2dfc0
charts.green#d47a50
charts.lines#f2dfc0
charts.orange#e68a4a
charts.purple#d58ab4
charts.red#e07a8a
charts.yellow#d9a441
checkbox.background#21140f
checkbox.foreground#f2dfc0
commandCenter.activeBackground#2c1a13
commandCenter.activeForeground#fff8e7
commandCenter.background#21140f
commandCenter.foreground#f2dfc0
debugConsole.errorForeground#e07a8a
debugConsole.infoForeground#f2dfc0
debugConsole.sourceForeground#f2dfc0
debugConsole.warningForeground#d9a441
debugConsoleInputIcon.foreground#f2dfc0
debugExceptionWidget.background#2c1a13
debugIcon.breakpointCurrentStackframeForeground#d9a441
debugIcon.breakpointDisabledForeground#c8a77a
debugIcon.breakpointForeground#e07a8a
debugIcon.breakpointStackframeForeground#b97755
debugIcon.breakpointUnverifiedForeground#3b241a
debugIcon.continueForeground#d47a50
debugIcon.disconnectForeground#e07a8a
debugIcon.pauseForeground#b99ac8
debugIcon.restartForeground#d47a50
debugIcon.startForeground#d47a50
debugIcon.stepBackForeground#b97755
debugIcon.stepIntoForeground#d98276
debugIcon.stepOutForeground#d58ab4
debugIcon.stepOverForeground#b99ac8
debugIcon.stopForeground#e07a8a
debugTokenExpression.boolean#e68a4a
debugTokenExpression.error#e07a8a
debugTokenExpression.name#d58ab4
debugTokenExpression.number#e68a4a
debugTokenExpression.string#d47a50
debugTokenExpression.value#f2dfc0
debugToolBar.background#2c1a13
debugView.stateLabelBackground#b99ac8
debugView.stateLabelForeground#fff8e7
debugView.valueChangedHighlight#b99ac8
descriptionForeground#a98568
diffEditor.diagonalFill#3b241a
diffEditor.insertedTextBackground#d47a5020
diffEditor.removedTextBackground#e07a8a20
disabledForeground#c8a77a
dropdown.background#21140f
dropdown.foreground#f2dfc0
dropdown.listBackground#21140f
editor.background#21140f
editor.findMatchBackground#d9a4416f
editor.findMatchHighlightBackground#e68a4a6f
editor.findRangeHighlightBackground#2c1a136f
editor.foreground#f2dfc0
editor.hoverHighlightBackground#3b241a6f
editor.inactiveSelectionBackground#3b241a
editor.lineHighlightBackground#2c1a13
editor.rangeHighlightBackground#2c1a136f
editor.selectionBackground#3b241a
editor.selectionHighlightBackground#2c1a13
editor.snippetFinalTabstopHighlightBackground#a98568
editor.snippetTabstopHighlightBackground#3b241a
editor.wordHighlightBackground#3b241a6f
editor.wordHighlightStrongBackground#a985686f
editorBracketHighlight.foreground1#e07a8a
editorBracketHighlight.foreground2#e68a4a
editorBracketHighlight.foreground3#d9a441
editorBracketHighlight.foreground4#d47a50
editorBracketHighlight.foreground5#b99ac8
editorBracketHighlight.foreground6#d58ab4
editorBracketHighlight.unexpectedBracket.foreground#b97755
editorBracketMatch.background#3b241a
editorCodeLens.foreground#3b241a
editorCursor.foreground#f2dfc0
editorError.foreground#e07a8a
editorGroup.background#21140f
editorGroup.dropBackground#3b241a6f
editorGroup.dropIntoPromptBackground#21140f
editorGroup.dropIntoPromptForeground#f8ebd3
editorGroup.emptyBackground#21140f
editorGroupHeader.noTabsBackground#2c1a13
editorGroupHeader.tabsBackground#2c1a13
editorGutter.addedBackground#d47a50
editorGutter.background#21140f
editorGutter.commentRangeForeground#c8a77a
editorGutter.deletedBackground#e07a8a
editorGutter.foldingControlForeground#f2dfc0
editorGutter.modifiedBackground#d58ab4
editorHint.foreground#b99ac8
editorHoverWidget.background#21140f
editorHoverWidget.foreground#f2dfc0
editorIndentGuide.activeBackground#c8a77a
editorIndentGuide.background#a98568
editorInfo.foreground#d98276
editorInlayHint.background#2c1a13
editorInlayHint.foreground#f2dfc0
editorInlayHint.parameterBackground#2c1a13
editorInlayHint.parameterForeground#f2dfc0
editorInlayHint.typeBackground#2c1a13
editorInlayHint.typeForeground#f2dfc0
editorLightBulb.foreground#d9a441
editorLightBulbAutoFix.foreground#b99ac8
editorLineNumber.activeForeground#c8a77a
editorLineNumber.foreground#a98568
editorLink.activeForeground#b99ac8
editorMarkerNavigation.background#2c1a13
editorMarkerNavigationError.background#e07a8a
editorMarkerNavigationError.headerBackground#e07a8a20
editorMarkerNavigationInfo.background#b99ac8
editorMarkerNavigationInfo.headerBackground#d9827620
editorMarkerNavigationWarning.background#d9a441
editorMarkerNavigationWarning.headerBackground#d9a44120
editorOverviewRuler.addedForeground#d47a50
editorOverviewRuler.bracketMatchForeground#f8ebd3
editorOverviewRuler.commonContentForeground#b97755
editorOverviewRuler.currentContentForeground#b99ac8
editorOverviewRuler.deletedForeground#e07a8a
editorOverviewRuler.errorForeground#e07a8a
editorOverviewRuler.findMatchForeground#d9a4416f
editorOverviewRuler.incomingContentForeground#d47a50
editorOverviewRuler.infoForeground#d98276
editorOverviewRuler.modifiedForeground#d58ab4
editorOverviewRuler.rangeHighlightForeground#a985686f
editorOverviewRuler.selectionHighlightForeground#3b241a6f
editorOverviewRuler.warningForeground#d9a441
editorOverviewRuler.wordHighlightForeground#fff8e76f
editorOverviewRuler.wordHighlightStrongForeground#b99ac86f
editorPane.background#21140f
editorRuler.foreground#a98568
editorSuggestWidget.background#2c1a13
editorSuggestWidget.focusHighlightForeground#fff8e7
editorSuggestWidget.foreground#f2dfc0
editorSuggestWidget.highlightForeground#b99ac8
editorSuggestWidget.selectedBackground#3b241a
editorSuggestWidget.selectedForeground#f8ebd3
editorWarning.foreground#d9a441
editorWhitespace.foreground#a98568
editorWidget.background#21140f
editorWidget.foreground#f2dfc0
errorForeground#e07a8a
extensionBadge.remoteBackground#e68a4a
extensionBadge.remoteForeground#fff8e7
extensionButton.prominentBackground#d47a50
extensionButton.prominentForeground#fff8e7
extensionButton.prominentHoverBackground#3b241a
extensionIcon.preReleaseForeground#e68a4a
extensionIcon.starForeground#d9a441
extensionIcon.verifiedForeground#b99ac8
foreground#f2dfc0
gitDecoration.addedResourceForeground#d47a50
gitDecoration.conflictingResourceForeground#d9a441
gitDecoration.deletedResourceForeground#e07a8a
gitDecoration.ignoredResourceForeground#a98568
gitDecoration.modifiedResourceForeground#d58ab4
gitDecoration.renamedResourceForeground#d98276
gitDecoration.stageDeletedResourceForeground#e07a8a
gitDecoration.stageModifiedResourceForeground#d58ab4
gitDecoration.submoduleResourceForeground#b97755
gitDecoration.untrackedResourceForeground#e68a4a
icon.foreground#c8a77a
input.background#21140f
input.foreground#f2dfc0
input.placeholderForeground#a98568
inputOption.activeBackground#3b241a
inputOption.activeBorder#e68a4a
inputOption.activeForeground#f2dfc0
inputValidation.errorBackground#e07a8a
inputValidation.errorBorder#e07a8a
inputValidation.errorForeground#f2dfc0
inputValidation.infoBackground#b99ac8
inputValidation.infoBorder#b99ac8
inputValidation.infoForeground#f2dfc0
inputValidation.warningBackground#d9a441
inputValidation.warningBorder#d9a441
inputValidation.warningForeground#f2dfc0
keybindingLabel.background#3b241a
keybindingLabel.foreground#f2dfc0
keybindingTable.headerBackground#3b241a
keybindingTable.rowsBackground#2c1a13
list.activeSelectionBackground#3b241a
list.activeSelectionForeground#f2dfc0
list.dropBackground#fff8e7
list.errorForeground#e07a8a
list.filterMatchBackground#3b241a
list.focusBackground#3b241a
list.focusForeground#f2dfc0
list.highlightForeground#fff8e7
list.hoverBackground#a98568
list.hoverForeground#f2dfc0
list.inactiveFocusBackground#3b241a
list.inactiveSelectionBackground#3b241a
list.inactiveSelectionForeground#f2dfc0
list.invalidItemForeground#e07a8a
list.warningForeground#d9a441
listFilterWidget.background#21140f
listFilterWidget.noMatchesOutline#e07a8a
menu.background#2c1a13
menu.foreground#f2dfc0
menu.selectionBackground#3b241a
menu.selectionForeground#f2dfc0
menu.separatorBackground#fff8e7
menubar.selectionBackground#2c1a13
menubar.selectionForeground#f2dfc0
merge.currentContentBackground#b99ac840
merge.currentHeaderBackground#b99ac840
merge.incomingContentBackground#d47a5060
merge.incomingHeaderBackground#d47a5060
minimap.background#21140f
minimap.errorHighlight#e07a8a
minimap.findMatchHighlight#d9a4416f
minimap.selectionHighlight#3b241a6f
minimap.selectionOccurrenceHighlight#a98568
minimap.warningHighlight#d9a441
minimapGutter.addedBackground#d47a50
minimapGutter.deletedBackground#e07a8a
minimapGutter.modifiedBackground#d58ab4
notebook.cellBorderColor#a98568
notebook.cellEditorBackground#21140f
notebook.cellHoverBackground#2c1a13
notebook.cellToolbarSeparator#3b241a
notebook.editorBackground#21140f
notebook.focusedCellBackground#3b241a
notebook.focusedCellBorder#b99ac8
notebook.focusedEditorBorder#b99ac8
notebook.inactiveFocusedCellBorder#a98568
notebook.selectedCellBackground#3b241a
notebookStatusErrorIcon.foreground#e07a8a
notebookStatusRunningIcon.foreground#d98276
notebookStatusSuccessIcon.foreground#d47a50
notification.background#3b241a
notification.buttonBackground#b99ac8
notification.buttonForeground#fff8e7
notification.buttonHoverBackground#3b241a
notification.errorBackground#e07a8a
notification.errorForeground#fff8e7
notification.foreground#f2dfc0
notification.infoBackground#d98276
notification.infoForeground#fff8e7
notification.warningBackground#d9a441
notification.warningForeground#fff8e7
notificationCenterHeader.background#2c1a13
notificationCenterHeader.foreground#f2dfc0
notificationLink.foreground#b99ac8
notifications.background#3b241a
notifications.foreground#f2dfc0
notificationsErrorIcon.foreground#e07a8a
notificationsInfoIcon.foreground#b99ac8
notificationsWarningIcon.foreground#d9a441
panel.background#21140f
panel.dropBackground#2c1a136f
panel.dropBorder#2c1a136f
panelTitle.activeForeground#f2dfc0
panelTitle.inactiveForeground#a98568
peekViewEditor.background#2c1a13
peekViewEditor.matchHighlightBackground#e68a4a6f
peekViewEditorGutter.background#2c1a13
peekViewResult.background#21140f
peekViewResult.fileForeground#f2dfc0
peekViewResult.lineForeground#a98568
peekViewResult.matchHighlightBackground#e68a4a6f
peekViewResult.selectionBackground#3b241a
peekViewResult.selectionForeground#f2dfc0
peekViewTitle.background#3b241a
peekViewTitleDescription.foreground#a98568
peekViewTitleLabel.foreground#f2dfc0
pickerGroup.foreground#a98568
ports.iconRunningProcessForeground#e68a4a
problemsErrorIcon.foreground#e07a8a
problemsInfoIcon.foreground#d98276
problemsWarningIcon.foreground#d9a441
progressBar.background#a98568
quickInput.background#2c1a13
quickInput.foreground#f2dfc0
quickInputList.focusBackground#a98568
quickInputList.focusForeground#fff8e7
quickInputList.focusIconForeground#fff8e7
scrollbar.shadow#2c1a13
scrollbarSlider.activeBackground#c8a77a6f
scrollbarSlider.background#3b241a6f
scrollbarSlider.hoverBackground#a985686f
searchEditor.findMatchBackground#d9a4416f
selection.background#b99ac8
settings.checkboxBackground#2c1a13
settings.checkboxForeground#f2dfc0
settings.dropdownBackground#2c1a13
settings.dropdownForeground#f2dfc0
settings.focusedRowBackground#3b241a
settings.headerBorder#f2dfc0
settings.headerForeground#f2dfc0
settings.modifiedItemForeground#d47a50
settings.modifiedItemIndicator#b99ac8
settings.numberInputBackground#2c1a13
settings.numberInputForeground#f2dfc0
settings.rowHoverBackground#3b241a
settings.sashBorder#f2dfc0
settings.textInputBackground#2c1a13
settings.textInputForeground#f2dfc0
sideBar.background#2c1a13
sideBar.dropBackground#3b241a6f
sideBar.foreground#f2dfc0
sideBarSectionHeader.background#a98568
sideBarSectionHeader.foreground#f2dfc0
sideBarTitle.foreground#f2dfc0
statusBar.background#b99ac8
statusBar.debuggingBackground#e68a4a
statusBar.debuggingForeground#fff8e7
statusBar.foreground#fff8e7
statusBar.noFolderBackground#d58ab4
statusBar.noFolderForeground#fff8e7
statusBarItem.activeBackground#a98568
statusBarItem.errorBackground#e07a8a
statusBarItem.errorForeground#fff8e7
statusBarItem.hoverBackground#3b241a
statusBarItem.prominentBackground#d58ab4
statusBarItem.prominentForeground#fff8e7
statusBarItem.prominentHoverBackground#e07a8a
statusBarItem.remoteBackground#d47a50
statusBarItem.remoteForeground#fff8e7
statusBarItem.warningBackground#d9a441
statusBarItem.warningForeground#fff8e7
symbolIcon.arrayForeground#f2dfc0
symbolIcon.booleanForeground#e68a4a
symbolIcon.classForeground#d9a441
symbolIcon.colorForeground#f0f
symbolIcon.constantForeground#e68a4a
symbolIcon.constructorForeground#b99ac8
symbolIcon.enumeratorForeground#e68a4a
symbolIcon.enumeratorMemberForeground#b99ac8
symbolIcon.eventForeground#d9a441
symbolIcon.fieldForeground#e07a8a
symbolIcon.fileForeground#f2dfc0
symbolIcon.folderForeground#f2dfc0
symbolIcon.functionForeground#b99ac8
symbolIcon.interfaceForeground#b99ac8
symbolIcon.keyForeground#f0f
symbolIcon.keywordForeground#d58ab4
symbolIcon.methodForeground#b99ac8
symbolIcon.moduleForeground#f2dfc0
symbolIcon.namespaceForeground#f2dfc0
symbolIcon.nullForeground#b97755
symbolIcon.numberForeground#e68a4a
symbolIcon.objectForeground#f0f
symbolIcon.operatorForeground#f0f
symbolIcon.packageForeground#f0f
symbolIcon.propertyForeground#f2dfc0
symbolIcon.referenceForeground#f0f
symbolIcon.snippetForeground#f2dfc0
symbolIcon.stringForeground#d47a50
symbolIcon.structForeground#d9a441
symbolIcon.textForeground#f2dfc0
symbolIcon.typeParameterForeground#f0f
symbolIcon.unitForeground#f0f
symbolIcon.variableForeground#e07a8a
tab.activeBackground#21140f
tab.activeForeground#f2dfc0
tab.activeModifiedBorder#b99ac8
tab.hoverBackground#3b241a
tab.inactiveBackground#2c1a13
tab.inactiveForeground#a98568
tab.inactiveModifiedBorder#b99ac8
tab.unfocusedActiveBackground#21140f
tab.unfocusedActiveForeground#c8a77a
tab.unfocusedActiveModifiedBorder#b99ac8
tab.unfocusedHoverBackground#3b241a
tab.unfocusedInactiveForeground#a98568
tab.unfocusedInactiveModifiedBorder#b99ac8
terminal.ansiBlack#21140f
terminal.ansiBlue#b99ac8
terminal.ansiBrightBlack#a98568
terminal.ansiBrightBlue#b99ac8
terminal.ansiBrightCyan#d98276
terminal.ansiBrightGreen#d47a50
terminal.ansiBrightMagenta#d58ab4
terminal.ansiBrightRed#e07a8a
terminal.ansiBrightWhite#fff8e7
terminal.ansiBrightYellow#d9a441
terminal.ansiCyan#d98276
terminal.ansiGreen#d47a50
terminal.ansiMagenta#d58ab4
terminal.ansiRed#e07a8a
terminal.ansiWhite#f2dfc0
terminal.ansiYellow#d9a441
terminal.background#21140f
terminal.foreground#f2dfc0
terminalCursor.foreground#f2dfc0
terminalOverviewRuler.cursorForeground#ff0000
terminalOverviewRuler.findMatchForeground#ff0000
testing.iconErrored#b97755
testing.iconFailed#e07a8a
testing.iconPassed#d47a50
testing.iconQueued#d9a441
testing.iconSkipped#d58ab4
testing.iconUnset#c8a77a
testing.message.error.decorationForeground#f2dfc0
testing.message.error.lineBackground#e07a8a20
testing.message.info.decorationForeground#f2dfc0
testing.message.info.lineBackground#b99ac820
testing.peekHeaderBackground#2c1a13
testing.runAction#c8a77a
textBlockQuote.background#2c1a13
textBlockQuote.border#b99ac8
textCodeBlock.background#21140f
textLink.activeForeground#d98276
textLink.foreground#b99ac8
textPreformat.foreground#b99ac8
textSeparator.foreground#f0f
titleBar.activeBackground#21140f
titleBar.activeForeground#f2dfc0
titleBar.inactiveBackground#2c1a13
titleBar.inactiveForeground#a98568
toolbar.activeBackground#a98568
toolbar.hoverBackground#3b241a
tree.indentGuidesStroke#f2dfc0
walkThrough.embeddedEditorBackground#21140f
welcomePage.background#21140f
welcomePage.buttonBackground#2c1a13
welcomePage.buttonHoverBackground#3b241a
welcomePage.progress.background#a98568
welcomePage.progress.foreground#b99ac8
welcomePage.tileBackground#2c1a13
welcomePage.tileHoverBackground#3b241a
widget.shadow#21140f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a98568	italic
variable, string constant.other.placeholder, entity.name.variable.parameter, entity.name.variable.local, variable.parameter	#e07a8a	—
variable.other.object.property	#b99ac8	—
constant.other.color	#d47a50	—
invalid, invalid.illegal	#e07a8a	—
invalid.deprecated	#b97755	—
keyword, storage.modifier	#d58ab4	—
keyword.control, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.control.as	#d58ab4	—
keyword.other.using, keyword.other.namespace, keyword.other.class, keyword.other.new, keyword.other.event, keyword.other.this, keyword.other.await, keyword.other.var, keyword.other.package, keyword.other.import, variable.language.this, storage.type.ts	#d58ab4	—
keyword.type, storage.type.primitive	#d98276	—
storage.type.function	#b99ac8	—
constant.other.color, punctuation, punctuation.section.class.end, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution	#f2dfc0	—
punctuation.section.embedded, variable.interpolation	#b97755	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#e07a8a	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#b99ac8	—
meta.block variable.other	#e07a8a	—
support.other.variable, string.other.link	#e07a8a	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#e68a4a	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#d47a50
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#d9a441	—
storage.type, storage.modifier.package, storage.modifier.import	#d9a441	—
entity.name.variable.field	#b99ac8	—
support.type	#d98276	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#d98276	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#e07a8a	—
variable.language	#e07a8a	italic
entity.name.method.js	#b99ac8	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#b99ac8	—
entity.other.attribute-name	#b99ac8	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#d9a441	italic
entity.other.attribute-name.class	#d9a441	—
source.sass keyword.control	#b99ac8	—
markup.inserted	#d47a50	—
markup.deleted	#e07a8a	—
markup.changed	#d58ab4	—
string.regexp	#d98276	—
constant.character.escape	#d98276	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#b99ac8	italic
source.js constant.other.object.key.js string.unquoted.label.js	#d58ab4	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#b99ac8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b99ac8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b99ac8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b99ac8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b99ac8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b99ac8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b99ac8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b99ac8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b99ac8	—
text.html.markdown, punctuation.definition.list_item.markdown	#f2dfc0	—
text.html.markdown markup.inline.raw.markdown	#d58ab4	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#d98276	—
text.html.markdown meta.dummy.line-break	#a98568	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#b99ac8	—
markup.italic	#e07a8a	italic
markup.bold, markup.bold string	#e07a8a	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#e07a8a	bold
markup.underline	#e68a4a	underline
markup.quote punctuation.definition.blockquote.markdown	#d98276	—
markup.quote	—	italic
string.other.link.title.markdown	#b99ac8	—
string.other.link.description.title.markdown	#d58ab4	—
constant.other.reference.link.markdown	#d9a441	—
markup.raw.block	#d58ab4	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#d58ab4	—
variable.language.fenced.markdown	#e07a8a	—
meta.separator	#d98276	bold
markup.table	#d58ab4	—
token.info-token	#b99ac8	—
token.warn-token	#d9a441	—
token.error-token	#e07a8a	—
token.debug-token	#d58ab4	—

VS Code preview

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

Tinted VSCode — base16-ascendancy

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.activeBackground#504945
activityBar.background#282828
activityBar.dropBackground#fbf1c7
activityBar.foreground#d5c7a1
activityBar.inactiveForeground#928374
activityBarBadge.background#458588
activityBarBadge.foreground#fbf1c7
badge.background#282828
badge.foreground#d5c7a1
banner.background#504945
banner.foreground#d5c7a1
banner.iconForeground#458588
breadcrumb.activeSelectionForeground#fbf1c7
breadcrumb.background#212f3d
breadcrumb.focusForeground#ebdbb2
breadcrumb.foreground#d5c7a1
breadcrumbPicker.background#212f3d
button.background#458588
button.foreground#fbf1c7
button.hoverBackground#bdae93
button.secondaryBackground#fabd2f
button.secondaryForeground#fbf1c7
button.secondaryHoverBackground#bdae93
charts.blue#458588
charts.foreground#d5c7a1
charts.green#b8bb26
charts.lines#d5c7a1
charts.orange#fe8019
charts.purple#fabd2f
charts.red#d05000
charts.yellow#ffcc1b
checkbox.background#282828
checkbox.foreground#d5c7a1
commandCenter.activeBackground#212f3d
commandCenter.activeForeground#fbf1c7
commandCenter.background#282828
commandCenter.foreground#d5c7a1
debugConsole.errorForeground#d05000
debugConsole.infoForeground#d5c7a1
debugConsole.sourceForeground#d5c7a1
debugConsole.warningForeground#ffcc1b
debugConsoleInputIcon.foreground#d5c7a1
debugExceptionWidget.background#212f3d
debugIcon.breakpointCurrentStackframeForeground#ffcc1b
debugIcon.breakpointDisabledForeground#bdae93
debugIcon.breakpointForeground#d05000
debugIcon.breakpointStackframeForeground#b59b4d
debugIcon.breakpointUnverifiedForeground#504945
debugIcon.continueForeground#b8bb26
debugIcon.disconnectForeground#d05000
debugIcon.pauseForeground#458588
debugIcon.restartForeground#b8bb26
debugIcon.startForeground#b8bb26
debugIcon.stepBackForeground#b59b4d
debugIcon.stepIntoForeground#8f3f71
debugIcon.stepOutForeground#fabd2f
debugIcon.stepOverForeground#458588
debugIcon.stopForeground#d05000
debugTokenExpression.boolean#fe8019
debugTokenExpression.error#d05000
debugTokenExpression.name#fabd2f
debugTokenExpression.number#fe8019
debugTokenExpression.string#b8bb26
debugTokenExpression.value#d5c7a1
debugToolBar.background#212f3d
debugView.stateLabelBackground#458588
debugView.stateLabelForeground#fbf1c7
debugView.valueChangedHighlight#458588
descriptionForeground#928374
diffEditor.diagonalFill#504945
diffEditor.insertedTextBackground#b8bb2620
diffEditor.removedTextBackground#d0500020
disabledForeground#bdae93
dropdown.background#282828
dropdown.foreground#d5c7a1
dropdown.listBackground#282828
editor.background#282828
editor.findMatchBackground#ffcc1b6f
editor.findMatchHighlightBackground#fe80196f
editor.findRangeHighlightBackground#212f3d6f
editor.foreground#d5c7a1
editor.hoverHighlightBackground#5049456f
editor.inactiveSelectionBackground#504945
editor.lineHighlightBackground#212f3d
editor.rangeHighlightBackground#212f3d6f
editor.selectionBackground#504945
editor.selectionHighlightBackground#212f3d
editor.snippetFinalTabstopHighlightBackground#928374
editor.snippetTabstopHighlightBackground#504945
editor.wordHighlightBackground#5049456f
editor.wordHighlightStrongBackground#9283746f
editorBracketHighlight.foreground1#d05000
editorBracketHighlight.foreground2#fe8019
editorBracketHighlight.foreground3#ffcc1b
editorBracketHighlight.foreground4#b8bb26
editorBracketHighlight.foreground5#458588
editorBracketHighlight.foreground6#fabd2f
editorBracketHighlight.unexpectedBracket.foreground#b59b4d
editorBracketMatch.background#504945
editorCodeLens.foreground#504945
editorCursor.foreground#d5c7a1
editorError.foreground#d05000
editorGroup.background#282828
editorGroup.dropBackground#5049456f
editorGroup.dropIntoPromptBackground#282828
editorGroup.dropIntoPromptForeground#ebdbb2
editorGroup.emptyBackground#282828
editorGroupHeader.noTabsBackground#212f3d
editorGroupHeader.tabsBackground#212f3d
editorGutter.addedBackground#b8bb26
editorGutter.background#282828
editorGutter.commentRangeForeground#bdae93
editorGutter.deletedBackground#d05000
editorGutter.foldingControlForeground#d5c7a1
editorGutter.modifiedBackground#fabd2f
editorHint.foreground#458588
editorHoverWidget.background#282828
editorHoverWidget.foreground#d5c7a1
editorIndentGuide.activeBackground#bdae93
editorIndentGuide.background#928374
editorInfo.foreground#8f3f71
editorInlayHint.background#212f3d
editorInlayHint.foreground#d5c7a1
editorInlayHint.parameterBackground#212f3d
editorInlayHint.parameterForeground#d5c7a1
editorInlayHint.typeBackground#212f3d
editorInlayHint.typeForeground#d5c7a1
editorLightBulb.foreground#ffcc1b
editorLightBulbAutoFix.foreground#458588
editorLineNumber.activeForeground#bdae93
editorLineNumber.foreground#928374
editorLink.activeForeground#458588
editorMarkerNavigation.background#212f3d
editorMarkerNavigationError.background#d05000
editorMarkerNavigationError.headerBackground#d0500020
editorMarkerNavigationInfo.background#458588
editorMarkerNavigationInfo.headerBackground#8f3f7120
editorMarkerNavigationWarning.background#ffcc1b
editorMarkerNavigationWarning.headerBackground#ffcc1b20
editorOverviewRuler.addedForeground#b8bb26
editorOverviewRuler.bracketMatchForeground#ebdbb2
editorOverviewRuler.commonContentForeground#b59b4d
editorOverviewRuler.currentContentForeground#458588
editorOverviewRuler.deletedForeground#d05000
editorOverviewRuler.errorForeground#d05000
editorOverviewRuler.findMatchForeground#ffcc1b6f
editorOverviewRuler.incomingContentForeground#b8bb26
editorOverviewRuler.infoForeground#8f3f71
editorOverviewRuler.modifiedForeground#fabd2f
editorOverviewRuler.rangeHighlightForeground#9283746f
editorOverviewRuler.selectionHighlightForeground#5049456f
editorOverviewRuler.warningForeground#ffcc1b
editorOverviewRuler.wordHighlightForeground#fbf1c76f
editorOverviewRuler.wordHighlightStrongForeground#4585886f
editorPane.background#282828
editorRuler.foreground#928374
editorSuggestWidget.background#212f3d
editorSuggestWidget.focusHighlightForeground#fbf1c7
editorSuggestWidget.foreground#d5c7a1
editorSuggestWidget.highlightForeground#458588
editorSuggestWidget.selectedBackground#504945
editorSuggestWidget.selectedForeground#ebdbb2
editorWarning.foreground#ffcc1b
editorWhitespace.foreground#928374
editorWidget.background#282828
editorWidget.foreground#d5c7a1
errorForeground#d05000
extensionBadge.remoteBackground#fe8019
extensionBadge.remoteForeground#fbf1c7
extensionButton.prominentBackground#b8bb26
extensionButton.prominentForeground#fbf1c7
extensionButton.prominentHoverBackground#504945
extensionIcon.preReleaseForeground#fe8019
extensionIcon.starForeground#ffcc1b
extensionIcon.verifiedForeground#458588
foreground#d5c7a1
gitDecoration.addedResourceForeground#b8bb26
gitDecoration.conflictingResourceForeground#ffcc1b
gitDecoration.deletedResourceForeground#d05000
gitDecoration.ignoredResourceForeground#928374
gitDecoration.modifiedResourceForeground#fabd2f
gitDecoration.renamedResourceForeground#8f3f71
gitDecoration.stageDeletedResourceForeground#d05000
gitDecoration.stageModifiedResourceForeground#fabd2f
gitDecoration.submoduleResourceForeground#b59b4d
gitDecoration.untrackedResourceForeground#fe8019
icon.foreground#bdae93
input.background#282828
input.foreground#d5c7a1
input.placeholderForeground#928374
inputOption.activeBackground#504945
inputOption.activeBorder#fe8019
inputOption.activeForeground#d5c7a1
inputValidation.errorBackground#d05000
inputValidation.errorBorder#d05000
inputValidation.errorForeground#d5c7a1
inputValidation.infoBackground#458588
inputValidation.infoBorder#458588
inputValidation.infoForeground#d5c7a1
inputValidation.warningBackground#ffcc1b
inputValidation.warningBorder#ffcc1b
inputValidation.warningForeground#d5c7a1
keybindingLabel.background#504945
keybindingLabel.foreground#d5c7a1
keybindingTable.headerBackground#504945
keybindingTable.rowsBackground#212f3d
list.activeSelectionBackground#504945
list.activeSelectionForeground#d5c7a1
list.dropBackground#fbf1c7
list.errorForeground#d05000
list.filterMatchBackground#504945
list.focusBackground#504945
list.focusForeground#d5c7a1
list.highlightForeground#fbf1c7
list.hoverBackground#928374
list.hoverForeground#d5c7a1
list.inactiveFocusBackground#504945
list.inactiveSelectionBackground#504945
list.inactiveSelectionForeground#d5c7a1
list.invalidItemForeground#d05000
list.warningForeground#ffcc1b
listFilterWidget.background#282828
listFilterWidget.noMatchesOutline#d05000
menu.background#212f3d
menu.foreground#d5c7a1
menu.selectionBackground#504945
menu.selectionForeground#d5c7a1
menu.separatorBackground#fbf1c7
menubar.selectionBackground#212f3d
menubar.selectionForeground#d5c7a1
merge.currentContentBackground#45858840
merge.currentHeaderBackground#45858840
merge.incomingContentBackground#b8bb2660
merge.incomingHeaderBackground#b8bb2660
minimap.background#282828
minimap.errorHighlight#d05000
minimap.findMatchHighlight#ffcc1b6f
minimap.selectionHighlight#5049456f
minimap.selectionOccurrenceHighlight#928374
minimap.warningHighlight#ffcc1b
minimapGutter.addedBackground#b8bb26
minimapGutter.deletedBackground#d05000
minimapGutter.modifiedBackground#fabd2f
notebook.cellBorderColor#928374
notebook.cellEditorBackground#282828
notebook.cellHoverBackground#212f3d
notebook.cellToolbarSeparator#504945
notebook.editorBackground#282828
notebook.focusedCellBackground#504945
notebook.focusedCellBorder#458588
notebook.focusedEditorBorder#458588
notebook.inactiveFocusedCellBorder#928374
notebook.selectedCellBackground#504945
notebookStatusErrorIcon.foreground#d05000
notebookStatusRunningIcon.foreground#8f3f71
notebookStatusSuccessIcon.foreground#b8bb26
notification.background#504945
notification.buttonBackground#458588
notification.buttonForeground#fbf1c7
notification.buttonHoverBackground#504945
notification.errorBackground#d05000
notification.errorForeground#fbf1c7
notification.foreground#d5c7a1
notification.infoBackground#8f3f71
notification.infoForeground#fbf1c7
notification.warningBackground#ffcc1b
notification.warningForeground#fbf1c7
notificationCenterHeader.background#212f3d
notificationCenterHeader.foreground#d5c7a1
notificationLink.foreground#458588
notifications.background#504945
notifications.foreground#d5c7a1
notificationsErrorIcon.foreground#d05000
notificationsInfoIcon.foreground#458588
notificationsWarningIcon.foreground#ffcc1b
panel.background#282828
panel.dropBackground#212f3d6f
panel.dropBorder#212f3d6f
panelTitle.activeForeground#d5c7a1
panelTitle.inactiveForeground#928374
peekViewEditor.background#212f3d
peekViewEditor.matchHighlightBackground#fe80196f
peekViewEditorGutter.background#212f3d
peekViewResult.background#282828
peekViewResult.fileForeground#d5c7a1
peekViewResult.lineForeground#928374
peekViewResult.matchHighlightBackground#fe80196f
peekViewResult.selectionBackground#504945
peekViewResult.selectionForeground#d5c7a1
peekViewTitle.background#504945
peekViewTitleDescription.foreground#928374
peekViewTitleLabel.foreground#d5c7a1
pickerGroup.foreground#928374
ports.iconRunningProcessForeground#fe8019
problemsErrorIcon.foreground#d05000
problemsInfoIcon.foreground#8f3f71
problemsWarningIcon.foreground#ffcc1b
progressBar.background#928374
quickInput.background#212f3d
quickInput.foreground#d5c7a1
quickInputList.focusBackground#928374
quickInputList.focusForeground#fbf1c7
quickInputList.focusIconForeground#fbf1c7
scrollbar.shadow#212f3d
scrollbarSlider.activeBackground#bdae936f
scrollbarSlider.background#5049456f
scrollbarSlider.hoverBackground#9283746f
searchEditor.findMatchBackground#ffcc1b6f
selection.background#458588
settings.checkboxBackground#212f3d
settings.checkboxForeground#d5c7a1
settings.dropdownBackground#212f3d
settings.dropdownForeground#d5c7a1
settings.focusedRowBackground#504945
settings.headerBorder#d5c7a1
settings.headerForeground#d5c7a1
settings.modifiedItemForeground#b8bb26
settings.modifiedItemIndicator#458588
settings.numberInputBackground#212f3d
settings.numberInputForeground#d5c7a1
settings.rowHoverBackground#504945
settings.sashBorder#d5c7a1
settings.textInputBackground#212f3d
settings.textInputForeground#d5c7a1
sideBar.background#212f3d
sideBar.dropBackground#5049456f
sideBar.foreground#d5c7a1
sideBarSectionHeader.background#928374
sideBarSectionHeader.foreground#d5c7a1
sideBarTitle.foreground#d5c7a1
statusBar.background#458588
statusBar.debuggingBackground#fe8019
statusBar.debuggingForeground#fbf1c7
statusBar.foreground#fbf1c7
statusBar.noFolderBackground#fabd2f
statusBar.noFolderForeground#fbf1c7
statusBarItem.activeBackground#928374
statusBarItem.errorBackground#d05000
statusBarItem.errorForeground#fbf1c7
statusBarItem.hoverBackground#504945
statusBarItem.prominentBackground#fabd2f
statusBarItem.prominentForeground#fbf1c7
statusBarItem.prominentHoverBackground#d05000
statusBarItem.remoteBackground#b8bb26
statusBarItem.remoteForeground#fbf1c7
statusBarItem.warningBackground#ffcc1b
statusBarItem.warningForeground#fbf1c7
symbolIcon.arrayForeground#d5c7a1
symbolIcon.booleanForeground#fe8019
symbolIcon.classForeground#ffcc1b
symbolIcon.colorForeground#f0f
symbolIcon.constantForeground#fe8019
symbolIcon.constructorForeground#458588
symbolIcon.enumeratorForeground#fe8019
symbolIcon.enumeratorMemberForeground#458588
symbolIcon.eventForeground#ffcc1b
symbolIcon.fieldForeground#d05000
symbolIcon.fileForeground#d5c7a1
symbolIcon.folderForeground#d5c7a1
symbolIcon.functionForeground#458588
symbolIcon.interfaceForeground#458588
symbolIcon.keyForeground#f0f
symbolIcon.keywordForeground#fabd2f
symbolIcon.methodForeground#458588
symbolIcon.moduleForeground#d5c7a1
symbolIcon.namespaceForeground#d5c7a1
symbolIcon.nullForeground#b59b4d
symbolIcon.numberForeground#fe8019
symbolIcon.objectForeground#f0f
symbolIcon.operatorForeground#f0f
symbolIcon.packageForeground#f0f
symbolIcon.propertyForeground#d5c7a1
symbolIcon.referenceForeground#f0f
symbolIcon.snippetForeground#d5c7a1
symbolIcon.stringForeground#b8bb26
symbolIcon.structForeground#ffcc1b
symbolIcon.textForeground#d5c7a1
symbolIcon.typeParameterForeground#f0f
symbolIcon.unitForeground#f0f
symbolIcon.variableForeground#d05000
tab.activeBackground#282828
tab.activeForeground#d5c7a1
tab.activeModifiedBorder#458588
tab.hoverBackground#504945
tab.inactiveBackground#212f3d
tab.inactiveForeground#928374
tab.inactiveModifiedBorder#458588
tab.unfocusedActiveBackground#282828
tab.unfocusedActiveForeground#bdae93
tab.unfocusedActiveModifiedBorder#458588
tab.unfocusedHoverBackground#504945
tab.unfocusedInactiveForeground#928374
tab.unfocusedInactiveModifiedBorder#458588
terminal.ansiBlack#282828
terminal.ansiBlue#458588
terminal.ansiBrightBlack#928374
terminal.ansiBrightBlue#458588
terminal.ansiBrightCyan#8f3f71
terminal.ansiBrightGreen#b8bb26
terminal.ansiBrightMagenta#fabd2f
terminal.ansiBrightRed#d05000
terminal.ansiBrightWhite#fbf1c7
terminal.ansiBrightYellow#ffcc1b
terminal.ansiCyan#8f3f71
terminal.ansiGreen#b8bb26
terminal.ansiMagenta#fabd2f
terminal.ansiRed#d05000
terminal.ansiWhite#d5c7a1
terminal.ansiYellow#ffcc1b
terminal.background#282828
terminal.foreground#d5c7a1
terminalCursor.foreground#d5c7a1
terminalOverviewRuler.cursorForeground#ff0000
terminalOverviewRuler.findMatchForeground#ff0000
testing.iconErrored#b59b4d
testing.iconFailed#d05000
testing.iconPassed#b8bb26
testing.iconQueued#ffcc1b
testing.iconSkipped#fabd2f
testing.iconUnset#bdae93
testing.message.error.decorationForeground#d5c7a1
testing.message.error.lineBackground#d0500020
testing.message.info.decorationForeground#d5c7a1
testing.message.info.lineBackground#45858820
testing.peekHeaderBackground#212f3d
testing.runAction#bdae93
textBlockQuote.background#212f3d
textBlockQuote.border#458588
textCodeBlock.background#282828
textLink.activeForeground#8f3f71
textLink.foreground#458588
textPreformat.foreground#458588
textSeparator.foreground#f0f
titleBar.activeBackground#282828
titleBar.activeForeground#d5c7a1
titleBar.inactiveBackground#212f3d
titleBar.inactiveForeground#928374
toolbar.activeBackground#928374
toolbar.hoverBackground#504945
tree.indentGuidesStroke#d5c7a1
walkThrough.embeddedEditorBackground#282828
welcomePage.background#282828
welcomePage.buttonBackground#212f3d
welcomePage.buttonHoverBackground#504945
welcomePage.progress.background#928374
welcomePage.progress.foreground#458588
welcomePage.tileBackground#212f3d
welcomePage.tileHoverBackground#504945
widget.shadow#282828

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#928374	italic
variable, string constant.other.placeholder, entity.name.variable.parameter, entity.name.variable.local, variable.parameter	#d05000	—
variable.other.object.property	#458588	—
constant.other.color	#b8bb26	—
invalid, invalid.illegal	#d05000	—
invalid.deprecated	#b59b4d	—
keyword, storage.modifier	#fabd2f	—
keyword.control, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.control.as	#fabd2f	—
keyword.other.using, keyword.other.namespace, keyword.other.class, keyword.other.new, keyword.other.event, keyword.other.this, keyword.other.await, keyword.other.var, keyword.other.package, keyword.other.import, variable.language.this, storage.type.ts	#fabd2f	—
keyword.type, storage.type.primitive	#8f3f71	—
storage.type.function	#458588	—
constant.other.color, punctuation, punctuation.section.class.end, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution	#d5c7a1	—
punctuation.section.embedded, variable.interpolation	#b59b4d	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#d05000	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#458588	—
meta.block variable.other	#d05000	—
support.other.variable, string.other.link	#d05000	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#fe8019	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#b8bb26
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#ffcc1b	—
storage.type, storage.modifier.package, storage.modifier.import	#ffcc1b	—
entity.name.variable.field	#458588	—
support.type	#8f3f71	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#8f3f71	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#d05000	—
variable.language	#d05000	italic
entity.name.method.js	#458588	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#458588	—
entity.other.attribute-name	#458588	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#ffcc1b	italic
entity.other.attribute-name.class	#ffcc1b	—
source.sass keyword.control	#458588	—
markup.inserted	#b8bb26	—
markup.deleted	#d05000	—
markup.changed	#fabd2f	—
string.regexp	#8f3f71	—
constant.character.escape	#8f3f71	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#458588	italic
source.js constant.other.object.key.js string.unquoted.label.js	#fabd2f	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#458588	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#458588	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#458588	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#458588	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#458588	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#458588	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#458588	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#458588	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#458588	—
text.html.markdown, punctuation.definition.list_item.markdown	#d5c7a1	—
text.html.markdown markup.inline.raw.markdown	#fabd2f	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#8f3f71	—
text.html.markdown meta.dummy.line-break	#928374	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#458588	—
markup.italic	#d05000	italic
markup.bold, markup.bold string	#d05000	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#d05000	bold
markup.underline	#fe8019	underline
markup.quote punctuation.definition.blockquote.markdown	#8f3f71	—
markup.quote	—	italic
string.other.link.title.markdown	#458588	—
string.other.link.description.title.markdown	#fabd2f	—
constant.other.reference.link.markdown	#ffcc1b	—
markup.raw.block	#fabd2f	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#fabd2f	—
variable.language.fenced.markdown	#d05000	—
meta.separator	#8f3f71	bold
markup.table	#fabd2f	—
token.info-token	#458588	—
token.warn-token	#ffcc1b	—
token.error-token	#d05000	—
token.debug-token	#fabd2f	—

VS Code preview

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

Tinted VSCode — base16-ashes

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.activeBackground#565e65
activityBar.background#1c2023
activityBar.dropBackground#f3f4f5
activityBar.foreground#c7ccd1
activityBar.inactiveForeground#747c84
activityBarBadge.background#ae95c7
activityBarBadge.foreground#f3f4f5
badge.background#1c2023
badge.foreground#c7ccd1
banner.background#565e65
banner.foreground#c7ccd1
banner.iconForeground#ae95c7
breadcrumb.activeSelectionForeground#f3f4f5
breadcrumb.background#393f45
breadcrumb.focusForeground#dfe2e5
breadcrumb.foreground#c7ccd1
breadcrumbPicker.background#393f45
button.background#ae95c7
button.foreground#f3f4f5
button.hoverBackground#adb3ba
button.secondaryBackground#c795ae
button.secondaryForeground#f3f4f5
button.secondaryHoverBackground#adb3ba
charts.blue#ae95c7
charts.foreground#c7ccd1
charts.green#95c7ae
charts.lines#c7ccd1
charts.orange#c7c795
charts.purple#c795ae
charts.red#c7ae95
charts.yellow#aec795
checkbox.background#1c2023
checkbox.foreground#c7ccd1
commandCenter.activeBackground#393f45
commandCenter.activeForeground#f3f4f5
commandCenter.background#1c2023
commandCenter.foreground#c7ccd1
debugConsole.errorForeground#c7ae95
debugConsole.infoForeground#c7ccd1
debugConsole.sourceForeground#c7ccd1
debugConsole.warningForeground#aec795
debugConsoleInputIcon.foreground#c7ccd1
debugExceptionWidget.background#393f45
debugIcon.breakpointCurrentStackframeForeground#aec795
debugIcon.breakpointDisabledForeground#adb3ba
debugIcon.breakpointForeground#c7ae95
debugIcon.breakpointStackframeForeground#c79595
debugIcon.breakpointUnverifiedForeground#565e65
debugIcon.continueForeground#95c7ae
debugIcon.disconnectForeground#c7ae95
debugIcon.pauseForeground#ae95c7
debugIcon.restartForeground#95c7ae
debugIcon.startForeground#95c7ae
debugIcon.stepBackForeground#c79595
debugIcon.stepIntoForeground#95aec7
debugIcon.stepOutForeground#c795ae
debugIcon.stepOverForeground#ae95c7
debugIcon.stopForeground#c7ae95
debugTokenExpression.boolean#c7c795
debugTokenExpression.error#c7ae95
debugTokenExpression.name#c795ae
debugTokenExpression.number#c7c795
debugTokenExpression.string#95c7ae
debugTokenExpression.value#c7ccd1
debugToolBar.background#393f45
debugView.stateLabelBackground#ae95c7
debugView.stateLabelForeground#f3f4f5
debugView.valueChangedHighlight#ae95c7
descriptionForeground#747c84
diffEditor.diagonalFill#565e65
diffEditor.insertedTextBackground#95c7ae20
diffEditor.removedTextBackground#c7ae9520
disabledForeground#adb3ba
dropdown.background#1c2023
dropdown.foreground#c7ccd1
dropdown.listBackground#1c2023
editor.background#1c2023
editor.findMatchBackground#aec7956f
editor.findMatchHighlightBackground#c7c7956f
editor.findRangeHighlightBackground#393f456f
editor.foreground#c7ccd1
editor.hoverHighlightBackground#565e656f
editor.inactiveSelectionBackground#565e65
editor.lineHighlightBackground#393f45
editor.rangeHighlightBackground#393f456f
editor.selectionBackground#565e65
editor.selectionHighlightBackground#393f45
editor.snippetFinalTabstopHighlightBackground#747c84
editor.snippetTabstopHighlightBackground#565e65
editor.wordHighlightBackground#565e656f
editor.wordHighlightStrongBackground#747c846f
editorBracketHighlight.foreground1#c7ae95
editorBracketHighlight.foreground2#c7c795
editorBracketHighlight.foreground3#aec795
editorBracketHighlight.foreground4#95c7ae
editorBracketHighlight.foreground5#ae95c7
editorBracketHighlight.foreground6#c795ae
editorBracketHighlight.unexpectedBracket.foreground#c79595
editorBracketMatch.background#565e65
editorCodeLens.foreground#565e65
editorCursor.foreground#c7ccd1
editorError.foreground#c7ae95
editorGroup.background#1c2023
editorGroup.dropBackground#565e656f
editorGroup.dropIntoPromptBackground#1c2023
editorGroup.dropIntoPromptForeground#dfe2e5
editorGroup.emptyBackground#1c2023
editorGroupHeader.noTabsBackground#393f45
editorGroupHeader.tabsBackground#393f45
editorGutter.addedBackground#95c7ae
editorGutter.background#1c2023
editorGutter.commentRangeForeground#adb3ba
editorGutter.deletedBackground#c7ae95
editorGutter.foldingControlForeground#c7ccd1
editorGutter.modifiedBackground#c795ae
editorHint.foreground#ae95c7
editorHoverWidget.background#1c2023
editorHoverWidget.foreground#c7ccd1
editorIndentGuide.activeBackground#adb3ba
editorIndentGuide.background#747c84
editorInfo.foreground#95aec7
editorInlayHint.background#393f45
editorInlayHint.foreground#c7ccd1
editorInlayHint.parameterBackground#393f45
editorInlayHint.parameterForeground#c7ccd1
editorInlayHint.typeBackground#393f45
editorInlayHint.typeForeground#c7ccd1
editorLightBulb.foreground#aec795
editorLightBulbAutoFix.foreground#ae95c7
editorLineNumber.activeForeground#adb3ba
editorLineNumber.foreground#747c84
editorLink.activeForeground#ae95c7
editorMarkerNavigation.background#393f45
editorMarkerNavigationError.background#c7ae95
editorMarkerNavigationError.headerBackground#c7ae9520
editorMarkerNavigationInfo.background#ae95c7
editorMarkerNavigationInfo.headerBackground#95aec720
editorMarkerNavigationWarning.background#aec795
editorMarkerNavigationWarning.headerBackground#aec79520
editorOverviewRuler.addedForeground#95c7ae
editorOverviewRuler.bracketMatchForeground#dfe2e5
editorOverviewRuler.commonContentForeground#c79595
editorOverviewRuler.currentContentForeground#ae95c7
editorOverviewRuler.deletedForeground#c7ae95
editorOverviewRuler.errorForeground#c7ae95
editorOverviewRuler.findMatchForeground#aec7956f
editorOverviewRuler.incomingContentForeground#95c7ae
editorOverviewRuler.infoForeground#95aec7
editorOverviewRuler.modifiedForeground#c795ae
editorOverviewRuler.rangeHighlightForeground#747c846f
editorOverviewRuler.selectionHighlightForeground#565e656f
editorOverviewRuler.warningForeground#aec795
editorOverviewRuler.wordHighlightForeground#f3f4f56f
editorOverviewRuler.wordHighlightStrongForeground#ae95c76f
editorPane.background#1c2023
editorRuler.foreground#747c84
editorSuggestWidget.background#393f45
editorSuggestWidget.focusHighlightForeground#f3f4f5
editorSuggestWidget.foreground#c7ccd1
editorSuggestWidget.highlightForeground#ae95c7
editorSuggestWidget.selectedBackground#565e65
editorSuggestWidget.selectedForeground#dfe2e5
editorWarning.foreground#aec795
editorWhitespace.foreground#747c84
editorWidget.background#1c2023
editorWidget.foreground#c7ccd1
errorForeground#c7ae95
extensionBadge.remoteBackground#c7c795
extensionBadge.remoteForeground#f3f4f5
extensionButton.prominentBackground#95c7ae
extensionButton.prominentForeground#f3f4f5
extensionButton.prominentHoverBackground#565e65
extensionIcon.preReleaseForeground#c7c795
extensionIcon.starForeground#aec795
extensionIcon.verifiedForeground#ae95c7
foreground#c7ccd1
gitDecoration.addedResourceForeground#95c7ae
gitDecoration.conflictingResourceForeground#aec795
gitDecoration.deletedResourceForeground#c7ae95
gitDecoration.ignoredResourceForeground#747c84
gitDecoration.modifiedResourceForeground#c795ae
gitDecoration.renamedResourceForeground#95aec7
gitDecoration.stageDeletedResourceForeground#c7ae95
gitDecoration.stageModifiedResourceForeground#c795ae
gitDecoration.submoduleResourceForeground#c79595
gitDecoration.untrackedResourceForeground#c7c795
icon.foreground#adb3ba
input.background#1c2023
input.foreground#c7ccd1
input.placeholderForeground#747c84
inputOption.activeBackground#565e65
inputOption.activeBorder#c7c795
inputOption.activeForeground#c7ccd1
inputValidation.errorBackground#c7ae95
inputValidation.errorBorder#c7ae95
inputValidation.errorForeground#c7ccd1
inputValidation.infoBackground#ae95c7
inputValidation.infoBorder#ae95c7
inputValidation.infoForeground#c7ccd1
inputValidation.warningBackground#aec795
inputValidation.warningBorder#aec795
inputValidation.warningForeground#c7ccd1
keybindingLabel.background#565e65
keybindingLabel.foreground#c7ccd1
keybindingTable.headerBackground#565e65
keybindingTable.rowsBackground#393f45
list.activeSelectionBackground#565e65
list.activeSelectionForeground#c7ccd1
list.dropBackground#f3f4f5
list.errorForeground#c7ae95
list.filterMatchBackground#565e65
list.focusBackground#565e65
list.focusForeground#c7ccd1
list.highlightForeground#f3f4f5
list.hoverBackground#747c84
list.hoverForeground#c7ccd1
list.inactiveFocusBackground#565e65
list.inactiveSelectionBackground#565e65
list.inactiveSelectionForeground#c7ccd1
list.invalidItemForeground#c7ae95
list.warningForeground#aec795
listFilterWidget.background#1c2023
listFilterWidget.noMatchesOutline#c7ae95
menu.background#393f45
menu.foreground#c7ccd1
menu.selectionBackground#565e65
menu.selectionForeground#c7ccd1
menu.separatorBackground#f3f4f5
menubar.selectionBackground#393f45
menubar.selectionForeground#c7ccd1
merge.currentContentBackground#ae95c740
merge.currentHeaderBackground#ae95c740
merge.incomingContentBackground#95c7ae60
merge.incomingHeaderBackground#95c7ae60
minimap.background#1c2023
minimap.errorHighlight#c7ae95
minimap.findMatchHighlight#aec7956f
minimap.selectionHighlight#565e656f
minimap.selectionOccurrenceHighlight#747c84
minimap.warningHighlight#aec795
minimapGutter.addedBackground#95c7ae
minimapGutter.deletedBackground#c7ae95
minimapGutter.modifiedBackground#c795ae
notebook.cellBorderColor#747c84
notebook.cellEditorBackground#1c2023
notebook.cellHoverBackground#393f45
notebook.cellToolbarSeparator#565e65
notebook.editorBackground#1c2023
notebook.focusedCellBackground#565e65
notebook.focusedCellBorder#ae95c7
notebook.focusedEditorBorder#ae95c7
notebook.inactiveFocusedCellBorder#747c84
notebook.selectedCellBackground#565e65
notebookStatusErrorIcon.foreground#c7ae95
notebookStatusRunningIcon.foreground#95aec7
notebookStatusSuccessIcon.foreground#95c7ae
notification.background#565e65
notification.buttonBackground#ae95c7
notification.buttonForeground#f3f4f5
notification.buttonHoverBackground#565e65
notification.errorBackground#c7ae95
notification.errorForeground#f3f4f5
notification.foreground#c7ccd1
notification.infoBackground#95aec7
notification.infoForeground#f3f4f5
notification.warningBackground#aec795
notification.warningForeground#f3f4f5
notificationCenterHeader.background#393f45
notificationCenterHeader.foreground#c7ccd1
notificationLink.foreground#ae95c7
notifications.background#565e65
notifications.foreground#c7ccd1
notificationsErrorIcon.foreground#c7ae95
notificationsInfoIcon.foreground#ae95c7
notificationsWarningIcon.foreground#aec795
panel.background#1c2023
panel.dropBackground#393f456f
panel.dropBorder#393f456f
panelTitle.activeForeground#c7ccd1
panelTitle.inactiveForeground#747c84
peekViewEditor.background#393f45
peekViewEditor.matchHighlightBackground#c7c7956f
peekViewEditorGutter.background#393f45
peekViewResult.background#1c2023
peekViewResult.fileForeground#c7ccd1
peekViewResult.lineForeground#747c84
peekViewResult.matchHighlightBackground#c7c7956f
peekViewResult.selectionBackground#565e65
peekViewResult.selectionForeground#c7ccd1
peekViewTitle.background#565e65
peekViewTitleDescription.foreground#747c84
peekViewTitleLabel.foreground#c7ccd1
pickerGroup.foreground#747c84
ports.iconRunningProcessForeground#c7c795
problemsErrorIcon.foreground#c7ae95
problemsInfoIcon.foreground#95aec7
problemsWarningIcon.foreground#aec795
progressBar.background#747c84
quickInput.background#393f45
quickInput.foreground#c7ccd1
quickInputList.focusBackground#747c84
quickInputList.focusForeground#f3f4f5
quickInputList.focusIconForeground#f3f4f5
scrollbar.shadow#393f45
scrollbarSlider.activeBackground#adb3ba6f
scrollbarSlider.background#565e656f
scrollbarSlider.hoverBackground#747c846f
searchEditor.findMatchBackground#aec7956f
selection.background#ae95c7
settings.checkboxBackground#393f45
settings.checkboxForeground#c7ccd1
settings.dropdownBackground#393f45
settings.dropdownForeground#c7ccd1
settings.focusedRowBackground#565e65
settings.headerBorder#c7ccd1
settings.headerForeground#c7ccd1
settings.modifiedItemForeground#95c7ae
settings.modifiedItemIndicator#ae95c7
settings.numberInputBackground#393f45
settings.numberInputForeground#c7ccd1
settings.rowHoverBackground#565e65
settings.sashBorder#c7ccd1
settings.textInputBackground#393f45
settings.textInputForeground#c7ccd1
sideBar.background#393f45
sideBar.dropBackground#565e656f
sideBar.foreground#c7ccd1
sideBarSectionHeader.background#747c84
sideBarSectionHeader.foreground#c7ccd1
sideBarTitle.foreground#c7ccd1
statusBar.background#ae95c7
statusBar.debuggingBackground#c7c795
statusBar.debuggingForeground#f3f4f5
statusBar.foreground#f3f4f5
statusBar.noFolderBackground#c795ae
statusBar.noFolderForeground#f3f4f5
statusBarItem.activeBackground#747c84
statusBarItem.errorBackground#c7ae95
statusBarItem.errorForeground#f3f4f5
statusBarItem.hoverBackground#565e65
statusBarItem.prominentBackground#c795ae
statusBarItem.prominentForeground#f3f4f5
statusBarItem.prominentHoverBackground#c7ae95
statusBarItem.remoteBackground#95c7ae
statusBarItem.remoteForeground#f3f4f5
statusBarItem.warningBackground#aec795
statusBarItem.warningForeground#f3f4f5
symbolIcon.arrayForeground#c7ccd1
symbolIcon.booleanForeground#c7c795
symbolIcon.classForeground#aec795
symbolIcon.colorForeground#f0f
symbolIcon.constantForeground#c7c795
symbolIcon.constructorForeground#ae95c7
symbolIcon.enumeratorForeground#c7c795
symbolIcon.enumeratorMemberForeground#ae95c7
symbolIcon.eventForeground#aec795
symbolIcon.fieldForeground#c7ae95
symbolIcon.fileForeground#c7ccd1
symbolIcon.folderForeground#c7ccd1
symbolIcon.functionForeground#ae95c7
symbolIcon.interfaceForeground#ae95c7
symbolIcon.keyForeground#f0f
symbolIcon.keywordForeground#c795ae
symbolIcon.methodForeground#ae95c7
symbolIcon.moduleForeground#c7ccd1
symbolIcon.namespaceForeground#c7ccd1
symbolIcon.nullForeground#c79595
symbolIcon.numberForeground#c7c795
symbolIcon.objectForeground#f0f
symbolIcon.operatorForeground#f0f
symbolIcon.packageForeground#f0f
symbolIcon.propertyForeground#c7ccd1
symbolIcon.referenceForeground#f0f
symbolIcon.snippetForeground#c7ccd1
symbolIcon.stringForeground#95c7ae
symbolIcon.structForeground#aec795
symbolIcon.textForeground#c7ccd1
symbolIcon.typeParameterForeground#f0f
symbolIcon.unitForeground#f0f
symbolIcon.variableForeground#c7ae95
tab.activeBackground#1c2023
tab.activeForeground#c7ccd1
tab.activeModifiedBorder#ae95c7
tab.hoverBackground#565e65
tab.inactiveBackground#393f45
tab.inactiveForeground#747c84
tab.inactiveModifiedBorder#ae95c7
tab.unfocusedActiveBackground#1c2023
tab.unfocusedActiveForeground#adb3ba
tab.unfocusedActiveModifiedBorder#ae95c7
tab.unfocusedHoverBackground#565e65
tab.unfocusedInactiveForeground#747c84
tab.unfocusedInactiveModifiedBorder#ae95c7
terminal.ansiBlack#1c2023
terminal.ansiBlue#ae95c7
terminal.ansiBrightBlack#747c84
terminal.ansiBrightBlue#ae95c7
terminal.ansiBrightCyan#95aec7
terminal.ansiBrightGreen#95c7ae
terminal.ansiBrightMagenta#c795ae
terminal.ansiBrightRed#c7ae95
terminal.ansiBrightWhite#f3f4f5
terminal.ansiBrightYellow#aec795
terminal.ansiCyan#95aec7
terminal.ansiGreen#95c7ae
terminal.ansiMagenta#c795ae
terminal.ansiRed#c7ae95
terminal.ansiWhite#c7ccd1
terminal.ansiYellow#aec795
terminal.background#1c2023
terminal.foreground#c7ccd1
terminalCursor.foreground#c7ccd1
terminalOverviewRuler.cursorForeground#ff0000
terminalOverviewRuler.findMatchForeground#ff0000
testing.iconErrored#c79595
testing.iconFailed#c7ae95
testing.iconPassed#95c7ae
testing.iconQueued#aec795
testing.iconSkipped#c795ae
testing.iconUnset#adb3ba
testing.message.error.decorationForeground#c7ccd1
testing.message.error.lineBackground#c7ae9520
testing.message.info.decorationForeground#c7ccd1
testing.message.info.lineBackground#ae95c720
testing.peekHeaderBackground#393f45
testing.runAction#adb3ba
textBlockQuote.background#393f45
textBlockQuote.border#ae95c7
textCodeBlock.background#1c2023
textLink.activeForeground#95aec7
textLink.foreground#ae95c7
textPreformat.foreground#ae95c7
textSeparator.foreground#f0f
titleBar.activeBackground#1c2023
titleBar.activeForeground#c7ccd1
titleBar.inactiveBackground#393f45
titleBar.inactiveForeground#747c84
toolbar.activeBackground#747c84
toolbar.hoverBackground#565e65
tree.indentGuidesStroke#c7ccd1
walkThrough.embeddedEditorBackground#1c2023
welcomePage.background#1c2023
welcomePage.buttonBackground#393f45
welcomePage.buttonHoverBackground#565e65
welcomePage.progress.background#747c84
welcomePage.progress.foreground#ae95c7
welcomePage.tileBackground#393f45
welcomePage.tileHoverBackground#565e65
widget.shadow#1c2023

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#747c84	italic
variable, string constant.other.placeholder, entity.name.variable.parameter, entity.name.variable.local, variable.parameter	#c7ae95	—
variable.other.object.property	#ae95c7	—
constant.other.color	#95c7ae	—
invalid, invalid.illegal	#c7ae95	—
invalid.deprecated	#c79595	—
keyword, storage.modifier	#c795ae	—
keyword.control, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.control.as	#c795ae	—
keyword.other.using, keyword.other.namespace, keyword.other.class, keyword.other.new, keyword.other.event, keyword.other.this, keyword.other.await, keyword.other.var, keyword.other.package, keyword.other.import, variable.language.this, storage.type.ts	#c795ae	—
keyword.type, storage.type.primitive	#95aec7	—
storage.type.function	#ae95c7	—
constant.other.color, punctuation, punctuation.section.class.end, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution	#c7ccd1	—
punctuation.section.embedded, variable.interpolation	#c79595	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#c7ae95	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#ae95c7	—
meta.block variable.other	#c7ae95	—
support.other.variable, string.other.link	#c7ae95	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#c7c795	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#95c7ae
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#aec795	—
storage.type, storage.modifier.package, storage.modifier.import	#aec795	—
entity.name.variable.field	#ae95c7	—
support.type	#95aec7	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#95aec7	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#c7ae95	—
variable.language	#c7ae95	italic
entity.name.method.js	#ae95c7	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#ae95c7	—
entity.other.attribute-name	#ae95c7	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#aec795	italic
entity.other.attribute-name.class	#aec795	—
source.sass keyword.control	#ae95c7	—
markup.inserted	#95c7ae	—
markup.deleted	#c7ae95	—
markup.changed	#c795ae	—
string.regexp	#95aec7	—
constant.character.escape	#95aec7	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#ae95c7	italic
source.js constant.other.object.key.js string.unquoted.label.js	#c795ae	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#ae95c7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ae95c7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ae95c7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ae95c7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ae95c7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ae95c7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ae95c7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ae95c7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ae95c7	—
text.html.markdown, punctuation.definition.list_item.markdown	#c7ccd1	—
text.html.markdown markup.inline.raw.markdown	#c795ae	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#95aec7	—
text.html.markdown meta.dummy.line-break	#747c84	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#ae95c7	—
markup.italic	#c7ae95	italic
markup.bold, markup.bold string	#c7ae95	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#c7ae95	bold
markup.underline	#c7c795	underline
markup.quote punctuation.definition.blockquote.markdown	#95aec7	—
markup.quote	—	italic
string.other.link.title.markdown	#ae95c7	—
string.other.link.description.title.markdown	#c795ae	—
constant.other.reference.link.markdown	#aec795	—
markup.raw.block	#c795ae	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#c795ae	—
variable.language.fenced.markdown	#c7ae95	—
meta.separator	#95aec7	bold
markup.table	#c795ae	—
token.info-token	#ae95c7	—
token.warn-token	#aec795	—
token.error-token	#c7ae95	—
token.debug-token	#c795ae	—