Themes To Die For

Name: Themes To Die For
Author: Alec Larson

Publisher: Alec LarsonThemes in package: 17

A collection of my favorite VS Code themes

Open in VS Code GitHub

Color themes

VS Code preview

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

Themes To Die For — Remedy Bright

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

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

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

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

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

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#eb684b
activityBar.background#fff4de
activityBar.border#efd7a6
activityBar.dropBorder#eb684b
activityBar.foreground#594318
activityBar.inactiveForeground#b19c72
activityBarBadge.background#eb684b
activityBarBadge.foreground#fff4de
badge.background#eb684b
badge.foreground#fff4de
breadcrumb.activeSelectionForeground#594318
breadcrumb.focusForeground#594318
breadcrumb.foreground#ad8c49
breadcrumbPicker.background#fff4de
button.background#eb684b
button.foreground#fff4de
button.hoverBackground#f19783
button.secondaryBackground#de935f
button.secondaryForeground#fff4de
button.secondaryHoverBackground#e9b694
charts.blue#5f819d
charts.green#8c9440
charts.orange#de935f
charts.purple#85678f
charts.red#a54242
charts.yellow#d79a22
checkbox.background#fff4de
checkbox.border#efd7a6
checkbox.foreground#de935f
commandCenter.activeBackground#fff9ec
commandCenter.activeForeground#594318
commandCenter.background#fff9ec
commandCenter.border#efd7a6
commandCenter.foreground#ad8c49
debugConsole.errorForeground#a54242
debugConsole.infoForeground#5f819d
debugConsole.sourceForeground#b19c72
debugConsole.warningForeground#de935f
debugConsoleInputIcon.foreground#b19c72
debugExceptionWidget.background#fff4de
debugExceptionWidget.border#eb684b
debugIcon.breakpointCurrentStackframeForeground#81a2be
debugIcon.breakpointDisabledForeground#b19c7266
debugIcon.breakpointForeground#cc6666
debugIcon.breakpointStackframeForeground#5f819d99
debugIcon.breakpointUnverifiedForeground#707880
debugIcon.continueForeground#eb684b
debugIcon.disconnectForeground#a54242
debugIcon.pauseForeground#eb684b
debugIcon.restartForeground#b5bd68
debugIcon.startForeground#eb684b
debugIcon.stepBackForeground#81a2be
debugIcon.stepIntoForeground#81a2be
debugIcon.stepOutForeground#81a2be
debugIcon.stepOverForeground#81a2be
debugIcon.stopForeground#a54242
debugTokenExpression.boolean#de935f
debugTokenExpression.error#a54242
debugTokenExpression.name#594318
debugTokenExpression.number#de935f
debugTokenExpression.string#8c9440
debugTokenExpression.value#b19c72
debugToolBar.background#fff4de
debugToolBar.border#efd7a6
debugView.exceptionLabelBackground#a54242
debugView.exceptionLabelForeground#fff4de
debugView.stateLabelBackground#5f819d
debugView.stateLabelForeground#fff4de
debugView.valueChangedHighlight#5f819d99
descriptionForeground#594318
diffEditor.border#efd7a6
diffEditor.diagonalFill#ad8c4944
diffEditor.insertedLineBackground#b5bd6822
diffEditor.insertedTextBackground#b5bd6833
diffEditor.removedLineBackground#cc666622
diffEditor.removedTextBackground#cc666633
dropdown.background#fff4de
dropdown.border#efd7a6
dropdown.foreground#594318
editor.background#fff9ec
editor.findMatchBackground#5e8d8744
editor.findMatchBorder#5e8d87aa
editor.findMatchHighlightBackground#5e8d8733
editor.findRangeHighlightBackground#b5bd6811
editor.focusedStackFrameHighlightBackground#81a2be22
editor.foldBackground#5f819d11
editor.foreground#594318
editor.hoverHighlightBackground#59431811
editor.inlineValuesBackground#fff4de
editor.inlineValuesForeground#ad8c49
editor.lineHighlightBackground#59431809
editor.rangeHighlightBackground#59431811
editor.selectionBackground#59431822
editor.selectionHighlightBackground#59431811
editor.snippetFinalTabstopHighlightBackground#5e8d8733
editor.snippetFinalTabstopHighlightBorder#5e8d8799
editor.snippetTabstopHighlightBackground#5e8d8700
editor.snippetTabstopHighlightBorder#5e8d8799
editor.stackFrameHighlightBackground#5f819d33
editor.wordHighlightBackground#59431811
editor.wordHighlightStrongBackground#eb684b33
editor.wordHighlightStrongBorder#eb684baa
editorBracketHighlight.foreground1#b294bb88
editorBracketHighlight.foreground2#cc666688
editorBracketHighlight.foreground3#d79a2288
editorBracketHighlight.foreground4#8abeb788
editorBracketHighlight.foreground5#b5bd6888
editorBracketHighlight.foreground6#81a2be88
editorBracketHighlight.unexpectedBracket.foreground#de935f
editorBracketMatch.background#ad8c4933
editorBracketMatch.border#ad8c4966
editorCodeLens.foreground#ad8c49
editorCursor.background#fff4de
editorCursor.foreground#594318
editorError.foreground#a54242
editorGhostText.background#ad8c4922
editorGhostText.foreground#ad8c49
editorGroup.border#efd7a6
editorGroup.dropBackground#59431822
editorGroupHeader.noTabsBackground#fff4de
editorGroupHeader.tabsBackground#fff4de
editorGutter.addedBackground#b5bd68
editorGutter.commentRangeForeground#ad8c4999
editorGutter.deletedBackground#cc6666
editorGutter.foldingControlForeground#ad8c49
editorGutter.modifiedBackground#81a2be
editorHint.foreground#707880
editorHoverWidget.background#fff4de
editorHoverWidget.border#efd7a6
editorIndentGuide.activeBackground#ad8c4999
editorIndentGuide.background#ad8c4933
editorInfo.foreground#5f819d
editorInlayHint.background#fff4de
editorInlayHint.foreground#ad8c49
editorLightBulb.foreground#de935f
editorLightBulbAutoFix.foreground#5f819d
editorLineNumber.activeForeground#594318
editorLineNumber.foreground#ad8c49
editorLink.activeForeground#eb684b
editorMarkerNavigation.background#fff4de
editorMarkerNavigationError.background#a5424244
editorMarkerNavigationInfo.background#5f819d44
editorMarkerNavigationWarning.background#de935f44
editorOverviewRuler.addedForeground#b5bd68
editorOverviewRuler.background#fff4de
editorOverviewRuler.border#fff4de
editorOverviewRuler.bracketMatchForeground#ad8c49
editorOverviewRuler.deletedForeground#cc6666
editorOverviewRuler.errorForeground#a54242
editorOverviewRuler.findMatchForeground#5e8d87aa
editorOverviewRuler.infoForeground#5f819d
editorOverviewRuler.modifiedForeground#81a2be
editorOverviewRuler.rangeHighlightForeground#eb684baa
editorOverviewRuler.warningForeground#de935f
editorOverviewRuler.wordHighlightForeground#5e8d8799
editorOverviewRuler.wordHighlightStrongForeground#5e8d87
editorPane.background#fff4de
editorRuler.foreground#ad8c4999
editorStickyScrollHover.background#59431809
editorSuggestWidget.background#fff4de
editorSuggestWidget.border#efd7a6
editorSuggestWidget.foreground#594318
editorSuggestWidget.highlightForeground#eb684b
editorSuggestWidget.selectedBackground#eb684b66
editorUnnecessaryCode.opacity#00000055
editorWarning.foreground#de935f
editorWhitespace.foreground#ad8c4999
editorWidget.background#fff4de
editorWidget.border#efd7a6
editorWidget.resizeBorder#eb684b
extensionButton.prominentBackground#eb684b
extensionButton.prominentForeground#fff4de
extensionButton.prominentHoverBackground#f3a391
extensionIcon.preReleaseForeground#a54242
extensionIcon.starForeground#eb684b
extensionIcon.verifiedForeground#8c9440
focusBorder#eb684b66
foreground#594318
gitDecoration.addedResourceForeground#b5bd68
gitDecoration.conflictingResourceForeground#d79a22
gitDecoration.deletedResourceForeground#cc6666
gitDecoration.ignoredResourceForeground#b19c72
gitDecoration.modifiedResourceForeground#81a2be
gitDecoration.submoduleResourceForeground#707880
gitDecoration.untrackedResourceForeground#707880
gitlens.closedPullRequestIconColor#594318
gitlens.decorations.addedForegroundColor#b5bd68
gitlens.decorations.branchAheadForegroundColor#81a2be
gitlens.decorations.branchBehindForegroundColor#b5bd68
gitlens.decorations.branchDivergedForegroundColor#d79a22
gitlens.decorations.branchUnpublishedForegroundColor#707880
gitlens.decorations.branchUpToDateForegroundColor#594318
gitlens.decorations.copiedForegroundColor#81a2be
gitlens.decorations.deletedForegroundColor#cc6666
gitlens.decorations.ignoredForegroundColor#b19c72
gitlens.decorations.modifiedForegroundColor#81a2be
gitlens.decorations.renamedForegroundColor#81a2be
gitlens.decorations.untrackedForegroundColor#707880
gitlens.gutterBackgroundColor#fff9ec
gitlens.gutterForegroundColor#ad8c49
gitlens.gutterUncommittedForegroundColor#707880
gitlens.lineHighlightBackgroundColor#b5bd6811
gitlens.lineHighlightOverviewRulerColor#b5bd6811
gitlens.mergedPullRequestIconColor#594318
gitlens.openPullRequestIconColor#594318
gitlens.unpublishedCommitIconColor#594318
gitlens.unpulledChangesIconColor#594318
icon.foreground#594318
input.background#fff9ec
input.border#efd7a6
input.placeholderForeground#ad8c49
inputOption.activeBorder#eb684b66
inputValidation.errorBackground#a54242
inputValidation.errorBorder#a54242
inputValidation.errorForeground#fff4de
inputValidation.infoBackground#5f819d
inputValidation.infoBorder#5f819d
inputValidation.infoForeground#fff4de
inputValidation.warningBackground#de935f
inputValidation.warningBorder#de935f
inputValidation.warningForeground#fff4de
keybindingLabel.background#cdbfa266
keybindingLabel.border#efd7a6
keybindingLabel.bottomBorder#efd7a6
keybindingLabel.foreground#594318
keybindingTable.headerBackground#fff4de
keybindingTable.rowsBackground#fff4de66
list.activeSelectionBackground#eb684baa
list.activeSelectionForeground#594318
list.deemphasizedForeground#b19c72
list.dropBackground#59431822
list.errorForeground#a54242
list.filterMatchBackground#5e8d8744
list.highlightForeground#eb684b
list.hoverBackground#eb684b11
list.inactiveFocusBackground#eb684b11
list.inactiveSelectionBackground#eb684b22
list.invalidItemForeground#a54242
list.warningForeground#de935f
listFilterWidget.background#fff4de
listFilterWidget.noMatchesOutline#a54242
menu.background#fff4de
menu.border#eb684b66
menu.foreground#594318
menu.selectionBackground#eb684b44
menu.selectionForeground#594318
menu.separatorBackground#efd7a6
menubar.selectionBackground#eb684b
menubar.selectionForeground#594318
merge.border#efd7a699
merge.commonContentBackground#c5c8c611
merge.commonHeaderBackground#c5c8c633
merge.currentContentBackground#b5bd6811
merge.currentHeaderBackground#b5bd6833
merge.incomingContentBackground#81a2be11
merge.incomingHeaderBackground#81a2be33
mergeEditor.change.background#d79a2211
mergeEditor.change.word.background#d79a2222
mergeEditor.conflict.handled.minimapOverViewRuler#81a2be
mergeEditor.conflict.handledFocused.border#81a2be66
mergeEditor.conflict.handledUnfocused.border#81a2be22
mergeEditor.conflict.unhandled.minimapOverViewRuler#d79a22
mergeEditor.conflict.unhandledFocused.border#d79a2266
mergeEditor.conflict.unhandledUnfocused.border#d79a2222
mergeEditor.conflictingLines.background#d79a2266
minimap.background#fff4de
minimap.errorHighlight#a54242
minimap.findMatchHighlight#5e8d8744
minimap.selectionHighlight#594318aa
minimap.warningHighlight#de935f
minimapGutter.addedBackground#b5bd68
minimapGutter.deletedBackground#cc6666
minimapGutter.modifiedBackground#81a2be
minimapSlider.activeBackground#eb684b66
minimapSlider.background#eb684b22
minimapSlider.hoverBackground#eb684b44
notebook.cellBorderColor#efd7a6
notebook.cellHoverBackground#59431809
notebook.cellInsertionIndicator#eb684b
notebook.cellStatusBarItemHoverBackground#cdbfa266
notebook.cellToolbarSeparator#efd7a6
notebook.focusedCellBackground#59431809
notebook.focusedCellBorder#eb684b66
notebook.inactiveFocusedCellBorder#eb684b44
notebook.outputContainerBackgroundColor#fff4de
notebook.selectedCellBackground#59431822
notebook.symbolHighlightBackground#59431811
notebookStatusErrorIcon.foreground#a54242
notebookStatusRunningIcon.foreground#594318
notebookStatusSuccessIcon.foreground#8c9440
notificationCenter.border#efd7a6
notificationCenterHeader.background#efd7a6
notificationCenterHeader.foreground#594318
notificationLink.foreground#eb684b
notifications.background#fff4de
notifications.border#efd7a6
notificationsErrorIcon.foreground#a54242
notificationsInfoIcon.foreground#5f819d
notificationsWarningIcon.foreground#de935f
notificationToast.border#efd7a6
panel.background#fff4de
panel.border#efd7a6
panel.dropBorder#eb684b
panelSection.border#efd7a6
panelSection.dropBackground#59431822
panelSectionHeader.background#fff4de
panelSectionHeader.border#efd7a6
panelSectionHeader.foreground#ad8c49
panelTitle.activeBorder#eb684b
panelTitle.activeForeground#594318
panelTitle.inactiveForeground#ad8c49
peekView.border#eb684b99
peekViewEditor.background#fff9ec
peekViewEditor.matchHighlightBackground#5e8d8722
peekViewEditorGutter.background#fff4de
peekViewResult.background#fff4de
peekViewResult.fileForeground#594318
peekViewResult.lineForeground#594318
peekViewResult.matchHighlightBackground#5e8d8799
peekViewResult.selectionBackground#eb684b99
peekViewResult.selectionForeground#594318
peekViewTitle.background#fff4de
peekViewTitleDescription.foreground#ad8c49
peekViewTitleLabel.foreground#594318
pickerGroup.border#efd7a6
pickerGroup.foreground#594318
ports.iconRunningProcessForeground#8c9440
problemsErrorIcon.foreground#a54242
problemsInfoIcon.foreground#5f819d
problemsWarningIcon.foreground#de935f
progressBar.background#eb684b
quickInputList.focusBackground#eb684b44
sash.hoverBorder#efd7a6
scrollbar.shadow#b19c72
scrollbarSlider.activeBackground#eb684b66
scrollbarSlider.background#eb684b22
scrollbarSlider.hoverBackground#eb684b44
searchEditor.findMatchBorder#5e8d8744
selection.background#59431844
settings.checkboxBackground#fff4de
settings.checkboxBorder#efd7a6
settings.checkboxForeground#de935f
settings.dropdownBackground#fff4de
settings.dropdownBorder#efd7a6
settings.dropdownForeground#de935f
settings.dropdownListBorder#efd7a6
settings.focusedRowBackground#59431809
settings.focusedRowBorder#eb684b66
settings.headerForeground#594318
settings.modifiedItemIndicator#eb684b
settings.numberInputBackground#fff4de
settings.numberInputBorder#efd7a6
settings.numberInputForeground#de935f
settings.sashBorder#efd7a6
settings.textInputBackground#fff4de
settings.textInputBorder#efd7a6
settings.textInputForeground#8c9440
sideBar.background#fff4de
sideBar.border#efd7a6
sideBar.dropBackground#59431822
sideBar.foreground#594318
sideBarSectionHeader.background#fff4de
sideBarSectionHeader.border#efd7a6
sideBarSectionHeader.foreground#ad8c49
sideBarTitle.foreground#ad8c49
statusBar.background#fff4de
statusBar.border#efd7a6
statusBar.debuggingBackground#81a2be99
statusBar.debuggingBorder#efd7a6
statusBar.debuggingForeground#130e06
statusBar.focusBorder#eb684b66
statusBar.foreground#8b703b
statusBar.noFolderBackground#fff4de
statusBarItem.activeBackground#cdbfa2bb
statusBarItem.errorBackground#a5424299
statusBarItem.errorForeground#130e06
statusBarItem.focusBorder#eb684b66
statusBarItem.hoverBackground#cdbfa266
statusBarItem.remoteBackground#de935f
statusBarItem.remoteForeground#130e06
statusBarItem.warningBackground#de935f99
statusBarItem.warningForeground#130e06
symbolIcon.arrayForeground#b19c72
symbolIcon.booleanForeground#de935f
symbolIcon.classForeground#d79a22
symbolIcon.constantForeground#de935f
symbolIcon.constructorForeground#d79a22
symbolIcon.fieldForeground#de935f
symbolIcon.functionForeground#5f819d
symbolIcon.interfaceForeground#cc6666
symbolIcon.keywordForeground#85678f
symbolIcon.methodForeground#5f819d
symbolIcon.moduleForeground#d79a22
symbolIcon.namespaceForeground#d79a22
symbolIcon.nullForeground#de935f
symbolIcon.numberForeground#de935f
symbolIcon.objectForeground#b19c72
symbolIcon.operatorForeground#85678f
symbolIcon.packageForeground#d79a22
symbolIcon.propertyForeground#cc6666
symbolIcon.snippetForeground#de935f
symbolIcon.stringForeground#8c9440
symbolIcon.structForeground#cc6666
symbolIcon.textForeground#b19c72
symbolIcon.typeParameterForeground#cc6666
symbolIcon.unitForeground#de935f
symbolIcon.variableForeground#707880
tab.activeBackground#fff9ec
tab.activeBorderTop#eb684b
tab.activeForeground#594318
tab.activeModifiedBorder#eb684b
tab.border#fff4de
tab.hoverForeground#594318
tab.inactiveBackground#fff4de
tab.inactiveForeground#ad8c49
tab.inactiveModifiedBorder#eb684b66
tab.lastPinnedBorder#efd7a6
tab.unfocusedActiveForeground#ad8c49
tab.unfocusedHoverForeground#594318
tab.unfocusedInactiveForeground#ad8c49
terminal.ansiBlack#282a2e
terminal.ansiBlue#5f819d
terminal.ansiBrightBlack#9ca19e
terminal.ansiBrightBlue#81a2be
terminal.ansiBrightCyan#8abeb7
terminal.ansiBrightGreen#b5bd68
terminal.ansiBrightMagenta#b294bb
terminal.ansiBrightRed#cc6666
terminal.ansiBrightWhite#535961
terminal.ansiBrightYellow#d79a22
terminal.ansiCyan#5e8d87
terminal.ansiGreen#8c9440
terminal.ansiMagenta#85678f
terminal.ansiRed#a54242
terminal.ansiWhite#707880
terminal.ansiYellow#de935f
terminal.background#fff4de
terminal.border#efd7a6
terminal.findMatchBackground#5e8d8744
terminal.findMatchBorder#5e8d87aa
terminal.findMatchHighlightBackground#5e8d8733
terminal.foreground#594318
terminal.selectionBackground#59431822
terminal.tab.activeBorder#eb684b
terminalCommandDecoration.defaultBackground#b19c72
terminalCommandDecoration.errorBackground#a54242
terminalCommandDecoration.successBackground#8c9440
terminalCursor.background#ff0000
terminalCursor.foreground#594318
testing.iconErrored#a54242
testing.iconFailed#a54242
testing.iconPassed#8c9440
testing.iconQueued#5f819d
testing.iconSkipped#b19c72
testing.iconUnset#5f819d
testing.message.error.decorationForeground#130e06
testing.message.error.lineBackground#a5424266
testing.message.info.decorationForeground#252525
testing.message.info.lineBackground#5f819d66
testing.peekBorder#efd7a6
testing.runAction#ad8c49
textBlockQuote.background#fff4de
textBlockQuote.border#eb684b
textCodeBlock.background#fff9ec
textLink.activeForeground#eb684b
textLink.foreground#eb684b
textPreformat.foreground#de935f
titleBar.activeBackground#fff4de
titleBar.activeForeground#594318
titleBar.border#efd7a6
titleBar.inactiveBackground#fff9ec
titleBar.inactiveForeground#ad8c49
toolbar.activeBackground#cdbfa2bb
toolbar.hoverBackground#cdbfa266
toolbar.hoverOutline#00000000
tree.indentGuidesStroke#ad8c4999
tree.tableColumnsBorder#efd7a6
walkThrough.embeddedEditorBackground#fff4de
widget.shadow#b19c72

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.tag, constant.numeric, constant.language, support.type.builtin, support.type.primitive, support.constant	#DE935F	—
comment, punctuation.definition.comment	#B19C72	—
keyword, storage, storage.type.class, storage.type.enum, storage.type.function, storage.type.interface, storage.type.internaldeclaration, storage.type.modifier, storage.type.namespace, storage.type.property, storage.type.trait, storage.type.type	#85678F	—
punctuation.definition.directive, keyword.control.directive, entity.name.function.preprocessor, entity.name.function.directive, entity.name.label	#5E8D87	—
punctuation, meta.brace.angle, meta.brace.round, meta.brace.square, meta.brace.curly, meta.brackets	#B19C72	—
entity.name.type.class, entity.name.type.namespace, entity.other.inherited-class, storage.type.namespace, support.class, support.other.namespace	#D79A22	—
storage.type, entity.name.type, keyword.other.type, support.type	#CC6666	—
entity.name.function, support.function	#5F819D	—
variable	#594318	—
constant, variable.language	#CC6666	—
string	#8C9440	—
constant.character.escape	#707880	—
string.regexp, string.regexp punctuation.definition	#8ABEB7	—
string.regexp constant.other.character-class	#CC6666	—
string.regexp constant.other.character-class.set	#A54242	—
entity.name.section, punctuation.definition.heading	#CC6666	bold
variable.other.jsdoc, meta.other.type.phpdoc, comment.block.javadoc variable.parameter	#707880	—
variable.other.link	#5E8D87	—
source.c storage.modifier.array.bracket.square, meta.embedded.block.c storage.modifier.array.bracket.square	#B19C72	—
source.c keyword.other.unit, meta.embedded.block.c keyword.other.unit	#DE935F	—
source.cpp entity.name.type.namespace, meta.embedded.block.cpp entity.name.type.namespace	#D79A22	—
source.cpp storage.type.namespace.definition, meta.embedded.block.cpp storage.type.namespace.definition	#85678F	—
source.cs entity.name.type.namespace, meta.embedded.block.csharp entity.name.type.namespace	#D79A22	—
source.cs keyword.type, meta.embedded.block.csharp keyword.type	#CC6666	—
source.css entity.name.tag, meta.embedded.block.css entity.name.tag, meta.embedded.block.less entity.name.tag	#DE935F	—
source.css entity.other.attribute-name.class, meta.embedded.block.css entity.other.attribute-name.class, meta.embedded.block.less entity.other.attribute-name.class	#D79A22	—
source.css entity.other.attribute-name.id, meta.embedded.block.css entity.other.attribute-name.id, meta.embedded.block.less entity.other.attribute-name.id	#8C9440	—
source.css entity.other.attribute-name.pseudo-element, meta.embedded.block.css entity.other.attribute-name.pseudo-element, meta.embedded.block.less entity.other.attribute-name.pseudo-element	#5E8D87	—
source.css variable, meta.embedded.block.css variable, meta.embedded.block.less variable	#707880	—
source.css support.type.property-name, meta.embedded.block.css support.type.property-name, meta.embedded.block.less support.type.property-name	#594318	—
source.css constant.numeric, source.css constant.other.color, source.css keyword.other.unit, source.css support.constant.property-value, meta.embedded.block.css constant.numeric, meta.embedded.block.css constant.other.color, meta.embedded.block.css keyword.other.unit, meta.embedded.block.css support.constant.property-value, meta.embedded.block.less constant.numeric, meta.embedded.block.less constant.other.color, meta.embedded.block.less keyword.other.unit, meta.embedded.block.less support.constant.property-value	#DE935F	—
source.css support.function, meta.embedded.block.css support.function, meta.embedded.block.less support.function	#5F819D	—
text.html entity.other.attribute-name, meta.embedded.block.html entity.other.attribute-name	#CC6666	—
text.html meta.attribute.id string.quoted, meta.embedded.block.html meta.attribute.id string.quoted	#8C9440	—
text.pug entity.other.attribute-name.tag, text.pug entity.name.label	#CC6666	—
text.pug entity.other.attribute-name.id	#8C9440	—
text.pug entity.other.attribute-name.class	#D79A22	—
text.pug storage.type.import.include, text.pug attribute_value	#85678F	—
text.pug meta.tag.other constant.name.attribute.tag.pug	#B19C72	—
text.pug string.comment	#B19C72	—
text.pug constant.language.name.generic.filter	#5F819D	—
source.java storage.modifier.import, source.java storage.modifier.package, meta.embedded.block.java storage.modifier.import, meta.embedded.block.java storage.modifier.package	#594318	—
source.js support.variable.object, source.js support.type.object.module, source.ts support.variable.object, source.ts support.type.object.module, source.tsx support.variable.object, source.tsx support.type.object.module, source.svelte support.variable.object, source.svelte support.type.object.module, meta.embedded.block.javascript support.variable.object, meta.embedded.block.javascript support.type.object.module, meta.embedded.block.typescript support.variable.object, meta.embedded.block.typescript support.type.object.module, meta.embedded.block.typescriptreact support.variable.object, meta.embedded.block.typescriptreact support.type.object.module, meta.embedded.block.svelte support.variable.object, meta.embedded.block.svelte support.type.object.module	#DE935F	—
source.js storage.type.js, source.ts storage.type.ts, source.tsx storage.type.tsx, meta.embedded.block.javascript storage.type.js, meta.embedded.block.typescript storage.type.ts, meta.embedded.block.svelte storage.type.js, meta.embedded.block.svelte storage.type.ts, source.js storage.type.class, source.js storage.type.function, source.ts storage.type.class, source.ts storage.type.function, source.tsx storage.type.class, source.tsx storage.type.function, source.svelte storage.type.class, source.svelte storage.type.function, meta.embedded.block.javascript storage.type.class, meta.embedded.block.javascript storage.type.function, meta.embedded.block.typescript storage.type.class, meta.embedded.block.typescript storage.type.function, meta.embedded.block.typescriptreact storage.type.class, meta.embedded.block.typescriptreact storage.type.function, meta.embedded.block.svelte storage.type.class, meta.embedded.block.svelte storage.type.function	#85678F	—
source.js new.expr entity.name.type, source.ts new.expr entity.name.type, source.tsx new.expr entity.name.type, source.svelte new.expr entity.name.type, meta.embedded.block.javascript new.expr entity.name.type, meta.embedded.block.typescript new.expr entity.name.type, meta.embedded.block.typescriptreact new.expr entity.name.type, meta.embedded.block.svelte new.expr entity.name.type	#D79A22	—
source.js meta.tag.attributes entity.other.attribute-name, source.js meta.attribute entity.other.attribute-name, source.js variable.other.constant.property, source.ts meta.tag.attributes entity.other.attribute-name, source.ts meta.attribute entity.other.attribute-name, source.ts variable.other.constant.property, source.tsx meta.tag.attributes entity.other.attribute-name, source.tsx meta.attribute entity.other.attribute-name, source.tsx variable.other.constant.property, source.svelte meta.tag.attributes entity.other.attribute-name, source.svelte meta.attribute entity.other.attribute-name, source.svelte variable.other.constant.property, meta.embedded.block.javascript meta.tag.attributes entity.other.attribute-name, meta.embedded.block.javascript meta.attribute entity.other.attribute-name, meta.embedded.block.javascript variable.other.constant.property, meta.embedded.block.typescript meta.tag.attributes entity.other.attribute-name, meta.embedded.block.typescript meta.attribute entity.other.attribute-name, meta.embedded.block.typescript variable.other.constant.property, meta.embedded.block.typescriptreact meta.tag.attributes entity.other.attribute-name, meta.embedded.block.typescriptreact meta.attribute entity.other.attribute-name, meta.embedded.block.typescriptreact variable.other.constant.property, meta.embedded.block.svelte meta.tag.attributes entity.other.attribute-name, meta.embedded.block.svelte meta.attribute entity.other.attribute-name, meta.embedded.block.svelte variable.other.constant.property	#CC6666	—
source.ts meta.type.annotation entity.name.type, source.tsx meta.type.annotation entity.name.type, meta.embedded.block.typescript meta.type.annotation entity.name.type, meta.embedded.block.typescriptreact meta.type.annotation entity.name.type	#CC6666	—
source.env variable, source.json support.type.property-name, meta.embedded.block.json support.type.property-name, source.terraform source.terraform.embedded.source variable.other.terraform, meta.embedded.block.terraform source.terraform.embedded.source variable.other.terraform, source.yaml entity.name.tag, meta.embedded.block.yaml entity.name.tag, meta.embedded.block.frontmatter entity.name.tag	#CC6666	—
source.yaml entity.other.document.begin, meta.embedded.block.yaml entity.other.document.begin, meta.embedded.block.frontmatter entity.other.document.begin, source.terraform entity.tag.embedded, meta.embedded.block.terraform entity.tag.embedded	#B19C72	—
source.makefile variable.other, meta.embedded.block.makefile variable.other	#CC6666	—
source.makefile meta.scope.prerequisites, meta.embedded.block.makefile meta.scope.prerequisites	#DE935F	—
source.makefile entity.name.function.target, meta.embedded.block.makefile entity.name.function.target	#D79A22	bold
source.makefile support.function.target, meta.embedded.block.makefile support.function.target	#D79A22	—
source.makefile meta.scope.function-call, meta.embedded.block.makefile meta.scope.function-call	#5E8D87	—
text.html.markdown markup.quote, meta.embedded.block.markdown markup.quote	#B19C72	italic
text.html.markdown markup.inline.raw, meta.embedded.block.markdown markup.inline.raw	#DE935F	—
text.html.markdown constant.other.reference.link, text.html.markdown markup.underline.link, text.html.markdown meta.link.reference, meta.embedded.block.markdown constant.other.reference.link, meta.embedded.block.markdown markup.underline.link, meta.embedded.block.markdown meta.link.reference	#5E8D87	—
text.html.markdown string.other.link.title, meta.embedded.block.markdown string.other.link.title	#CC6666	—
text.html.markdown fenced_code.block.language, meta.embedded.block.markdown fenced_code.block.language	#B19C72	—
text.html.markdown markup.bold, meta.embedded.block.markdown markup.bold	#C5C8C6	bold
text.html.markdown markup.italic, meta.embedded.block.markdown markup.italic	#C5C8C6	italic
source.shell variable.other.bracket, source.shell variable.other.special, source.shell variable.other.normal, meta.embedded.block.shellscript variable.other.bracket, meta.embedded.block.shellscript variable.other.special, meta.embedded.block.shellscript variable.other.normal	#CC6666	—
source.shell variable.other.positional, meta.embedded.block.shellscript variable.other.positional	#DE935F	—
token.info-token	#316BCD	—
token.warn-token	#CD9731	—
token.error-token	#CD3131	—
token.debug-token	#800080	—

