Eke Dark

Name: Eke Dark
Author: Victor Eke

Publisher: Victor EkeThemes in package: 4

A two-tone chrome color theme with teal accents and fully-colored syntax. Dark and light variants, with optional italics.

Open in VS Code GitHub

Color themes

VS Code preview

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

Eke Dark — Eke 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#0f1012
activityBar.border#2b2d30
activityBar.foreground#bcbec4
activityBar.inactiveForeground#6f737a
activityBarBadge.background#4ECDC4
activityBarBadge.foreground#0f1012
badge.background#393b40
badge.foreground#bcbec4
banner.background#27282b
banner.foreground#bcbec4
banner.iconForeground#4ECDC4
breadcrumb.activeSelectionForeground#dfe1e5
breadcrumb.background#191a1c
breadcrumb.focusForeground#dfe1e5
breadcrumb.foreground#9da0a8
breadcrumbPicker.background#27282b
button.background#4ECDC4
button.foreground#0f1012
button.hoverBackground#2E8B85
button.secondaryBackground#393b40
button.secondaryForeground#bcbec4
button.secondaryHoverBackground#43454a
chat.avatarBackground#393b40
chat.avatarForeground#bcbec4
chat.requestBorder#2b2d30
chat.slashCommandBackground#4ECDC420
chat.slashCommandForeground#4ECDC4
checkbox.background#27282b
checkbox.border#43454a
checkbox.foreground#bcbec4
commandCenter.activeBackground#2b2d30
commandCenter.activeBorder#2b2d30
commandCenter.activeForeground#dfe1e5
commandCenter.background#191a1c
commandCenter.border#2b2d30
commandCenter.foreground#bcbec4
debugExceptionWidget.background#402929
debugExceptionWidget.border#fa6675
debugIcon.breakpointForeground#f75464
debugIcon.continueForeground#549159
debugIcon.disconnectForeground#f75464
debugIcon.pauseForeground#f2c55c
debugIcon.restartForeground#549159
debugIcon.startForeground#549159
debugIcon.stepIntoForeground#56a8f5
debugIcon.stepOutForeground#56a8f5
debugIcon.stepOverForeground#56a8f5
debugIcon.stopForeground#f75464
debugToolBar.background#27282b
debugToolBar.border#43454a
descriptionForeground#9da0a8
diffEditor.border#2b2d30
diffEditor.diagonalFill#2b2d3080
diffEditor.insertedLineBackground#54915915
diffEditor.insertedTextBackground#54915920
diffEditor.removedLineBackground#da363326
diffEditor.removedTextBackground#da363326
dropdown.background#27282b
dropdown.border#43454a
dropdown.foreground#bcbec4
dropdown.listBackground#27282b
editor.background#191a1c
editor.findMatchBackground#2d543f
editor.findMatchHighlightBackground#11495780
editor.findRangeHighlightBackground#11495740
editor.focusedStackFrameHighlightBackground#2d543f80
editor.foreground#bcbec4
editor.inactiveSelectionBackground#373b3960
editor.lineHighlightBackground#1f2024
editor.lineHighlightBorder#00000000
editor.selectionBackground#373b39
editor.selectionHighlightBackground#373b3980
editor.stackFrameHighlightBackground#3d332080
editor.wordHighlightBackground#373b3980
editor.wordHighlightStrongBackground#402f3380
editorBracketHighlight.foreground1#FFD700
editorBracketHighlight.foreground2#DA70D6
editorBracketHighlight.foreground3#179FFF
editorBracketHighlight.foreground4#FFD700
editorBracketHighlight.foreground5#DA70D6
editorBracketHighlight.foreground6#179FFF
editorBracketHighlight.unexpectedBracket.foreground#f75464
editorBracketMatch.background#43454a
editorBracketMatch.border#00000000
editorCodeLens.foreground#868a91
editorCursor.foreground#4ECDC4
editorError.foreground#fa6675
editorGhostText.foreground#6f737a80
editorGroup.border#2b2d30
editorGroup.dropBackground#2b2d3080
editorGroupHeader.noTabsBackground#131416
editorGroupHeader.tabsBackground#131416
editorGroupHeader.tabsBorder#2b2d30
editorGutter.addedBackground#549159
editorGutter.background#191a1c
editorGutter.commentRangeForeground#6f737a
editorGutter.deletedBackground#FD5B87
editorGutter.modifiedBackground#375fad
editorHint.foreground#98804B
editorHoverWidget.background#27282b
editorHoverWidget.border#43454a
editorHoverWidget.foreground#bcbec4
editorHoverWidget.statusBarBackground#2b2d30
editorIndentGuide.activeBackground1#4e5157
editorIndentGuide.background1#323438
editorInfo.foreground#98804B
editorInlayHint.background#393b40
editorInlayHint.foreground#868a91
editorInlayHint.parameterBackground#393b40
editorInlayHint.parameterForeground#868a91
editorInlayHint.typeBackground#393b40
editorInlayHint.typeForeground#868a91
editorLightBulb.foreground#f2c55c
editorLightBulbAutoFix.foreground#4ECDC4
editorLineNumber.activeForeground#a1a3ab
editorLineNumber.dimmedForeground#3f434a
editorLineNumber.foreground#666b74
editorLink.activeForeground#4ECDC4
editorMultiCursor.primary.foreground#4ECDC4
editorMultiCursor.secondary.foreground#2E8B85
editorOverviewRuler.addedForeground#54915980
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#43454a
editorOverviewRuler.deletedForeground#FD5B8780
editorOverviewRuler.errorForeground#fa6675
editorOverviewRuler.findMatchForeground#2d543f80
editorOverviewRuler.infoForeground#98804B
editorOverviewRuler.modifiedForeground#375fad80
editorOverviewRuler.selectionHighlightForeground#373b3980
editorOverviewRuler.warningForeground#f2c55c
editorRuler.foreground#323438
editorStickyScroll.background#191a1c
editorStickyScrollHover.background#1f2024
editorSuggestWidget.background#27282b
editorSuggestWidget.border#43454a
editorSuggestWidget.focusHighlightForeground#4ECDC4
editorSuggestWidget.foreground#bcbec4
editorSuggestWidget.highlightForeground#4ECDC4
editorSuggestWidget.selectedBackground#2b2d30
editorSuggestWidget.selectedForeground#dfe1e5
editorSuggestWidget.selectedIconForeground#dfe1e5
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000080
editorWarning.foreground#f2c55c
editorWhitespace.foreground#6f737a
editorWidget.background#27282b
editorWidget.border#43454a
editorWidget.foreground#bcbec4
editorWidget.resizeBorder#4ECDC4
errorForeground#fa6675
extensionBadge.remoteBackground#4ECDC4
extensionBadge.remoteForeground#0f1012
extensionButton.prominentBackground#4ECDC4
extensionButton.prominentForeground#0f1012
extensionButton.prominentHoverBackground#2E8B85
focusBorder#4ECDC4
foreground#bcbec4
gitDecoration.addedResourceForeground#74C991
gitDecoration.conflictingResourceForeground#de6a66
gitDecoration.deletedResourceForeground#fa6675
gitDecoration.ignoredResourceForeground#6f737a
gitDecoration.modifiedResourceForeground#D19A66
gitDecoration.stageDeletedResourceForeground#fa6675
gitDecoration.stageModifiedResourceForeground#D19A66
gitDecoration.submoduleResourceForeground#56a8f5
gitDecoration.untrackedResourceForeground#74C991
icon.foreground#bcbec4
inlineChat.background#27282b
inlineChat.border#43454a
inlineChat.shadow#00000030
inlineChatInput.background#191a1c
inlineChatInput.border#43454a
inlineChatInput.focusBorder#4ECDC4
inlineChatInput.placeholderForeground#6f737a
input.background#27282b
input.border#43454a
input.foreground#bcbec4
input.placeholderForeground#6f737a
inputOption.activeBackground#4ECDC420
inputOption.activeBorder#4ECDC4
inputOption.activeForeground#bcbec4
inputValidation.errorBackground#402929
inputValidation.errorBorder#fa6675
inputValidation.errorForeground#f75464
inputValidation.infoBackground#25324d
inputValidation.infoBorder#4ECDC4
inputValidation.infoForeground#56a8f5
inputValidation.warningBackground#3d3320
inputValidation.warningBorder#f2c55c
inputValidation.warningForeground#f2c55c
interactive.activeCodeBorder#4ECDC4
interactive.inactiveCodeBorder#2b2d30
keybindingLabel.background#393b40
keybindingLabel.border#43454a
keybindingLabel.bottomBorder#43454a
keybindingLabel.foreground#bcbec4
list.activeSelectionBackground#2b2d30
list.activeSelectionForeground#dfe1e5
list.activeSelectionIconForeground#dfe1e5
list.dropBackground#2b2d3080
list.errorForeground#f75464
list.filterMatchBackground#4ECDC430
list.filterMatchBorder#4ECDC460
list.focusBackground#2b2d30
list.focusForeground#dfe1e5
list.focusOutline#4ECDC4
list.highlightForeground#4ECDC4
list.hoverBackground#2b2d30
list.hoverForeground#dfe1e5
list.inactiveSelectionBackground#2b2d30
list.inactiveSelectionForeground#bcbec4
list.warningForeground#f2c55c
menu.background#27282b
menu.border#43454a
menu.foreground#bcbec4
menu.selectionBackground#2b2d30
menu.selectionForeground#dfe1e5
menu.separatorBackground#43454a
menubar.selectionBackground#2b2d30
menubar.selectionBorder#00000000
menubar.selectionForeground#dfe1e5
merge.currentContentBackground#54915920
merge.currentHeaderBackground#54915940
merge.incomingContentBackground#375fad20
merge.incomingHeaderBackground#375fad40
mergeEditor.change.background#54915920
mergeEditor.change.word.background#54915940
mergeEditor.conflict.handledFocused.border#549159
mergeEditor.conflict.unhandledFocused.border#f2c55c
minimap.background#191a1c
minimap.findMatchHighlight#2d543f80
minimap.selectionHighlight#373b3980
minimapSlider.activeBackground#6f737a60
minimapSlider.background#6f737a20
minimapSlider.hoverBackground#6f737a40
notebook.cellBorderColor#2b2d30
notebook.cellEditorBackground#1f2024
notebook.cellHoverBackground#1f2024
notebook.focusedCellBorder#4ECDC4
notebook.selectedCellBackground#1f2024
notificationLink.foreground#4ECDC4
notifications.background#27282b
notifications.border#43454a
notifications.foreground#bcbec4
notificationsErrorIcon.foreground#f75464
notificationsInfoIcon.foreground#56a8f5
notificationsWarningIcon.foreground#f2c55c
panel.background#131416
panel.border#2b2d30
panelInput.border#43454a
panelSection.border#2b2d30
panelSectionHeader.background#131416
panelSectionHeader.border#2b2d30
panelSectionHeader.foreground#bcbec4
panelTitle.activeBorder#4ECDC4
panelTitle.activeForeground#dfe1e5
panelTitle.inactiveForeground#6f737a
peekView.border#4ECDC4
peekViewEditor.background#27282b
peekViewEditor.matchHighlightBackground#2d543f80
peekViewEditorGutter.background#27282b
peekViewResult.background#27282b
peekViewResult.fileForeground#bcbec4
peekViewResult.lineForeground#6f737a
peekViewResult.matchHighlightBackground#2d543f
peekViewTitle.background#393b40
peekViewTitleDescription.foreground#9da0a8
peekViewTitleLabel.foreground#dfe1e5
pickerGroup.border#43454a
pickerGroup.foreground#9da0a8
problemsErrorIcon.foreground#f75464
problemsInfoIcon.foreground#56a8f5
problemsWarningIcon.foreground#f2c55c
progressBar.background#4ECDC4
quickInput.background#27282b
quickInput.foreground#bcbec4
quickInputList.focusBackground#2b2d30
quickInputList.focusForeground#dfe1e5
quickInputTitle.background#27282b
sash.hoverBorder#4ECDC4
scrollbar.shadow#00000030
scrollbarSlider.activeBackground#6f737a70
scrollbarSlider.background#6f737a30
scrollbarSlider.hoverBackground#6f737a50
search.resultsInfoForeground#9da0a8
searchEditor.findMatchBackground#2d543f80
selection.background#373b39
settings.focusedRowBackground#1f2024
settings.headerForeground#dfe1e5
settings.modifiedItemIndicator#4ECDC4
settings.rowHoverBackground#1f2024
sideBar.background#131416
sideBar.border#2b2d30
sideBar.foreground#bcbec4
sideBarSectionHeader.background#131416
sideBarSectionHeader.border#2b2d30
sideBarSectionHeader.foreground#bcbec4
sideBarTitle.foreground#bcbec4
statusBar.background#0f1012
statusBar.border#2b2d30
statusBar.debuggingBackground#2a5091
statusBar.debuggingForeground#ced0d6
statusBar.foreground#bcbec4
statusBar.noFolderBackground#0f1012
statusBar.noFolderForeground#bcbec4
statusBarItem.activeBackground#ffffff18
statusBarItem.errorBackground#a03544
statusBarItem.errorForeground#f5f5f5
statusBarItem.hoverBackground#ffffff10
statusBarItem.prominentBackground#2b2d30
statusBarItem.prominentForeground#dfe1e5
statusBarItem.prominentHoverBackground#393b40
statusBarItem.remoteBackground#4ECDC4
statusBarItem.remoteForeground#0f1012
statusBarItem.warningBackground#7a5a1e
statusBarItem.warningForeground#f5f5f5
symbolIcon.booleanForeground#E5A070
symbolIcon.classForeground#42D4BA
symbolIcon.constantForeground#D2A8FF
symbolIcon.enumeratorForeground#42D4BA
symbolIcon.enumeratorMemberForeground#D2A8FF
symbolIcon.fieldForeground#D2A8FF
symbolIcon.functionForeground#6BBAFF
symbolIcon.interfaceForeground#42D4BA
symbolIcon.keywordForeground#E5A070
symbolIcon.methodForeground#6BBAFF
symbolIcon.namespaceForeground#42D4BA
symbolIcon.numberForeground#3CC8D4
symbolIcon.propertyForeground#D2A8FF
symbolIcon.stringForeground#7FCC85
symbolIcon.typeParameterForeground#42D4BA
symbolIcon.variableForeground#42D4BA
tab.activeBackground#191a1c
tab.activeBorder#00000000
tab.activeBorderTop#4ECDC4
tab.activeForeground#dfe1e5
tab.activeModifiedBorder#4ECDC4
tab.border#2b2d30
tab.hoverBackground#2b2d30
tab.inactiveBackground#131416
tab.inactiveForeground#6f737a
tab.inactiveModifiedBorder#4ECDC480
tab.lastPinnedBorder#43454a
tab.unfocusedActiveBorderTop#4ECDC480
tab.unfocusedHoverBackground#2b2d3080
terminal.ansiBlack#33363b
terminal.ansiBlue#56a8f5
terminal.ansiBrightBlack#6f737a
terminal.ansiBrightBlue#70aeff
terminal.ansiBrightCyan#42c3d4
terminal.ansiBrightGreen#73bd79
terminal.ansiBrightMagenta#cf84cf
terminal.ansiBrightRed#fa6675
terminal.ansiBrightWhite#ced0d6
terminal.ansiBrightYellow#f2c55c
terminal.ansiCyan#2aacb8
terminal.ansiGreen#6aab73
terminal.ansiMagenta#c77dbb
terminal.ansiRed#f75464
terminal.ansiWhite#bcbec4
terminal.ansiYellow#e0bb65
terminal.background#131416
terminal.findMatchBackground#2d543f80
terminal.findMatchHighlightBackground#11495780
terminal.foreground#bcbec4
terminal.inactiveSelectionBackground#373b3950
terminal.selectionBackground#373b3980
terminal.tab.activeBorder#4ECDC4
terminalCommandDecoration.defaultBackground#6f737a
terminalCommandDecoration.errorBackground#f75464
terminalCommandDecoration.successBackground#549159
terminalCursor.foreground#4ECDC4
testing.iconErrored#fa6675
testing.iconFailed#f75464
testing.iconPassed#549159
testing.iconQueued#6f737a
testing.iconSkipped#6f737a
testing.iconUnset#6f737a
textBlockQuote.background#27282b
textBlockQuote.border#43454a
textLink.activeForeground#4ECDC4
textLink.foreground#4ECDC4
titleBar.activeBackground#0f1012
titleBar.activeForeground#bcbec4
titleBar.border#2b2d30
titleBar.inactiveBackground#0f1012
titleBar.inactiveForeground#6f737a
toolbar.activeBackground#393b40
toolbar.hoverBackground#2b2d30
tree.inactiveIndentGuidesStroke#323438
tree.indentGuidesStroke#43454a
widget.border#2b2d30
widget.shadow#00000030
window.activeBorder#2b2d30
window.inactiveBorder#2b2d30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.block, comment.line, punctuation.definition.comment	#7a7e85	—
comment.block.documentation	#6E9A7C	—
storage.type.class.jsdoc, entity.name.type.instance.jsdoc	#78B88E	—
string, string.quoted, string.template, punctuation.definition.string	#7FCC85	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#E5A070	—
constant.character.escape, constant.other.placeholder	#E5A070	—
constant.numeric, constant.language.numeric	#3CC8D4	—
constant.language.boolean	#E5A070	—
constant.language.null, constant.language.undefined	#E5A070	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.delete, keyword.operator.void, keyword.other	#E5A070	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical	#bcbec4	—
storage.type, storage.modifier	#E5A070	—
entity.name.function, support.function, meta.function-call entity.name.function	#6BBAFF	—
entity.name.function.member	#6BBAFF	—
entity.name.function.member.static	#6BBAFF	—
entity.name.type.class, entity.name.class, support.class	#42D4BA	—
entity.name.type, support.type	#42D4BA	—
entity.name.type.parameter	#42D4BA	—
entity.name.type.interface	#42D4BA	—
variable, variable.other.readwrite, variable.other.object	#42D4BA	—
variable.other.constant, constant.other	#D2A8FF	—
variable.other.property, support.variable.property	#79E3D2	—
meta.object-literal.key	#D2A8FF	—
variable.other.property.static	#79E3D2	—
variable.parameter	#42D4BA	—
variable.language.this, variable.language.super	#E5A070	—
punctuation.separator, punctuation.terminator, punctuation.accessor	#bcbec4	—
punctuation.section, meta.brace	#bcbec4	—
entity.name.tag	#6BB0EA	—
punctuation.definition.tag	#6f737a	—
entity.other.attribute-name	#D2A8FF	—
entity.name.namespace, entity.name.module, entity.name.type.module	#42D4BA	—
entity, entity.name	#42D4BA	—
entity.other.inherited-class	#42D4BA	—
entity.name.label, entity.name.goto-label	#D2A8FF	—
entity.name.operator	#E5A070	—
constant.character.entity, punctuation.definition.entity.html, punctuation.definition.entity.xml	#E5A070	—
support.constant, variable.other.enummember	#D2A8FF	—
meta.decorator, punctuation.decorator, storage.type.annotation	#CCC76E	—
entity.other.attribute-name.class.css	#6BBAFF	—
entity.other.attribute-name.id.css	#6BBAFF	—
entity.name.tag.css, entity.name.tag.less, entity.name.tag.scss	#E5A070	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#CCC76E	—
variable.css, variable.argument.css	#42D4BA	—
support.type.property-name.css, support.type.vendored.property-name.css, support.type.property-name.scss, support.type.property-name.less	#42D4BA	—
support.constant.property-value.css, support.constant.font-name.css, support.constant.color.css, constant.other.color.rgb-value.css, support.constant.media.css	#E5A070	—
keyword.other.unit.css, keyword.other.unit.scss	#3CC8D4	—
keyword.other.important.css	#E5A070	bold
support.type.property-name.json	#D2A8FF	—
markup.heading, entity.name.section.markdown	#6BBAFF	bold
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inline.raw, markup.fenced_code.block	#7FCC85	—
markup.underline.link	#6BBAFF	—
punctuation.definition.list.begin.markdown	#E5A070	—
markup.quote.markdown	#7a7e85	—
string.regexp	#58D8E8	—
entity.name.tag.yaml	#E5A070	—
meta.function.decorator.python, entity.name.function.decorator.python	#CCC76E	—
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust	#42D4BA	—
support.class.component.jsx, support.class.component.tsx	#42D4BA	—
meta.embedded	#bcbec4	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#E5A070	—
markup.inserted	#7FCC85	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#ffa198	—
invalid.illegal	#f75464	—
keyword.codetag	#A0CC4A	—

