Technicolor

Name: Technicolor
Author: Opposite Fish

Publisher: Opposite FishThemes in package: 8

Eight bold dark themes drawn from a century of film.

Open in VS Code GitHub

Color themes

VS Code preview

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

Technicolor — Technicolor Neon

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#FF2D95
activityBar.background#12101A
activityBar.border#2A2838
activityBar.foreground#FF2D95
activityBar.inactiveForeground#555068
activityBarBadge.background#00DDFF
activityBarBadge.foreground#12101A
badge.background#FF2D95
badge.foreground#12101A
banner.background#1E1C28
banner.foreground#C0BCD0
banner.iconForeground#FF2D95
breadcrumb.activeSelectionForeground#FF2D95
breadcrumb.background#12101A
breadcrumb.focusForeground#C0BCD0
breadcrumb.foreground#8898B0
breadcrumbPicker.background#1E1C28
button.background#FF2D95
button.foreground#FFFFFF
button.hoverBackground#E02080
button.secondaryBackground#2A2838
button.secondaryForeground#C0BCD0
button.secondaryHoverBackground#3A3848
charts.blue#3388EE
charts.foreground#C0BCD0
charts.green#33BB55
charts.lines#C0BCD0
charts.orange#C09868
charts.purple#C850C0
charts.red#E83333
charts.yellow#FFAA00
chat.avatarBackground#1E1C28
chat.avatarForeground#FF2D95
chat.requestBackground#1E1C28
chat.requestBorder#2A2838
chat.slashCommandBackground#FF2D9522
chat.slashCommandForeground#FF2D95
commandCenter.activeBackground#1E1C28
commandCenter.activeForeground#C0BCD0
commandCenter.background#1E1C28
commandCenter.border#2A2838
commandCenter.foreground#C0BCD0
debugExceptionWidget.background#E8333322
debugExceptionWidget.border#E83333
debugIcon.breakpointDisabledForeground#555068
debugIcon.breakpointForeground#E83333
debugIcon.disconnectForeground#E83333
debugIcon.pauseForeground#FFAA00
debugIcon.restartForeground#33BB55
debugIcon.startForeground#33BB55
debugIcon.stepIntoForeground#FF2D95
debugIcon.stepOutForeground#FF2D95
debugIcon.stepOverForeground#FF2D95
debugIcon.stopForeground#E83333
debugTokenExpression.boolean#A898C0
debugTokenExpression.error#E83333
debugTokenExpression.name#00DDFF
debugTokenExpression.number#A898C0
debugTokenExpression.string#88B0A0
debugTokenExpression.value#88B0A0
debugToolBar.background#1E1C28
debugToolBar.border#2A2838
descriptionForeground#8898B0
diffEditor.diagonalFill#2A2838
diffEditor.insertedLineBackground#33BB5515
diffEditor.insertedTextBackground#33BB5522
diffEditor.removedLineBackground#E8333315
diffEditor.removedTextBackground#E8333322
disabledForeground#555068
dropdown.background#1E1C28
dropdown.border#2A2838
dropdown.foreground#C0BCD0
dropdown.listBackground#1E1C28
editor.background#12101A
editor.findMatchBackground#FF2D9566
editor.findMatchBorder#FF2D95
editor.findMatchHighlightBackground#FF2D9544
editor.findRangeHighlightBackground#2266DD22
editor.foldBackground#1E1C2880
editor.foreground#C0BCD0
editor.hoverHighlightBackground#2266DD22
editor.inactiveSelectionBackground#2266DD33
editor.lineHighlightBackground#1E1C28
editor.lineHighlightBorder#262434
editor.linkedEditingBackground#FF2D9533
editor.rangeHighlightBackground#2266DD15
editor.selectionBackground#2266DD55
editor.selectionHighlightBackground#2266DD33
editor.wordHighlightBackground#FF2D9533
editor.wordHighlightStrongBackground#FF2D9566
editorBracketHighlight.foreground1#FF2D95
editorBracketHighlight.foreground2#00DDFF
editorBracketHighlight.foreground3#A898C0
editorBracketHighlight.foreground4#8898B0
editorBracketHighlight.foreground5#88B0A0
editorBracketHighlight.foreground6#C0BCD0
editorBracketHighlight.unexpectedBracket.foreground#E83333
editorBracketMatch.background#FF2D9533
editorBracketMatch.border#FF2D95
editorCodeLens.foreground#555068
editorCursor.background#12101A
editorCursor.foreground#FF2D95
editorError.foreground#E83333
editorGhostText.foreground#55506888
editorGroup.border#2A2838
editorGroupHeader.noTabsBackground#12101A
editorGroupHeader.tabsBackground#12101A
editorGroupHeader.tabsBorder#2A2838
editorGutter.addedBackground#33BB55
editorGutter.commentRangeForeground#555068
editorGutter.deletedBackground#E83333
editorGutter.foldingControlForeground#C0BCD0
editorGutter.modifiedBackground#00DDFF
editorHint.foreground#33BB55
editorHoverWidget.background#1E1C28
editorHoverWidget.border#2A2838
editorHoverWidget.foreground#C0BCD0
editorIndentGuide.activeBackground#555068
editorIndentGuide.background#2A2838
editorInfo.foreground#00DDFF
editorInlayHint.background#1E1C2888
editorInlayHint.foreground#555068
editorInlayHint.parameterBackground#1E1C2888
editorInlayHint.parameterForeground#555068
editorInlayHint.typeBackground#1E1C2888
editorInlayHint.typeForeground#555068
editorLightBulb.foreground#FFAA00
editorLightBulbAutoFix.foreground#33BB55
editorLineNumber.activeForeground#FF2D95
editorLineNumber.foreground#555068
editorLink.activeForeground#00DDFF
editorMarkerNavigation.background#1E1C28
editorMarkerNavigationError.background#E83333
editorMarkerNavigationInfo.background#00DDFF
editorMarkerNavigationWarning.background#FFAA00
editorOverviewRuler.addedForeground#33BB55
editorOverviewRuler.border#12101A
editorOverviewRuler.bracketMatchForeground#FF2D9588
editorOverviewRuler.deletedForeground#E83333
editorOverviewRuler.errorForeground#E83333
editorOverviewRuler.findMatchForeground#FF2D95AA
editorOverviewRuler.infoForeground#00DDFF
editorOverviewRuler.modifiedForeground#00DDFF
editorOverviewRuler.selectionHighlightForeground#FF2D9555
editorOverviewRuler.warningForeground#FFAA00
editorOverviewRuler.wordHighlightForeground#FF2D9566
editorOverviewRuler.wordHighlightStrongForeground#FF2D9577
editorRuler.foreground#2A2838
editorStickyScroll.background#1E1C28
editorStickyScrollHover.background#1E1C28
editorSuggestWidget.background#1E1C28
editorSuggestWidget.border#2A2838
editorSuggestWidget.focusHighlightForeground#FF2D95
editorSuggestWidget.foreground#C0BCD0
editorSuggestWidget.highlightForeground#FF2D95
editorSuggestWidget.selectedBackground#2A2838
editorUnnecessaryCode.opacity#000000AA
editorWarning.foreground#FFAA00
editorWhitespace.foreground#2A2838
editorWidget.background#1E1C28
editorWidget.border#2A2838
editorWidget.foreground#C0BCD0
errorForeground#E83333
extensionBadge.remoteBackground#FF2D95
extensionBadge.remoteForeground#12101A
extensionButton.background#FF2D95
extensionButton.foreground#FFFFFF
extensionButton.hoverBackground#E02080
extensionButton.prominentBackground#FF2D95
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#E02080
extensionIcon.preReleaseForeground#FFAA00
extensionIcon.sponsorForeground#00DDFF
extensionIcon.starForeground#FFAA00
extensionIcon.verifiedForeground#00DDFF
focusBorder#FF2D9588
foreground#C0BCD0
gitDecoration.addedResourceForeground#33BB55
gitDecoration.conflictingResourceForeground#FFAA00
gitDecoration.deletedResourceForeground#E83333
gitDecoration.ignoredResourceForeground#555068
gitDecoration.modifiedResourceForeground#00DDFF
gitDecoration.renamedResourceForeground#00DDFF
gitDecoration.stageDeletedResourceForeground#E83333
gitDecoration.stageModifiedResourceForeground#00DDFF
gitDecoration.submoduleResourceForeground#A898C0
gitDecoration.untrackedResourceForeground#33BB55
icon.foreground#C0BCD0
inlineChat.background#1E1C28
inlineChat.border#2A2838
inlineChat.shadow#00000055
inlineChatDiff.inserted#33BB5522
inlineChatDiff.removed#E8333322
inlineChatInput.background#12101A
inlineChatInput.border#2A2838
inlineChatInput.focusBorder#FF2D9588
inlineChatInput.placeholderForeground#555068
input.background#1E1C28
input.border#2A2838
input.foreground#C0BCD0
input.placeholderForeground#555068
inputOption.activeBackground#FF2D9533
inputOption.activeBorder#FF2D95
inputOption.activeForeground#FFFFFF
inputValidation.errorBackground#E8333333
inputValidation.errorBorder#E83333
inputValidation.errorForeground#E83333
inputValidation.infoBackground#00DDFF33
inputValidation.infoBorder#00DDFF
inputValidation.infoForeground#00DDFF
inputValidation.warningBackground#FFAA0033
inputValidation.warningBorder#FFAA00
inputValidation.warningForeground#FFAA00
keybindingLabel.background#2A283888
keybindingLabel.border#3A384888
keybindingLabel.bottomBorder#3A384888
keybindingLabel.foreground#C0BCD0
list.activeSelectionBackground#2A2838
list.activeSelectionForeground#FF2D95
list.activeSelectionIconForeground#C0BCD0
list.dropBackground#FF2D9522
list.errorForeground#E83333
list.focusBackground#2A2838
list.focusForeground#FF2D95
list.focusOutline#FF2D9555
list.highlightForeground#FF2D95
list.hoverBackground#1E1C28
list.hoverForeground#C0BCD0
list.inactiveSelectionBackground#1E1C28
list.inactiveSelectionForeground#C0BCD0
list.invalidItemForeground#E8333388
list.warningForeground#FFAA00
menu.background#1E1C28
menu.foreground#C0BCD0
menu.selectionBackground#FF2D9522
menu.selectionForeground#C0BCD0
menu.separatorBackground#2A2838
menubar.selectionBackground#FF2D9522
menubar.selectionForeground#C0BCD0
merge.commonContentBackground#FFAA0022
merge.commonHeaderBackground#FFAA0044
merge.currentContentBackground#33BB5522
merge.currentHeaderBackground#33BB5544
merge.incomingContentBackground#00DDFF22
merge.incomingHeaderBackground#00DDFF44
minimap.errorHighlight#E83333AA
minimap.findMatchHighlight#FF2D95AA
minimap.selectionHighlight#2266DD55
minimap.warningHighlight#FFAA00AA
minimapGutter.addedBackground#33BB55
minimapGutter.deletedBackground#E83333
minimapGutter.modifiedBackground#00DDFF
minimapSlider.activeBackground#C0BCD035
minimapSlider.background#C0BCD015
minimapSlider.hoverBackground#C0BCD025
notebook.cellBorderColor#2A2838
notebook.cellEditorBackground#1E1C28
notebook.cellInsertionIndicator#FF2D95
notebook.cellStatusBarItemHoverBackground#FF2D9522
notebook.cellToolbarSeparator#2A2838
notebook.editorBackground#12101A
notebook.focusedCellBorder#FF2D95
notebook.selectedCellBackground#FF2D9511
notebook.selectedCellBorder#2A2838
notebookStatusErrorIcon.foreground#E83333
notebookStatusRunningIcon.foreground#00DDFF
notebookStatusSuccessIcon.foreground#33BB55
notificationCenterHeader.background#1E1C28
notificationCenterHeader.foreground#C0BCD0
notificationLink.foreground#00DDFF
notifications.background#1E1C28
notifications.border#2A2838
notifications.foreground#C0BCD0
notificationsErrorIcon.foreground#E83333
notificationsInfoIcon.foreground#00DDFF
notificationsWarningIcon.foreground#FFAA00
panel.background#12101A
panel.border#2A2838
panel.foreground#C0BCD0
panelSection.border#2A2838
panelSectionHeader.background#1E1C28
panelTitle.activeBorder#FF2D95
panelTitle.activeForeground#FF2D95
panelTitle.inactiveForeground#555068
peekView.border#FF2D95
peekViewEditor.background#181620
peekViewEditor.matchHighlightBackground#FF2D9555
peekViewEditorGutter.background#1E1C28
peekViewResult.background#1E1C28
peekViewResult.fileForeground#C0BCD0
peekViewResult.lineForeground#8898B0
peekViewResult.matchHighlightBackground#FF2D9555
peekViewResult.selectionBackground#2A2838
peekViewResult.selectionForeground#C0BCD0
peekViewTitle.background#1E1C28
peekViewTitleDescription.foreground#8898B0
peekViewTitleLabel.foreground#FF2D95
pickerGroup.border#2A2838
pickerGroup.foreground#FF2D95
ports.iconRunningProcessForeground#33BB55
problemsErrorIcon.foreground#E83333
problemsInfoIcon.foreground#00DDFF
problemsWarningIcon.foreground#FFAA00
progressBar.background#FF2D95
quickInput.background#1E1C28
quickInput.foreground#C0BCD0
quickInputList.focusBackground#2A2838
quickInputList.focusForeground#FF2D95
quickInputTitle.background#2A2838
sash.hoverBorder#FF2D95
scrollbar.shadow#00000055
scrollbarSlider.activeBackground#C0BCD060
scrollbarSlider.background#C0BCD020
scrollbarSlider.hoverBackground#C0BCD040
searchEditor.findMatchBackground#FF2D9544
searchEditor.textInputBorder#2A2838
selection.background#2266DD55
settings.checkboxBackground#1E1C28
settings.checkboxBorder#2A2838
settings.checkboxForeground#C0BCD0
settings.dropdownBackground#1E1C28
settings.dropdownBorder#2A2838
settings.dropdownForeground#C0BCD0
settings.focusedRowBackground#1E1C28
settings.focusedRowBorder#FF2D9555
settings.headerForeground#FF2D95
settings.modifiedItemIndicator#FF2D95
settings.numberInputBackground#12101A
settings.numberInputBorder#2A2838
settings.numberInputForeground#C0BCD0
settings.rowHoverBackground#FF2D9508
settings.textInputBackground#12101A
settings.textInputBorder#2A2838
settings.textInputForeground#C0BCD0
sideBar.background#181620
sideBar.border#2A2838
sideBar.foreground#C0BCD0
sideBarSectionHeader.background#1E1C28
sideBarSectionHeader.border#2A2838
sideBarSectionHeader.foreground#C0BCD0
sideBarTitle.foreground#FF2D95
statusBar.background#12101A
statusBar.border#2A2838
statusBar.debuggingBackground#FF2D95
statusBar.debuggingForeground#12101A
statusBar.foreground#C0BCD0
statusBar.noFolderBackground#12101A
statusBar.noFolderForeground#C0BCD0
statusBarItem.activeBackground#2A2838
statusBarItem.errorBackground#E83333
statusBarItem.errorForeground#FFFFFF
statusBarItem.hoverBackground#1E1C28
statusBarItem.prominentBackground#FF2D95
statusBarItem.prominentForeground#12101A
statusBarItem.prominentHoverBackground#E02080
statusBarItem.remoteBackground#00DDFF
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#FFAA00
statusBarItem.warningForeground#12101A
symbolIcon.arrayForeground#C0BCD0
symbolIcon.booleanForeground#A898C0
symbolIcon.classForeground#A898C0
symbolIcon.colorForeground#C0BCD0
symbolIcon.constantForeground#A898C0
symbolIcon.constructorForeground#00DDFF
symbolIcon.enumeratorForeground#A898C0
symbolIcon.enumeratorMemberForeground#A898C0
symbolIcon.eventForeground#FF2D95
symbolIcon.fieldForeground#8898B0
symbolIcon.fileForeground#C0BCD0
symbolIcon.folderForeground#C0BCD0
symbolIcon.functionForeground#00DDFF
symbolIcon.interfaceForeground#A898C0
symbolIcon.keyForeground#8898B0
symbolIcon.keywordForeground#FF2D95
symbolIcon.methodForeground#00DDFF
symbolIcon.moduleForeground#A898C0
symbolIcon.namespaceForeground#A898C0
symbolIcon.nullForeground#A898C0
symbolIcon.numberForeground#A898C0
symbolIcon.objectForeground#A898C0
symbolIcon.operatorForeground#555068
symbolIcon.packageForeground#A898C0
symbolIcon.propertyForeground#8898B0
symbolIcon.referenceForeground#FF2D95
symbolIcon.snippetForeground#88B0A0
symbolIcon.stringForeground#88B0A0
symbolIcon.structForeground#A898C0
symbolIcon.textForeground#C0BCD0
symbolIcon.typeParameterForeground#A898C0
symbolIcon.unitForeground#A898C0
symbolIcon.variableForeground#8898B0
tab.activeBackground#12101A
tab.activeBorderTop#FF2D95
tab.activeForeground#FF2D95
tab.border#12101A
tab.hoverBackground#1E1C28
tab.hoverForeground#C0BCD0
tab.inactiveBackground#12101A
tab.inactiveForeground#555068
tab.unfocusedActiveForeground#8898B0
tab.unfocusedInactiveForeground#555068
terminal.ansiBlack#12101A
terminal.ansiBlue#3388EE
terminal.ansiBrightBlack#555068
terminal.ansiBrightBlue#55AAFF
terminal.ansiBrightCyan#44EEFF
terminal.ansiBrightGreen#55DD77
terminal.ansiBrightMagenta#FF55AA
terminal.ansiBrightRed#FF5555
terminal.ansiBrightWhite#DAD6E8
terminal.ansiBrightYellow#FFCC00
terminal.ansiCyan#00DDFF
terminal.ansiGreen#33BB55
terminal.ansiMagenta#FF2D95
terminal.ansiRed#E83333
terminal.ansiWhite#C0BCD0
terminal.ansiYellow#FFAA00
terminal.background#12101A
terminal.border#2A2838
terminal.foreground#C0BCD0
terminal.selectionBackground#2266DD55
terminalCursor.background#12101A
terminalCursor.foreground#FF2D95
testing.iconErrored#E83333
testing.iconFailed#E83333
testing.iconPassed#33BB55
testing.iconQueued#FFAA00
testing.iconSkipped#555068
testing.iconUnset#555068
testing.runAction#33BB55
textBlockQuote.background#1E1C28
textBlockQuote.border#FF2D95
textCodeBlock.background#1E1C28
textLink.activeForeground#00DDFF
textLink.foreground#00DDFF
textPreformat.foreground#FF2D95
textSeparator.foreground#2A2838
titleBar.activeBackground#12101A
titleBar.activeForeground#C0BCD0
titleBar.border#2A2838
titleBar.inactiveBackground#12101A
titleBar.inactiveForeground#555068
toolbar.activeBackground#FF2D9533
toolbar.hoverBackground#FF2D9522
tree.indentGuidesStroke#2A2838
tree.tableColumnsBorder#2A2838
walkThrough.embeddedEditorBackground#181620
welcomePage.buttonBackground#1E1C28
welcomePage.buttonHoverBackground#2A2838
welcomePage.progress.foreground#FF2D95
welcomePage.tileBackground#1E1C28
welcomePage.tileBorder#2A2838
widget.border#2A2838
widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#555068	italic
comment.block.documentation storage.type, comment.block.documentation punctuation.definition, comment.block.documentation variable, storage.type.class.jsdoc, keyword.other.documentation	#656078	—
string, string.quoted, string.template	#88B0A0	—
string.template punctuation.definition.template-expression, string.interpolated punctuation.section.embedded, meta.template.expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#88B0A0	bold
constant.character.escape, string.regexp constant.character.escape	#88B0A0	bold
punctuation.definition.string.begin, punctuation.definition.string.end	#88B0A0	—
string.regexp	#A898C0	—
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp	#A898C0	—
constant.numeric, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#A898C0	—
constant.other, constant.character	#A898C0	—
keyword, keyword.other	#FF2D95	—
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export, keyword.control.from	#FF2D95	italic
keyword.control.return, keyword.control.yield, keyword.control.await	#FF2D95	italic
keyword.operator.new, keyword.operator.delete, keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.void, keyword.operator.expression.keyof, keyword.operator.expression.is	#FF2D95	—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest, keyword.operator.type.annotation, keyword.operator.optional	#FF2D95	—
storage.type, storage.type.function, storage.type.class, storage.type.interface, storage.type.enum, storage.type.namespace, storage.type.type	#FF2D95	—
storage.modifier, storage.modifier.async, storage.modifier.static, keyword.other.debugger	#FF2D95	italic
entity.name.function, meta.function-call entity.name.function, support.function, meta.function entity.name.function	#00DDFF	—
meta.method-call entity.name.function, meta.function-call.method entity.name.function	#00DDFF	—
support.function.builtin, support.function.magic, support.function.console	#00DDFF	italic
storage.type.function.arrow	#FF2D95	—
variable, variable.other, variable.other.readwrite, meta.definition.variable	#8898B0	—
variable.other.object.property, variable.other.property, support.variable.property	#C0BCD0	—
variable.parameter, meta.parameters variable, meta.function.parameters variable	#8898B0	italic
variable.language, variable.language.this, variable.language.self, variable.language.super	#8898B0	italic bold
variable.other.constant	#A898C0	—
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.class	#A898C0	—
entity.other.inherited-class	#A898C0	italic
support.type.builtin, support.type.primitive, support.type.property-name	#A898C0	—
entity.name.type.parameter	#A898C0	italic
entity.name.namespace, entity.name.type.namespace, entity.name.scope-resolution	#A898C0	—
meta.decorator, meta.decorator entity.name.function, punctuation.decorator, meta.decorator punctuation.definition, entity.name.function.decorator	#A898C0	italic
storage.type.annotation, meta.annotation	#A898C0	italic
punctuation, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace	#C0BCD0	—
entity.name.tag, entity.name.tag.html, support.class.component	#FF2D95	—
entity.other.attribute-name, entity.other.attribute-name.html	#A898C0	italic
support.class.component.tsx, support.class.component.jsx, entity.name.tag.component	#A898C0	—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end	#FF2D9588	—
constant.character.entity, punctuation.definition.entity	#A898C0	—
support.type.property-name.css, support.type.vendored.property-name.css, support.type.property-name.scss	#00DDFF	—
support.constant.property-value.css, support.constant.font-name.css, meta.property-value.css	#C0BCD0	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#A898C0	—
entity.name.tag.css	#FF2D95	—
keyword.other.unit.css, constant.numeric.css	#A898C0	—
variable.css, variable.argument.css, support.type.custom-property.css	#8898B0	—
variable.scss, variable.other.scss	#8898B0	—
keyword.control.at-rule.css, keyword.control.at-rule.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.mixin.scss	#FF2D95	italic
support.type.property-name.json, support.type.property-name.json.comments	#00DDFF	—
string.quoted.double.json, string.quoted.double.json.comments	#88B0A0	—
heading.1.markdown entity.name, heading.2.markdown entity.name, heading.3.markdown entity.name, heading.4.markdown entity.name, heading.5.markdown entity.name, heading.6.markdown entity.name, entity.name.section.markdown, markup.heading, markup.heading.setext	#FF2D95	bold
punctuation.definition.heading.markdown	#FF2D95	—
markup.bold, punctuation.definition.bold	#C0BCD0	bold
markup.italic, punctuation.definition.italic	#C0BCD0	italic
markup.inline.raw, markup.fenced_code, markup.raw	#88B0A0	—
markup.underline.link, string.other.link	#00DDFF	—
string.other.link.title.markdown, string.other.link.description.markdown, meta.link.inline.markdown string	#00DDFF	—
punctuation.definition.list.begin.markdown, markup.list.numbered, markup.list.unnumbered	#FF2D95	—
markup.quote, punctuation.definition.quote.begin.markdown	#555068	italic
meta.separator.markdown	#444450	—
entity.name.tag.yaml	#00DDFF	—
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml	#A898C0	—
entity.name.section.group-title.ini, support.type.property-name.table.toml, entity.other.attribute-name.table.toml	#FF2D95	—
variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell, punctuation.definition.variable.shell	#8898B0	—
support.function.builtin.shell, entity.name.command.shell	#00DDFF	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql, keyword.other.create.sql, keyword.other.data-integrity.sql	#FF2D95	—
support.function.aggregate.sql, support.function.scalar.sql, support.function.string.sql	#00DDFF	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python, variable.language.special.cls.python	#8898B0	italic bold
support.function.magic.python	#00DDFF	italic
meta.fstring storage.type.format, constant.character.format.placeholder.other.python	#88B0A0	bold
entity.name.package.go	#A898C0	—
entity.name.import.go	#88B0A0	—
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust	#A898C0	italic
entity.name.function.macro.rust, meta.macro.rust	#A898C0	bold
meta.attribute.rust	#A898C0	italic
punctuation.definition.variable.php	#8898B0	—
constant.language.symbol.ruby, constant.other.symbol.ruby	#A898C0	—
variable.other.readwrite.instance.ruby	#8898B0	—
entity.name	#A898C0	—
support.other.variable	#8898B0	—
invalid, invalid.illegal	#FFFFFF	underline
invalid.deprecated	#C0BCD0	strikethrough