VS Code preview

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

Themes To Die For — Rosé Pine Dawn

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

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

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

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

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

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#575279
activityBar.background#faf4ed
activityBar.dropBorder#f2e9e1
activityBar.foreground#575279
activityBar.inactiveForeground#797593
activityBarBadge.background#d7827e
activityBarBadge.foreground#faf4ed
badge.background#d7827e
badge.foreground#faf4ed
banner.background#fffaf3
banner.foreground#575279
banner.iconForeground#797593
breadcrumb.activeSelectionForeground#d7827e
breadcrumb.background#faf4ed
breadcrumb.focusForeground#797593
breadcrumb.foreground#9893a5
breadcrumbPicker.background#fffaf3
button.background#d7827e
button.foreground#faf4ed
button.hoverBackground#d7827ee6
button.secondaryBackground#fffaf3
button.secondaryForeground#575279
button.secondaryHoverBackground#f2e9e1
charts.blue#56949f
charts.foreground#575279
charts.green#286983
charts.lines#797593
charts.orange#d7827e
charts.purple#907aa9
charts.red#b4637a
charts.yellow#ea9d34
checkbox.background#fffaf3
checkbox.border#6e6a8614
checkbox.foreground#575279
debugExceptionWidget.background#fffaf3
debugExceptionWidget.border#6e6a8614
debugIcon.breakpointCurrentStackframeForeground#797593
debugIcon.breakpointDisabledForeground#797593
debugIcon.breakpointForeground#797593
debugIcon.breakpointStackframeForeground#797593
debugIcon.breakpointUnverifiedForeground#797593
debugIcon.continueForeground#797593
debugIcon.disconnectForeground#797593
debugIcon.pauseForeground#797593
debugIcon.restartForeground#797593
debugIcon.startForeground#797593
debugIcon.stepBackForeground#797593
debugIcon.stepIntoForeground#797593
debugIcon.stepOutForeground#797593
debugIcon.stepOverForeground#797593
debugIcon.stopForeground#b4637a
debugToolBar.background#fffaf3
debugToolBar.border#f2e9e1
descriptionForeground#797593
diffEditor.border#f2e9e1
diffEditor.diagonalFill#6e6a8626
diffEditor.insertedLineBackground#56949f26
diffEditor.insertedTextBackground#56949f26
diffEditor.removedLineBackground#b4637a26
diffEditor.removedTextBackground#b4637a26
diffEditorOverview.insertedForeground#56949f80
diffEditorOverview.removedForeground#b4637a80
dropdown.background#fffaf3
dropdown.border#6e6a8614
dropdown.foreground#575279
dropdown.listBackground#fffaf3
editor.background#faf4ed
editor.findMatchBackground#6e6a8626
editor.findMatchHighlightBackground#6e6a8626
editor.findRangeHighlightBackground#6e6a8626
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#6e6a8614
editor.foldBackground#fffaf3
editor.foreground#575279
editor.hoverHighlightBackground#00000000
editor.inactiveSelectionBackground#6e6a860d
editor.inlineValuesBackground#00000000
editor.inlineValuesForeground#797593
editor.lineHighlightBackground#6e6a860d
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#fffaf3
editor.rangeHighlightBackground#6e6a860d
editor.selectionBackground#6e6a8614
editor.selectionForeground#575279
editor.selectionHighlightBackground#6e6a8614
editor.selectionHighlightBorder#faf4ed
editor.snippetFinalTabstopHighlightBackground#6e6a8614
editor.snippetFinalTabstopHighlightBorder#fffaf3
editor.snippetTabstopHighlightBackground#6e6a8614
editor.snippetTabstopHighlightBorder#fffaf3
editor.stackFrameHighlightBackground#6e6a8614
editor.symbolHighlightBackground#6e6a8614
editor.symbolHighlightBorder#00000000
editor.wordHighlightBackground#6e6a8614
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#6e6a8614
editor.wordHighlightStrongBorder#6e6a8614
editorBracketHighlight.foreground1#b4637a80
editorBracketHighlight.foreground2#28698380
editorBracketHighlight.foreground3#ea9d3480
editorBracketHighlight.foreground4#56949f80
editorBracketHighlight.foreground5#d7827e80
editorBracketHighlight.foreground6#907aa980
editorBracketMatch.background#00000000
editorBracketMatch.border#797593
editorBracketPairGuide.activeBackground1#286983
editorBracketPairGuide.activeBackground2#d7827e
editorBracketPairGuide.activeBackground3#907aa9
editorBracketPairGuide.activeBackground4#56949f
editorBracketPairGuide.activeBackground5#ea9d34
editorBracketPairGuide.activeBackground6#b4637a
editorBracketPairGuide.background1#28698380
editorBracketPairGuide.background2#d7827e80
editorBracketPairGuide.background3#907aa980
editorBracketPairGuide.background4#56949f80
editorBracketPairGuide.background5#ea9d3480
editorBracketPairGuide.background6#b4637a80
editorCodeLens.foreground#d7827e
editorCursor.background#575279
editorCursor.foreground#9893a5
editorError.border#00000000
editorError.foreground#b4637a
editorGhostText.foreground#797593
editorGroup.border#00000000
editorGroup.dropBackground#fffaf3
editorGroup.emptyBackground#00000000
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#00000000
editorGroupHeader.tabsBackground#00000000
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#56949f
editorGutter.background#faf4ed
editorGutter.commentRangeForeground#797593
editorGutter.deletedBackground#b4637a
editorGutter.foldingControlForeground#907aa9
editorGutter.modifiedBackground#d7827e
editorHint.border#00000000
editorHint.foreground#797593
editorHoverWidget.background#fffaf3
editorHoverWidget.border#9893a580
editorHoverWidget.foreground#797593
editorHoverWidget.highlightForeground#575279
editorHoverWidget.statusBarBackground#00000000
editorIndentGuide.activeBackground#9893a5
editorIndentGuide.background#6e6a8626
editorInfo.border#f2e9e1
editorInfo.foreground#56949f
editorInlayHint.background#f2e9e1
editorInlayHint.foreground#797593
editorInlayHint.parameterBackground#f2e9e1
editorInlayHint.parameterForeground#907aa9
editorInlayHint.typeBackground#f2e9e1
editorInlayHint.typeForeground#56949f
editorLightBulb.foreground#286983
editorLightBulbAutoFix.foreground#d7827e
editorLineNumber.activeForeground#575279
editorLineNumber.foreground#797593
editorLink.activeForeground#d7827e
editorMarkerNavigation.background#fffaf3
editorMarkerNavigationError.background#fffaf3
editorMarkerNavigationInfo.background#fffaf3
editorMarkerNavigationWarning.background#fffaf3
editorOverviewRuler.addedForeground#56949f80
editorOverviewRuler.background#faf4ed
editorOverviewRuler.border#6e6a8626
editorOverviewRuler.bracketMatchForeground#797593
editorOverviewRuler.commonContentForeground#6e6a860d
editorOverviewRuler.currentContentForeground#6e6a8614
editorOverviewRuler.deletedForeground#b4637a80
editorOverviewRuler.errorForeground#b4637a80
editorOverviewRuler.findMatchForeground#6e6a8626
editorOverviewRuler.incomingContentForeground#907aa980
editorOverviewRuler.infoForeground#56949f80
editorOverviewRuler.modifiedForeground#d7827e80
editorOverviewRuler.rangeHighlightForeground#6e6a8626
editorOverviewRuler.selectionHighlightForeground#6e6a8626
editorOverviewRuler.warningForeground#ea9d3480
editorOverviewRuler.wordHighlightForeground#6e6a8614
editorOverviewRuler.wordHighlightStrongForeground#6e6a8626
editorPane.background#00000000
editorRuler.foreground#6e6a8626
editorSuggestWidget.background#fffaf3
editorSuggestWidget.border#00000000
editorSuggestWidget.focusHighlightForeground#d7827e
editorSuggestWidget.foreground#797593
editorSuggestWidget.highlightForeground#d7827e
editorSuggestWidget.selectedBackground#6e6a8614
editorSuggestWidget.selectedForeground#575279
editorSuggestWidget.selectedIconForeground#575279
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#57527980
editorWarning.border#00000000
editorWarning.foreground#ea9d34
editorWhitespace.foreground#9893a5
editorWidget.background#fffaf3
editorWidget.border#f2e9e1
editorWidget.foreground#797593
editorWidget.resizeBorder#9893a5
errorForeground#b4637a
extensionBadge.remoteBackground#907aa9
extensionBadge.remoteForeground#faf4ed
extensionButton.prominentBackground#d7827e
extensionButton.prominentForeground#faf4ed
extensionButton.prominentHoverBackground#d7827ee6
extensionIcon.preReleaseForeground#286983
extensionIcon.starForeground#d7827e
extensionIcon.verifiedForeground#907aa9
focusBorder#6e6a8614
foreground#575279
gitDecoration.addedResourceForeground#56949f
gitDecoration.conflictingResourceForeground#b4637a
gitDecoration.deletedResourceForeground#797593
gitDecoration.ignoredResourceForeground#9893a5
gitDecoration.modifiedResourceForeground#d7827e
gitDecoration.renamedResourceForeground#286983
gitDecoration.stageDeletedResourceForeground#b4637a
gitDecoration.stageModifiedResourceForeground#907aa9
gitDecoration.submoduleResourceForeground#ea9d34
gitDecoration.untrackedResourceForeground#ea9d34
icon.foreground#797593
input.background#f2e9e180
input.border#6e6a8614
input.foreground#575279
input.placeholderForeground#797593
inputOption.activeBackground#d7827e26
inputOption.activeForeground#d7827e
inputValidation.errorBackground#fffaf3
inputValidation.errorBorder#6e6a8626
inputValidation.errorForeground#b4637a
inputValidation.infoBackground#fffaf3
inputValidation.infoBorder#6e6a8626
inputValidation.infoForeground#56949f
inputValidation.warningBackground#fffaf3
inputValidation.warningBorder#6e6a8626
inputValidation.warningForeground#56949f80
keybindingLabel.background#f2e9e1
keybindingLabel.border#6e6a8626
keybindingLabel.bottomBorder#6e6a8626
keybindingLabel.foreground#907aa9
keybindingTable.headerBackground#f2e9e1
keybindingTable.rowsBackground#fffaf3
list.activeSelectionBackground#6e6a8614
list.activeSelectionForeground#575279
list.deemphasizedForeground#797593
list.dropBackground#fffaf3
list.errorForeground#b4637a
list.filterMatchBackground#fffaf3
list.filterMatchBorder#d7827e
list.focusBackground#6e6a8626
list.focusForeground#575279
list.focusOutline#6e6a8614
list.highlightForeground#d7827e
list.hoverBackground#6e6a860d
list.hoverForeground#575279
list.inactiveFocusBackground#6e6a860d
list.inactiveSelectionBackground#fffaf3
list.inactiveSelectionForeground#575279
list.invalidItemForeground#b4637a
list.warningForeground#ea9d34
listFilterWidget.background#fffaf3
listFilterWidget.noMatchesOutline#b4637a
listFilterWidget.outline#f2e9e1
menu.background#fffaf3
menu.border#6e6a860d
menu.foreground#575279
menu.selectionBackground#6e6a8614
menu.selectionBorder#f2e9e1
menu.selectionForeground#575279
menu.separatorBackground#6e6a8626
menubar.selectionBackground#6e6a8614
menubar.selectionBorder#6e6a860d
menubar.selectionForeground#575279
merge.border#f2e9e1
merge.commonContentBackground#6e6a8614
merge.commonHeaderBackground#6e6a8614
merge.currentContentBackground#ea9d3480
merge.currentHeaderBackground#ea9d3480
merge.incomingContentBackground#56949f80
merge.incomingHeaderBackground#56949f80
minimap.background#fffaf3
minimap.errorHighlight#b4637a80
minimap.findMatchHighlight#6e6a8614
minimap.selectionHighlight#6e6a8614
minimap.warningHighlight#ea9d3480
minimapGutter.addedBackground#56949f
minimapGutter.deletedBackground#b4637a
minimapGutter.modifiedBackground#d7827e
minimapSlider.activeBackground#6e6a8626
minimapSlider.background#6e6a8614
minimapSlider.hoverBackground#6e6a8614
notebook.cellBorderColor#56949f80
notebook.cellEditorBackground#fffaf3
notebook.cellHoverBackground#f2e9e180
notebook.focusedCellBackground#6e6a860d
notebook.focusedCellBorder#56949f
notebook.outputContainerBackgroundColor#6e6a860d
notificationCenter.border#6e6a8614
notificationCenterHeader.background#fffaf3
notificationCenterHeader.foreground#797593
notificationLink.foreground#907aa9
notifications.background#fffaf3
notifications.border#6e6a8614
notifications.foreground#575279
notificationsErrorIcon.foreground#b4637a
notificationsInfoIcon.foreground#56949f
notificationsWarningIcon.foreground#ea9d34
notificationToast.border#6e6a8614
panel.background#fffaf3
panel.border#00000000
panel.dropBorder#f2e9e1
panelInput.border#fffaf3
panelSection.dropBackground#6e6a8614
panelSectionHeader.background#fffaf3
panelSectionHeader.foreground#575279
panelTitle.activeBorder#6e6a8626
panelTitle.activeForeground#575279
panelTitle.inactiveForeground#797593
peekView.border#f2e9e1
peekViewEditor.background#fffaf3
peekViewEditor.matchHighlightBackground#6e6a8626
peekViewResult.background#fffaf3
peekViewResult.fileForeground#797593
peekViewResult.lineForeground#797593
peekViewResult.matchHighlightBackground#6e6a8626
peekViewResult.selectionBackground#6e6a8614
peekViewResult.selectionForeground#575279
peekViewTitle.background#f2e9e1
peekViewTitleDescription.foreground#797593
pickerGroup.border#6e6a8626
pickerGroup.foreground#907aa9
ports.iconRunningProcessForeground#d7827e
problemsErrorIcon.foreground#b4637a
problemsInfoIcon.foreground#56949f
problemsWarningIcon.foreground#ea9d34
progressBar.background#d7827e
quickInput.background#fffaf3
quickInput.foreground#797593
quickInputList.focusBackground#6e6a8614
quickInputList.focusForeground#575279
quickInputList.focusIconForeground#575279
scrollbar.shadow#fffaf34d
scrollbarSlider.activeBackground#28698380
scrollbarSlider.background#6e6a8614
scrollbarSlider.hoverBackground#6e6a8626
searchEditor.findMatchBackground#6e6a8614
selection.background#6e6a8626
settings.focusedRowBackground#fffaf3
settings.focusedRowBorder#6e6a8614
settings.headerForeground#575279
settings.modifiedItemIndicator#d7827e
settings.rowHoverBackground#fffaf3
sideBar.background#faf4ed
sideBar.dropBackground#fffaf3
sideBar.foreground#797593
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#6e6a8614
statusBar.background#faf4ed
statusBar.debuggingBackground#907aa9
statusBar.debuggingForeground#faf4ed
statusBar.foreground#797593
statusBar.noFolderBackground#faf4ed
statusBar.noFolderForeground#797593
statusBarItem.activeBackground#6e6a8626
statusBarItem.errorBackground#faf4ed
statusBarItem.errorForeground#b4637a
statusBarItem.hoverBackground#6e6a8614
statusBarItem.prominentBackground#f2e9e1
statusBarItem.prominentForeground#575279
statusBarItem.prominentHoverBackground#6e6a8614
statusBarItem.remoteBackground#faf4ed
statusBarItem.remoteForeground#ea9d34
symbolIcon.arrayForeground#797593
symbolIcon.classForeground#797593
symbolIcon.colorForeground#797593
symbolIcon.constantForeground#797593
symbolIcon.constructorForeground#797593
symbolIcon.enumeratorForeground#797593
symbolIcon.enumeratorMemberForeground#797593
symbolIcon.eventForeground#797593
symbolIcon.fieldForeground#797593
symbolIcon.fileForeground#797593
symbolIcon.folderForeground#797593
symbolIcon.functionForeground#797593
symbolIcon.interfaceForeground#797593
symbolIcon.keyForeground#797593
symbolIcon.keywordForeground#797593
symbolIcon.methodForeground#797593
symbolIcon.moduleForeground#797593
symbolIcon.namespaceForeground#797593
symbolIcon.nullForeground#797593
symbolIcon.numberForeground#797593
symbolIcon.objectForeground#797593
symbolIcon.operatorForeground#797593
symbolIcon.packageForeground#797593
symbolIcon.propertyForeground#797593
symbolIcon.referenceForeground#797593
symbolIcon.snippetForeground#797593
symbolIcon.stringForeground#797593
symbolIcon.structForeground#797593
symbolIcon.textForeground#797593
symbolIcon.typeParameterForeground#797593
symbolIcon.unitForeground#797593
symbolIcon.variableForeground#797593
tab.activeBackground#6e6a860d
tab.activeForeground#575279
tab.activeModifiedBorder#56949f
tab.border#00000000
tab.hoverBackground#6e6a8614
tab.inactiveBackground#00000000
tab.inactiveForeground#797593
tab.inactiveModifiedBorder#56949f80
tab.lastPinnedBorder#9893a5
tab.unfocusedActiveBackground#00000000
tab.unfocusedHoverBackground#00000000
tab.unfocusedInactiveBackground#00000000
tab.unfocusedInactiveModifiedBorder#56949f80
terminal.ansiBlack#f2e9e1
terminal.ansiBlue#56949f
terminal.ansiBrightBlack#797593
terminal.ansiBrightBlue#56949f
terminal.ansiBrightCyan#d7827e
terminal.ansiBrightGreen#286983
terminal.ansiBrightMagenta#907aa9
terminal.ansiBrightRed#b4637a
terminal.ansiBrightWhite#575279
terminal.ansiBrightYellow#ea9d34
terminal.ansiCyan#d7827e
terminal.ansiGreen#286983
terminal.ansiMagenta#907aa9
terminal.ansiRed#b4637a
terminal.ansiWhite#575279
terminal.ansiYellow#ea9d34
terminal.dropBackground#6e6a8614
terminal.foreground#575279
terminal.selectionBackground#6e6a8614
terminal.tab.activeBorder#575279
terminalCursor.background#575279
terminalCursor.foreground#9893a5
textBlockQuote.background#fffaf3
textBlockQuote.border#6e6a8614
textCodeBlock.background#fffaf3
textLink.activeForeground#907aa9e6
textLink.foreground#907aa9
textPreformat.foreground#ea9d34
textSeparator.foreground#797593
titleBar.activeBackground#faf4ed
titleBar.activeForeground#797593
titleBar.inactiveBackground#fffaf3
titleBar.inactiveForeground#797593
toolbar.activeBackground#6e6a8626
toolbar.hoverBackground#6e6a8614
tree.indentGuidesStroke#797593
walkThrough.embeddedEditorBackground#faf4ed
welcomePage.background#faf4ed
widget.shadow#fffaf34d
window.activeBorder#fffaf3
window.inactiveBorder#fffaf3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#9893A5
constant	#286983	—
constant.language	#907AA9	italic
constant.numeric, constant.language.infinity	#D7827E
entity.name	#D7827E	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#56949F	—
entity.other.attribute-name, entity.other.inherited-class	#907AA9
invalid	#B4637A	—
invalid.deprecated	#797593	—
keyword	#286983	—
markup.inserted.diff	#56949F	—
markup.deleted.diff	#B4637A	—
markup.heading	—	bold
markup.bold.markdown	—	bold
markup.italic.markdown	—
meta.diff.range	#907AA9	—
meta.tag, meta.brace	#575279	—
meta.import, meta.export	#286983	—
meta.directive.vue	#907AA9
meta.property-name.css	#56949F	—
meta.property-value.css	#EA9D34	—
meta.tag.other.html	#797593	—
punctuation	#797593	—
punctuation.accessor	#286983	—
punctuation.definition.string	#EA9D34	—
punctuation.definition.tag	#9893A5	—
storage.type, storage.modifier	#286983	—
string	#EA9D34	—
support	#56949F	—
support.constant	#EA9D34	—
support.function	#B4637A
variable	#D7827E
variable.other, variable.language, variable.function, variable.argument	#575279	—
variable.parameter	#907AA9	—
token.info-token	#316BCD	—
token.warn-token	#CD9731	—
token.error-token	#CD3131	—
token.debug-token	#800080	—