VS Code preview

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

Eke Dark — Eke Dark Italic

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#0f1012
activityBar.border#2b2d30
activityBar.foreground#bcbec4
activityBar.inactiveForeground#6f737a
activityBarBadge.background#4ECDC4
activityBarBadge.foreground#0f1012
badge.background#393b40
badge.foreground#bcbec4
banner.background#27282b
banner.foreground#bcbec4
banner.iconForeground#4ECDC4
breadcrumb.activeSelectionForeground#dfe1e5
breadcrumb.background#191a1c
breadcrumb.focusForeground#dfe1e5
breadcrumb.foreground#9da0a8
breadcrumbPicker.background#27282b
button.background#4ECDC4
button.foreground#0f1012
button.hoverBackground#2E8B85
button.secondaryBackground#393b40
button.secondaryForeground#bcbec4
button.secondaryHoverBackground#43454a
chat.avatarBackground#393b40
chat.avatarForeground#bcbec4
chat.requestBorder#2b2d30
chat.slashCommandBackground#4ECDC420
chat.slashCommandForeground#4ECDC4
checkbox.background#27282b
checkbox.border#43454a
checkbox.foreground#bcbec4
commandCenter.activeBackground#2b2d30
commandCenter.activeBorder#2b2d30
commandCenter.activeForeground#dfe1e5
commandCenter.background#191a1c
commandCenter.border#2b2d30
commandCenter.foreground#bcbec4
debugExceptionWidget.background#402929
debugExceptionWidget.border#fa6675
debugIcon.breakpointForeground#f75464
debugIcon.continueForeground#549159
debugIcon.disconnectForeground#f75464
debugIcon.pauseForeground#f2c55c
debugIcon.restartForeground#549159
debugIcon.startForeground#549159
debugIcon.stepIntoForeground#56a8f5
debugIcon.stepOutForeground#56a8f5
debugIcon.stepOverForeground#56a8f5
debugIcon.stopForeground#f75464
debugToolBar.background#27282b
debugToolBar.border#43454a
descriptionForeground#9da0a8
diffEditor.border#2b2d30
diffEditor.diagonalFill#2b2d3080
diffEditor.insertedLineBackground#54915915
diffEditor.insertedTextBackground#54915920
diffEditor.removedLineBackground#da363326
diffEditor.removedTextBackground#da363326
dropdown.background#27282b
dropdown.border#43454a
dropdown.foreground#bcbec4
dropdown.listBackground#27282b
editor.background#191a1c
editor.findMatchBackground#2d543f
editor.findMatchHighlightBackground#11495780
editor.findRangeHighlightBackground#11495740
editor.focusedStackFrameHighlightBackground#2d543f80
editor.foreground#bcbec4
editor.inactiveSelectionBackground#373b3960
editor.lineHighlightBackground#1f2024
editor.lineHighlightBorder#00000000
editor.selectionBackground#373b39
editor.selectionHighlightBackground#373b3980
editor.stackFrameHighlightBackground#3d332080
editor.wordHighlightBackground#373b3980
editor.wordHighlightStrongBackground#402f3380
editorBracketHighlight.foreground1#FFD700
editorBracketHighlight.foreground2#DA70D6
editorBracketHighlight.foreground3#179FFF
editorBracketHighlight.foreground4#FFD700
editorBracketHighlight.foreground5#DA70D6
editorBracketHighlight.foreground6#179FFF
editorBracketHighlight.unexpectedBracket.foreground#f75464
editorBracketMatch.background#43454a
editorBracketMatch.border#00000000
editorCodeLens.foreground#868a91
editorCursor.foreground#4ECDC4
editorError.foreground#fa6675
editorGhostText.foreground#6f737a80
editorGroup.border#2b2d30
editorGroup.dropBackground#2b2d3080
editorGroupHeader.noTabsBackground#131416
editorGroupHeader.tabsBackground#131416
editorGroupHeader.tabsBorder#2b2d30
editorGutter.addedBackground#549159
editorGutter.background#191a1c
editorGutter.commentRangeForeground#6f737a
editorGutter.deletedBackground#FD5B87
editorGutter.modifiedBackground#375fad
editorHint.foreground#98804B
editorHoverWidget.background#27282b
editorHoverWidget.border#43454a
editorHoverWidget.foreground#bcbec4
editorHoverWidget.statusBarBackground#2b2d30
editorIndentGuide.activeBackground1#4e5157
editorIndentGuide.background1#323438
editorInfo.foreground#98804B
editorInlayHint.background#393b40
editorInlayHint.foreground#868a91
editorInlayHint.parameterBackground#393b40
editorInlayHint.parameterForeground#868a91
editorInlayHint.typeBackground#393b40
editorInlayHint.typeForeground#868a91
editorLightBulb.foreground#f2c55c
editorLightBulbAutoFix.foreground#4ECDC4
editorLineNumber.activeForeground#a1a3ab
editorLineNumber.dimmedForeground#3f434a
editorLineNumber.foreground#666b74
editorLink.activeForeground#4ECDC4
editorMultiCursor.primary.foreground#4ECDC4
editorMultiCursor.secondary.foreground#2E8B85
editorOverviewRuler.addedForeground#54915980
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#43454a
editorOverviewRuler.deletedForeground#FD5B8780
editorOverviewRuler.errorForeground#fa6675
editorOverviewRuler.findMatchForeground#2d543f80
editorOverviewRuler.infoForeground#98804B
editorOverviewRuler.modifiedForeground#375fad80
editorOverviewRuler.selectionHighlightForeground#373b3980
editorOverviewRuler.warningForeground#f2c55c
editorRuler.foreground#323438
editorStickyScroll.background#191a1c
editorStickyScrollHover.background#1f2024
editorSuggestWidget.background#27282b
editorSuggestWidget.border#43454a
editorSuggestWidget.focusHighlightForeground#4ECDC4
editorSuggestWidget.foreground#bcbec4
editorSuggestWidget.highlightForeground#4ECDC4
editorSuggestWidget.selectedBackground#2b2d30
editorSuggestWidget.selectedForeground#dfe1e5
editorSuggestWidget.selectedIconForeground#dfe1e5
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000080
editorWarning.foreground#f2c55c
editorWhitespace.foreground#6f737a
editorWidget.background#27282b
editorWidget.border#43454a
editorWidget.foreground#bcbec4
editorWidget.resizeBorder#4ECDC4
errorForeground#fa6675
extensionBadge.remoteBackground#4ECDC4
extensionBadge.remoteForeground#0f1012
extensionButton.prominentBackground#4ECDC4
extensionButton.prominentForeground#0f1012
extensionButton.prominentHoverBackground#2E8B85
focusBorder#4ECDC4
foreground#bcbec4
gitDecoration.addedResourceForeground#74C991
gitDecoration.conflictingResourceForeground#de6a66
gitDecoration.deletedResourceForeground#fa6675
gitDecoration.ignoredResourceForeground#6f737a
gitDecoration.modifiedResourceForeground#D19A66
gitDecoration.stageDeletedResourceForeground#fa6675
gitDecoration.stageModifiedResourceForeground#D19A66
gitDecoration.submoduleResourceForeground#56a8f5
gitDecoration.untrackedResourceForeground#74C991
icon.foreground#bcbec4
inlineChat.background#27282b
inlineChat.border#43454a
inlineChat.shadow#00000030
inlineChatInput.background#191a1c
inlineChatInput.border#43454a
inlineChatInput.focusBorder#4ECDC4
inlineChatInput.placeholderForeground#6f737a
input.background#27282b
input.border#43454a
input.foreground#bcbec4
input.placeholderForeground#6f737a
inputOption.activeBackground#4ECDC420
inputOption.activeBorder#4ECDC4
inputOption.activeForeground#bcbec4
inputValidation.errorBackground#402929
inputValidation.errorBorder#fa6675
inputValidation.errorForeground#f75464
inputValidation.infoBackground#25324d
inputValidation.infoBorder#4ECDC4
inputValidation.infoForeground#56a8f5
inputValidation.warningBackground#3d3320
inputValidation.warningBorder#f2c55c
inputValidation.warningForeground#f2c55c
interactive.activeCodeBorder#4ECDC4
interactive.inactiveCodeBorder#2b2d30
keybindingLabel.background#393b40
keybindingLabel.border#43454a
keybindingLabel.bottomBorder#43454a
keybindingLabel.foreground#bcbec4
list.activeSelectionBackground#2b2d30
list.activeSelectionForeground#dfe1e5
list.activeSelectionIconForeground#dfe1e5
list.dropBackground#2b2d3080
list.errorForeground#f75464
list.filterMatchBackground#4ECDC430
list.filterMatchBorder#4ECDC460
list.focusBackground#2b2d30
list.focusForeground#dfe1e5
list.focusOutline#4ECDC4
list.highlightForeground#4ECDC4
list.hoverBackground#2b2d30
list.hoverForeground#dfe1e5
list.inactiveSelectionBackground#2b2d30
list.inactiveSelectionForeground#bcbec4
list.warningForeground#f2c55c
menu.background#27282b
menu.border#43454a
menu.foreground#bcbec4
menu.selectionBackground#2b2d30
menu.selectionForeground#dfe1e5
menu.separatorBackground#43454a
menubar.selectionBackground#2b2d30
menubar.selectionBorder#00000000
menubar.selectionForeground#dfe1e5
merge.currentContentBackground#54915920
merge.currentHeaderBackground#54915940
merge.incomingContentBackground#375fad20
merge.incomingHeaderBackground#375fad40
mergeEditor.change.background#54915920
mergeEditor.change.word.background#54915940
mergeEditor.conflict.handledFocused.border#549159
mergeEditor.conflict.unhandledFocused.border#f2c55c
minimap.background#191a1c
minimap.findMatchHighlight#2d543f80
minimap.selectionHighlight#373b3980
minimapSlider.activeBackground#6f737a60
minimapSlider.background#6f737a20
minimapSlider.hoverBackground#6f737a40
notebook.cellBorderColor#2b2d30
notebook.cellEditorBackground#1f2024
notebook.cellHoverBackground#1f2024
notebook.focusedCellBorder#4ECDC4
notebook.selectedCellBackground#1f2024
notificationLink.foreground#4ECDC4
notifications.background#27282b
notifications.border#43454a
notifications.foreground#bcbec4
notificationsErrorIcon.foreground#f75464
notificationsInfoIcon.foreground#56a8f5
notificationsWarningIcon.foreground#f2c55c
panel.background#131416
panel.border#2b2d30
panelInput.border#43454a
panelSection.border#2b2d30
panelSectionHeader.background#131416
panelSectionHeader.border#2b2d30
panelSectionHeader.foreground#bcbec4
panelTitle.activeBorder#4ECDC4
panelTitle.activeForeground#dfe1e5
panelTitle.inactiveForeground#6f737a
peekView.border#4ECDC4
peekViewEditor.background#27282b
peekViewEditor.matchHighlightBackground#2d543f80
peekViewEditorGutter.background#27282b
peekViewResult.background#27282b
peekViewResult.fileForeground#bcbec4
peekViewResult.lineForeground#6f737a
peekViewResult.matchHighlightBackground#2d543f
peekViewTitle.background#393b40
peekViewTitleDescription.foreground#9da0a8
peekViewTitleLabel.foreground#dfe1e5
pickerGroup.border#43454a
pickerGroup.foreground#9da0a8
problemsErrorIcon.foreground#f75464
problemsInfoIcon.foreground#56a8f5
problemsWarningIcon.foreground#f2c55c
progressBar.background#4ECDC4
quickInput.background#27282b
quickInput.foreground#bcbec4
quickInputList.focusBackground#2b2d30
quickInputList.focusForeground#dfe1e5
quickInputTitle.background#27282b
sash.hoverBorder#4ECDC4
scrollbar.shadow#00000030
scrollbarSlider.activeBackground#6f737a70
scrollbarSlider.background#6f737a30
scrollbarSlider.hoverBackground#6f737a50
search.resultsInfoForeground#9da0a8
searchEditor.findMatchBackground#2d543f80
selection.background#373b39
settings.focusedRowBackground#1f2024
settings.headerForeground#dfe1e5
settings.modifiedItemIndicator#4ECDC4
settings.rowHoverBackground#1f2024
sideBar.background#131416
sideBar.border#2b2d30
sideBar.foreground#bcbec4
sideBarSectionHeader.background#131416
sideBarSectionHeader.border#2b2d30
sideBarSectionHeader.foreground#bcbec4
sideBarTitle.foreground#bcbec4
statusBar.background#0f1012
statusBar.border#2b2d30
statusBar.debuggingBackground#2a5091
statusBar.debuggingForeground#ced0d6
statusBar.foreground#bcbec4
statusBar.noFolderBackground#0f1012
statusBar.noFolderForeground#bcbec4
statusBarItem.activeBackground#ffffff18
statusBarItem.errorBackground#a03544
statusBarItem.errorForeground#f5f5f5
statusBarItem.hoverBackground#ffffff10
statusBarItem.prominentBackground#2b2d30
statusBarItem.prominentForeground#dfe1e5
statusBarItem.prominentHoverBackground#393b40
statusBarItem.remoteBackground#4ECDC4
statusBarItem.remoteForeground#0f1012
statusBarItem.warningBackground#7a5a1e
statusBarItem.warningForeground#f5f5f5
symbolIcon.booleanForeground#E5A070
symbolIcon.classForeground#42D4BA
symbolIcon.constantForeground#D2A8FF
symbolIcon.enumeratorForeground#42D4BA
symbolIcon.enumeratorMemberForeground#D2A8FF
symbolIcon.fieldForeground#D2A8FF
symbolIcon.functionForeground#6BBAFF
symbolIcon.interfaceForeground#42D4BA
symbolIcon.keywordForeground#E5A070
symbolIcon.methodForeground#6BBAFF
symbolIcon.namespaceForeground#42D4BA
symbolIcon.numberForeground#3CC8D4
symbolIcon.propertyForeground#D2A8FF
symbolIcon.stringForeground#7FCC85
symbolIcon.typeParameterForeground#42D4BA
symbolIcon.variableForeground#42D4BA
tab.activeBackground#191a1c
tab.activeBorder#00000000
tab.activeBorderTop#4ECDC4
tab.activeForeground#dfe1e5
tab.activeModifiedBorder#4ECDC4
tab.border#2b2d30
tab.hoverBackground#2b2d30
tab.inactiveBackground#131416
tab.inactiveForeground#6f737a
tab.inactiveModifiedBorder#4ECDC480
tab.lastPinnedBorder#43454a
tab.unfocusedActiveBorderTop#4ECDC480
tab.unfocusedHoverBackground#2b2d3080
terminal.ansiBlack#33363b
terminal.ansiBlue#56a8f5
terminal.ansiBrightBlack#6f737a
terminal.ansiBrightBlue#70aeff
terminal.ansiBrightCyan#42c3d4
terminal.ansiBrightGreen#73bd79
terminal.ansiBrightMagenta#cf84cf
terminal.ansiBrightRed#fa6675
terminal.ansiBrightWhite#ced0d6
terminal.ansiBrightYellow#f2c55c
terminal.ansiCyan#2aacb8
terminal.ansiGreen#6aab73
terminal.ansiMagenta#c77dbb
terminal.ansiRed#f75464
terminal.ansiWhite#bcbec4
terminal.ansiYellow#e0bb65
terminal.background#131416
terminal.findMatchBackground#2d543f80
terminal.findMatchHighlightBackground#11495780
terminal.foreground#bcbec4
terminal.inactiveSelectionBackground#373b3950
terminal.selectionBackground#373b3980
terminal.tab.activeBorder#4ECDC4
terminalCommandDecoration.defaultBackground#6f737a
terminalCommandDecoration.errorBackground#f75464
terminalCommandDecoration.successBackground#549159
terminalCursor.foreground#4ECDC4
testing.iconErrored#fa6675
testing.iconFailed#f75464
testing.iconPassed#549159
testing.iconQueued#6f737a
testing.iconSkipped#6f737a
testing.iconUnset#6f737a
textBlockQuote.background#27282b
textBlockQuote.border#43454a
textLink.activeForeground#4ECDC4
textLink.foreground#4ECDC4
titleBar.activeBackground#0f1012
titleBar.activeForeground#bcbec4
titleBar.border#2b2d30
titleBar.inactiveBackground#0f1012
titleBar.inactiveForeground#6f737a
toolbar.activeBackground#393b40
toolbar.hoverBackground#2b2d30
tree.inactiveIndentGuidesStroke#323438
tree.indentGuidesStroke#43454a
widget.border#2b2d30
widget.shadow#00000030
window.activeBorder#2b2d30
window.inactiveBorder#2b2d30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.block, comment.line, punctuation.definition.comment	#7a7e85	italic
comment.block.documentation	#6E9A7C	italic
storage.type.class.jsdoc, entity.name.type.instance.jsdoc	#78B88E	—
string, string.quoted, string.template, punctuation.definition.string	#7FCC85	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#E5A070	—
constant.character.escape, constant.other.placeholder	#E5A070	—
constant.numeric, constant.language.numeric	#3CC8D4	—
constant.language.boolean	#E5A070	—
constant.language.null, constant.language.undefined	#E5A070	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.delete, keyword.operator.void, keyword.other	#E5A070	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical	#bcbec4	—
storage.type, storage.modifier	#E5A070	—
entity.name.function, support.function, meta.function-call entity.name.function	#6BBAFF	—
entity.name.function.member	#6BBAFF	—
entity.name.function.member.static	#6BBAFF	italic
entity.name.type.class, entity.name.class, support.class	#42D4BA	—
entity.name.type, support.type	#42D4BA	—
entity.name.type.parameter	#42D4BA	—
entity.name.type.interface	#42D4BA	—
variable, variable.other.readwrite, variable.other.object	#42D4BA	—
variable.other.constant, constant.other	#D2A8FF	italic
variable.other.property, support.variable.property	#79E3D2	—
meta.object-literal.key	#D2A8FF	—
variable.other.property.static	#79E3D2	italic
variable.parameter	#42D4BA	—
variable.language.this, variable.language.super	#E5A070	—
punctuation.separator, punctuation.terminator, punctuation.accessor	#bcbec4	—
punctuation.section, meta.brace	#bcbec4	—
entity.name.tag	#6BB0EA	—
punctuation.definition.tag	#6f737a	—
entity.other.attribute-name	#D2A8FF	—
entity.name.namespace, entity.name.module, entity.name.type.module	#42D4BA	—
entity, entity.name	#42D4BA	—
entity.other.inherited-class	#42D4BA	—
entity.name.label, entity.name.goto-label	#D2A8FF	—
entity.name.operator	#E5A070	—
constant.character.entity, punctuation.definition.entity.html, punctuation.definition.entity.xml	#E5A070	—
support.constant, variable.other.enummember	#D2A8FF	—
meta.decorator, punctuation.decorator, storage.type.annotation	#CCC76E	—
entity.other.attribute-name.class.css	#6BBAFF	—
entity.other.attribute-name.id.css	#6BBAFF	—
entity.name.tag.css, entity.name.tag.less, entity.name.tag.scss	#E5A070	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#CCC76E	—
variable.css, variable.argument.css	#42D4BA	—
support.type.property-name.css, support.type.vendored.property-name.css, support.type.property-name.scss, support.type.property-name.less	#42D4BA	—
support.constant.property-value.css, support.constant.font-name.css, support.constant.color.css, constant.other.color.rgb-value.css, support.constant.media.css	#E5A070	—
keyword.other.unit.css, keyword.other.unit.scss	#3CC8D4	—
keyword.other.important.css	#E5A070	bold
support.type.property-name.json	#D2A8FF	—
markup.heading, entity.name.section.markdown	#6BBAFF	bold
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inline.raw, markup.fenced_code.block	#7FCC85	—
markup.underline.link	#6BBAFF	—
punctuation.definition.list.begin.markdown	#E5A070	—
markup.quote.markdown	#7a7e85	italic
string.regexp	#58D8E8	—
entity.name.tag.yaml	#E5A070	—
meta.function.decorator.python, entity.name.function.decorator.python	#CCC76E	—
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust	#42D4BA	—
support.class.component.jsx, support.class.component.tsx	#42D4BA	—
meta.embedded	#bcbec4	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#E5A070	—
markup.inserted	#7FCC85	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#ffa198	—
invalid.illegal	#f75464	—
keyword.codetag	#A0CC4A	italic