VS Code preview

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

Technicolor — Technicolor Psychedelic

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#A0E030
activityBar.background#14101A
activityBar.border#2C2838
activityBar.foreground#C8C0A8
activityBar.inactiveForeground#605850
activityBarBadge.background#C850C0
activityBarBadge.foreground#14101A
badge.background#C850C0
badge.foreground#14101A
banner.background#201C28
banner.foreground#C8C0A8
banner.iconForeground#A0E030
breadcrumb.activeSelectionForeground#C8C0A8
breadcrumb.background#14101A
breadcrumb.focusForeground#C8C0A8
breadcrumb.foreground#605850
breadcrumbPicker.background#1A1620
button.background#A0E030
button.foreground#14101A
button.hoverBackground#90CC28
button.secondaryBackground#201C28
button.secondaryForeground#C8C0A8
button.secondaryHoverBackground#2C2838
charts.blue#3388EE
charts.foreground#C8C0A8
charts.green#33BB55
charts.lines#C8C0A8
charts.orange#C09868
charts.purple#C850C0
charts.red#E83333
charts.yellow#FFAA00
chat.avatarBackground#1A1620
chat.avatarForeground#A0E030
chat.requestBackground#1A1620
chat.requestBorder#2C2838
chat.slashCommandBackground#A0E03022
chat.slashCommandForeground#A0E030
commandCenter.activeBackground#201C28
commandCenter.activeForeground#C8C0A8
commandCenter.background#1A1620
commandCenter.border#2C2838
commandCenter.foreground#C8C0A8
debugExceptionWidget.background#201C28
debugExceptionWidget.border#E83333
debugIcon.breakpointDisabledForeground#605850
debugIcon.breakpointForeground#E83333
debugIcon.disconnectForeground#E83333
debugIcon.pauseForeground#FFAA00
debugIcon.restartForeground#33BB55
debugIcon.startForeground#33BB55
debugIcon.stepIntoForeground#A0E030
debugIcon.stepOutForeground#A0E030
debugIcon.stepOverForeground#A0E030
debugIcon.stopForeground#E83333
debugTokenExpression.boolean#C09868
debugTokenExpression.error#E83333
debugTokenExpression.name#C850C0
debugTokenExpression.number#C09868
debugTokenExpression.string#B890A0
debugTokenExpression.value#B890A0
debugToolBar.background#201C28
debugToolBar.border#2C2838
descriptionForeground#605850
diffEditor.diagonalFill#2C2838
diffEditor.insertedLineBackground#33BB5515
diffEditor.insertedTextBackground#33BB5522
diffEditor.removedLineBackground#E8333315
diffEditor.removedTextBackground#E8333322
disabledForeground#605850
dropdown.background#1A1620
dropdown.border#2C2838
dropdown.foreground#C8C0A8
dropdown.listBackground#1A1620
editor.background#14101A
editor.findMatchBackground#A0E03066
editor.findMatchBorder#A0E030
editor.findMatchHighlightBackground#A0E03044
editor.findRangeHighlightBackground#A0E03022
editor.foldBackground#1C182480
editor.foreground#C8C0A8
editor.hoverHighlightBackground#A0E03022
editor.inactiveSelectionBackground#A0E03022
editor.lineHighlightBackground#1C1824
editor.lineHighlightBorder#242030
editor.linkedEditingBackground#A0E03033
editor.rangeHighlightBackground#A0E03015
editor.selectionBackground#A0E03044
editor.selectionHighlightBackground#A0E03033
editor.wordHighlightBackground#A0E03033
editor.wordHighlightStrongBackground#A0E03066
editorBracketHighlight.foreground1#A0E030
editorBracketHighlight.foreground2#C850C0
editorBracketHighlight.foreground3#C09868
editorBracketHighlight.foreground4#80AAA0
editorBracketHighlight.foreground5#B890A0
editorBracketHighlight.foreground6#C8C0A8
editorBracketHighlight.unexpectedBracket.foreground#E83333
editorBracketMatch.background#A0E03033
editorBracketMatch.border#A0E03088
editorCodeLens.foreground#605850
editorCursor.background#14101A
editorCursor.foreground#A0E030
editorError.foreground#E83333
editorGhostText.foreground#60585088
editorGroup.border#2C2838
editorGroupHeader.noTabsBackground#14101A
editorGroupHeader.tabsBackground#14101A
editorGroupHeader.tabsBorder#2C2838
editorGutter.addedBackground#33BB55
editorGutter.commentRangeForeground#605850
editorGutter.deletedBackground#E83333
editorGutter.foldingControlForeground#C8C0A8
editorGutter.modifiedBackground#C850C0
editorHint.foreground#33BB55
editorHoverWidget.background#1A1620
editorHoverWidget.border#2C2838
editorHoverWidget.foreground#C8C0A8
editorIndentGuide.activeBackground#403840
editorIndentGuide.background#2C2838
editorInfo.foreground#C850C0
editorInlayHint.background#201C2888
editorInlayHint.foreground#605850
editorInlayHint.parameterBackground#201C2888
editorInlayHint.parameterForeground#605850
editorInlayHint.typeBackground#201C2888
editorInlayHint.typeForeground#605850
editorLightBulb.foreground#FFAA00
editorLightBulbAutoFix.foreground#33BB55
editorLineNumber.activeForeground#A0E030
editorLineNumber.foreground#605850
editorLink.activeForeground#A0E030
editorMarkerNavigation.background#1A1620
editorMarkerNavigationError.background#E83333
editorMarkerNavigationInfo.background#C850C0
editorMarkerNavigationWarning.background#FFAA00
editorOverviewRuler.addedForeground#33BB55
editorOverviewRuler.border#2C2838
editorOverviewRuler.bracketMatchForeground#A0E03088
editorOverviewRuler.deletedForeground#E83333
editorOverviewRuler.errorForeground#E83333
editorOverviewRuler.findMatchForeground#A0E03055
editorOverviewRuler.infoForeground#C850C0
editorOverviewRuler.modifiedForeground#C850C0
editorOverviewRuler.selectionHighlightForeground#A0E03055
editorOverviewRuler.warningForeground#FFAA00
editorOverviewRuler.wordHighlightForeground#A0E03055
editorOverviewRuler.wordHighlightStrongForeground#A0E03077
editorRuler.foreground#2C2838
editorStickyScroll.background#1A1620
editorStickyScrollHover.background#201C28
editorSuggestWidget.background#1A1620
editorSuggestWidget.border#2C2838
editorSuggestWidget.focusHighlightForeground#A0E030
editorSuggestWidget.foreground#C8C0A8
editorSuggestWidget.highlightForeground#A0E030
editorSuggestWidget.selectedBackground#A0E03022
editorUnnecessaryCode.opacity#000000AA
editorWarning.foreground#FFAA00
editorWhitespace.foreground#2C2838
editorWidget.background#1A1620
editorWidget.border#2C2838
editorWidget.foreground#C8C0A8
errorForeground#E83333
extensionBadge.remoteBackground#C850C0
extensionBadge.remoteForeground#14101A
extensionButton.background#A0E030
extensionButton.foreground#14101A
extensionButton.hoverBackground#90CC28
extensionButton.prominentBackground#A0E030
extensionButton.prominentForeground#14101A
extensionButton.prominentHoverBackground#90CC28
extensionIcon.preReleaseForeground#FFAA00
extensionIcon.sponsorForeground#C850C0
extensionIcon.starForeground#FFAA00
extensionIcon.verifiedForeground#C850C0
focusBorder#A0E03088
foreground#C8C0A8
gitDecoration.addedResourceForeground#33BB55
gitDecoration.conflictingResourceForeground#FFAA00
gitDecoration.deletedResourceForeground#E83333
gitDecoration.ignoredResourceForeground#605850
gitDecoration.modifiedResourceForeground#C850C0
gitDecoration.renamedResourceForeground#33BB55
gitDecoration.stageDeletedResourceForeground#E83333
gitDecoration.stageModifiedResourceForeground#C850C0
gitDecoration.submoduleResourceForeground#C09868
gitDecoration.untrackedResourceForeground#33BB55
icon.foreground#C8C0A8
inlineChat.background#1A1620
inlineChat.border#2C2838
inlineChat.shadow#00000044
inlineChatDiff.inserted#33BB5522
inlineChatDiff.removed#E8333322
inlineChatInput.background#14101A
inlineChatInput.border#2C2838
inlineChatInput.focusBorder#A0E03088
inlineChatInput.placeholderForeground#605850
input.background#14101A
input.border#2C2838
input.foreground#C8C0A8
input.placeholderForeground#605850
inputOption.activeBackground#A0E03033
inputOption.activeBorder#A0E030
inputOption.activeForeground#C8C0A8
inputValidation.errorBackground#E8333333
inputValidation.errorBorder#E83333
inputValidation.errorForeground#E83333
inputValidation.infoBackground#C850C033
inputValidation.infoBorder#C850C0
inputValidation.infoForeground#C850C0
inputValidation.warningBackground#FFAA0033
inputValidation.warningBorder#FFAA00
inputValidation.warningForeground#FFAA00
keybindingLabel.background#201C28
keybindingLabel.border#2C2838
keybindingLabel.bottomBorder#2C2838
keybindingLabel.foreground#C8C0A8
list.activeSelectionBackground#A0E03022
list.activeSelectionForeground#C8C0A8
list.activeSelectionIconForeground#C8C0A8
list.dropBackground#A0E03022
list.errorForeground#E83333
list.focusBackground#A0E03022
list.focusForeground#C8C0A8
list.focusOutline#A0E03055
list.highlightForeground#A0E030
list.hoverBackground#201C28
list.hoverForeground#C8C0A8
list.inactiveSelectionBackground#A0E03015
list.inactiveSelectionForeground#C8C0A8
list.invalidItemForeground#E8333388
list.warningForeground#FFAA00
menu.background#1A1620
menu.foreground#C8C0A8
menu.selectionBackground#A0E03022
menu.selectionForeground#C8C0A8
menu.separatorBackground#2C2838
menubar.selectionBackground#A0E03022
menubar.selectionForeground#C8C0A8
merge.commonContentBackground#FFAA0022
merge.commonHeaderBackground#FFAA0044
merge.currentContentBackground#33BB5522
merge.currentHeaderBackground#33BB5544
merge.incomingContentBackground#3388EE22
merge.incomingHeaderBackground#3388EE44
minimap.errorHighlight#E83333
minimap.findMatchHighlight#A0E03055
minimap.selectionHighlight#A0E03044
minimap.warningHighlight#FFAA00
minimapGutter.addedBackground#33BB55
minimapGutter.deletedBackground#E83333
minimapGutter.modifiedBackground#C850C0
minimapSlider.activeBackground#C8C0A835
minimapSlider.background#C8C0A815
minimapSlider.hoverBackground#C8C0A825
notebook.cellBorderColor#2C2838
notebook.cellEditorBackground#1A1620
notebook.cellInsertionIndicator#A0E030
notebook.cellStatusBarItemHoverBackground#A0E03022
notebook.cellToolbarSeparator#2C2838
notebook.editorBackground#14101A
notebook.focusedCellBorder#A0E030
notebook.selectedCellBackground#A0E03011
notebook.selectedCellBorder#2C2838
notebookStatusErrorIcon.foreground#E83333
notebookStatusRunningIcon.foreground#C850C0
notebookStatusSuccessIcon.foreground#33BB55
notificationCenterHeader.background#201C28
notificationCenterHeader.foreground#C8C0A8
notificationLink.foreground#A0E030
notifications.background#1A1620
notifications.border#2C2838
notifications.foreground#C8C0A8
notificationsErrorIcon.foreground#E83333
notificationsInfoIcon.foreground#C850C0
notificationsWarningIcon.foreground#FFAA00
panel.background#14101A
panel.border#2C2838
panel.foreground#C8C0A8
panelSection.border#2C2838
panelSectionHeader.background#201C28
panelTitle.activeBorder#A0E030
panelTitle.activeForeground#C8C0A8
panelTitle.inactiveForeground#605850
peekView.border#A0E030
peekViewEditor.background#1A1620
peekViewEditor.matchHighlightBackground#A0E03044
peekViewEditorGutter.background#1A1620
peekViewResult.background#201C28
peekViewResult.fileForeground#C8C0A8
peekViewResult.lineForeground#C8C0A8
peekViewResult.matchHighlightBackground#A0E03044
peekViewResult.selectionBackground#A0E03022
peekViewResult.selectionForeground#C8C0A8
peekViewTitle.background#201C28
peekViewTitleDescription.foreground#605850
peekViewTitleLabel.foreground#C8C0A8
pickerGroup.border#2C2838
pickerGroup.foreground#A0E030
ports.iconRunningProcessForeground#33BB55
problemsErrorIcon.foreground#E83333
problemsInfoIcon.foreground#C850C0
problemsWarningIcon.foreground#FFAA00
progressBar.background#A0E030
quickInput.background#1A1620
quickInput.foreground#C8C0A8
quickInputList.focusBackground#A0E03022
quickInputList.focusForeground#C8C0A8
quickInputTitle.background#201C28
sash.hoverBorder#A0E030
scrollbar.shadow#00000055
scrollbarSlider.activeBackground#C8C0A866
scrollbarSlider.background#C8C0A822
scrollbarSlider.hoverBackground#C8C0A844
searchEditor.findMatchBackground#A0E03044
searchEditor.textInputBorder#2C2838
selection.background#A0E03044
settings.checkboxBackground#1A1620
settings.checkboxBorder#2C2838
settings.checkboxForeground#C8C0A8
settings.dropdownBackground#1A1620
settings.dropdownBorder#2C2838
settings.dropdownForeground#C8C0A8
settings.focusedRowBackground#A0E03010
settings.focusedRowBorder#A0E03055
settings.headerForeground#C8C0A8
settings.modifiedItemIndicator#A0E030
settings.numberInputBackground#14101A
settings.numberInputBorder#2C2838
settings.numberInputForeground#C8C0A8
settings.rowHoverBackground#A0E03008
settings.textInputBackground#14101A
settings.textInputBorder#2C2838
settings.textInputForeground#C8C0A8
sideBar.background#1A1620
sideBar.border#2C2838
sideBar.foreground#C8C0A8
sideBarSectionHeader.background#201C28
sideBarSectionHeader.border#2C2838
sideBarSectionHeader.foreground#C8C0A8
sideBarTitle.foreground#C8C0A8
statusBar.background#14101A
statusBar.border#2C2838
statusBar.debuggingBackground#A0E030
statusBar.debuggingForeground#14101A
statusBar.foreground#C8C0A8
statusBar.noFolderBackground#14101A
statusBar.noFolderForeground#C8C0A8
statusBarItem.activeBackground#2C2838
statusBarItem.errorBackground#E83333
statusBarItem.errorForeground#FFFFFF
statusBarItem.hoverBackground#201C28
statusBarItem.prominentBackground#201C28
statusBarItem.prominentForeground#14101A
statusBarItem.prominentHoverBackground#2C2838
statusBarItem.remoteBackground#C850C0
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#FFAA00
statusBarItem.warningForeground#14101A
symbolIcon.arrayForeground#C8C0A8
symbolIcon.booleanForeground#C09868
symbolIcon.classForeground#C09868
symbolIcon.colorForeground#C8C0A8
symbolIcon.constantForeground#C09868
symbolIcon.constructorForeground#C850C0
symbolIcon.enumeratorForeground#C09868
symbolIcon.enumeratorMemberForeground#C09868
symbolIcon.eventForeground#A0E030
symbolIcon.fieldForeground#80AAA0
symbolIcon.fileForeground#C8C0A8
symbolIcon.folderForeground#C8C0A8
symbolIcon.functionForeground#C850C0
symbolIcon.interfaceForeground#C09868
symbolIcon.keyForeground#80AAA0
symbolIcon.keywordForeground#A0E030
symbolIcon.methodForeground#C850C0
symbolIcon.moduleForeground#C09868
symbolIcon.namespaceForeground#C09868
symbolIcon.nullForeground#C09868
symbolIcon.numberForeground#C09868
symbolIcon.objectForeground#C09868
symbolIcon.operatorForeground#605850
symbolIcon.packageForeground#C09868
symbolIcon.propertyForeground#80AAA0
symbolIcon.referenceForeground#A0E030
symbolIcon.snippetForeground#B890A0
symbolIcon.stringForeground#B890A0
symbolIcon.structForeground#C09868
symbolIcon.textForeground#C8C0A8
symbolIcon.typeParameterForeground#C09868
symbolIcon.unitForeground#C09868
symbolIcon.variableForeground#80AAA0
tab.activeBackground#1A1620
tab.activeBorderTop#A0E030
tab.activeForeground#C8C0A8
tab.border#14101A
tab.hoverBackground#201C28
tab.hoverForeground#C8C0A8
tab.inactiveBackground#14101A
tab.inactiveForeground#605850
tab.unfocusedActiveForeground#605850
tab.unfocusedInactiveForeground#605850
terminal.ansiBlack#14101A
terminal.ansiBlue#3388EE
terminal.ansiBrightBlack#605850
terminal.ansiBrightBlue#55AAFF
terminal.ansiBrightCyan#33CCEE
terminal.ansiBrightGreen#55DD77
terminal.ansiBrightMagenta#DD77DD
terminal.ansiBrightRed#F05555
terminal.ansiBrightWhite#E0D8C8
terminal.ansiBrightYellow#FFCC33
terminal.ansiCyan#00B7D9
terminal.ansiGreen#33BB55
terminal.ansiMagenta#C850C0
terminal.ansiRed#E83333
terminal.ansiWhite#C8C0A8
terminal.ansiYellow#FFAA00
terminal.background#14101A
terminal.border#2C2838
terminal.foreground#C8C0A8
terminal.selectionBackground#A0E03044
terminalCursor.background#14101A
terminalCursor.foreground#A0E030
testing.iconErrored#E83333
testing.iconFailed#E83333
testing.iconPassed#33BB55
testing.iconQueued#FFAA00
testing.iconSkipped#605850
testing.iconUnset#605850
testing.runAction#33BB55
textBlockQuote.background#201C28
textBlockQuote.border#A0E030
textCodeBlock.background#201C28
textLink.activeForeground#90CC28
textLink.foreground#A0E030
textPreformat.foreground#B890A0
textSeparator.foreground#2C2838
titleBar.activeBackground#14101A
titleBar.activeForeground#C8C0A8
titleBar.border#2C2838
titleBar.inactiveBackground#14101A
titleBar.inactiveForeground#605850
toolbar.activeBackground#A0E03033
toolbar.hoverBackground#A0E03022
tree.indentGuidesStroke#2C2838
tree.tableColumnsBorder#2C2838
walkThrough.embeddedEditorBackground#14101A
welcomePage.buttonBackground#201C28
welcomePage.buttonHoverBackground#2C2838
welcomePage.progress.foreground#A0E030
welcomePage.tileBackground#1A1620
welcomePage.tileBorder#2C2838
widget.border#2C2838
widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#605850	italic
comment.block.documentation storage.type, comment.block.documentation punctuation.definition, comment.block.documentation variable, storage.type.class.jsdoc, keyword.other.documentation	#706860
string, string.quoted, string.template	#B890A0	—
string.template punctuation.definition.template-expression, string.interpolated punctuation.section.embedded, meta.template.expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#B890A0	bold
constant.character.escape, string.regexp constant.character.escape	#B890A0	bold
punctuation.definition.string.begin, punctuation.definition.string.end	#B890A0	—
string.regexp	#C09868	—
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp	#C09868	—
constant.numeric, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#C09868	—
constant.other, constant.character	#C09868	—
keyword, keyword.other	#A0E030	—
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export, keyword.control.from	#A0E030	italic
keyword.control.return, keyword.control.yield, keyword.control.await	#A0E030	italic
keyword.operator.new, keyword.operator.delete, keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.void, keyword.operator.expression.keyof, keyword.operator.expression.is	#A0E030	—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest, keyword.operator.type.annotation, keyword.operator.optional	#A0E030	—
storage.type, storage.type.function, storage.type.class, storage.type.interface, storage.type.enum, storage.type.namespace, storage.type.type	#A0E030	—
storage.modifier, storage.modifier.async, storage.modifier.static, keyword.other.debugger	#A0E030	italic
entity.name.function, meta.function-call entity.name.function, support.function, meta.function entity.name.function	#C850C0	—
meta.method-call entity.name.function, meta.function-call.method entity.name.function	#C850C0	—
support.function.builtin, support.function.magic, support.function.console	#C850C0	italic
storage.type.function.arrow	#A0E030	—
variable, variable.other, variable.other.readwrite, meta.definition.variable	#80AAA0	—
variable.other.object.property, variable.other.property, support.variable.property	#C8C0A8	—
variable.parameter, meta.parameters variable, meta.function.parameters variable	#80AAA0	italic
variable.language, variable.language.this, variable.language.self, variable.language.super	#80AAA0	italic bold
variable.other.constant	#C09868	—
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.class	#C09868	—
entity.other.inherited-class	#C09868	italic
support.type.builtin, support.type.primitive, support.type.property-name	#C09868	—
entity.name.type.parameter	#C09868	italic
entity.name.namespace, entity.name.type.namespace, entity.name.scope-resolution	#C09868	—
meta.decorator, meta.decorator entity.name.function, punctuation.decorator, meta.decorator punctuation.definition, entity.name.function.decorator	#C09868	italic
storage.type.annotation, meta.annotation	#C09868	italic
punctuation, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace	#C8C0A8	—
entity.name.tag, entity.name.tag.html, support.class.component	#A0E030	—
entity.other.attribute-name, entity.other.attribute-name.html	#C09868	italic
support.class.component.tsx, support.class.component.jsx, entity.name.tag.component	#C09868	—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end	#A0E03088	—
constant.character.entity, punctuation.definition.entity	#C09868	—
support.type.property-name.css, support.type.vendored.property-name.css, support.type.property-name.scss	#C850C0	—
support.constant.property-value.css, support.constant.font-name.css, meta.property-value.css	#C8C0A8	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#C09868	—
entity.name.tag.css	#A0E030	—
keyword.other.unit.css, constant.numeric.css	#C09868	—
variable.css, variable.argument.css, support.type.custom-property.css	#80AAA0	—
variable.scss, variable.other.scss	#80AAA0	—
keyword.control.at-rule.css, keyword.control.at-rule.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.mixin.scss	#A0E030	italic
support.type.property-name.json, support.type.property-name.json.comments	#C850C0	—
string.quoted.double.json, string.quoted.double.json.comments	#B890A0	—
heading.1.markdown entity.name, heading.2.markdown entity.name, heading.3.markdown entity.name, heading.4.markdown entity.name, heading.5.markdown entity.name, heading.6.markdown entity.name, entity.name.section.markdown, markup.heading, markup.heading.setext	#A0E030	bold
punctuation.definition.heading.markdown	#A0E030	—
markup.bold, punctuation.definition.bold	#C8C0A8	bold
markup.italic, punctuation.definition.italic	#C8C0A8	italic
markup.inline.raw, markup.fenced_code, markup.raw	#B890A0	—
markup.underline.link, string.other.link	#C850C0	—
string.other.link.title.markdown, string.other.link.description.markdown, meta.link.inline.markdown string	#C850C0	—
punctuation.definition.list.begin.markdown, markup.list.numbered, markup.list.unnumbered	#A0E030	—
markup.quote, punctuation.definition.quote.begin.markdown	#605850	italic
meta.separator.markdown	#403840	—
entity.name.tag.yaml	#C850C0	—
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml	#C09868	—
entity.name.section.group-title.ini, support.type.property-name.table.toml, entity.other.attribute-name.table.toml	#A0E030	—
variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell, punctuation.definition.variable.shell	#80AAA0	—
support.function.builtin.shell, entity.name.command.shell	#C850C0	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql, keyword.other.create.sql, keyword.other.data-integrity.sql	#A0E030	—
support.function.aggregate.sql, support.function.scalar.sql, support.function.string.sql	#C850C0	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python, variable.language.special.cls.python	#80AAA0	italic bold
support.function.magic.python	#C850C0	italic
meta.fstring storage.type.format, constant.character.format.placeholder.other.python	#B890A0	bold
entity.name.package.go	#C09868	—
entity.name.import.go	#B890A0	—
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust	#C09868	italic
entity.name.function.macro.rust, meta.macro.rust	#C09868	bold
meta.attribute.rust	#C09868	italic
punctuation.definition.variable.php	#80AAA0	—
constant.language.symbol.ruby, constant.other.symbol.ruby	#C09868	—
variable.other.readwrite.instance.ruby	#80AAA0	—
entity.name	#C09868	—
support.other.variable	#80AAA0	—
invalid, invalid.illegal	#FFFFFF	underline
invalid.deprecated	#C8C0A8	strikethrough