VS Code preview

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

Themes To Die For — Seoul Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

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

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

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

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

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#3a3a3a
activityBar.foreground#999999
activityBarBadge.background#80bcbd
breadcrumb.foreground#999872
debugConsole.errorForeground#e04c91
debugConsole.infoForeground#d9d9d9
editor.background#3a3a3a
editor.foreground#d9d9d9
editor.lineHighlightBackground#3f3f3f
editor.selectionBackground#327173
editorCursor.foreground#d8d8d8
editorGroupHeader.noTabsBackground#3a3a3a
editorGroupHeader.tabsBackground#3a3a3a
editorGutter.addedBackground#87af87
editorGutter.background#3a3a3a
editorGutter.modifiedBackground#4496b3
editorLineNumber.activeForeground#be7572
editorLineNumber.foreground#999872
editorLink.activeForeground#9bcd9b
editorSuggestWidget.background#3a3a3a
editorUnnecessaryCode.opacity#00000090
editorWidget.background#363636
focusBorder#96b096
gitDecoration.modifiedResourceForeground#dfbc72
input.background#3a3a3a
list.activeSelectionBackground#3a3a3a
list.activeSelectionForeground#96b096
list.focusHighlightForeground#5ad7d7
list.highlightForeground#5ad7d7
list.hoverBackground#3f3f3f
list.inactiveSelectionBackground#3f3f3f
list.inactiveSelectionForeground#d9d9d9
list.inactiveSelectionIconForeground#96b096
menu.background#5ad7d7
menu.selectionBackground#327173
minimap.selectionHighlight#327173
notificationLink.foreground#9bcd9b
quickInput.background#363636
quickInputList.focusBackground#505450
sideBar.background#363636
statusBar.background#333333
statusBar.debuggingBackground#3d8285
statusBar.debuggingForeground#a1e3e6
statusBar.foreground#96b096
statusBarItem.remoteBackground#4d9699
statusBarItem.remoteForeground#66f2f2
tab.activeBackground#323232
tab.activeBorder#00000000
tab.activeForeground#74d7d7
tab.border#00000000
tab.inactiveBackground#363636
tab.inactiveForeground#879e87
terminal.ansiBlack#4e4e4e
terminal.ansiBlue#85add4
terminal.ansiBrightBlack#626262
terminal.ansiBrightBlue#add4fb
terminal.ansiBrightCyan#87d7d7
terminal.ansiBrightGreen#87af87
terminal.ansiBrightMagenta#ffb0ca
terminal.ansiBrightRed#ffafaf
terminal.ansiBrightYellow#ffd787
terminal.ansiCyan#87afaf
terminal.ansiGreen#5f865f
terminal.ansiMagenta#d75f87
terminal.ansiRed#d68787
terminal.ansiYellow#d8af5f
terminal.background#3a3a3a
terminal.foreground#d9d9d9
textLink.activeForeground#9bcd9b
textLink.foreground#9bcd9b
welcomePage.progress.foreground#9bcd9b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
token.info-token	#316BCD	—
token.warn-token	#CD9731	—
token.error-token	#CD3131	—
token.debug-token	#800080	—
meta.import keyword.control, keyword.control.export, keyword.control.as, keyword.control.from	#E18AA6	—
punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end	#D7D7AF	—
meta.brace.square, punctuation.definition.binding-pattern.array, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square	#D6D687	—
punctuation.definition.binding-pattern.object	#D6D686	—
constant.numeric.decimal	#9A7372	—
meta.type keyword.operator.ternary	#D9D9D9	—
keyword, storage.modifier, keyword.operator.expression.infer, keyword.operator.expression.is, keyword.operator.type.asserts, keyword.operator.delete, keyword.operator.expression.delete, keyword.operator.expression.extends, source.shell support.function.builtin, meta.preprocessor	#E38BA8	—
meta.type.annotation storage.modifier	#87AF87	—
punctuation.definition.tag.begin, punctuation.definition.tag.end	#D6D687	—
meta.tag.attributes.tsx keyword.operator.assignment, meta.jsx.children punctuation.section.embedded, meta.embedded.expression.tsx meta.jsx.children punctuation.section.embedded	#D6D687	—
meta.tag.attributes.tsx punctuation.section.embedded, meta.embedded.expression.tsx meta.jsx.children meta.tag.attributes.tsx punctuation.section.embedded	#899189	—
entity.other.inherited-class	#D9D9D9	—
variable.language	#9A7599	—
keyword.operator.comparison, keyword.operator.relational, keyword.operator.new, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.keyof, keyword.operator.expression.in	#D6D687	—
meta.object-literal.key punctuation.separator.key-value, keyword.operator.assignment, keyword.operator.increment, keyword.operator.decrement, punctuation.separator.key-value.css, storage.type.function.arrow, constant.other.object.key punctuation.separator.key-value, keyword.operator.spread, keyword.operator.rest	#D6D687	—
meta.type.annotation keyword.operator.type.annotation, meta.return.type keyword.operator.type.annotation, meta.parameters keyword.operator.optional, meta.field.declaration keyword.operator.optional, keyword.operator.type	#FBD1BA	—
punctuation.separator.comma, punctuation.separator.parameter, meta.delimiter.comma, meta.delimiter.object.comma, punctuation.separator.delimiter	#D7D7AF	—
meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, meta.group.braces.round.function.arguments, punctuation.definition.arguments, punctuation.section.parens.begin.bracket.round, punctuation.section.parens.end.bracket.round, punctuation.section.arguments.begin.bracket.round, punctuation.section.arguments.end.bracket.round, punctuation.section.parens.control, punctuation.definition.type	#D6D687	—
keyword.control.loop, keyword.control.conditional, keyword.operator.expression.of	#87AED7	—
variable.other.less	#9A7599	—
keyword.other.unit.px.css	#616161	—
comment	#96B096	—
keyword.other.unit.percentage.css	#875F5F	—
keyword.other.important.css	#E19972	—
variable.other, support.variable.property	#D9D9D9	—
support.function, support.class	#D9D9D9	—
keyword.operator, keyword.operator.type.annotation	#D9D9D9	—
keyword.other.unit.px.css	#D9D9D9	—
entity.name.type, meta.interface entity.other.inherited-class, string.unquoted.argument.shell, meta.statement.shell, meta.type punctuation.accessor	#FBD1BA	—
entity.name.type.class	#D9D9D9	—
meta.jsx.children.tsx	#B2D9B3	—
entity.name.function, entity.other.attribute-name, variable.parameter, meta.object-literal.key	#D9D9D9	—
support.type	#DFBC72	—
support.type.object.module	#D9D9D9	—
entity.other.inherited-class, source.shell entity.name.command	#D9D9D9	—
variable.language	#FFBFBD	—
storage.type	#D7AF5F	—
storage.type.function, storage.type.interface, storage.type.type	#E18AA6	—
meta.class storage.type	#E18AA6	—
meta.class meta.var.expr storage.type	#D7AF5F	—
variable.language.super	#E18AA6	—
storage.type.class	#E18AA6	—
punctuation.terminator.statement	#EE87B5	—
keyword.control.flow, keyword.control.default, keyword.control.js	#87AF87	—
string, string.regexp keyword, string.regexp keyword.operator	#98BCBD	—
entity.name.function.tagged-template	#D9D9D9	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, source.shell punctuation.definition.variable variable.other.normal	#BF9E7E	—
meta.brace.curly, punctuation.definition.function.body, punctuation.definition.block, punctuation.definition.subshell, punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end, punctuation.section.block	#D6D687	—
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc	#FBB087	—
variable.other.jsdoc	#D7D7AF	—
constant.numeric.decimal	#FCD787	—
constant.numeric	#FCD787	—
support.type.property-name, entity.name.tag.yaml	#87AF87	—
constant.language	#FBAF87	—
constant.language.null, constant.language.undefined, keyword.operator.expression.void	#D7AF5F	—
constant.language.boolean	#A8A8C6	—
storage.type.function.arrow	#DEDD99	—
punctuation.accessor	#D9D9D9	—
keyword.operator.logical, keyword.operator.definiteassignment, punctuation.accessor.optional, keyword.operator.ternary	#A7A7C4	—
keyword.control.logical.operator.less	#BDBB72	—
keyword.other.important.css, source.shell constant.other.option	#FFBD98	—
keyword.other.unit.percentage.css	#FFDE99	—
constant.other.rgb-value.css	#6FBCBD	—
constant.numeric	#FFDE99	—
punctuation.separator.operator.css	#CECE83	—
punctuation.definition.entity.css, keyword.other.stylus	#FBAF87	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.id punctuation.definition.entity.css	#FCAFAF	—
entity.other.attribute-name.pseudo-class.css	#AFAF60	—
source.css support.function, source.stylus support.function, source.stylus entity.name.function	#D6D6AE	—
punctuation.section.function.css	#FAAC85	—
keyword.other.unit.css	#FCD787	—
entity.name.tag.tsx, entity.name.tag.tsx support.class.component	#99BF9A	—
entity.name.tag.css, meta.selector, source.stylus keyword.operator	#87AF87	—
support.type.property-name.css, punctuation.separator.parameter.css, source.stylus meta.property-value keyword.operator, constant.other.object.key string.unquoted	#D9D9D9	—
support.constant.property-value.css, keyword.control.at-rule	#DB936F	—
keyword.other.unit.px.css	#FFDE99	—
variable.other.less	#FFBFBD	—
keyword.control.trycatch	#FFBD80	—
storage.modifier.async, meta.object.type meta.field storage.modifier	#87AF87	—
entity.name.section.markdown, punctuation.definition.heading.markdown	#80BCBD	—
meta.tag.sgml.doctype.html, meta.tag.sgml.html	#719872	—
keyword.control.switch	#E18AA6	—
entity.other.attribute-name.localname.xml	#DFBC72	—
entity.other.attribute-name.xml	#DFBC72	—
entity.other.attribute-name.namespace.xml	#DFBC72	—
entity.name.tag.localname.xml	#87AF87	—
entity.name.tag.xml	#DFBC72	—
meta.tag.preprocessor.xml	#98BCBD	—