VS Code preview

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

Eke Dark — Eke 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#e8eaed
activityBar.border#d0d2d6
activityBar.foreground#383c42
activityBar.inactiveForeground#7d8189
activityBarBadge.background#00b4a8
activityBarBadge.foreground#ffffff
badge.background#dfe1e4
badge.foreground#383c42
banner.background#f3f4f6
banner.foreground#383c42
banner.iconForeground#00b4a8
breadcrumb.activeSelectionForeground#2f3338
breadcrumb.background#ffffff
breadcrumb.focusForeground#2f3338
breadcrumb.foreground#57595f
breadcrumbPicker.background#f3f4f6
button.background#00b4a8
button.foreground#ffffff
button.hoverBackground#009990
button.secondaryBackground#dfe1e4
button.secondaryForeground#383c42
button.secondaryHoverBackground#d0d2d6
chat.avatarBackground#dfe1e4
chat.avatarForeground#383c42
chat.requestBorder#d0d2d6
chat.slashCommandBackground#00b4a820
chat.slashCommandForeground#00b4a8
checkbox.background#ffffff
checkbox.border#d0d2d6
checkbox.foreground#383c42
commandCenter.activeBackground#dfe1e4
commandCenter.activeBorder#d0d2d6
commandCenter.activeForeground#2f3338
commandCenter.background#ffffff
commandCenter.border#d0d2d6
commandCenter.foreground#383c42
debugExceptionWidget.background#fde8ea
debugExceptionWidget.border#cb2431
debugIcon.breakpointForeground#cb2431
debugIcon.continueForeground#34a853
debugIcon.disconnectForeground#cb2431
debugIcon.pauseForeground#9a6700
debugIcon.restartForeground#34a853
debugIcon.startForeground#34a853
debugIcon.stepIntoForeground#1b6bab
debugIcon.stepOutForeground#1b6bab
debugIcon.stepOverForeground#1b6bab
debugIcon.stopForeground#cb2431
debugToolBar.background#f3f4f6
debugToolBar.border#d0d2d6
descriptionForeground#57595f
diffEditor.border#d0d2d6
diffEditor.diagonalFill#d0d2d680
diffEditor.insertedLineBackground#34a85315
diffEditor.insertedTextBackground#34a85320
diffEditor.removedLineBackground#d63b3b20
diffEditor.removedTextBackground#d63b3b26
dropdown.background#ffffff
dropdown.border#d0d2d6
dropdown.foreground#383c42
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#a8ddb0
editor.findMatchHighlightBackground#cce8d070
editor.findRangeHighlightBackground#cce8d040
editor.focusedStackFrameHighlightBackground#cce8d0
editor.foreground#383c42
editor.inactiveSelectionBackground#b4d5fe50
editor.lineHighlightBackground#f6f7f8
editor.lineHighlightBorder#00000000
editor.selectionBackground#b4d5fe
editor.selectionHighlightBackground#b4d5fe70
editor.stackFrameHighlightBackground#fdf3e0
editor.wordHighlightBackground#b4d5fe70
editor.wordHighlightStrongBackground#e0c4de70
editorBracketHighlight.foreground1#9a7200
editorBracketHighlight.foreground2#8b1e7d
editorBracketHighlight.foreground3#1b6bab
editorBracketHighlight.foreground4#9a7200
editorBracketHighlight.foreground5#8b1e7d
editorBracketHighlight.foreground6#1b6bab
editorBracketHighlight.unexpectedBracket.foreground#cb2431
editorBracketMatch.background#d8dade
editorBracketMatch.border#00000000
editorCodeLens.foreground#6b6f77
editorCursor.foreground#00b4a8
editorError.foreground#cb2431
editorGhostText.foreground#8b8f9680
editorGroup.border#d0d2d6
editorGroup.dropBackground#d0d2d680
editorGroupHeader.noTabsBackground#f3f4f6
editorGroupHeader.tabsBackground#f3f4f6
editorGroupHeader.tabsBorder#d0d2d6
editorGutter.addedBackground#34a853
editorGutter.background#ffffff
editorGutter.commentRangeForeground#7d8189
editorGutter.deletedBackground#cb2431
editorGutter.modifiedBackground#1b6bab
editorHint.foreground#6b5320
editorHoverWidget.background#f3f4f6
editorHoverWidget.border#d0d2d6
editorHoverWidget.foreground#383c42
editorHoverWidget.statusBarBackground#e8eaed
editorIndentGuide.activeBackground1#c8cacd
editorIndentGuide.background1#e0e2e5
editorInfo.foreground#6b5320
editorInlayHint.background#eef0f2
editorInlayHint.foreground#6b6f77
editorInlayHint.parameterBackground#eef0f2
editorInlayHint.parameterForeground#6b6f77
editorInlayHint.typeBackground#eef0f2
editorInlayHint.typeForeground#6b6f77
editorLightBulb.foreground#9a6700
editorLightBulbAutoFix.foreground#00b4a8
editorLineNumber.activeForeground#383c42
editorLineNumber.dimmedForeground#b4b8bf
editorLineNumber.foreground#868a94
editorLink.activeForeground#00b4a8
editorMultiCursor.primary.foreground#00b4a8
editorMultiCursor.secondary.foreground#009990
editorOverviewRuler.addedForeground#34a85380
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#d8dade
editorOverviewRuler.deletedForeground#cb243180
editorOverviewRuler.errorForeground#cb2431
editorOverviewRuler.findMatchForeground#a8ddb080
editorOverviewRuler.infoForeground#6b5320
editorOverviewRuler.modifiedForeground#1b6bab80
editorOverviewRuler.selectionHighlightForeground#b4d5fe80
editorOverviewRuler.warningForeground#9a6700
editorRuler.foreground#e0e2e5
editorStickyScroll.background#ffffff
editorStickyScrollHover.background#f6f7f8
editorSuggestWidget.background#f3f4f6
editorSuggestWidget.border#d0d2d6
editorSuggestWidget.focusHighlightForeground#00b4a8
editorSuggestWidget.foreground#383c42
editorSuggestWidget.highlightForeground#00b4a8
editorSuggestWidget.selectedBackground#dfe1e4
editorSuggestWidget.selectedForeground#2f3338
editorSuggestWidget.selectedIconForeground#2f3338
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000080
editorWarning.foreground#9a6700
editorWhitespace.foreground#c8cacd
editorWidget.background#f3f4f6
editorWidget.border#d0d2d6
editorWidget.foreground#383c42
editorWidget.resizeBorder#00b4a8
errorForeground#cb2431
extensionBadge.remoteBackground#00b4a8
extensionBadge.remoteForeground#ffffff
extensionButton.prominentBackground#00b4a8
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#009990
focusBorder#00b4a8
foreground#383c42
gitDecoration.addedResourceForeground#34a853
gitDecoration.conflictingResourceForeground#cf4040
gitDecoration.deletedResourceForeground#d63b3b
gitDecoration.ignoredResourceForeground#9a9ea6
gitDecoration.modifiedResourceForeground#c08b00
gitDecoration.stageDeletedResourceForeground#d63b3b
gitDecoration.stageModifiedResourceForeground#c08b00
gitDecoration.submoduleResourceForeground#1b6bab
gitDecoration.untrackedResourceForeground#34a853
icon.foreground#4a4e55
inlineChat.background#f3f4f6
inlineChat.border#d0d2d6
inlineChat.shadow#00000020
inlineChatInput.background#ffffff
inlineChatInput.border#d0d2d6
inlineChatInput.focusBorder#00b4a8
inlineChatInput.placeholderForeground#7d8189
input.background#ffffff
input.border#d0d2d6
input.foreground#383c42
input.placeholderForeground#7d8189
inputOption.activeBackground#00b4a820
inputOption.activeBorder#00b4a8
inputOption.activeForeground#383c42
inputValidation.errorBackground#fde8ea
inputValidation.errorBorder#cb2431
inputValidation.errorForeground#cb2431
inputValidation.infoBackground#e4f0fc
inputValidation.infoBorder#00b4a8
inputValidation.infoForeground#1b6bab
inputValidation.warningBackground#fdf3e0
inputValidation.warningBorder#9a6700
inputValidation.warningForeground#9a6700
interactive.activeCodeBorder#00b4a8
interactive.inactiveCodeBorder#d0d2d6
keybindingLabel.background#dfe1e4
keybindingLabel.border#d0d2d6
keybindingLabel.bottomBorder#d0d2d6
keybindingLabel.foreground#383c42
list.activeSelectionBackground#dfe1e4
list.activeSelectionForeground#2f3338
list.activeSelectionIconForeground#2f3338
list.dropBackground#dfe1e480
list.errorForeground#cb2431
list.filterMatchBackground#00b4a830
list.filterMatchBorder#00b4a860
list.focusBackground#dfe1e4
list.focusForeground#2f3338
list.focusOutline#00b4a8
list.highlightForeground#00b4a8
list.hoverBackground#eef0f2
list.hoverForeground#383c42
list.inactiveSelectionBackground#dfe1e4
list.inactiveSelectionForeground#383c42
list.warningForeground#9a6700
menu.background#f3f4f6
menu.border#d0d2d6
menu.foreground#383c42
menu.selectionBackground#dfe1e4
menu.selectionForeground#2f3338
menu.separatorBackground#d0d2d6
menubar.selectionBackground#dfe1e4
menubar.selectionBorder#00000000
menubar.selectionForeground#2f3338
merge.currentContentBackground#34a85320
merge.currentHeaderBackground#34a85340
merge.incomingContentBackground#1b6bab20
merge.incomingHeaderBackground#1b6bab40
mergeEditor.change.background#34a85320
mergeEditor.change.word.background#34a85340
mergeEditor.conflict.handledFocused.border#34a853
mergeEditor.conflict.unhandledFocused.border#9a6700
minimap.background#ffffff
minimap.findMatchHighlight#a8ddb080
minimap.selectionHighlight#b4d5fe80
minimapSlider.activeBackground#6b6f7760
minimapSlider.background#6b6f7720
minimapSlider.hoverBackground#6b6f7740
notebook.cellBorderColor#d0d2d6
notebook.cellEditorBackground#f6f7f8
notebook.cellHoverBackground#f6f7f8
notebook.focusedCellBorder#00b4a8
notebook.selectedCellBackground#f6f7f8
notificationLink.foreground#00b4a8
notifications.background#f3f4f6
notifications.border#d0d2d6
notifications.foreground#383c42
notificationsErrorIcon.foreground#cb2431
notificationsInfoIcon.foreground#1b6bab
notificationsWarningIcon.foreground#9a6700
panel.background#f3f4f6
panel.border#d0d2d6
panelInput.border#d0d2d6
panelSection.border#d0d2d6
panelSectionHeader.background#f3f4f6
panelSectionHeader.border#d0d2d6
panelSectionHeader.foreground#383c42
panelTitle.activeBorder#00b4a8
panelTitle.activeForeground#383c42
panelTitle.inactiveForeground#7d8189
peekView.border#00b4a8
peekViewEditor.background#f3f4f6
peekViewEditor.matchHighlightBackground#a8ddb080
peekViewEditorGutter.background#f3f4f6
peekViewResult.background#f3f4f6
peekViewResult.fileForeground#383c42
peekViewResult.lineForeground#6b6f77
peekViewResult.matchHighlightBackground#a8ddb0
peekViewTitle.background#e8eaed
peekViewTitleDescription.foreground#57595f
peekViewTitleLabel.foreground#383c42
pickerGroup.border#d0d2d6
pickerGroup.foreground#57595f
problemsErrorIcon.foreground#cb2431
problemsInfoIcon.foreground#1b6bab
problemsWarningIcon.foreground#9a6700
progressBar.background#00b4a8
quickInput.background#f3f4f6
quickInput.foreground#383c42
quickInputList.focusBackground#dfe1e4
quickInputList.focusForeground#2f3338
quickInputTitle.background#f3f4f6
sash.hoverBorder#00b4a8
scrollbar.shadow#00000020
scrollbarSlider.activeBackground#6b6f7770
scrollbarSlider.background#6b6f7730
scrollbarSlider.hoverBackground#6b6f7750
search.resultsInfoForeground#57595f
searchEditor.findMatchBackground#a8ddb080
selection.background#b4d5fe
settings.focusedRowBackground#f6f7f8
settings.headerForeground#2f3338
settings.modifiedItemIndicator#00b4a8
settings.rowHoverBackground#f6f7f8
sideBar.background#f3f4f6
sideBar.border#d0d2d6
sideBar.foreground#4a4e55
sideBarSectionHeader.background#f3f4f6
sideBarSectionHeader.border#d0d2d6
sideBarSectionHeader.foreground#383c42
sideBarTitle.foreground#383c42
statusBar.background#e8eaed
statusBar.border#d0d2d6
statusBar.debuggingBackground#1b6bab
statusBar.debuggingForeground#ffffff
statusBar.foreground#383c42
statusBar.noFolderBackground#e8eaed
statusBar.noFolderForeground#383c42
statusBarItem.activeBackground#00000018
statusBarItem.errorBackground#b3202c
statusBarItem.errorForeground#ffffff
statusBarItem.hoverBackground#00000010
statusBarItem.prominentBackground#dfe1e4
statusBarItem.prominentForeground#2f3338
statusBarItem.prominentHoverBackground#d0d2d6
statusBarItem.remoteBackground#00b4a8
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#85590a
statusBarItem.warningForeground#ffffff
symbolIcon.booleanForeground#a33d1e
symbolIcon.classForeground#0b6e5f
symbolIcon.constantForeground#8250DF
symbolIcon.enumeratorForeground#0b6e5f
symbolIcon.enumeratorMemberForeground#8250DF
symbolIcon.fieldForeground#8250DF
symbolIcon.functionForeground#1b6bab
symbolIcon.interfaceForeground#0b6e5f
symbolIcon.keywordForeground#a33d1e
symbolIcon.methodForeground#1b6bab
symbolIcon.namespaceForeground#0b6e5f
symbolIcon.numberForeground#07819E
symbolIcon.propertyForeground#8250DF
symbolIcon.stringForeground#268837
symbolIcon.typeParameterForeground#0b6e5f
symbolIcon.variableForeground#0b6e5f
tab.activeBackground#ffffff
tab.activeBorder#00000000
tab.activeBorderTop#00b4a8
tab.activeForeground#383c42
tab.activeModifiedBorder#00b4a8
tab.border#d0d2d6
tab.hoverBackground#e8eaed
tab.inactiveBackground#f3f4f6
tab.inactiveForeground#7d8189
tab.inactiveModifiedBorder#00b4a880
tab.lastPinnedBorder#d0d2d6
tab.unfocusedActiveBorderTop#00b4a880
tab.unfocusedHoverBackground#e8eaed80
terminal.ansiBlack#383c42
terminal.ansiBlue#1b6bab
terminal.ansiBrightBlack#5a5e66
terminal.ansiBrightBlue#155796
terminal.ansiBrightCyan#0b7fa5
terminal.ansiBrightGreen#1a7f33
terminal.ansiBrightMagenta#6f2c6c
terminal.ansiBrightRed#cb2431
terminal.ansiBrightWhite#8b8f96
terminal.ansiBrightYellow#7d5300
terminal.ansiCyan#07819E
terminal.ansiGreen#268837
terminal.ansiMagenta#8b3685
terminal.ansiRed#cb2431
terminal.ansiWhite#6b6f77
terminal.ansiYellow#9a6700
terminal.background#f3f4f6
terminal.findMatchBackground#a8ddb080
terminal.findMatchHighlightBackground#cce8d080
terminal.foreground#383c42
terminal.inactiveSelectionBackground#b4d5fe40
terminal.selectionBackground#b4d5fe70
terminal.tab.activeBorder#00b4a8
terminalCommandDecoration.defaultBackground#7d8189
terminalCommandDecoration.errorBackground#cb2431
terminalCommandDecoration.successBackground#34a853
terminalCursor.foreground#00b4a8
testing.iconErrored#d63b3b
testing.iconFailed#d63b3b
testing.iconPassed#34a853
testing.iconQueued#6b6f77
testing.iconSkipped#6b6f77
testing.iconUnset#6b6f77
textBlockQuote.background#f3f4f6
textBlockQuote.border#d0d2d6
textLink.activeForeground#009990
textLink.foreground#00b4a8
titleBar.activeBackground#e8eaed
titleBar.activeForeground#383c42
titleBar.border#d0d2d6
titleBar.inactiveBackground#e8eaed
titleBar.inactiveForeground#7d8189
toolbar.activeBackground#dfe1e4
toolbar.hoverBackground#eef0f2
tree.inactiveIndentGuidesStroke#e0e2e5
tree.indentGuidesStroke#c8cacd
widget.border#d0d2d6
widget.shadow#00000020
window.activeBorder#d0d2d6
window.inactiveBorder#d0d2d6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.block, comment.line, punctuation.definition.comment	#717680	—
comment.block.documentation	#1f7530	—
storage.type.class.jsdoc, entity.name.type.instance.jsdoc	#268837	—
string, string.quoted, string.template, punctuation.definition.string	#268837	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#a33d1e	—
constant.character.escape, constant.other.placeholder	#a33d1e	—
constant.numeric, constant.language.numeric	#07819E	—
constant.language.boolean	#a33d1e	—
constant.language.null, constant.language.undefined	#a33d1e	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.delete, keyword.operator.void, keyword.other	#a33d1e	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical	#383c42	—
storage.type, storage.modifier	#a33d1e	—
entity.name.function, support.function, meta.function-call entity.name.function	#1b6bab	—
entity.name.function.member	#1b6bab	—
entity.name.function.member.static	#1b6bab	—
entity.name.type.class, entity.name.class, support.class	#0b6e5f	—
entity.name.type, support.type	#0b6e5f	—
entity.name.type.parameter	#0b6e5f	—
entity.name.type.interface	#0b6e5f	—
variable, variable.other.readwrite, variable.other.object	#0b6e5f	—
variable.other.constant, constant.other	#8250DF	—
variable.other.property, support.variable.property	#0d8272	—
meta.object-literal.key	#8250DF	—
variable.other.property.static	#0d8272	—
variable.parameter	#0b6e5f	—
variable.language.this, variable.language.super	#a33d1e	—
punctuation.separator, punctuation.terminator, punctuation.accessor	#383c42	—
punctuation.section, meta.brace	#383c42	—
entity.name.tag	#1b6bab	—
punctuation.definition.tag	#6b6f77	—
entity.other.attribute-name	#8250DF	—
entity.name.namespace, entity.name.module, entity.name.type.module	#0b6e5f	—
entity, entity.name	#0b6e5f	—
entity.other.inherited-class	#0b6e5f	—
entity.name.label, entity.name.goto-label	#8250DF	—
entity.name.operator	#a33d1e	—
constant.character.entity, punctuation.definition.entity.html, punctuation.definition.entity.xml	#a33d1e	—
support.constant, variable.other.enummember	#8250DF	—
meta.decorator, punctuation.decorator, storage.type.annotation	#6e6b15	—
entity.other.attribute-name.class.css	#1b6bab	—
entity.other.attribute-name.id.css	#1b6bab	—
entity.name.tag.css, entity.name.tag.less, entity.name.tag.scss	#a33d1e	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#6e6b15	—
variable.css, variable.argument.css	#0b6e5f	—
support.type.property-name.css, support.type.vendored.property-name.css, support.type.property-name.scss, support.type.property-name.less	#0b6e5f	—
support.constant.property-value.css, support.constant.font-name.css, support.constant.color.css, constant.other.color.rgb-value.css, support.constant.media.css	#a33d1e	—
keyword.other.unit.css, keyword.other.unit.scss	#07819E	—
keyword.other.important.css	#a33d1e	bold
support.type.property-name.json	#8250DF	—
markup.heading, entity.name.section.markdown	#1b6bab	bold
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inline.raw, markup.fenced_code.block	#268837	—
markup.underline.link	#1b6bab	—
punctuation.definition.list.begin.markdown	#a33d1e	—
markup.quote.markdown	#717680	—
string.regexp	#0A6A80	—
entity.name.tag.yaml	#a33d1e	—
meta.function.decorator.python, entity.name.function.decorator.python	#6e6b15	—
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust	#0b6e5f	—
support.class.component.jsx, support.class.component.tsx	#0b6e5f	—
meta.embedded	#383c42	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#a33d1e	—
markup.inserted	#268837	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#cb2431	—
invalid.illegal	#cb2431	—
keyword.codetag	#5c5a10	—