VS Code preview

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

Technicolor — Technicolor Silent Era

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#F2EDE3
activityBar.background#151413
activityBar.border#2B2926
activityBar.foreground#F2EDE3
activityBar.inactiveForeground#57524C
activityBarBadge.background#DAD4CA
activityBarBadge.foreground#151413
badge.background#F2EDE3
badge.foreground#151413
banner.background#1E1C1A
banner.foreground#C6C1B8
banner.iconForeground#F2EDE3
breadcrumb.activeSelectionForeground#F2EDE3
breadcrumb.background#151413
breadcrumb.focusForeground#C6C1B8
breadcrumb.foreground#8A857D
breadcrumbPicker.background#1E1C1A
button.background#F2EDE3
button.foreground#151413
button.hoverBackground#DDD7CC
button.secondaryBackground#2B2926
button.secondaryForeground#C6C1B8
button.secondaryHoverBackground#3B3833
charts.blue#8299AD
charts.foreground#C6C1B8
charts.green#7C9F78
charts.lines#C6C1B8
charts.orange#B59A78
charts.purple#A186A0
charts.red#C25B52
charts.yellow#C29A55
chat.avatarBackground#1E1C1A
chat.avatarForeground#F2EDE3
chat.requestBackground#1E1C1A
chat.requestBorder#2B2926
chat.slashCommandBackground#F2EDE322
chat.slashCommandForeground#F2EDE3
commandCenter.activeBackground#1E1C1A
commandCenter.activeForeground#C6C1B8
commandCenter.background#1E1C1A
commandCenter.border#2B2926
commandCenter.foreground#C6C1B8
debugExceptionWidget.background#C25B5222
debugExceptionWidget.border#C25B52
debugIcon.breakpointDisabledForeground#57524C
debugIcon.breakpointForeground#C25B52
debugIcon.disconnectForeground#C25B52
debugIcon.pauseForeground#C29A55
debugIcon.restartForeground#7C9F78
debugIcon.startForeground#7C9F78
debugIcon.stepIntoForeground#F2EDE3
debugIcon.stepOutForeground#F2EDE3
debugIcon.stepOverForeground#F2EDE3
debugIcon.stopForeground#C25B52
debugTokenExpression.boolean#8F8A82
debugTokenExpression.error#C25B52
debugTokenExpression.name#DAD4CA
debugTokenExpression.number#8F8A82
debugTokenExpression.string#979189
debugTokenExpression.value#979189
debugToolBar.background#1E1C1A
debugToolBar.border#2B2926
descriptionForeground#8A857D
diffEditor.diagonalFill#2B2926
diffEditor.insertedLineBackground#7C9F7815
diffEditor.insertedTextBackground#7C9F7822
diffEditor.removedLineBackground#C25B5215
diffEditor.removedTextBackground#C25B5222
disabledForeground#57524C
dropdown.background#1E1C1A
dropdown.border#2B2926
dropdown.foreground#C6C1B8
dropdown.listBackground#1E1C1A
editor.background#151413
editor.findMatchBackground#F2EDE366
editor.findMatchBorder#F2EDE3
editor.findMatchHighlightBackground#F2EDE344
editor.findRangeHighlightBackground#8A857822
editor.foldBackground#1E1C1A80
editor.foreground#C6C1B8
editor.hoverHighlightBackground#8A857822
editor.inactiveSelectionBackground#8A857833
editor.lineHighlightBackground#1E1C1A
editor.lineHighlightBorder#2B2926
editor.linkedEditingBackground#F2EDE333
editor.rangeHighlightBackground#8A857815
editor.selectionBackground#8A857855
editor.selectionHighlightBackground#8A857833
editor.wordHighlightBackground#F2EDE333
editor.wordHighlightStrongBackground#F2EDE366
editorBracketHighlight.foreground1#F2EDE3
editorBracketHighlight.foreground2#DAD4CA
editorBracketHighlight.foreground3#8F8A82
editorBracketHighlight.foreground4#B4AEA5
editorBracketHighlight.foreground5#979189
editorBracketHighlight.foreground6#C6C1B8
editorBracketHighlight.unexpectedBracket.foreground#C25B52
editorBracketMatch.background#F2EDE333
editorBracketMatch.border#F2EDE3
editorCodeLens.foreground#57524C
editorCursor.background#151413
editorCursor.foreground#F2EDE3
editorError.foreground#C25B52
editorGhostText.foreground#57524C88
editorGroup.border#2B2926
editorGroupHeader.noTabsBackground#151413
editorGroupHeader.tabsBackground#151413
editorGroupHeader.tabsBorder#2B2926
editorGutter.addedBackground#7C9F78
editorGutter.commentRangeForeground#57524C
editorGutter.deletedBackground#C25B52
editorGutter.foldingControlForeground#C6C1B8
editorGutter.modifiedBackground#8FA3B5
editorHint.foreground#7C9F78
editorHoverWidget.background#1E1C1A
editorHoverWidget.border#2B2926
editorHoverWidget.foreground#C6C1B8
editorIndentGuide.activeBackground#3B3833
editorIndentGuide.background#2B2926
editorInfo.foreground#8FA3B5
editorInlayHint.background#1E1C1A88
editorInlayHint.foreground#57524C
editorInlayHint.parameterBackground#1E1C1A88
editorInlayHint.parameterForeground#57524C
editorInlayHint.typeBackground#1E1C1A88
editorInlayHint.typeForeground#57524C
editorLightBulb.foreground#C29A55
editorLightBulbAutoFix.foreground#7C9F78
editorLineNumber.activeForeground#F2EDE3
editorLineNumber.foreground#55504A
editorLink.activeForeground#8FA3B5
editorMarkerNavigation.background#1E1C1A
editorMarkerNavigationError.background#C25B52
editorMarkerNavigationInfo.background#8FA3B5
editorMarkerNavigationWarning.background#C29A55
editorOverviewRuler.addedForeground#7C9F78
editorOverviewRuler.border#151413
editorOverviewRuler.bracketMatchForeground#F2EDE388
editorOverviewRuler.deletedForeground#C25B52
editorOverviewRuler.errorForeground#C25B52
editorOverviewRuler.findMatchForeground#F2EDE3AA
editorOverviewRuler.infoForeground#8FA3B5
editorOverviewRuler.modifiedForeground#8FA3B5
editorOverviewRuler.selectionHighlightForeground#F2EDE355
editorOverviewRuler.warningForeground#C29A55
editorOverviewRuler.wordHighlightForeground#F2EDE366
editorOverviewRuler.wordHighlightStrongForeground#F2EDE377
editorRuler.foreground#2B2926
editorStickyScroll.background#1E1C1A
editorStickyScrollHover.background#1E1C1A
editorSuggestWidget.background#1E1C1A
editorSuggestWidget.border#2B2926
editorSuggestWidget.focusHighlightForeground#F2EDE3
editorSuggestWidget.foreground#C6C1B8
editorSuggestWidget.highlightForeground#F2EDE3
editorSuggestWidget.selectedBackground#2B2926
editorUnnecessaryCode.opacity#000000AA
editorWarning.foreground#C29A55
editorWhitespace.foreground#2B2926
editorWidget.background#1E1C1A
editorWidget.border#2B2926
editorWidget.foreground#C6C1B8
errorForeground#C25B52
extensionBadge.remoteBackground#F2EDE3
extensionBadge.remoteForeground#151413
extensionButton.background#F2EDE3
extensionButton.foreground#151413
extensionButton.hoverBackground#DDD7CC
extensionButton.prominentBackground#F2EDE3
extensionButton.prominentForeground#151413
extensionButton.prominentHoverBackground#DDD7CC
extensionIcon.preReleaseForeground#C29A55
extensionIcon.sponsorForeground#DAD4CA
extensionIcon.starForeground#C29A55
extensionIcon.verifiedForeground#8FA3B5
focusBorder#F2EDE388
foreground#C6C1B8
gitDecoration.addedResourceForeground#7C9F78
gitDecoration.conflictingResourceForeground#C29A55
gitDecoration.deletedResourceForeground#C25B52
gitDecoration.ignoredResourceForeground#4A4640
gitDecoration.modifiedResourceForeground#8FA3B5
gitDecoration.renamedResourceForeground#8FA3B5
gitDecoration.stageDeletedResourceForeground#C25B52
gitDecoration.stageModifiedResourceForeground#8FA3B5
gitDecoration.submoduleResourceForeground#8F8A82
gitDecoration.untrackedResourceForeground#7C9F78
icon.foreground#C6C1B8
inlineChat.background#1E1C1A
inlineChat.border#2B2926
inlineChat.shadow#00000055
inlineChatDiff.inserted#7C9F7822
inlineChatDiff.removed#C25B5222
inlineChatInput.background#151413
inlineChatInput.border#2B2926
inlineChatInput.focusBorder#F2EDE388
inlineChatInput.placeholderForeground#57524C
input.background#1E1C1A
input.border#2B2926
input.foreground#C6C1B8
input.placeholderForeground#57524C
inputOption.activeBackground#F2EDE333
inputOption.activeBorder#F2EDE3
inputOption.activeForeground#FFFFFF
inputValidation.errorBackground#C25B5233
inputValidation.errorBorder#C25B52
inputValidation.errorForeground#C25B52
inputValidation.infoBackground#8FA3B533
inputValidation.infoBorder#8FA3B5
inputValidation.infoForeground#8FA3B5
inputValidation.warningBackground#C29A5533
inputValidation.warningBorder#C29A55
inputValidation.warningForeground#C29A55
keybindingLabel.background#2B292688
keybindingLabel.border#3B383388
keybindingLabel.bottomBorder#3B383388
keybindingLabel.foreground#C6C1B8
list.activeSelectionBackground#2B2926
list.activeSelectionForeground#F2EDE3
list.activeSelectionIconForeground#C6C1B8
list.dropBackground#F2EDE322
list.errorForeground#C25B52
list.focusBackground#2B2926
list.focusForeground#F2EDE3
list.focusOutline#F2EDE355
list.highlightForeground#F2EDE3
list.hoverBackground#1E1C1A
list.hoverForeground#C6C1B8
list.inactiveSelectionBackground#1E1C1A
list.inactiveSelectionForeground#C6C1B8
list.invalidItemForeground#C25B5288
list.warningForeground#C29A55
menu.background#1E1C1A
menu.foreground#C6C1B8
menu.selectionBackground#F2EDE322
menu.selectionForeground#C6C1B8
menu.separatorBackground#2B2926
menubar.selectionBackground#F2EDE322
menubar.selectionForeground#C6C1B8
merge.commonContentBackground#C29A5522
merge.commonHeaderBackground#C29A5544
merge.currentContentBackground#7C9F7822
merge.currentHeaderBackground#7C9F7844
merge.incomingContentBackground#8FA3B522
merge.incomingHeaderBackground#8FA3B544
minimap.errorHighlight#C25B52AA
minimap.findMatchHighlight#F2EDE3AA
minimap.selectionHighlight#8A857855
minimap.warningHighlight#C29A55AA
minimapGutter.addedBackground#7C9F78
minimapGutter.deletedBackground#C25B52
minimapGutter.modifiedBackground#8FA3B5
minimapSlider.activeBackground#D2CCC235
minimapSlider.background#D2CCC215
minimapSlider.hoverBackground#D2CCC225
notebook.cellBorderColor#2B2926
notebook.cellEditorBackground#1E1C1A
notebook.cellInsertionIndicator#F2EDE3
notebook.cellStatusBarItemHoverBackground#F2EDE322
notebook.cellToolbarSeparator#2B2926
notebook.editorBackground#151413
notebook.focusedCellBorder#F2EDE3
notebook.selectedCellBackground#F2EDE311
notebook.selectedCellBorder#2B2926
notebookStatusErrorIcon.foreground#C25B52
notebookStatusRunningIcon.foreground#8FA3B5
notebookStatusSuccessIcon.foreground#7C9F78
notificationCenterHeader.background#1E1C1A
notificationCenterHeader.foreground#C6C1B8
notificationLink.foreground#8FA3B5
notifications.background#1E1C1A
notifications.border#2B2926
notifications.foreground#C6C1B8
notificationsErrorIcon.foreground#C25B52
notificationsInfoIcon.foreground#8FA3B5
notificationsWarningIcon.foreground#C29A55
panel.background#151413
panel.border#2B2926
panel.foreground#C6C1B8
panelSection.border#2B2926
panelSectionHeader.background#1E1C1A
panelTitle.activeBorder#F2EDE3
panelTitle.activeForeground#F2EDE3
panelTitle.inactiveForeground#57524C
peekView.border#F2EDE3
peekViewEditor.background#191817
peekViewEditor.matchHighlightBackground#F2EDE355
peekViewEditorGutter.background#1E1C1A
peekViewResult.background#1E1C1A
peekViewResult.fileForeground#C6C1B8
peekViewResult.lineForeground#8A857D
peekViewResult.matchHighlightBackground#F2EDE355
peekViewResult.selectionBackground#2B2926
peekViewResult.selectionForeground#C6C1B8
peekViewTitle.background#1E1C1A
peekViewTitleDescription.foreground#8A857D
peekViewTitleLabel.foreground#F2EDE3
pickerGroup.border#2B2926
pickerGroup.foreground#F2EDE3
ports.iconRunningProcessForeground#7C9F78
problemsErrorIcon.foreground#C25B52
problemsInfoIcon.foreground#8FA3B5
problemsWarningIcon.foreground#C29A55
progressBar.background#F2EDE3
quickInput.background#1E1C1A
quickInput.foreground#C6C1B8
quickInputList.focusBackground#2B2926
quickInputList.focusForeground#F2EDE3
quickInputTitle.background#2B2926
sash.hoverBorder#F2EDE3
scrollbar.shadow#00000055
scrollbarSlider.activeBackground#D2CCC260
scrollbarSlider.background#D2CCC220
scrollbarSlider.hoverBackground#D2CCC240
searchEditor.findMatchBackground#F2EDE344
searchEditor.textInputBorder#2B2926
selection.background#8A857855
settings.checkboxBackground#1E1C1A
settings.checkboxBorder#2B2926
settings.checkboxForeground#C6C1B8
settings.dropdownBackground#1E1C1A
settings.dropdownBorder#2B2926
settings.dropdownForeground#C6C1B8
settings.focusedRowBackground#1E1C1A
settings.focusedRowBorder#F2EDE355
settings.headerForeground#F2EDE3
settings.modifiedItemIndicator#F2EDE3
settings.numberInputBackground#151413
settings.numberInputBorder#2B2926
settings.numberInputForeground#C6C1B8
settings.rowHoverBackground#F2EDE308
settings.textInputBackground#151413
settings.textInputBorder#2B2926
settings.textInputForeground#C6C1B8
sideBar.background#191817
sideBar.border#2B2926
sideBar.foreground#C6C1B8
sideBarSectionHeader.background#1E1C1A
sideBarSectionHeader.border#2B2926
sideBarSectionHeader.foreground#C6C1B8
sideBarTitle.foreground#F2EDE3
statusBar.background#151413
statusBar.border#2B2926
statusBar.debuggingBackground#F2EDE3
statusBar.debuggingForeground#151413
statusBar.foreground#C6C1B8
statusBar.noFolderBackground#151413
statusBar.noFolderForeground#C6C1B8
statusBarItem.activeBackground#2B2926
statusBarItem.errorBackground#C25B52
statusBarItem.errorForeground#FFFFFF
statusBarItem.hoverBackground#1E1C1A
statusBarItem.prominentBackground#F2EDE3
statusBarItem.prominentForeground#151413
statusBarItem.prominentHoverBackground#DDD7CC
statusBarItem.remoteBackground#DAD4CA
statusBarItem.remoteForeground#151413
statusBarItem.warningBackground#C29A55
statusBarItem.warningForeground#151413
symbolIcon.arrayForeground#C6C1B8
symbolIcon.booleanForeground#8F8A82
symbolIcon.classForeground#8F8A82
symbolIcon.colorForeground#C6C1B8
symbolIcon.constantForeground#8F8A82
symbolIcon.constructorForeground#DAD4CA
symbolIcon.enumeratorForeground#8F8A82
symbolIcon.enumeratorMemberForeground#8F8A82
symbolIcon.eventForeground#F2EDE3
symbolIcon.fieldForeground#B4AEA5
symbolIcon.fileForeground#C6C1B8
symbolIcon.folderForeground#C6C1B8
symbolIcon.functionForeground#DAD4CA
symbolIcon.interfaceForeground#8F8A82
symbolIcon.keyForeground#B4AEA5
symbolIcon.keywordForeground#F2EDE3
symbolIcon.methodForeground#DAD4CA
symbolIcon.moduleForeground#8F8A82
symbolIcon.namespaceForeground#8F8A82
symbolIcon.nullForeground#8F8A82
symbolIcon.numberForeground#8F8A82
symbolIcon.objectForeground#8F8A82
symbolIcon.operatorForeground#57524C
symbolIcon.packageForeground#8F8A82
symbolIcon.propertyForeground#B4AEA5
symbolIcon.referenceForeground#F2EDE3
symbolIcon.snippetForeground#979189
symbolIcon.stringForeground#979189
symbolIcon.structForeground#8F8A82
symbolIcon.textForeground#C6C1B8
symbolIcon.typeParameterForeground#8F8A82
symbolIcon.unitForeground#8F8A82
symbolIcon.variableForeground#B4AEA5
tab.activeBackground#151413
tab.activeBorderTop#F2EDE3
tab.activeForeground#F2EDE3
tab.border#151413
tab.hoverBackground#1E1C1A
tab.hoverForeground#C6C1B8
tab.inactiveBackground#151413
tab.inactiveForeground#7B766E
tab.unfocusedActiveForeground#8A857D
tab.unfocusedInactiveForeground#57524C
terminal.ansiBlack#151413
terminal.ansiBlue#8299AD
terminal.ansiBrightBlack#57524C
terminal.ansiBrightBlue#A5B8C8
terminal.ansiBrightCyan#9DC2CE
terminal.ansiBrightGreen#97BA93
terminal.ansiBrightMagenta#B98FAC
terminal.ansiBrightRed#D07A72
terminal.ansiBrightWhite#EFEAE2
terminal.ansiBrightYellow#D4B575
terminal.ansiCyan#8FA3B5
terminal.ansiGreen#7C9F78
terminal.ansiMagenta#A8809E
terminal.ansiRed#C25B52
terminal.ansiWhite#C6C1B8
terminal.ansiYellow#C29A55
terminal.background#151413
terminal.border#2B2926
terminal.foreground#C6C1B8
terminal.selectionBackground#8A857855
terminalCursor.background#151413
terminalCursor.foreground#F2EDE3
testing.iconErrored#C25B52
testing.iconFailed#C25B52
testing.iconPassed#7C9F78
testing.iconQueued#C29A55
testing.iconSkipped#57524C
testing.iconUnset#57524C
testing.runAction#7C9F78
textBlockQuote.background#1E1C1A
textBlockQuote.border#F2EDE3
textCodeBlock.background#1E1C1A
textLink.activeForeground#8FA3B5
textLink.foreground#8FA3B5
textPreformat.foreground#F2EDE3
textSeparator.foreground#2B2926
titleBar.activeBackground#151413
titleBar.activeForeground#C6C1B8
titleBar.border#2B2926
titleBar.inactiveBackground#151413
titleBar.inactiveForeground#57524C
toolbar.activeBackground#F2EDE333
toolbar.hoverBackground#F2EDE322
tree.indentGuidesStroke#2B2926
tree.tableColumnsBorder#2B2926
walkThrough.embeddedEditorBackground#191817
welcomePage.buttonBackground#1E1C1A
welcomePage.buttonHoverBackground#2B2926
welcomePage.progress.foreground#F2EDE3
welcomePage.tileBackground#1E1C1A
welcomePage.tileBorder#2B2926
widget.border#2B2926
widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#726C63	italic
comment.block.documentation storage.type, comment.block.documentation punctuation.definition, comment.block.documentation variable, storage.type.class.jsdoc, keyword.other.documentation	#767068	—
string, string.quoted, string.template	#979189	—
string.template punctuation.definition.template-expression, string.interpolated punctuation.section.embedded, meta.template.expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#979189	bold
constant.character.escape, string.regexp constant.character.escape	#979189	bold
punctuation.definition.string.begin, punctuation.definition.string.end	#979189	—
string.regexp	#8F8A82	—
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp	#8F8A82	—
constant.numeric, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#8F8A82	—
constant.other, constant.character	#8F8A82	—
keyword, keyword.other	#F2EDE3	bold
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export, keyword.control.from	#F2EDE3	italic
keyword.control.return, keyword.control.yield, keyword.control.await	#F2EDE3	italic
keyword.operator.new, keyword.operator.delete, keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.void, keyword.operator.expression.keyof, keyword.operator.expression.is	#F2EDE3	—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest, keyword.operator.type.annotation, keyword.operator.optional	#F2EDE3	—
storage.type, storage.type.function, storage.type.class, storage.type.interface, storage.type.enum, storage.type.namespace, storage.type.type	#F2EDE3	—
storage.modifier, storage.modifier.async, storage.modifier.static, keyword.other.debugger	#F2EDE3	italic
entity.name.function, meta.function-call entity.name.function, support.function, meta.function entity.name.function	#DAD4CA	—
meta.method-call entity.name.function, meta.function-call.method entity.name.function	#DAD4CA	—
support.function.builtin, support.function.magic, support.function.console	#DAD4CA	italic
storage.type.function.arrow	#F2EDE3	—
variable, variable.other, variable.other.readwrite, meta.definition.variable	#B4AEA5	—
variable.other.object.property, variable.other.property, support.variable.property	#C6C1B8	—
variable.parameter, meta.parameters variable, meta.function.parameters variable	#B4AEA5	italic
variable.language, variable.language.this, variable.language.self, variable.language.super	#B4AEA5	italic bold
variable.other.constant	#8F8A82	—
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.class	#8F8A82	—
entity.other.inherited-class	#8F8A82	italic
support.type.builtin, support.type.primitive, support.type.property-name	#8F8A82	—
entity.name.type.parameter	#8F8A82	italic
entity.name.namespace, entity.name.type.namespace, entity.name.scope-resolution	#8F8A82	—
meta.decorator, meta.decorator entity.name.function, punctuation.decorator, meta.decorator punctuation.definition, entity.name.function.decorator	#8F8A82	italic
storage.type.annotation, meta.annotation	#8F8A82	italic
punctuation, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace	#C6C1B8	—
entity.name.tag, entity.name.tag.html, support.class.component	#F2EDE3	—
entity.other.attribute-name, entity.other.attribute-name.html	#8F8A82	italic
support.class.component.tsx, support.class.component.jsx, entity.name.tag.component	#8F8A82	—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end	#F2EDE388	—
constant.character.entity, punctuation.definition.entity	#8F8A82	—
support.type.property-name.css, support.type.vendored.property-name.css, support.type.property-name.scss	#DAD4CA	—
support.constant.property-value.css, support.constant.font-name.css, meta.property-value.css	#C6C1B8	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#8F8A82	—
entity.name.tag.css	#F2EDE3	—
keyword.other.unit.css, constant.numeric.css	#8F8A82	—
variable.css, variable.argument.css, support.type.custom-property.css	#B4AEA5	—
variable.scss, variable.other.scss	#B4AEA5	—
keyword.control.at-rule.css, keyword.control.at-rule.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.mixin.scss	#F2EDE3	italic
support.type.property-name.json, support.type.property-name.json.comments	#DAD4CA	—
string.quoted.double.json, string.quoted.double.json.comments	#979189	—
heading.1.markdown entity.name, heading.2.markdown entity.name, heading.3.markdown entity.name, heading.4.markdown entity.name, heading.5.markdown entity.name, heading.6.markdown entity.name, entity.name.section.markdown, markup.heading, markup.heading.setext	#F2EDE3	bold
punctuation.definition.heading.markdown	#F2EDE3	—
markup.bold, punctuation.definition.bold	#C6C1B8	bold
markup.italic, punctuation.definition.italic	#C6C1B8	italic
markup.inline.raw, markup.fenced_code, markup.raw	#979189	—
markup.underline.link, string.other.link	#DAD4CA	—
string.other.link.title.markdown, string.other.link.description.markdown, meta.link.inline.markdown string	#DAD4CA	—
punctuation.definition.list.begin.markdown, markup.list.numbered, markup.list.unnumbered	#F2EDE3	—
markup.quote, punctuation.definition.quote.begin.markdown	#726C63	italic
meta.separator.markdown	#4A4640	—
entity.name.tag.yaml	#DAD4CA	—
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml	#8F8A82	—
entity.name.section.group-title.ini, support.type.property-name.table.toml, entity.other.attribute-name.table.toml	#F2EDE3	—
variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell, punctuation.definition.variable.shell	#B4AEA5	—
support.function.builtin.shell, entity.name.command.shell	#DAD4CA	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql, keyword.other.create.sql, keyword.other.data-integrity.sql	#F2EDE3	—
support.function.aggregate.sql, support.function.scalar.sql, support.function.string.sql	#DAD4CA	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python, variable.language.special.cls.python	#B4AEA5	italic bold
support.function.magic.python	#DAD4CA	italic
meta.fstring storage.type.format, constant.character.format.placeholder.other.python	#979189	bold
entity.name.package.go	#8F8A82	—
entity.name.import.go	#979189	—
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust	#8F8A82	italic
entity.name.function.macro.rust, meta.macro.rust	#8F8A82	bold
meta.attribute.rust	#8F8A82	italic
punctuation.definition.variable.php	#B4AEA5	—
constant.language.symbol.ruby, constant.other.symbol.ruby	#8F8A82	—
variable.other.readwrite.instance.ruby	#B4AEA5	—
entity.name	#8F8A82	—
support.other.variable	#B4AEA5	—
invalid, invalid.illegal	#FFFFFF	underline
invalid.deprecated	#C6C1B8	strikethrough