VS Code preview

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

Themes To Die For — Tokyo Night Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

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

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

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

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

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#cbccd1
activityBar.border#cbccd1
activityBar.foreground#4c505e
activityBar.inactiveForeground#828594
activityBarBadge.background#34548a
activityBarBadge.foreground#ffffff
badge.background#979db833
badge.foreground#4c505e
breadcrumb.activeSelectionForeground#4c505e
breadcrumb.background#cbccd1
breadcrumb.focusForeground#4c505e
breadcrumb.foreground#828594
breadcrumbPicker.background#cbccd1
button.background#34548add
button.foreground#ffffff
button.hoverBackground#34548aaa
button.secondaryBackground#828594
charts.blue#34548a
charts.foreground#565a6e
charts.green#33635c
charts.lines#f4f5f8
charts.orange#965027
charts.purple#5a4a78
charts.red#8c4351
charts.yellow#8f5e15
debugConsole.errorForeground#942f2f
debugConsole.infoForeground#166775
debugExceptionWidget.background#fafbff40
debugExceptionWidget.border#942f2f
debugIcon.breakpointDisabledForeground#828594
debugIcon.breakpointForeground#db4b4b
debugIcon.breakpointUnverifiedForeground#c24242
debugIcon.continueForeground#3e6396
debugIcon.pauseForeground#3e6396
debugIcon.startForeground#34548a
debugIcon.stepBackForeground#3e6396
debugIcon.stepIntoForeground#3e6396
debugIcon.stepOutForeground#3e6396
debugIcon.stepOverForeground#3e6396
debugTokenExpression.boolean#965027
debugTokenExpression.error#942f2f
debugTokenExpression.name#34548a
debugTokenExpression.number#965027
debugTokenExpression.string#485e30
debugTokenExpression.value#565a6e
debugToolBar.background#d5d6db
debugView.stateLabelBackground#d5d6db
debugView.stateLabelForeground#4c505e
debugView.valueChangedHighlight#f4f5f8
descriptionForeground#7b7f8c
diffEditor.diagonalFill#cacbcf
diffEditor.insertedLineBackground#3f919e15
diffEditor.insertedTextBackground#3f919e15
diffEditor.removedLineBackground#e8686812
diffEditor.removedTextBackground#e8686812
diffEditorGutter.insertedLineBackground#3f919e15
diffEditorGutter.removedLineBackground#e8686812
diffEditorOverview.insertedForeground#3f919e15
diffEditorOverview.removedForeground#e8686812
dropdown.background#d5d6db
dropdown.border#c1c2c7
dropdown.foreground#4c505e
dropdown.listBackground#d5d6db
editor.background#d5d6db
editor.findMatchBackground#fafbff66
editor.findMatchBorder#637dbf
editor.findMatchHighlightBackground#fafbff66
editor.findRangeHighlightBackground#34548a15
editor.focusedStackFrameHighlightBackground#c5e3d0
editor.foldBackground#b2b3b833
editor.foreground#343b59
editor.inactiveSelectionBackground#fafbff15
editor.lineHighlightBackground#dcdee3
editor.rangeHighlightBackground#fafbff20
editor.selectionBackground#fafbff40
editor.selectionHighlightBackground#fafbff55
editor.stackFrameHighlightBackground#e7e8c8
editor.wordHighlightBackground#fafbff33
editor.wordHighlightStrongBackground#fafbff66
editorBracketHighlight.foreground1#34548a
editorBracketHighlight.foreground2#34548a
editorBracketHighlight.foreground3#343b58
editorBracketHighlight.foreground4#166775
editorBracketHighlight.foreground5#485e30
editorBracketHighlight.foreground6#8f5e15
editorBracketHighlight.unexpectedBracket.foreground#bd4040
editorBracketMatch.background#cdced1
editorBracketMatch.border#dcdee3
editorBracketPairGuide.activeBackground1#34548a
editorBracketPairGuide.activeBackground2#34548a
editorBracketPairGuide.activeBackground3#343b58
editorBracketPairGuide.activeBackground4#166775
editorBracketPairGuide.activeBackground5#485e30
editorBracketPairGuide.activeBackground6#8f5e15
editorCodeLens.foreground#868891
editorCursor.foreground#4c505e
editorError.foreground#bd4040
editorGhostText.foreground#73767d
editorGroup.border#c1c2c7
editorGroup.dropBackground#c1c2c7
editorGroupHeader.border#c1c2c7
editorGroupHeader.noTabsBackground#cbccd1
editorGroupHeader.tabsBackground#cbccd1
editorGroupHeader.tabsBorder#c1c2c7
editorGutter.addedBackground#71b6bd
editorGutter.deletedBackground#a8626a
editorGutter.modifiedBackground#637dbf
editorHint.foreground#0da0ba
editorHoverWidget.background#dcdee3
editorHoverWidget.border#c1c2c7
editorIndentGuide.activeBackground1#a1a5b3
editorIndentGuide.background1#9da0ab30
editorInfo.foreground#0da0ba
editorLineNumber.activeForeground#4c505e
editorLineNumber.foreground#9da0ab
editorLink.activeForeground#1f2335
editorMarkerNavigation.background#cbccd1
editorOverviewRuler.addedForeground#71b6bd
editorOverviewRuler.border#c1c2c7
editorOverviewRuler.bracketMatchForeground#c1c2c7
editorOverviewRuler.deletedForeground#a8626a
editorOverviewRuler.errorForeground#bd4040
editorOverviewRuler.findMatchForeground#4c505e44
editorOverviewRuler.infoForeground#1abc9c
editorOverviewRuler.modifiedForeground#637dbf
editorOverviewRuler.rangeHighlightForeground#4c505e44
editorOverviewRuler.selectionHighlightForeground#4c505e22
editorOverviewRuler.warningForeground#8f5e15
editorOverviewRuler.wordHighlightForeground#5a4a7855
editorOverviewRuler.wordHighlightStrongForeground#5a4a7866
editorPane.background#cbccd1
editorRuler.foreground#c1c2c7
editorSuggestWidget.background#dcdee3
editorSuggestWidget.border#c1c2c7
editorSuggestWidget.highlightForeground#34548a
editorSuggestWidget.selectedBackground#e8e9ed
editorWarning.foreground#8f5e15
editorWhitespace.foreground#d5d6db
editorWidget.background#cbccd1
editorWidget.foreground#4c505e
editorWidget.resizeBorder#82859433
errorForeground#5a607d
extensionBadge.remoteBackground#34548a
extensionBadge.remoteForeground#ffffff
extensionButton.prominentBackground#34548add
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#34548aaa
focusBorder#82859433
foreground#4c505e
gitDecoration.addedResourceForeground#166775
gitDecoration.conflictingResourceForeground#8f5e15
gitDecoration.deletedResourceForeground#914c54
gitDecoration.ignoredResourceForeground#828594
gitDecoration.modifiedResourceForeground#34548a
gitDecoration.renamedResourceForeground#166775
gitDecoration.stageDeletedResourceForeground#914c54
gitDecoration.stageModifiedResourceForeground#34548a
gitDecoration.untrackedResourceForeground#166775
icon.foreground#4c505e
input.background#d5d6db
input.border#c1c2c7
input.foreground#4c505e
input.placeholderForeground#4a5272
inputOption.activeBackground#34548a44
inputValidation.errorBackground#85353e
inputValidation.errorBorder#942f2f
inputValidation.errorForeground#e8e9ed
inputValidation.infoBackground#3d59a15c
inputValidation.infoBorder#3d59a1
inputValidation.infoForeground#000000
inputValidation.warningBackground#c2985b
inputValidation.warningBorder#8f5e15
inputValidation.warningForeground#000000
list.activeSelectionBackground#d5d6db
list.activeSelectionForeground#4c505e
list.deemphasizedForeground#4c505e
list.dropBackground#c1c2c7
list.errorForeground#942f2f
list.focusBackground#d5d6db
list.focusForeground#4c505e
list.highlightForeground#34548a
list.hoverBackground#d5d6db
list.hoverForeground#4c505e
list.inactiveSelectionBackground#d5d6db
list.inactiveSelectionForeground#4c505e
list.invalidItemForeground#c97018
list.warningForeground#8f5e15
listFilterWidget.background#d5d6db
listFilterWidget.noMatchesOutline#a6333f
listFilterWidget.outline#34548a
menu.background#cbccd1
menu.border#c1c2c7
menu.foreground#4c505e
menu.selectionBackground#7a85a8
menu.selectionForeground#343b58
menu.separatorBackground#c1c2c7
menubar.selectionBackground#7a85a8
menubar.selectionBorder#c1c2c7
menubar.selectionForeground#343b58
merge.currentContentBackground#007a7544
merge.currentHeaderBackground#007a75aa
merge.incomingContentBackground#34548a44
merge.incomingHeaderBackground#34548aaa
mergeEditor.change.background#007a7522
mergeEditor.change.word.background#007a7522
mergeEditor.conflict.handled.minimapOverViewRuler#007a75
mergeEditor.conflict.handledFocused.border#007a7525
mergeEditor.conflict.handledUnfocused.border#007a7525
mergeEditor.conflict.unhandled.minimapOverViewRuler#bb7a61
mergeEditor.conflict.unhandledFocused.border#bb7a61
mergeEditor.conflict.unhandledUnfocused.border#bb7a6188
minimap.errorHighlight#bd4040
notebook.cellBorderColor#c1c2c7
notebook.cellEditorBackground#cbccd1
notebook.cellStatusBarItemHoverBackground#d5d6db
notebook.editorBackground#d5d6db
notebook.focusedCellBorder#828594
notificationCenterHeader.background#dcdee3
notificationLink.foreground#34548a
notifications.background#dcdee3
notificationsErrorIcon.foreground#bb616b
notificationsInfoIcon.foreground#637dbf
notificationsWarningIcon.foreground#bba461
panel.background#cbccd1
panel.border#c1c2c7
panelInput.border#d5d6db
panelTitle.activeBorder#637dbf
panelTitle.activeForeground#4c505e
panelTitle.inactiveForeground#828594
peekView.border#c1c2c7
peekViewEditor.background#dcdee3
peekViewEditor.matchHighlightBackground#34548a22
peekViewResult.background#d7d9de
peekViewResult.fileForeground#4c505e
peekViewResult.lineForeground#4c505e
peekViewResult.matchHighlightBackground#34548a22
peekViewResult.selectionBackground#34548a33
peekViewResult.selectionForeground#4c505e
peekViewTitle.background#cbccd1
peekViewTitleDescription.foreground#4c505e
peekViewTitleLabel.foreground#4c505e
pickerGroup.border#c1c2c7
pickerGroup.foreground#4c505e
progressBar.background#34548a
sash.hoverBorder#828594
scrollbar.shadow#00000033
scrollbarSlider.activeBackground#90929632
scrollbarSlider.background#90929625
scrollbarSlider.hoverBackground#90929620
selection.background#fafbff55
settings.headerForeground#34548a
sideBar.background#cbccd1
sideBar.border#c1c2c7
sideBar.dropBackground#c1c2c7
sideBar.foreground#4c505e
sideBarSectionHeader.background#cbccd1
sideBarSectionHeader.border#c1c2c7
sideBarSectionHeader.foreground#4c505e
sideBarTitle.foreground#4c505e
statusBar.background#cbccd1
statusBar.border#c1c2c7
statusBar.debuggingBackground#d5d6db
statusBar.debuggingForeground#4c505e
statusBar.foreground#4c505e
statusBar.noFolderBackground#d5d6db
statusBarItem.activeBackground#c1c2c7
statusBarItem.hoverBackground#d5d6db
statusBarItem.prominentBackground#c1c2c7
statusBarItem.prominentHoverBackground#d5d6db
tab.activeBackground#cbccd1
tab.activeBorder#637dbf
tab.activeForeground#383b45
tab.activeModifiedBorder#d5d6db
tab.border#c1c2c7
tab.hoverForeground#383b45
tab.inactiveBackground#cbccd1
tab.inactiveForeground#4c505e
tab.inactiveModifiedBorder#d5d6db
tab.lastPinnedBorder#dadbe0
tab.unfocusedActiveBorder#9da0ab
tab.unfocusedActiveForeground#383b45
tab.unfocusedHoverForeground#383b45
tab.unfocusedInactiveForeground#4c505e
terminal.ansiBlack#0f0f14
terminal.ansiBlue#34548a
terminal.ansiBrightBlack#0f0f14
terminal.ansiBrightBlue#34548a
terminal.ansiBrightCyan#0f4b6e
terminal.ansiBrightGreen#33635c
terminal.ansiBrightMagenta#5a4a78
terminal.ansiBrightRed#8c4351
terminal.ansiBrightWhite#828594
terminal.ansiBrightYellow#8f5e15
terminal.ansiCyan#0f4b6e
terminal.ansiGreen#33635c
terminal.ansiMagenta#5a4a78
terminal.ansiRed#8c4351
terminal.ansiWhite#828594
terminal.ansiYellow#8f5e15
terminal.background#cbccd1
terminal.foreground#4c505e
terminal.selectionBackground#fafbff40
terminalCursor.foreground#828594
textBlockQuote.background#cbccd1
textCodeBlock.background#d5d6db
textLink.activeForeground#4c505e
textLink.foreground#34548a
textPreformat.foreground#33635c
textSeparator.foreground#828594
titleBar.activeBackground#cbccd1
titleBar.activeForeground#4c505e
titleBar.border#c1c2c7
titleBar.inactiveBackground#cbccd1
titleBar.inactiveForeground#4c505e
toolbar.activeBackground#fafbff40
toolbar.hoverBackground#fafbff40
tree.indentGuidesStroke#c1c2c7
walkThrough.embeddedEditorBackground#cbccd1
widget.shadow#ffffff00
window.activeBorder#cdced1
window.inactiveBorder#cdced1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, meta.var.expr storage.type, keyword.control.flow, keyword.control.return, meta.directive.vue punctuation.separator.key-value.html, meta.directive.vue entity.other.attribute-name.html, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.modifier	—	italic
keyword.control.flow.block-scalar.literal, keyword.control.flow.python	—
comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation	#9699A3	—
keyword.operator.assignment.jsdoc, comment.block.documentation variable, comment.block.documentation storage, comment.block.documentation keyword, comment.block.documentation support, comment.block.documentation markup, comment.block.documentation markup.inline.raw.string.markdown, meta.other.type.phpdoc.php keyword.other.type.php, meta.other.type.phpdoc.php support.other.namespace.php, meta.other.type.phpdoc.php punctuation.separator.inheritance.php, meta.other.type.phpdoc.php support.class, keyword.other.phpdoc.php, log.date	#7C7F87	—
meta.other.type.phpdoc.php support.class, comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation entity.name.type.instance	#73767D	—
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.other.caps	#965027	—
string, constant.other.symbol, constant.other.key, meta.attribute-selector, string constant.character	#485E30
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant	#565A6E	—
invalid, invalid.illegal	#942F2F	—
invalid.deprecated	#5A4A78	—
storage.type	#5A4A78	—
meta.var.expr storage.type, storage.modifier	#565F89	—
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig	#0F4B6E	—
keyword.control.smarty, keyword.control.twig, support.constant.handlebars keyword.control, keyword.operator.comparison.twig, keyword.blade, entity.name.function.blade	#166775	—
keyword.operator.spread, keyword.operator.rest	#8C4351	bold
keyword.operator, keyword.control.as, keyword.other, keyword.operator.bitwise.shift, punctuation, expression.embbeded.vue punctuation.definition.tag, text.html.twig meta.tag.inline.any.html, meta.tag.template.value.twig meta.function.arguments.twig, meta.directive.vue punctuation.separator.key-value.html, punctuation.definition.constant.markdown, punctuation.definition.string, punctuation.support.type.property-name, text.html.vue-html meta.tag, meta.attribute.directive, punctuation.definition.keyword, punctuation.terminator.rule, punctuation.definition.entity, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution, entity.name.operator, meta.property-list punctuation.separator.key-value, meta.at-rule.mixin punctuation.separator.key-value, meta.at-rule.function variable.parameter.url	#4C505E	—
keyword.control.module, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other	#0F4B6E	—
keyword, keyword.control, keyword.other.important	#5A4A78	—
keyword.other.DML	#0F4B6E	—
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp	#5A4A78	—
entity.name.tag	#8C4351	—
entity.name.tag support.class.component, meta.tag.custom entity.name.tag, meta.tag.other.unrecognized.html.derivative entity.name.tag, meta.tag	#69323D	—
punctuation.definition.tag	#B05467	—
meta.tag.custom punctuation.definition.tag, meta.jsx punctuation.definition.tag	#69323D	—
constant.other.php, variable.other.global.safer, variable.other.global.safer punctuation.definition.variable, variable.other.global, variable.other.global punctuation.definition.variable, constant.other.haskell	#8F5E15	—
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars, variable.other.object, meta.fstring, meta.function-call meta.function-call.arguments	#343B58	—
meta.array.literal variable	#0F4B6E	—
meta.object-literal.key, entity.name.type.hcl, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property, meta.block entity.name.label	#33635C	—
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property, variable.other.object.property.cs	#0F4B6E	—
variable.other.object.property	#343B58	—
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key	#296973	—
source.cpp meta.block variable.other	#8C4351	—
support.other.variable	#8C4351	—
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs	#34548A	—
entity.name.function, variable.other.enummember, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function	#34548A	—
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable	#8F5E15	—
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit	#5A4A78	—
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.declaration.hcl variable.other.readwrite.hcl, meta.mapping.key.hcl variable.other.readwrite.hcl, variable.other.declaration	#5A4A78	—
entity.other.inherited-class	#5A4A78
support.class, support.type, variable.other.readwrite.alias, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier, variable.other.constant.object	#166775	—
entity.name	#343B58	—
support.function	#166775	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key	#34548A	—
support.constant.font-name, meta.definition.variable	#485E30	—
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss	#485E30	—
entity.other.attribute-name.id	#942F2F	—
entity.name.tag.css	#166775	—
entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference	#8F5E15	—
meta.property-list	#484C61	—
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else	#965027	—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css	#33635C	—
meta.property-list meta.property-list	#484C61	—
meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include	#5A4A78	—
keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword	#4F4168	—
meta.property-list meta.at-rule.include	#343B58	—
support.constant.property-value	#965027	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#343B58	—
variable.language	#8C4351	—
variable.other punctuation.definition.variable	#343B58	—
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this	#8C4351	—
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#5A4A78	—
text.html constant.character.entity	#166775	—
text.html punctuation.definition.entity	#166775	—
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html	#5A4A78	—
source.sass keyword.control	#34548A	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value	#5A4A78	—
markup.inserted	#449DAB	—
markup.deleted	#914C54	—
markup.changed	#34548A	—
string.regexp	#3E6968	—
punctuation.definition.group	#8C4351	—
constant.other.character-class.regexp	#5A4A78	—
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp	#8F5E15	—
keyword.operator.quantifier.regexp	#5A4A78	—
constant.character.escape.backslash	#343B58	—
constant.character.escape	#4C505E	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#34548A	—
keyword.other.unit	#8C4351	—
source.json meta.structure.dictionary.json support.type.property-name.json	#34548A	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#166775	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0F4B6E	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5A4A78	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8F5E15	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#166775	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#33635C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8C4351	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#485E30	—
punctuation.definition.list_item.markdown	#484C61	—
meta.block, meta.brace, punctuation.definition.block, punctuation.definition.use, punctuation.definition.class, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, punctuation.definition.switch-expression.begin.bracket, punctuation.definition.switch-expression.end.bracket, punctuation.definition.section.switch-block.begin.bracket, punctuation.definition.section.switch-block.end.bracket, punctuation.definition.group.shell, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section	#484C61	—
meta.embedded.block	#343B58	—
meta.tag JSXNested, meta.jsx.children, text.html, text.log	#565A6E	—
text.html.markdown markup.inline.raw.markdown	#5A4A78	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#4E5579	—
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown	#383B45	bold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown	#0F4B6E	bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown	#34548A	bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown	#395B96	bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown	#565A6E	bold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown	#747CA1	bold
markup.italic, markup.italic punctuation	#343B58	italic
markup.bold, markup.bold punctuation	#343B58	bold
markup.bold markup.italic, markup.bold markup.italic punctuation	#343B58	bold italic
markup.underline, markup.underline punctuation	—	underline
markup.quote punctuation.definition.blockquote.markdown	#4E5579	—
markup.quote	—	italic
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown	#33635C	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown	#4C505E	—
meta.separator	#868891	bold
markup.table	#C0CEFC	—
token.info-token	#0DB9D7	—
token.warn-token	#FFDB69	—
token.error-token	#942F2F	—
token.debug-token	#B267E6	—
entity.tag.apacheconf	#8C4351	—
meta.preprocessor	#33635C	—
source.env	#34548A	—
ref.matchtext	#000000	—