VS Code preview

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

Eke Dark — Eke Light Italic

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#e8eaed
activityBar.border#d0d2d6
activityBar.foreground#383c42
activityBar.inactiveForeground#7d8189
activityBarBadge.background#00b4a8
activityBarBadge.foreground#ffffff
badge.background#dfe1e4
badge.foreground#383c42
banner.background#f3f4f6
banner.foreground#383c42
banner.iconForeground#00b4a8
breadcrumb.activeSelectionForeground#2f3338
breadcrumb.background#ffffff
breadcrumb.focusForeground#2f3338
breadcrumb.foreground#57595f
breadcrumbPicker.background#f3f4f6
button.background#00b4a8
button.foreground#ffffff
button.hoverBackground#009990
button.secondaryBackground#dfe1e4
button.secondaryForeground#383c42
button.secondaryHoverBackground#d0d2d6
chat.avatarBackground#dfe1e4
chat.avatarForeground#383c42
chat.requestBorder#d0d2d6
chat.slashCommandBackground#00b4a820
chat.slashCommandForeground#00b4a8
checkbox.background#ffffff
checkbox.border#d0d2d6
checkbox.foreground#383c42
commandCenter.activeBackground#dfe1e4
commandCenter.activeBorder#d0d2d6
commandCenter.activeForeground#2f3338
commandCenter.background#ffffff
commandCenter.border#d0d2d6
commandCenter.foreground#383c42
debugExceptionWidget.background#fde8ea
debugExceptionWidget.border#cb2431
debugIcon.breakpointForeground#cb2431
debugIcon.continueForeground#34a853
debugIcon.disconnectForeground#cb2431
debugIcon.pauseForeground#9a6700
debugIcon.restartForeground#34a853
debugIcon.startForeground#34a853
debugIcon.stepIntoForeground#1b6bab
debugIcon.stepOutForeground#1b6bab
debugIcon.stepOverForeground#1b6bab
debugIcon.stopForeground#cb2431
debugToolBar.background#f3f4f6
debugToolBar.border#d0d2d6
descriptionForeground#57595f
diffEditor.border#d0d2d6
diffEditor.diagonalFill#d0d2d680
diffEditor.insertedLineBackground#34a85315
diffEditor.insertedTextBackground#34a85320
diffEditor.removedLineBackground#d63b3b20
diffEditor.removedTextBackground#d63b3b26
dropdown.background#ffffff
dropdown.border#d0d2d6
dropdown.foreground#383c42
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#a8ddb0
editor.findMatchHighlightBackground#cce8d070
editor.findRangeHighlightBackground#cce8d040
editor.focusedStackFrameHighlightBackground#cce8d0
editor.foreground#383c42
editor.inactiveSelectionBackground#b4d5fe50
editor.lineHighlightBackground#f6f7f8
editor.lineHighlightBorder#00000000
editor.selectionBackground#b4d5fe
editor.selectionHighlightBackground#b4d5fe70
editor.stackFrameHighlightBackground#fdf3e0
editor.wordHighlightBackground#b4d5fe70
editor.wordHighlightStrongBackground#e0c4de70
editorBracketHighlight.foreground1#9a7200
editorBracketHighlight.foreground2#8b1e7d
editorBracketHighlight.foreground3#1b6bab
editorBracketHighlight.foreground4#9a7200
editorBracketHighlight.foreground5#8b1e7d
editorBracketHighlight.foreground6#1b6bab
editorBracketHighlight.unexpectedBracket.foreground#cb2431
editorBracketMatch.background#d8dade
editorBracketMatch.border#00000000
editorCodeLens.foreground#6b6f77
editorCursor.foreground#00b4a8
editorError.foreground#cb2431
editorGhostText.foreground#8b8f9680
editorGroup.border#d0d2d6
editorGroup.dropBackground#d0d2d680
editorGroupHeader.noTabsBackground#f3f4f6
editorGroupHeader.tabsBackground#f3f4f6
editorGroupHeader.tabsBorder#d0d2d6
editorGutter.addedBackground#34a853
editorGutter.background#ffffff
editorGutter.commentRangeForeground#7d8189
editorGutter.deletedBackground#cb2431
editorGutter.modifiedBackground#1b6bab
editorHint.foreground#6b5320
editorHoverWidget.background#f3f4f6
editorHoverWidget.border#d0d2d6
editorHoverWidget.foreground#383c42
editorHoverWidget.statusBarBackground#e8eaed
editorIndentGuide.activeBackground1#c8cacd
editorIndentGuide.background1#e0e2e5
editorInfo.foreground#6b5320
editorInlayHint.background#eef0f2
editorInlayHint.foreground#6b6f77
editorInlayHint.parameterBackground#eef0f2
editorInlayHint.parameterForeground#6b6f77
editorInlayHint.typeBackground#eef0f2
editorInlayHint.typeForeground#6b6f77
editorLightBulb.foreground#9a6700
editorLightBulbAutoFix.foreground#00b4a8
editorLineNumber.activeForeground#383c42
editorLineNumber.dimmedForeground#b4b8bf
editorLineNumber.foreground#868a94
editorLink.activeForeground#00b4a8
editorMultiCursor.primary.foreground#00b4a8
editorMultiCursor.secondary.foreground#009990
editorOverviewRuler.addedForeground#34a85380
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#d8dade
editorOverviewRuler.deletedForeground#cb243180
editorOverviewRuler.errorForeground#cb2431
editorOverviewRuler.findMatchForeground#a8ddb080
editorOverviewRuler.infoForeground#6b5320
editorOverviewRuler.modifiedForeground#1b6bab80
editorOverviewRuler.selectionHighlightForeground#b4d5fe80
editorOverviewRuler.warningForeground#9a6700
editorRuler.foreground#e0e2e5
editorStickyScroll.background#ffffff
editorStickyScrollHover.background#f6f7f8
editorSuggestWidget.background#f3f4f6
editorSuggestWidget.border#d0d2d6
editorSuggestWidget.focusHighlightForeground#00b4a8
editorSuggestWidget.foreground#383c42
editorSuggestWidget.highlightForeground#00b4a8
editorSuggestWidget.selectedBackground#dfe1e4
editorSuggestWidget.selectedForeground#2f3338
editorSuggestWidget.selectedIconForeground#2f3338
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000080
editorWarning.foreground#9a6700
editorWhitespace.foreground#c8cacd
editorWidget.background#f3f4f6
editorWidget.border#d0d2d6
editorWidget.foreground#383c42
editorWidget.resizeBorder#00b4a8
errorForeground#cb2431
extensionBadge.remoteBackground#00b4a8
extensionBadge.remoteForeground#ffffff
extensionButton.prominentBackground#00b4a8
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#009990
focusBorder#00b4a8
foreground#383c42
gitDecoration.addedResourceForeground#34a853
gitDecoration.conflictingResourceForeground#cf4040
gitDecoration.deletedResourceForeground#d63b3b
gitDecoration.ignoredResourceForeground#9a9ea6
gitDecoration.modifiedResourceForeground#c08b00
gitDecoration.stageDeletedResourceForeground#d63b3b
gitDecoration.stageModifiedResourceForeground#c08b00
gitDecoration.submoduleResourceForeground#1b6bab
gitDecoration.untrackedResourceForeground#34a853
icon.foreground#4a4e55
inlineChat.background#f3f4f6
inlineChat.border#d0d2d6
inlineChat.shadow#00000020
inlineChatInput.background#ffffff
inlineChatInput.border#d0d2d6
inlineChatInput.focusBorder#00b4a8
inlineChatInput.placeholderForeground#7d8189
input.background#ffffff
input.border#d0d2d6
input.foreground#383c42
input.placeholderForeground#7d8189
inputOption.activeBackground#00b4a820
inputOption.activeBorder#00b4a8
inputOption.activeForeground#383c42
inputValidation.errorBackground#fde8ea
inputValidation.errorBorder#cb2431
inputValidation.errorForeground#cb2431
inputValidation.infoBackground#e4f0fc
inputValidation.infoBorder#00b4a8
inputValidation.infoForeground#1b6bab
inputValidation.warningBackground#fdf3e0
inputValidation.warningBorder#9a6700
inputValidation.warningForeground#9a6700
interactive.activeCodeBorder#00b4a8
interactive.inactiveCodeBorder#d0d2d6
keybindingLabel.background#dfe1e4
keybindingLabel.border#d0d2d6
keybindingLabel.bottomBorder#d0d2d6
keybindingLabel.foreground#383c42
list.activeSelectionBackground#dfe1e4
list.activeSelectionForeground#2f3338
list.activeSelectionIconForeground#2f3338
list.dropBackground#dfe1e480
list.errorForeground#cb2431
list.filterMatchBackground#00b4a830
list.filterMatchBorder#00b4a860
list.focusBackground#dfe1e4
list.focusForeground#2f3338
list.focusOutline#00b4a8
list.highlightForeground#00b4a8
list.hoverBackground#eef0f2
list.hoverForeground#383c42
list.inactiveSelectionBackground#dfe1e4
list.inactiveSelectionForeground#383c42
list.warningForeground#9a6700
menu.background#f3f4f6
menu.border#d0d2d6
menu.foreground#383c42
menu.selectionBackground#dfe1e4
menu.selectionForeground#2f3338
menu.separatorBackground#d0d2d6
menubar.selectionBackground#dfe1e4
menubar.selectionBorder#00000000
menubar.selectionForeground#2f3338
merge.currentContentBackground#34a85320
merge.currentHeaderBackground#34a85340
merge.incomingContentBackground#1b6bab20
merge.incomingHeaderBackground#1b6bab40
mergeEditor.change.background#34a85320
mergeEditor.change.word.background#34a85340
mergeEditor.conflict.handledFocused.border#34a853
mergeEditor.conflict.unhandledFocused.border#9a6700
minimap.background#ffffff
minimap.findMatchHighlight#a8ddb080
minimap.selectionHighlight#b4d5fe80
minimapSlider.activeBackground#6b6f7760
minimapSlider.background#6b6f7720
minimapSlider.hoverBackground#6b6f7740
notebook.cellBorderColor#d0d2d6
notebook.cellEditorBackground#f6f7f8
notebook.cellHoverBackground#f6f7f8
notebook.focusedCellBorder#00b4a8
notebook.selectedCellBackground#f6f7f8
notificationLink.foreground#00b4a8
notifications.background#f3f4f6
notifications.border#d0d2d6
notifications.foreground#383c42
notificationsErrorIcon.foreground#cb2431
notificationsInfoIcon.foreground#1b6bab
notificationsWarningIcon.foreground#9a6700
panel.background#f3f4f6
panel.border#d0d2d6
panelInput.border#d0d2d6
panelSection.border#d0d2d6
panelSectionHeader.background#f3f4f6
panelSectionHeader.border#d0d2d6
panelSectionHeader.foreground#383c42
panelTitle.activeBorder#00b4a8
panelTitle.activeForeground#383c42
panelTitle.inactiveForeground#7d8189
peekView.border#00b4a8
peekViewEditor.background#f3f4f6
peekViewEditor.matchHighlightBackground#a8ddb080
peekViewEditorGutter.background#f3f4f6
peekViewResult.background#f3f4f6
peekViewResult.fileForeground#383c42
peekViewResult.lineForeground#6b6f77
peekViewResult.matchHighlightBackground#a8ddb0
peekViewTitle.background#e8eaed
peekViewTitleDescription.foreground#57595f
peekViewTitleLabel.foreground#383c42
pickerGroup.border#d0d2d6
pickerGroup.foreground#57595f
problemsErrorIcon.foreground#cb2431
problemsInfoIcon.foreground#1b6bab
problemsWarningIcon.foreground#9a6700
progressBar.background#00b4a8
quickInput.background#f3f4f6
quickInput.foreground#383c42
quickInputList.focusBackground#dfe1e4
quickInputList.focusForeground#2f3338
quickInputTitle.background#f3f4f6
sash.hoverBorder#00b4a8
scrollbar.shadow#00000020
scrollbarSlider.activeBackground#6b6f7770
scrollbarSlider.background#6b6f7730
scrollbarSlider.hoverBackground#6b6f7750
search.resultsInfoForeground#57595f
searchEditor.findMatchBackground#a8ddb080
selection.background#b4d5fe
settings.focusedRowBackground#f6f7f8
settings.headerForeground#2f3338
settings.modifiedItemIndicator#00b4a8
settings.rowHoverBackground#f6f7f8
sideBar.background#f3f4f6
sideBar.border#d0d2d6
sideBar.foreground#4a4e55
sideBarSectionHeader.background#f3f4f6
sideBarSectionHeader.border#d0d2d6
sideBarSectionHeader.foreground#383c42
sideBarTitle.foreground#383c42
statusBar.background#e8eaed
statusBar.border#d0d2d6
statusBar.debuggingBackground#1b6bab
statusBar.debuggingForeground#ffffff
statusBar.foreground#383c42
statusBar.noFolderBackground#e8eaed
statusBar.noFolderForeground#383c42
statusBarItem.activeBackground#00000018
statusBarItem.errorBackground#b3202c
statusBarItem.errorForeground#ffffff
statusBarItem.hoverBackground#00000010
statusBarItem.prominentBackground#dfe1e4
statusBarItem.prominentForeground#2f3338
statusBarItem.prominentHoverBackground#d0d2d6
statusBarItem.remoteBackground#00b4a8
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#85590a
statusBarItem.warningForeground#ffffff
symbolIcon.booleanForeground#a33d1e
symbolIcon.classForeground#0b6e5f
symbolIcon.constantForeground#8250DF
symbolIcon.enumeratorForeground#0b6e5f
symbolIcon.enumeratorMemberForeground#8250DF
symbolIcon.fieldForeground#8250DF
symbolIcon.functionForeground#1b6bab
symbolIcon.interfaceForeground#0b6e5f
symbolIcon.keywordForeground#a33d1e
symbolIcon.methodForeground#1b6bab
symbolIcon.namespaceForeground#0b6e5f
symbolIcon.numberForeground#07819E
symbolIcon.propertyForeground#8250DF
symbolIcon.stringForeground#268837
symbolIcon.typeParameterForeground#0b6e5f
symbolIcon.variableForeground#0b6e5f
tab.activeBackground#ffffff
tab.activeBorder#00000000
tab.activeBorderTop#00b4a8
tab.activeForeground#383c42
tab.activeModifiedBorder#00b4a8
tab.border#d0d2d6
tab.hoverBackground#e8eaed
tab.inactiveBackground#f3f4f6
tab.inactiveForeground#7d8189
tab.inactiveModifiedBorder#00b4a880
tab.lastPinnedBorder#d0d2d6
tab.unfocusedActiveBorderTop#00b4a880
tab.unfocusedHoverBackground#e8eaed80
terminal.ansiBlack#383c42
terminal.ansiBlue#1b6bab
terminal.ansiBrightBlack#5a5e66
terminal.ansiBrightBlue#155796
terminal.ansiBrightCyan#0b7fa5
terminal.ansiBrightGreen#1a7f33
terminal.ansiBrightMagenta#6f2c6c
terminal.ansiBrightRed#cb2431
terminal.ansiBrightWhite#8b8f96
terminal.ansiBrightYellow#7d5300
terminal.ansiCyan#07819E
terminal.ansiGreen#268837
terminal.ansiMagenta#8b3685
terminal.ansiRed#cb2431
terminal.ansiWhite#6b6f77
terminal.ansiYellow#9a6700
terminal.background#f3f4f6
terminal.findMatchBackground#a8ddb080
terminal.findMatchHighlightBackground#cce8d080
terminal.foreground#383c42
terminal.inactiveSelectionBackground#b4d5fe40
terminal.selectionBackground#b4d5fe70
terminal.tab.activeBorder#00b4a8
terminalCommandDecoration.defaultBackground#7d8189
terminalCommandDecoration.errorBackground#cb2431
terminalCommandDecoration.successBackground#34a853
terminalCursor.foreground#00b4a8
testing.iconErrored#d63b3b
testing.iconFailed#d63b3b
testing.iconPassed#34a853
testing.iconQueued#6b6f77
testing.iconSkipped#6b6f77
testing.iconUnset#6b6f77
textBlockQuote.background#f3f4f6
textBlockQuote.border#d0d2d6
textLink.activeForeground#009990
textLink.foreground#00b4a8
titleBar.activeBackground#e8eaed
titleBar.activeForeground#383c42
titleBar.border#d0d2d6
titleBar.inactiveBackground#e8eaed
titleBar.inactiveForeground#7d8189
toolbar.activeBackground#dfe1e4
toolbar.hoverBackground#eef0f2
tree.inactiveIndentGuidesStroke#e0e2e5
tree.indentGuidesStroke#c8cacd
widget.border#d0d2d6
widget.shadow#00000020
window.activeBorder#d0d2d6
window.inactiveBorder#d0d2d6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.block, comment.line, punctuation.definition.comment	#717680	italic
comment.block.documentation	#1f7530	—
storage.type.class.jsdoc, entity.name.type.instance.jsdoc	#268837	—
string, string.quoted, string.template, punctuation.definition.string	#268837	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#a33d1e	—
constant.character.escape, constant.other.placeholder	#a33d1e	—
constant.numeric, constant.language.numeric	#07819E	—
constant.language.boolean	#a33d1e	—
constant.language.null, constant.language.undefined	#a33d1e	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.delete, keyword.operator.void, keyword.other	#a33d1e	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical	#383c42	—
storage.type, storage.modifier	#a33d1e	—
entity.name.function, support.function, meta.function-call entity.name.function	#1b6bab	—
entity.name.function.member	#1b6bab	—
entity.name.function.member.static	#1b6bab	italic
entity.name.type.class, entity.name.class, support.class	#0b6e5f	—
entity.name.type, support.type	#0b6e5f	—
entity.name.type.parameter	#0b6e5f	—
entity.name.type.interface	#0b6e5f	—
variable, variable.other.readwrite, variable.other.object	#0b6e5f	—
variable.other.constant, constant.other	#8250DF	italic
variable.other.property, support.variable.property	#0d8272	—
meta.object-literal.key	#8250DF	—
variable.other.property.static	#0d8272	italic
variable.parameter	#0b6e5f	—
variable.language.this, variable.language.super	#a33d1e	—
punctuation.separator, punctuation.terminator, punctuation.accessor	#383c42	—
punctuation.section, meta.brace	#383c42	—
entity.name.tag	#1b6bab	—
punctuation.definition.tag	#6b6f77	—
entity.other.attribute-name	#8250DF	—
entity.name.namespace, entity.name.module, entity.name.type.module	#0b6e5f	—
entity, entity.name	#0b6e5f	—
entity.other.inherited-class	#0b6e5f	—
entity.name.label, entity.name.goto-label	#8250DF	—
entity.name.operator	#a33d1e	—
constant.character.entity, punctuation.definition.entity.html, punctuation.definition.entity.xml	#a33d1e	—
support.constant, variable.other.enummember	#8250DF	—
meta.decorator, punctuation.decorator, storage.type.annotation	#6e6b15	—
entity.other.attribute-name.class.css	#1b6bab	—
entity.other.attribute-name.id.css	#1b6bab	—
entity.name.tag.css, entity.name.tag.less, entity.name.tag.scss	#a33d1e	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#6e6b15	—
variable.css, variable.argument.css	#0b6e5f	—
support.type.property-name.css, support.type.vendored.property-name.css, support.type.property-name.scss, support.type.property-name.less	#0b6e5f	—
support.constant.property-value.css, support.constant.font-name.css, support.constant.color.css, constant.other.color.rgb-value.css, support.constant.media.css	#a33d1e	—
keyword.other.unit.css, keyword.other.unit.scss	#07819E	—
keyword.other.important.css	#a33d1e	bold
support.type.property-name.json	#8250DF	—
markup.heading, entity.name.section.markdown	#1b6bab	bold
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inline.raw, markup.fenced_code.block	#268837	—
markup.underline.link	#1b6bab	—
punctuation.definition.list.begin.markdown	#a33d1e	—
markup.quote.markdown	#717680	italic
string.regexp	#0A6A80	—
entity.name.tag.yaml	#a33d1e	—
meta.function.decorator.python, entity.name.function.decorator.python	#6e6b15	—
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust	#0b6e5f	—
support.class.component.jsx, support.class.component.tsx	#0b6e5f	—
meta.embedded	#383c42	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#a33d1e	—
markup.inserted	#268837	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#cb2431	—
invalid.illegal	#cb2431	—
keyword.codetag	#5c5a10	italic