VS Code preview

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

Technicolor — Technicolor Warm

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#E8A030
activityBar.background#1A1816
activityBar.border#2E2A22
activityBar.foreground#E8A030
activityBar.inactiveForeground#665544
activityBarBadge.background#7EB540
activityBarBadge.foreground#1A1816
badge.background#E8A030
badge.foreground#1A1816
banner.background#22201A
banner.foreground#D4C8A0
banner.iconForeground#E8A030
breadcrumb.activeSelectionForeground#E8A030
breadcrumb.background#1A1816
breadcrumb.focusForeground#D4C8A0
breadcrumb.foreground#998877
breadcrumbPicker.background#22201A
button.background#E8A030
button.foreground#1A1816
button.hoverBackground#E07A00
button.secondaryBackground#2E2A22
button.secondaryForeground#D4C8A0
button.secondaryHoverBackground#444433
charts.blue#3388EE
charts.foreground#D4C8A0
charts.green#33BB55
charts.lines#D4C8A0
charts.orange#C09868
charts.purple#C850C0
charts.red#E83333
charts.yellow#FFAA00
chat.avatarBackground#22201A
chat.avatarForeground#E8A030
chat.requestBackground#22201A
chat.requestBorder#2E2A22
chat.slashCommandBackground#E8A03022
chat.slashCommandForeground#E8A030
commandCenter.activeBackground#22201A
commandCenter.activeForeground#D4C8A0
commandCenter.background#22201A
commandCenter.border#2E2A22
commandCenter.foreground#D4C8A0
debugExceptionWidget.background#E8333322
debugExceptionWidget.border#E83333
debugIcon.breakpointDisabledForeground#665544
debugIcon.breakpointForeground#E83333
debugIcon.disconnectForeground#E83333
debugIcon.pauseForeground#FFAA00
debugIcon.restartForeground#33BB55
debugIcon.startForeground#33BB55
debugIcon.stepIntoForeground#E8A030
debugIcon.stepOutForeground#E8A030
debugIcon.stepOverForeground#E8A030
debugIcon.stopForeground#E83333
debugTokenExpression.boolean#B8A878
debugTokenExpression.error#E83333
debugTokenExpression.name#7EB540
debugTokenExpression.number#B8A878
debugTokenExpression.string#90A878
debugTokenExpression.value#90A878
debugToolBar.background#22201A
debugToolBar.border#2E2A22
descriptionForeground#998877
diffEditor.diagonalFill#2E2A22
diffEditor.insertedLineBackground#33BB5515
diffEditor.insertedTextBackground#33BB5522
diffEditor.removedLineBackground#E8333315
diffEditor.removedTextBackground#E8333322
disabledForeground#665544
dropdown.background#252218
dropdown.border#2E2A22
dropdown.foreground#D4C8A0
dropdown.listBackground#22201A
editor.background#1A1816
editor.findMatchBackground#E8A03066
editor.findMatchBorder#E8A030
editor.findMatchHighlightBackground#E8A03044
editor.findRangeHighlightBackground#CC662222
editor.foldBackground#25221880
editor.foreground#D4C8A0
editor.hoverHighlightBackground#CC662222
editor.inactiveSelectionBackground#CC662233
editor.lineHighlightBackground#252218
editor.lineHighlightBorder#2E2A22
editor.linkedEditingBackground#E8A03033
editor.rangeHighlightBackground#CC662215
editor.selectionBackground#CC662244
editor.selectionHighlightBackground#CC662233
editor.wordHighlightBackground#E8A03033
editor.wordHighlightStrongBackground#E8A03066
editorBracketHighlight.foreground1#E8A030
editorBracketHighlight.foreground2#7EB540
editorBracketHighlight.foreground3#B8A878
editorBracketHighlight.foreground4#B0A090
editorBracketHighlight.foreground5#90A878
editorBracketHighlight.foreground6#D4C8A0
editorBracketHighlight.unexpectedBracket.foreground#E83333
editorBracketMatch.background#E8A03033
editorBracketMatch.border#E8A030
editorCodeLens.foreground#665544
editorCursor.background#1A1816
editorCursor.foreground#E8A030
editorError.foreground#E83333
editorGhostText.foreground#66554488
editorGroup.border#2E2A22
editorGroupHeader.noTabsBackground#1A1816
editorGroupHeader.tabsBackground#1A1816
editorGroupHeader.tabsBorder#2E2A22
editorGutter.addedBackground#33BB55
editorGutter.commentRangeForeground#665544
editorGutter.deletedBackground#E83333
editorGutter.foldingControlForeground#D4C8A0
editorGutter.modifiedBackground#FFAA00
editorHint.foreground#33BB55
editorHoverWidget.background#22201A
editorHoverWidget.border#2E2A22
editorHoverWidget.foreground#D4C8A0
editorIndentGuide.activeBackground#444444
editorIndentGuide.background#2E2A22
editorInfo.foreground#CC6622
editorInlayHint.background#22201A88
editorInlayHint.foreground#665544
editorInlayHint.parameterBackground#22201A88
editorInlayHint.parameterForeground#665544
editorInlayHint.typeBackground#22201A88
editorInlayHint.typeForeground#665544
editorLightBulb.foreground#FFAA00
editorLightBulbAutoFix.foreground#33BB55
editorLineNumber.activeForeground#E8A030
editorLineNumber.foreground#555544
editorLink.activeForeground#FFAA00
editorMarkerNavigation.background#22201A
editorMarkerNavigationError.background#E83333
editorMarkerNavigationInfo.background#CC6622
editorMarkerNavigationWarning.background#FFAA00
editorOverviewRuler.addedForeground#33BB55
editorOverviewRuler.border#1A1816
editorOverviewRuler.bracketMatchForeground#E8A03088
editorOverviewRuler.deletedForeground#E83333
editorOverviewRuler.errorForeground#E83333
editorOverviewRuler.findMatchForeground#E8A030AA
editorOverviewRuler.infoForeground#CC6622
editorOverviewRuler.modifiedForeground#FFAA00
editorOverviewRuler.selectionHighlightForeground#E8A03055
editorOverviewRuler.warningForeground#FFAA00
editorOverviewRuler.wordHighlightForeground#E8A03066
editorOverviewRuler.wordHighlightStrongForeground#E8A03077
editorRuler.foreground#2E2A22
editorStickyScroll.background#22201A
editorStickyScrollHover.background#22201A
editorSuggestWidget.background#22201A
editorSuggestWidget.border#2E2A22
editorSuggestWidget.focusHighlightForeground#E8A030
editorSuggestWidget.foreground#D4C8A0
editorSuggestWidget.highlightForeground#E8A030
editorSuggestWidget.selectedBackground#2E2A22
editorUnnecessaryCode.opacity#000000AA
editorWarning.foreground#FFAA00
editorWhitespace.foreground#2E2A22
editorWidget.background#22201A
editorWidget.border#2E2A22
editorWidget.foreground#D4C8A0
errorForeground#E83333
extensionBadge.remoteBackground#E8A030
extensionBadge.remoteForeground#1A1816
extensionButton.background#E8A030
extensionButton.foreground#1A1816
extensionButton.hoverBackground#E07A00
extensionButton.prominentBackground#E8A030
extensionButton.prominentForeground#1A1816
extensionButton.prominentHoverBackground#E07A00
extensionIcon.preReleaseForeground#FFAA00
extensionIcon.sponsorForeground#7EB540
extensionIcon.starForeground#FFAA00
extensionIcon.verifiedForeground#CC6622
focusBorder#E8A03088
foreground#D4C8A0
gitDecoration.addedResourceForeground#33BB55
gitDecoration.conflictingResourceForeground#FFAA00
gitDecoration.deletedResourceForeground#E83333
gitDecoration.ignoredResourceForeground#555544
gitDecoration.modifiedResourceForeground#FFAA00
gitDecoration.renamedResourceForeground#FFAA00
gitDecoration.stageDeletedResourceForeground#E83333
gitDecoration.stageModifiedResourceForeground#FFAA00
gitDecoration.submoduleResourceForeground#B8A878
gitDecoration.untrackedResourceForeground#33BB55
icon.foreground#D4C8A0
inlineChat.background#22201A
inlineChat.border#2E2A22
inlineChat.shadow#00000055
inlineChatDiff.inserted#33BB5522
inlineChatDiff.removed#E8333322
inlineChatInput.background#1A1816
inlineChatInput.border#2E2A22
inlineChatInput.focusBorder#E8A03088
inlineChatInput.placeholderForeground#665544
input.background#252218
input.border#2E2A22
input.foreground#D4C8A0
input.placeholderForeground#665544
inputOption.activeBackground#E8A03033
inputOption.activeBorder#E8A030
inputOption.activeForeground#FFFFFF
inputValidation.errorBackground#E8333333
inputValidation.errorBorder#E83333
inputValidation.errorForeground#E83333
inputValidation.infoBackground#CC662233
inputValidation.infoBorder#CC6622
inputValidation.infoForeground#CC6622
inputValidation.warningBackground#FFAA0033
inputValidation.warningBorder#FFAA00
inputValidation.warningForeground#FFAA00
keybindingLabel.background#2E2A2288
keybindingLabel.border#44443388
keybindingLabel.bottomBorder#44443388
keybindingLabel.foreground#D4C8A0
list.activeSelectionBackground#2E2A22
list.activeSelectionForeground#E8A030
list.activeSelectionIconForeground#D4C8A0
list.dropBackground#E8A03022
list.errorForeground#E83333
list.focusBackground#2E2A22
list.focusForeground#E8A030
list.focusOutline#E8A03055
list.highlightForeground#E8A030
list.hoverBackground#252218
list.hoverForeground#D4C8A0
list.inactiveSelectionBackground#252218
list.inactiveSelectionForeground#D4C8A0
list.invalidItemForeground#E8333388
list.warningForeground#FFAA00
menu.background#22201A
menu.foreground#D4C8A0
menu.selectionBackground#E8A03022
menu.selectionForeground#D4C8A0
menu.separatorBackground#2E2A22
menubar.selectionBackground#E8A03022
menubar.selectionForeground#D4C8A0
merge.commonContentBackground#FFAA0022
merge.commonHeaderBackground#FFAA0044
merge.currentContentBackground#33BB5522
merge.currentHeaderBackground#33BB5544
merge.incomingContentBackground#CC662222
merge.incomingHeaderBackground#CC662244
minimap.errorHighlight#E83333AA
minimap.findMatchHighlight#E8A030AA
minimap.selectionHighlight#CC662244
minimap.warningHighlight#FFAA00AA
minimapGutter.addedBackground#33BB55
minimapGutter.deletedBackground#E83333
minimapGutter.modifiedBackground#FFAA00
minimapSlider.activeBackground#D4C8A035
minimapSlider.background#D4C8A015
minimapSlider.hoverBackground#D4C8A025
notebook.cellBorderColor#2E2A22
notebook.cellEditorBackground#22201A
notebook.cellInsertionIndicator#E8A030
notebook.cellStatusBarItemHoverBackground#E8A03022
notebook.cellToolbarSeparator#2E2A22
notebook.editorBackground#1A1816
notebook.focusedCellBorder#E8A030
notebook.selectedCellBackground#E8A03011
notebook.selectedCellBorder#2E2A22
notebookStatusErrorIcon.foreground#E83333
notebookStatusRunningIcon.foreground#CC6622
notebookStatusSuccessIcon.foreground#33BB55
notificationCenterHeader.background#22201A
notificationCenterHeader.foreground#D4C8A0
notificationLink.foreground#FFAA00
notifications.background#22201A
notifications.border#2E2A22
notifications.foreground#D4C8A0
notificationsErrorIcon.foreground#E83333
notificationsInfoIcon.foreground#CC6622
notificationsWarningIcon.foreground#FFAA00
panel.background#1A1816
panel.border#2E2A22
panel.foreground#D4C8A0
panelSection.border#2E2A22
panelSectionHeader.background#22201A
panelTitle.activeBorder#E8A030
panelTitle.activeForeground#E8A030
panelTitle.inactiveForeground#665544
peekView.border#E8A030
peekViewEditor.background#1E1C18
peekViewEditor.matchHighlightBackground#E8A03055
peekViewEditorGutter.background#22201A
peekViewResult.background#22201A
peekViewResult.fileForeground#D4C8A0
peekViewResult.lineForeground#999988
peekViewResult.matchHighlightBackground#E8A03055
peekViewResult.selectionBackground#2E2A22
peekViewResult.selectionForeground#D4C8A0
peekViewTitle.background#22201A
peekViewTitleDescription.foreground#999988
peekViewTitleLabel.foreground#E8A030
pickerGroup.border#2E2A22
pickerGroup.foreground#E8A030
ports.iconRunningProcessForeground#33BB55
problemsErrorIcon.foreground#E83333
problemsInfoIcon.foreground#CC6622
problemsWarningIcon.foreground#FFAA00
progressBar.background#E8A030
quickInput.background#22201A
quickInput.foreground#D4C8A0
quickInputList.focusBackground#2E2A22
quickInputList.focusForeground#E8A030
quickInputTitle.background#2E2A22
sash.hoverBorder#E8A030
scrollbar.shadow#00000055
scrollbarSlider.activeBackground#D4C8A060
scrollbarSlider.background#D4C8A020
scrollbarSlider.hoverBackground#D4C8A040
searchEditor.findMatchBackground#E8A03044
searchEditor.textInputBorder#2E2A22
selection.background#CC662244
settings.checkboxBackground#22201A
settings.checkboxBorder#2E2A22
settings.checkboxForeground#D4C8A0
settings.dropdownBackground#22201A
settings.dropdownBorder#2E2A22
settings.dropdownForeground#D4C8A0
settings.focusedRowBackground#252218
settings.focusedRowBorder#E8A03055
settings.headerForeground#E8A030
settings.modifiedItemIndicator#E8A030
settings.numberInputBackground#1A1816
settings.numberInputBorder#2E2A22
settings.numberInputForeground#D4C8A0
settings.rowHoverBackground#E8A03008
settings.textInputBackground#1A1816
settings.textInputBorder#2E2A22
settings.textInputForeground#D4C8A0
sideBar.background#1E1C18
sideBar.border#2E2A22
sideBar.foreground#D4C8A0
sideBarSectionHeader.background#22201A
sideBarSectionHeader.border#2E2A22
sideBarSectionHeader.foreground#D4C8A0
sideBarTitle.foreground#E8A030
statusBar.background#1A1816
statusBar.border#2E2A22
statusBar.debuggingBackground#E8A030
statusBar.debuggingForeground#1A1816
statusBar.foreground#D4C8A0
statusBar.noFolderBackground#1A1816
statusBar.noFolderForeground#D4C8A0
statusBarItem.activeBackground#2E2A22
statusBarItem.errorBackground#E83333
statusBarItem.errorForeground#FFFFFF
statusBarItem.hoverBackground#2E2A22
statusBarItem.prominentBackground#E8A030
statusBarItem.prominentForeground#1A1816
statusBarItem.prominentHoverBackground#E07A00
statusBarItem.remoteBackground#7EB540
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#FFAA00
statusBarItem.warningForeground#1A1816
symbolIcon.arrayForeground#D4C8A0
symbolIcon.booleanForeground#B8A878
symbolIcon.classForeground#B8A878
symbolIcon.colorForeground#D4C8A0
symbolIcon.constantForeground#B8A878
symbolIcon.constructorForeground#7EB540
symbolIcon.enumeratorForeground#B8A878
symbolIcon.enumeratorMemberForeground#B8A878
symbolIcon.eventForeground#E8A030
symbolIcon.fieldForeground#B0A090
symbolIcon.fileForeground#D4C8A0
symbolIcon.folderForeground#D4C8A0
symbolIcon.functionForeground#7EB540
symbolIcon.interfaceForeground#B8A878
symbolIcon.keyForeground#B0A090
symbolIcon.keywordForeground#E8A030
symbolIcon.methodForeground#7EB540
symbolIcon.moduleForeground#B8A878
symbolIcon.namespaceForeground#B8A878
symbolIcon.nullForeground#B8A878
symbolIcon.numberForeground#B8A878
symbolIcon.objectForeground#B8A878
symbolIcon.operatorForeground#665544
symbolIcon.packageForeground#B8A878
symbolIcon.propertyForeground#B0A090
symbolIcon.referenceForeground#E8A030
symbolIcon.snippetForeground#90A878
symbolIcon.stringForeground#90A878
symbolIcon.structForeground#B8A878
symbolIcon.textForeground#D4C8A0
symbolIcon.typeParameterForeground#B8A878
symbolIcon.unitForeground#B8A878
symbolIcon.variableForeground#B0A090
tab.activeBackground#1A1816
tab.activeBorderTop#E8A030
tab.activeForeground#E8A030
tab.border#1A1816
tab.hoverBackground#252218
tab.hoverForeground#D4C8A0
tab.inactiveBackground#1A1816
tab.inactiveForeground#776655
tab.unfocusedActiveForeground#998877
tab.unfocusedInactiveForeground#665544
terminal.ansiBlack#1A1816
terminal.ansiBlue#CC6622
terminal.ansiBrightBlack#665544
terminal.ansiBrightBlue#DD9944
terminal.ansiBrightCyan#CCAA55
terminal.ansiBrightGreen#55DD77
terminal.ansiBrightMagenta#DD44AA
terminal.ansiBrightRed#FF5555
terminal.ansiBrightWhite#EEE0C0
terminal.ansiBrightYellow#FFCC00
terminal.ansiCyan#A08050
terminal.ansiGreen#33BB55
terminal.ansiMagenta#CC2299
terminal.ansiRed#E83333
terminal.ansiWhite#D4C8A0
terminal.ansiYellow#FFAA00
terminal.background#1A1816
terminal.border#2E2A22
terminal.foreground#D4C8A0
terminal.selectionBackground#CC662244
terminalCursor.background#1A1816
terminalCursor.foreground#E8A030
testing.iconErrored#E83333
testing.iconFailed#E83333
testing.iconPassed#33BB55
testing.iconQueued#FFAA00
testing.iconSkipped#665544
testing.iconUnset#665544
testing.runAction#33BB55
textBlockQuote.background#22201A
textBlockQuote.border#E8A030
textCodeBlock.background#252218
textLink.activeForeground#FFAA00
textLink.foreground#FFAA00
textPreformat.foreground#E8A030
textSeparator.foreground#2E2A22
titleBar.activeBackground#1A1816
titleBar.activeForeground#D4C8A0
titleBar.border#2E2A22
titleBar.inactiveBackground#1A1816
titleBar.inactiveForeground#665544
toolbar.activeBackground#E8A03033
toolbar.hoverBackground#E8A03022
tree.indentGuidesStroke#2E2A22
tree.tableColumnsBorder#2E2A22
walkThrough.embeddedEditorBackground#1E1C18
welcomePage.buttonBackground#22201A
welcomePage.buttonHoverBackground#2E2A22
welcomePage.progress.foreground#E8A030
welcomePage.tileBackground#22201A
welcomePage.tileBorder#2E2A22
widget.border#2E2A22
widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7A6E50	italic
comment.block.documentation storage.type, comment.block.documentation punctuation.definition, comment.block.documentation variable, storage.type.class.jsdoc, keyword.other.documentation	#8A7E60	—
string, string.quoted, string.template	#90A878	—
string.template punctuation.definition.template-expression, string.interpolated punctuation.section.embedded, meta.template.expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#90A878	bold
constant.character.escape, string.regexp constant.character.escape	#90A878	bold
punctuation.definition.string.begin, punctuation.definition.string.end	#90A878	—
string.regexp	#B8A878	—
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp	#B8A878	—
constant.numeric, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#B8A878	—
constant.other, constant.character	#B8A878	—
keyword, keyword.other	#E8A030	—
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export, keyword.control.from	#E8A030	italic
keyword.control.return, keyword.control.yield, keyword.control.await	#E8A030	italic
keyword.operator.new, keyword.operator.delete, keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.void, keyword.operator.expression.keyof, keyword.operator.expression.is	#E8A030	—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest, keyword.operator.type.annotation, keyword.operator.optional	#E8A030	—
storage.type, storage.type.function, storage.type.class, storage.type.interface, storage.type.enum, storage.type.namespace, storage.type.type	#E8A030	—
storage.modifier, storage.modifier.async, storage.modifier.static, keyword.other.debugger	#E8A030	italic
entity.name.function, meta.function-call entity.name.function, support.function, meta.function entity.name.function	#7EB540	—
meta.method-call entity.name.function, meta.function-call.method entity.name.function	#7EB540	—
support.function.builtin, support.function.magic, support.function.console	#7EB540	italic
storage.type.function.arrow	#E8A030	—
variable, variable.other, variable.other.readwrite, meta.definition.variable	#B0A090	—
variable.other.object.property, variable.other.property, support.variable.property	#D4C8A0	—
variable.parameter, meta.parameters variable, meta.function.parameters variable	#B0A090	italic
variable.language, variable.language.this, variable.language.self, variable.language.super	#B0A090	italic bold
variable.other.constant	#B8A878	—
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.class	#B8A878	—
entity.other.inherited-class	#B8A878	italic
support.type.builtin, support.type.primitive, support.type.property-name	#B8A878	—
entity.name.type.parameter	#B8A878	italic
entity.name.namespace, entity.name.type.namespace, entity.name.scope-resolution	#B8A878	—
meta.decorator, meta.decorator entity.name.function, punctuation.decorator, meta.decorator punctuation.definition, entity.name.function.decorator	#B8A878	italic
storage.type.annotation, meta.annotation	#B8A878	italic
punctuation, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace	#D4C8A0	—
entity.name.tag, entity.name.tag.html, support.class.component	#E8A030	—
entity.other.attribute-name, entity.other.attribute-name.html	#B8A878	italic
support.class.component.tsx, support.class.component.jsx, entity.name.tag.component	#B8A878	—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end	#E8A03088	—
constant.character.entity, punctuation.definition.entity	#B8A878	—
support.type.property-name.css, support.type.vendored.property-name.css, support.type.property-name.scss	#7EB540	—
support.constant.property-value.css, support.constant.font-name.css, meta.property-value.css	#D4C8A0	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#B8A878	—
entity.name.tag.css	#E8A030	—
keyword.other.unit.css, constant.numeric.css	#B8A878	—
variable.css, variable.argument.css, support.type.custom-property.css	#B0A090	—
variable.scss, variable.other.scss	#B0A090	—
keyword.control.at-rule.css, keyword.control.at-rule.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.mixin.scss	#E8A030	italic
support.type.property-name.json, support.type.property-name.json.comments	#7EB540	—
string.quoted.double.json, string.quoted.double.json.comments	#90A878	—
heading.1.markdown entity.name, heading.2.markdown entity.name, heading.3.markdown entity.name, heading.4.markdown entity.name, heading.5.markdown entity.name, heading.6.markdown entity.name, entity.name.section.markdown, markup.heading, markup.heading.setext	#E8A030	bold
punctuation.definition.heading.markdown	#E8A030	—
markup.bold, punctuation.definition.bold	#D4C8A0	bold
markup.italic, punctuation.definition.italic	#D4C8A0	italic
markup.inline.raw, markup.fenced_code, markup.raw	#90A878	—
markup.underline.link, string.other.link	#7EB540	—
string.other.link.title.markdown, string.other.link.description.markdown, meta.link.inline.markdown string	#7EB540	—
punctuation.definition.list.begin.markdown, markup.list.numbered, markup.list.unnumbered	#E8A030	—
markup.quote, punctuation.definition.quote.begin.markdown	#7A6E50	italic
meta.separator.markdown	#555544	—
entity.name.tag.yaml	#7EB540	—
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml	#B8A878	—
entity.name.section.group-title.ini, support.type.property-name.table.toml, entity.other.attribute-name.table.toml	#E8A030	—
variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell, punctuation.definition.variable.shell	#B0A090	—
support.function.builtin.shell, entity.name.command.shell	#7EB540	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql, keyword.other.create.sql, keyword.other.data-integrity.sql	#E8A030	—
support.function.aggregate.sql, support.function.scalar.sql, support.function.string.sql	#7EB540	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python, variable.language.special.cls.python	#B0A090	italic bold
support.function.magic.python	#7EB540	italic
meta.fstring storage.type.format, constant.character.format.placeholder.other.python	#90A878	bold
entity.name.package.go	#B8A878	—
entity.name.import.go	#90A878	—
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust	#B8A878	italic
entity.name.function.macro.rust, meta.macro.rust	#B8A878	bold
meta.attribute.rust	#B8A878	italic
punctuation.definition.variable.php	#B0A090	—
constant.language.symbol.ruby, constant.other.symbol.ruby	#B8A878	—
variable.other.readwrite.instance.ruby	#B0A090	—
entity.name	#B8A878	—
support.other.variable	#B0A090	—
invalid, invalid.illegal	#FFFFFF	underline
invalid.deprecated	#D4C8A0	strikethrough