Coco

Name: Coco
Author: Kifzuka

Publisher: KifzukaThemes in package: 18

dark theme

Open in VS Code

Color themes

VS Code preview

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

Coco — coco-theme-Custom-palette

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#252a34
activityBar.border#a89984
activityBar.foreground#ff6f3c
activityBar.inactiveForeground#9BA4B4
activityBarBadge.background#155263
activityBarBadge.foreground#f2e5bc
badge.background#ff6f3c
badge.foreground#f2e5bc
button.background#0088ff
button.foreground#f2e5bc
button.hoverBackground#ff6f00
contrastBorder#ffffff00
debugExceptionWidget.background#155263
debugExceptionWidget.border#f2e5bc
debugToolBar.background#155263
descriptionForeground#f2e5bc
diffEditor.insertedTextBackground#3ad90033
diffEditor.insertedTextBorder#3ad90055
diffEditor.removedTextBackground#ee3a4333
diffEditor.removedTextBorder#ee3a4355
dropdown.background#155263
dropdown.border#222831
dropdown.foreground#f2e5bc
editor.background#393e46
editor.findMatchBackground#FF720066
editor.findMatchHighlightBackground#CAD40F66
editor.findRangeHighlightBackground#243E5170
editor.foreground#f2e5bc
editor.hoverHighlightBackground#ff6f3c33
editor.inactiveSelectionBackground#003b8b
editor.lineHighlightBackground#155263
editor.lineHighlightBorder#234E6D
editor.rangeHighlightBackground#15526350
editor.selectionBackground#15526390
editor.selectionHighlightBackground#15526380
editor.wordHighlightBackground#ffffff21
editor.wordHighlightStrongBackground#ffffff21
editorBracketMatch.background#393e4655
editorBracketMatch.border#ff6f3c80
editorCodeLens.foreground#f2e5bc
editorCursor.foreground#ff6f3c
editorError.border#a89984
editorError.foreground#A22929
editorGroup.border#252a34
editorGroup.dropBackground#252a3499
editorGroup.emptyBackground#252a34
editorGroupHeader.noTabsBackground#155263
editorGroupHeader.tabsBackground#252a34
editorGroupHeader.tabsBorder#222831
editorGutter.addedBackground#3C9F4A
editorGutter.background#252a3466
editorGutter.deletedBackground#A22929
editorGutter.modifiedBackground#26506D
editorHoverWidget.background#222831
editorHoverWidget.border#a89984
editorIndentGuide.background#3B5364
editorLineNumber.activeForeground#ff6f3c
editorLineNumber.foreground#f2e5bc
editorLink.activeForeground#f2e5bc
editorMarkerNavigation.background#3B536433
editorMarkerNavigationError.background#A22929
editorMarkerNavigationWarning.background#ff6f3c
editorOverviewRuler.border#a89984
editorOverviewRuler.commonContentForeground#ff6f3c55
editorOverviewRuler.currentContentForeground#ee3a4355
editorOverviewRuler.incomingContentForeground#3ad90055
editorRuler.foreground#15526350
editorSuggestWidget.background#222831
editorSuggestWidget.border#222831
editorSuggestWidget.foreground#f2e5bc
editorSuggestWidget.highlightForeground#ff6f3c
editorSuggestWidget.selectedBackground#155263
editorWarning.border#ffffff00
editorWarning.foreground#d50000
editorWhitespace.foreground#ffffff1a
editorWidget.background#222831
editorWidget.border#a89984
errorForeground#A22929
extensionButton.prominentBackground#0088ff
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#ff6f00
focusBorder#a89984
foreground#f2e5bc
gitDecoration.conflictingResourceForeground#FF7200
gitDecoration.deletedResourceForeground#ff628c
gitDecoration.ignoredResourceForeground#808080
gitDecoration.modifiedResourceForeground#fca311
gitDecoration.untrackedResourceForeground#3ad900
input.background#155263
input.border#a89984
input.foreground#ff6f3c
input.placeholderForeground#f2e5bc
inputOption.activeBorder#8dffff
inputValidation.errorBackground#155263
inputValidation.errorBorder#ff6f3c
inputValidation.infoBackground#155263
inputValidation.infoBorder#a89984
inputValidation.warningBackground#155263
inputValidation.warningBorder#ff6f3c
list.activeSelectionBackground#155263
list.activeSelectionForeground#f2e5bc
list.dropBackground#a89984
list.focusBackground#a89984
list.focusForeground#f2e5bc
list.highlightForeground#ff6f3c
list.hoverBackground#155263
list.hoverForeground#f2e5bc
list.inactiveSelectionBackground#155263
list.inactiveSelectionForeground#ffffff
menu.background#252a34
menu.border#a89984
menu.selectionForeground#f2e5bc
menubar.selectionBackground#155263
merge.border#ffffff00
merge.commonContentBackground#c97d0c
merge.commonHeaderBackground#c97d0c
merge.currentContentBackground#2F7366
merge.currentHeaderBackground#2F7366
merge.incomingContentBackground#185294
merge.incomingHeaderBackground#185294
notificationCenter.border#ff6f3c
notificationCenterHeader.background#252a34
notificationCenterHeader.foreground#f2e5bc
notificationLink.foreground#ff6f3c
notifications.background#252a34
notifications.border#ff6f3c
notifications.foreground#f2e5bc
notificationToast.border#ff6f3c
panel.background#252a34
panel.border#ff6f3c
panelTitle.activeBorder#ff6f3c
panelTitle.activeForeground#ff6f3c
panelTitle.inactiveForeground#f2e5bc
peekView.border#ff6f3c
peekViewEditor.background#155263
peekViewEditor.matchHighlightBackground#15526300
peekViewEditorGutter.background#252a34
peekViewResult.background#222831
peekViewResult.fileForeground#f2e5bc
peekViewResult.lineForeground#f2e5bc
peekViewResult.matchHighlightBackground#a89984
peekViewResult.selectionBackground#155263
peekViewResult.selectionForeground#f2e5bc
peekViewTitle.background#222831
peekViewTitleDescription.foreground#f2e5bc
peekViewTitleLabel.foreground#ff6f3c
pickerGroup.border#a89984
pickerGroup.foreground#f2e5bc
progressBar.background#ff6f3c
sash.hoverBorder#ff6f3c
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#ff6f3ccc
scrollbarSlider.background#15526380
scrollbarSlider.hoverBackground#155263cc
selection.background#027dff
sideBar.background#222831
sideBar.border#a89984
sideBar.foreground#f2e5bc
sideBarSectionHeader.background#155263
sideBarSectionHeader.foreground#f2e5bc
sideBarTitle.foreground#f2e5bc
statusBar.background#222831
statusBar.border#ff6f3c
statusBar.debuggingBackground#222831
statusBar.debuggingBorder#ff6f3c
statusBar.debuggingForeground#ff6f3c
statusBar.foreground#f2e5bc
statusBar.noFolderBackground#222831
statusBar.noFolderBorder#a89984
statusBar.noFolderForeground#f2e5bc
statusBarItem.activeBackground#0088ff
statusBarItem.hoverBackground#155263
statusBarItem.prominentBackground#222831
statusBarItem.prominentHoverBackground#a89984
tab.activeBackground#155263
tab.activeBorder#ff6f3c
tab.activeForeground#f2e5bc
tab.border#222831
tab.inactiveBackground#252a34
tab.inactiveForeground#f2e5bc
tab.unfocusedActiveForeground#f2e5bc
tab.unfocusedInactiveForeground#f2e5bc
terminal.ansiBlack#000000
terminal.ansiBlue#0088ff
terminal.ansiBrightBlack#279AF1
terminal.ansiBrightBlue#0088ff
terminal.ansiBrightCyan#80fcff
terminal.ansiBrightGreen#3ad900
terminal.ansiBrightMagenta#ff4b5c
terminal.ansiBrightRed#ff628c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fca311
terminal.ansiCyan#80fcff
terminal.ansiGreen#3ad900
terminal.ansiMagenta#ff4b5c
terminal.ansiRed#ff628c
terminal.ansiWhite#ffffff
terminal.ansiYellow#fca311
terminal.background#393e46
terminal.foreground#f2e5bc
terminalCursor.background#ff6f3c
terminalCursor.foreground#ff6f3c
textBlockQuote.background#155263
textBlockQuote.border#0088ff
textCodeBlock.background#155263
textLink.activeForeground#155263
textLink.foreground#ff6f3c
textPreformat.foreground#fca311
textSeparator.foreground#a89984
titleBar.activeBackground#222831
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#155263
titleBar.inactiveForeground#ffffff33
walkThrough.embeddedEditorBackground#a89984
welcomePage.buttonBackground#155263
welcomePage.buttonHoverBackground#a89984
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#ff6f3c70	italic
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
constant	#ff628c	—
entity	#fca311	—
invalid	#f44542	—
storage.type.function	#ff6f00	—
keyword, storage.type.class, keyword.control.default.ts	#ff6f00	—
meta	#19d3da	—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx	#fff	—
meta.brace	#e1efff	—
punctuation	#e1efff	—
punctuation.definition.parameters	#ffee80	—
punctuation.definition.template-expression	#ffee80	—
storage	#fca311	—
storage.type.function.arrow	#fca311	—
string, punctuation.definition.string	#06d6a0	—
string.template, punctuation.definition.string.template	#3ad900	—
support	#80ffbb	—
support.function	#ff6f00	—
support.variable.property.dom	#e1efff	—
variable	#e1efff	—
source.css entity, source.stylus entity	#3ad900	—
entity.other.attribute-name.id.css	#ffab00	—
entity.name.tag	#19d3da	—
source.css support, source.stylus support	#06d6a0	—
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant	#ffee80	—
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string	#ffee80	—
source.css variable, source.stylus variable	#19d3da	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#e53935	—
text.html.basic entity.name	#19d3da	—
meta.toc-list.id.html	#06d6a0	—
text.html.basic entity.other	#fca311	italic
meta.tag.metadata.script.html entity.name.tag.html	#fca311	—
punctuation.definition.string.begin, punctuation.definition.string.end	#2fff00	—
source.ini entity	#e1efff	—
source.ini keyword	#fca311	—
source.ini punctuation.definition	#ffee80	—
source.ini punctuation.separator	#ff6f00	—
source.js storage.type.function, source.ts storage.type.function	#ff4b5c	—
variable.language, entity.name.type.class.js	#ff4b5c	—
entity.other.inherited-class.js	#ccc	—
variable.parameter.function.language.special.self.python	#ff4b5c	—
source.json support	#fca311	—
source.json string, source.json punctuation.definition.string	#e1efff	—
punctuation.definition.heading.markdown	#e1efff	—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown	#fca311	bold
meta.paragraph.markdown	#e1efff	—
beginning.punctuation.definition.quote.markdown	#fca311	—
markup.quote.markdown meta.paragraph.markdown	#19d3da	italic
meta.separator.markdown	#fca311	—
markup.bold.markdown	#19d3da	bold
markup.italic.markdown	#19d3da	italic
beginning.punctuation.definition.list.markdown	#fca311	—
string.other.link.title.markdown	#06d6a0	—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown	#06d6a0	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#19d3da	—
fenced_code.block.language, markup.inline.raw.markdown	#19d3da	—
fenced_code.block.language, markup.inline.raw.markdown	#19d3da	—
text.jade entity.name	#19d3da	—
text.jade entity.other.attribute-name.tag	—	italic
text.jade string.interpolated	#ffee80	—
source.ts entity.name.type	#80ffbb	—
source.ts keyword	#fca311	—
source.ts punctuation.definition.parameters	#e1efff	—
meta.arrow.ts punctuation.definition.parameters	#ffee80	—
source.php entity	#19d3da	—
variable.other.php	#fca311	—
storage.type.cs	#19d3da	—
entity.name.variable.property.cs	#19d3da	—
storage.modifier.cs	#80ffbb	—
modifier, this, comment, storage.modifier, entity.other.attribute-name.js, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.html	—	italic
keyword.control.export	#ff6f00	italic
meta.return.type.ts	#ef476f	italic

VS Code preview

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

Coco — coco-theme-DE-palette

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#778ca3
activityBar.border#778ca3
activityBar.foreground#f7b731
activityBar.inactiveForeground#ffffff
activityBarBadge.background#778ca3
activityBarBadge.foreground#ffffff
badge.background#778ca3
badge.foreground#ffffff
button.background#778ca3
button.foreground#fff
button.hoverBackground#0fb9b1
contrastBorder#ffffff00
debugExceptionWidget.background#a5b1c2
debugExceptionWidget.border#ffffff
debugToolBar.background#a5b1c2
descriptionForeground#ffffff
diffEditor.insertedTextBackground#26de8133
diffEditor.insertedTextBorder#26de8155
diffEditor.removedTextBackground#ee3a4333
diffEditor.removedTextBorder#ee3a4355
dropdown.background#a5b1c2
dropdown.border#4b6584
dropdown.foreground#ffffff
editor.background#4b6584
editor.findMatchBackground#FF720066
editor.findMatchHighlightBackground#CAD40F66
editor.findRangeHighlightBackground#778ca370
editor.foreground#ffffff
editor.hoverHighlightBackground#778ca333
editor.inactiveSelectionBackground#38ada9
editor.lineHighlightBackground#778ca3
editor.lineHighlightBorder#4b6584
editor.rangeHighlightBackground#778ca350
editor.selectionBackground#0fb9b190
editor.selectionHighlightBackground#0fb9b180
editor.wordHighlightBackground#ffffff21
editor.wordHighlightStrongBackground#ffffff21
editorBracketMatch.background#4b658455
editorBracketMatch.border#778ca380
editorCodeLens.foreground#ffffff
editorCursor.foreground#f7b731
editorError.border#778ca3
editorError.foreground#A22929
editorGroup.border#778ca3
editorGroup.dropBackground#778ca399
editorGroup.emptyBackground#778ca3
editorGroupHeader.noTabsBackground#a5b1c2
editorGroupHeader.tabsBackground#778ca3
editorGroupHeader.tabsBorder#4b6584
editorGutter.addedBackground#3C9F4A
editorGutter.background#778ca366
editorGutter.deletedBackground#A22929
editorGutter.modifiedBackground#26506D
editorHoverWidget.background#4b6584
editorHoverWidget.border#778ca3
editorIndentGuide.background#3B5364
editorLineNumber.activeForeground#f7b731
editorLineNumber.foreground#ffffff
editorLink.activeForeground#ffffff
editorMarkerNavigation.background#3B536433
editorMarkerNavigationError.background#A22929
editorMarkerNavigationWarning.background#778ca3
editorOverviewRuler.border#778ca3
editorOverviewRuler.commonContentForeground#778ca355
editorOverviewRuler.currentContentForeground#ee3a4355
editorOverviewRuler.incomingContentForeground#26de8155
editorRuler.foreground#778ca350
editorSuggestWidget.background#4b6584
editorSuggestWidget.border#4b6584
editorSuggestWidget.foreground#ffffff
editorSuggestWidget.highlightForeground#e84545
editorSuggestWidget.selectedBackground#0fb9b1
editorWarning.border#ffffff00
editorWarning.foreground#d50000
editorWhitespace.foreground#ffffff1a
editorWidget.background#4b6584
editorWidget.border#778ca3
errorForeground#A22929
extensionButton.prominentBackground#f7b731
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#0fb9b1
focusBorder#778ca3
foreground#ffffff
gitDecoration.conflictingResourceForeground#FF7200
gitDecoration.deletedResourceForeground#fc5c65
gitDecoration.ignoredResourceForeground#808080
gitDecoration.modifiedResourceForeground#fed330
gitDecoration.untrackedResourceForeground#26de81
input.background#778ca3
input.border#a5b1c2
input.foreground#fed330
input.placeholderForeground#ffffff
inputOption.activeBorder#8dffff
inputValidation.errorBackground#a5b1c2
inputValidation.errorBorder#778ca3
inputValidation.infoBackground#a5b1c2
inputValidation.infoBorder#778ca3
inputValidation.warningBackground#a5b1c2
inputValidation.warningBorder#778ca3
list.activeSelectionBackground#0fb9b1
list.activeSelectionForeground#ffffff
list.dropBackground#778ca3
list.focusBackground#778ca3
list.focusForeground#ffffff
list.highlightForeground#fed330
list.hoverBackground#a5b1c2
list.hoverForeground#ffffff
list.inactiveSelectionBackground#778ca3
list.inactiveSelectionForeground#ffffff
menu.background#778ca3
menu.border#4b6584
menu.selectionForeground#ffffff
menubar.selectionBackground#0fb9b1
merge.border#ffffff00
merge.commonContentBackground#c97d0c
merge.commonHeaderBackground#c97d0c
merge.currentContentBackground#2F7366
merge.currentHeaderBackground#2F7366
merge.incomingContentBackground#185294
merge.incomingHeaderBackground#185294
notificationCenter.border#778ca3
notificationCenterHeader.background#778ca3
notificationCenterHeader.foreground#ffffff
notificationLink.foreground#778ca3
notifications.background#778ca3
notifications.border#778ca3
notifications.foreground#ffffff
notificationToast.border#778ca3
panel.background#778ca3
panel.border#f7b731
panelTitle.activeBorder#f7b731
panelTitle.activeForeground#f7b731
panelTitle.inactiveForeground#ffffff
peekView.border#778ca3
peekViewEditor.background#a5b1c2
peekViewEditor.matchHighlightBackground#a5b1c200
peekViewEditorGutter.background#778ca3
peekViewResult.background#4b6584
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#ffffff
peekViewResult.matchHighlightBackground#778ca3
peekViewResult.selectionBackground#0fb9b1
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#4b6584
peekViewTitleDescription.foreground#ffffff
peekViewTitleLabel.foreground#778ca3
pickerGroup.border#778ca3
pickerGroup.foreground#ffffff
progressBar.background#778ca3
sash.hoverBorder#778ca3
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#f7b731cc
scrollbarSlider.background#0fb9b180
scrollbarSlider.hoverBackground#0fb9b1cc
selection.background#0fb9b1
sideBar.background#4b6584
sideBar.border#778ca3
sideBar.foreground#ffffff
sideBarSectionHeader.background#a5b1c2
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffff
statusBar.background#4b6584
statusBar.border#f7b731
statusBar.debuggingBackground#4b6584
statusBar.debuggingBorder#778ca3
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#4b6584
statusBar.noFolderBorder#778ca3
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#45aaf2
statusBarItem.hoverBackground#0fb9b1
statusBarItem.prominentBackground#4b6584
statusBarItem.prominentHoverBackground#778ca3
tab.activeBackground#a5b1c2
tab.activeBorder#f7b731
tab.activeForeground#ffffff
tab.border#778ca3
tab.inactiveBackground#778ca3
tab.inactiveForeground#ffffff
tab.unfocusedActiveForeground#ffffff
tab.unfocusedInactiveForeground#ffffff
terminal.ansiBlack#000000
terminal.ansiBlue#45aaf2
terminal.ansiBrightBlack#2d98da
terminal.ansiBrightBlue#45aaf2
terminal.ansiBrightCyan#80fcff
terminal.ansiBrightGreen#26de81
terminal.ansiBrightMagenta#b71540
terminal.ansiBrightRed#fc5c65
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fed330
terminal.ansiCyan#80fcff
terminal.ansiGreen#26de81
terminal.ansiMagenta#b71540
terminal.ansiRed#fc5c65
terminal.ansiWhite#ffffff
terminal.ansiYellow#fed330
terminal.background#4b6584
terminal.foreground#ffffff
terminalCursor.background#f7b731
terminalCursor.foreground#f7b731
textBlockQuote.background#a5b1c2
textBlockQuote.border#45aaf2
textCodeBlock.background#a5b1c2
textLink.activeForeground#f7b731
textLink.foreground#0fb9b1
textPreformat.foreground#fed330
textSeparator.foreground#778ca3
titleBar.activeBackground#4b6584
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#a5b1c2
titleBar.inactiveForeground#ffffff33
walkThrough.embeddedEditorBackground#778ca3
welcomePage.buttonBackground#778ca3
welcomePage.buttonHoverBackground#0fb9b1
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#f7b73170	italic
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
constant	#fc5c65	—
entity	#fc5c65	—
invalid	#f7b731	—
storage.type.function	#fed330	—
keyword, storage.type.class, keyword.control.default.ts	#fed330	—
meta	#ffffff	—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx	#fff	—
meta.brace	#ffffff	—
punctuation	#d1d8e0	—
punctuation.definition.parameters	#a55eea	—
punctuation.definition.template-expression	#a55eea	—
storage	#fc5c65	—
storage.type.function.arrow	#fc5c65	—
string, punctuation.definition.string	#2bcbba	—
string.template, punctuation.definition.string.template	#26de81	—
support	#fa8231	—
support.function	#fed330	—
support.variable.property.dom	#ffffff	—
variable	#ffffff	—
source.css entity, source.stylus entity	#26de81	—
entity.other.attribute-name.id.css	#b71540	—
entity.name.tag	#45aaf2	—
source.css support, source.stylus support	#2bcbba	—
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant	#a55eea	—
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string	#a55eea	—
source.css variable, source.stylus variable	#45aaf2	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#e53935	—
text.html.basic entity.name	#45aaf2	—
meta.toc-list.id.html	#2bcbba	—
text.html.basic entity.other	#fc5c65	italic
meta.tag.metadata.script.html entity.name.tag.html	#fc5c65	—
punctuation.definition.string.begin, punctuation.definition.string.end	#8854d0	—
source.ini entity	#ffffff	—
source.ini keyword	#fc5c65	—
source.ini punctuation.definition	#a55eea	—
source.ini punctuation.separator	#fed330	—
source.js storage.type.function, source.ts storage.type.function	#ff4b5c	—
variable.language, entity.name.type.class.js	#ff4b5c	—
entity.other.inherited-class.js	#ccc	—
variable.parameter.function.language.special.self.python	#ff4b5c	—
source.json support	#fc5c65	—
source.json string, source.json punctuation.definition.string	#ffffff	—
punctuation.definition.heading.markdown	#ffffff	—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown	#fc5c65	bold
meta.paragraph.markdown	#ffffff	—
beginning.punctuation.definition.quote.markdown	#fc5c65	—
markup.quote.markdown meta.paragraph.markdown	#45aaf2	italic
meta.separator.markdown	#fc5c65	—
markup.bold.markdown	#45aaf2	bold
markup.italic.markdown	#45aaf2	italic
beginning.punctuation.definition.list.markdown	#fc5c65	—
string.other.link.title.markdown	#2bcbba	—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown	#2bcbba	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#45aaf2	—
fenced_code.block.language, markup.inline.raw.markdown	#45aaf2	—
fenced_code.block.language, markup.inline.raw.markdown	#45aaf2	—
text.jade entity.name	#45aaf2	—
text.jade entity.other.attribute-name.tag	—	italic
text.jade string.interpolated	#a55eea	—
source.ts entity.name.type	#fa8231	—
source.ts keyword	#fc5c65	—
source.ts punctuation.definition.parameters	#ffffff	—
meta.arrow.ts punctuation.definition.parameters	#a55eea	—
source.php entity	#45aaf2	—
variable.other.php	#fc5c65	—
storage.type.cs	#45aaf2	—
entity.name.variable.property.cs	#45aaf2	—
storage.modifier.cs	#fa8231	—
modifier, this, comment, storage.modifier, entity.other.attribute-name.js, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.html	—	italic
keyword.control.export	#fed330	italic
meta.return.type.ts	#4b7bec	italic

VS Code preview

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

Coco — coco-theme-ES-palette

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#227093
activityBar.border#227093
activityBar.foreground#f7b731
activityBar.inactiveForeground#ffffff
activityBarBadge.background#227093
activityBarBadge.foreground#ffffff
badge.background#227093
badge.foreground#ffffff
button.background#227093
button.foreground#fff
button.hoverBackground#34ace0
contrastBorder#ffffff00
debugExceptionWidget.background#a5b1c2
debugExceptionWidget.border#d1ccc0
debugToolBar.background#a5b1c2
descriptionForeground#ffffff
diffEditor.insertedTextBackground#218c7433
diffEditor.insertedTextBorder#218c7455
diffEditor.removedTextBackground#ee3a4333
diffEditor.removedTextBorder#ee3a4355
dropdown.background#a5b1c2
dropdown.border#103546
dropdown.foreground#ffffff
editor.background#103546
editor.findMatchBackground#FF720066
editor.findMatchHighlightBackground#CAD40F66
editor.findRangeHighlightBackground#22709370
editor.foreground#ffffff
editor.hoverHighlightBackground#22709333
editor.inactiveSelectionBackground#38ada9
editor.lineHighlightBackground#227093
editor.lineHighlightBorder#103546
editor.rangeHighlightBackground#22709350
editor.selectionBackground#34ace090
editor.selectionHighlightBackground#34ace080
editor.wordHighlightBackground#ffffff21
editor.wordHighlightStrongBackground#ffffff21
editorBracketMatch.background#10354655
editorBracketMatch.border#22709380
editorCodeLens.foreground#ffffff
editorCursor.foreground#f7b731
editorError.border#227093
editorError.foreground#A22929
editorGroup.border#227093
editorGroup.dropBackground#22709399
editorGroup.emptyBackground#227093
editorGroupHeader.noTabsBackground#a5b1c2
editorGroupHeader.tabsBackground#227093
editorGroupHeader.tabsBorder#103546
editorGutter.addedBackground#3C9F4A
editorGutter.background#22709366
editorGutter.deletedBackground#A22929
editorGutter.modifiedBackground#26506D
editorHoverWidget.background#103546
editorHoverWidget.border#227093
editorIndentGuide.background#3B5364
editorLineNumber.activeForeground#f7b731
editorLineNumber.foreground#ffffff
editorLink.activeForeground#d1ccc0
editorMarkerNavigation.background#3B536433
editorMarkerNavigationError.background#A22929
editorMarkerNavigationWarning.background#227093
editorOverviewRuler.border#227093
editorOverviewRuler.commonContentForeground#22709355
editorOverviewRuler.currentContentForeground#ee3a4355
editorOverviewRuler.incomingContentForeground#218c7455
editorRuler.foreground#22709350
editorSuggestWidget.background#103546
editorSuggestWidget.border#103546
editorSuggestWidget.foreground#ffffff
editorSuggestWidget.highlightForeground#e84545
editorSuggestWidget.selectedBackground#34ace0
editorWarning.border#ffffff00
editorWarning.foreground#d50000
editorWhitespace.foreground#ffffff1a
editorWidget.background#103546
editorWidget.border#227093
errorForeground#A22929
extensionButton.prominentBackground#f7b731
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#34ace0
focusBorder#227093
foreground#ffffff
gitDecoration.conflictingResourceForeground#ff793f
gitDecoration.deletedResourceForeground#ff5252
gitDecoration.ignoredResourceForeground#808080
gitDecoration.modifiedResourceForeground#ffb142
gitDecoration.untrackedResourceForeground#33d9b2
input.background#227093
input.border#a5b1c2
input.foreground#f7b731
input.placeholderForeground#d1ccc0
inputOption.activeBorder#8dffff
inputValidation.errorBackground#a5b1c2
inputValidation.errorBorder#227093
inputValidation.infoBackground#a5b1c2
inputValidation.infoBorder#227093
inputValidation.warningBackground#a5b1c2
inputValidation.warningBorder#227093
list.activeSelectionBackground#34ace0
list.activeSelectionForeground#d1ccc0
list.dropBackground#227093
list.focusBackground#227093
list.focusForeground#ffffff
list.highlightForeground#f7b731
list.hoverBackground#a5b1c2
list.hoverForeground#ffffff
list.inactiveSelectionBackground#227093
list.inactiveSelectionForeground#ffffff
menu.background#227093
menu.border#103546
menu.selectionForeground#ffffff
menubar.selectionBackground#34ace0
merge.border#ffffff00
merge.commonContentBackground#c97d0c
merge.commonHeaderBackground#c97d0c
merge.currentContentBackground#2F7366
merge.currentHeaderBackground#2F7366
merge.incomingContentBackground#185294
merge.incomingHeaderBackground#185294
notificationCenter.border#227093
notificationCenterHeader.background#227093
notificationCenterHeader.foreground#ffffff
notificationLink.foreground#227093
notifications.background#227093
notifications.border#227093
notifications.foreground#ffffff
notificationToast.border#227093
panel.background#227093
panel.border#f7b731
panelTitle.activeBorder#f7b731
panelTitle.activeForeground#f7b731
panelTitle.inactiveForeground#ffffff
peekView.border#227093
peekViewEditor.background#a5b1c2
peekViewEditor.matchHighlightBackground#a5b1c200
peekViewEditorGutter.background#227093
peekViewResult.background#103546
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#ffffff
peekViewResult.matchHighlightBackground#227093
peekViewResult.selectionBackground#34ace0
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#103546
peekViewTitleDescription.foreground#ffffff
peekViewTitleLabel.foreground#227093
pickerGroup.border#227093
pickerGroup.foreground#ffffff
progressBar.background#227093
sash.hoverBorder#227093
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#f7b731cc
scrollbarSlider.background#34ace080
scrollbarSlider.hoverBackground#34ace0cc
selection.background#34ace0
sideBar.background#103546
sideBar.border#227093
sideBar.foreground#ffffff
sideBarSectionHeader.background#a5b1c2
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffff
statusBar.background#103546
statusBar.border#f7b731
statusBar.debuggingBackground#103546
statusBar.debuggingBorder#227093
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#103546
statusBar.noFolderBorder#227093
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#33d9b2
statusBarItem.hoverBackground#34ace0
statusBarItem.prominentBackground#103546
statusBarItem.prominentHoverBackground#227093
tab.activeBackground#a5b1c2
tab.activeBorder#f7b731
tab.activeForeground#ffffff
tab.border#227093
tab.inactiveBackground#227093
tab.inactiveForeground#ffffff
tab.unfocusedActiveForeground#ffffff
tab.unfocusedInactiveForeground#ffffff
terminal.ansiBlack#000000
terminal.ansiBlue#474787
terminal.ansiBrightBlack#40407a
terminal.ansiBrightBlue#474787
terminal.ansiBrightCyan#80fcff
terminal.ansiBrightGreen#33d9b2
terminal.ansiBrightMagenta#cd6133
terminal.ansiBrightRed#ff5252
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffb142
terminal.ansiCyan#80fcff
terminal.ansiGreen#33d9b2
terminal.ansiMagenta#cd6133
terminal.ansiRed#ff5252
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffb142
terminal.background#103546
terminal.foreground#ffffff
terminalCursor.background#f7b731
terminalCursor.foreground#f7b731
textBlockQuote.background#a5b1c2
textBlockQuote.border#33d9b2
textCodeBlock.background#a5b1c2
textLink.activeForeground#f7b731
textLink.foreground#34ace0
textPreformat.foreground#ffb142
textSeparator.foreground#227093
titleBar.activeBackground#103546
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#a5b1c2
titleBar.inactiveForeground#ffffff33
walkThrough.embeddedEditorBackground#227093
welcomePage.buttonBackground#227093
welcomePage.buttonHoverBackground#34ace0
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#f7b73170	italic
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
constant	#ff5252	—
entity	#ff5252	—
invalid	#f7b731	—
storage.type.function	#ffb142	—
keyword, storage.type.class, keyword.control.default.ts	#ffb142	—
meta	#ffffff	—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx	#fff	—
meta.brace	#ffffff	—
punctuation	#d1d8e0	—
punctuation.definition.parameters	#cc8e35	—
punctuation.definition.template-expression	#cc8e35	—
storage	#ff5252	—
storage.type.function.arrow	#ff5252	—
string, punctuation.definition.string	#ffda79	—
string.template, punctuation.definition.string.template	#218c74	—
support	#ff793f	—
support.function	#ffb142	—
support.variable.property.dom	#ffffff	—
variable	#ffffff	—
source.css entity, source.stylus entity	#218c74	—
entity.other.attribute-name.id.css	#cd6133	—
entity.name.tag	#33d9b2	—
source.css support, source.stylus support	#ffda79	—
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant	#cc8e35	—
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string	#cc8e35	—
source.css variable, source.stylus variable	#33d9b2	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#e53935	—
text.html.basic entity.name	#33d9b2	—
meta.toc-list.id.html	#ffda79	—
text.html.basic entity.other	#ff5252	italic
meta.tag.metadata.script.html entity.name.tag.html	#ff5252	—
punctuation.definition.string.begin, punctuation.definition.string.end	#f7f1e3	—
source.ini entity	#ffffff	—
source.ini keyword	#ff5252	—
source.ini punctuation.definition	#cc8e35	—
source.ini punctuation.separator	#ffb142	—
source.js storage.type.function, source.ts storage.type.function	#ff4b5c	—
variable.language, entity.name.type.class.js	#ff4b5c	—
entity.other.inherited-class.js	#ccc	—
variable.parameter.function.language.special.self.python	#ff4b5c	—
source.json support	#ff5252	—
source.json string, source.json punctuation.definition.string	#ffffff	—
punctuation.definition.heading.markdown	#ffffff	—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown	#ff5252	bold
meta.paragraph.markdown	#ffffff	—
beginning.punctuation.definition.quote.markdown	#ff5252	—
markup.quote.markdown meta.paragraph.markdown	#33d9b2	italic
meta.separator.markdown	#ff5252	—
markup.bold.markdown	#33d9b2	bold
markup.italic.markdown	#33d9b2	italic
beginning.punctuation.definition.list.markdown	#ff5252	—
string.other.link.title.markdown	#ffda79	—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown	#ffda79	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#33d9b2	—
fenced_code.block.language, markup.inline.raw.markdown	#33d9b2	—
fenced_code.block.language, markup.inline.raw.markdown	#33d9b2	—
text.jade entity.name	#33d9b2	—
text.jade entity.other.attribute-name.tag	—	italic
text.jade string.interpolated	#cc8e35	—
source.ts entity.name.type	#ff793f	—
source.ts keyword	#ff5252	—
source.ts punctuation.definition.parameters	#ffffff	—
meta.arrow.ts punctuation.definition.parameters	#cc8e35	—
source.php entity	#33d9b2	—
variable.other.php	#ff5252	—
storage.type.cs	#33d9b2	—
entity.name.variable.property.cs	#33d9b2	—
storage.modifier.cs	#ff793f	—
modifier, this, comment, storage.modifier, entity.other.attribute-name.js, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.html	—	italic
keyword.control.export	#ffb142	italic
meta.return.type.ts	#706fd3	italic

VS Code preview

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

Coco — coco-theme-FR-palette

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#3c6382
activityBar.border#3c6382
activityBar.foreground#eb2f06
activityBar.inactiveForeground#ffffff
activityBarBadge.background#3c6382
activityBarBadge.foreground#ffffff
badge.background#3c6382
badge.foreground#ffffff
button.background#3c6382
button.foreground#fff
button.hoverBackground#0c2461
contrastBorder#ffffff00
debugExceptionWidget.background#0e1e2b
debugExceptionWidget.border#ffffff
debugToolBar.background#0e1e2b
descriptionForeground#ffffff
diffEditor.insertedTextBackground#78e08f33
diffEditor.insertedTextBorder#78e08f55
diffEditor.removedTextBackground#ee3a4333
diffEditor.removedTextBorder#ee3a4355
dropdown.background#0e1e2b
dropdown.border#0a3d62
dropdown.foreground#ffffff
editor.background#0a3d62
editor.findMatchBackground#FF720066
editor.findMatchHighlightBackground#CAD40F66
editor.findRangeHighlightBackground#3C638270
editor.foreground#ffffff
editor.hoverHighlightBackground#3c638233
editor.inactiveSelectionBackground#38ada9
editor.lineHighlightBackground#3C6382
editor.lineHighlightBorder#0a3d62
editor.rangeHighlightBackground#3C638250
editor.selectionBackground#0c246190
editor.selectionHighlightBackground#0c246180
editor.wordHighlightBackground#ffffff21
editor.wordHighlightStrongBackground#ffffff21
editorBracketMatch.background#0a3d6255
editorBracketMatch.border#3c638280
editorCodeLens.foreground#ffffff
editorCursor.foreground#eb2f06
editorError.border#3c6382
editorError.foreground#A22929
editorGroup.border#3c6382
editorGroup.dropBackground#3c638299
editorGroup.emptyBackground#3c6382
editorGroupHeader.noTabsBackground#0e1e2b
editorGroupHeader.tabsBackground#3c6382
editorGroupHeader.tabsBorder#0a3d62
editorGutter.addedBackground#3C9F4A
editorGutter.background#3c638266
editorGutter.deletedBackground#A22929
editorGutter.modifiedBackground#26506D
editorHoverWidget.background#0a3d62
editorHoverWidget.border#3c6382
editorIndentGuide.background#3B5364
editorLineNumber.activeForeground#eb2f06
editorLineNumber.foreground#ffffff
editorLink.activeForeground#ffffff
editorMarkerNavigation.background#3B536433
editorMarkerNavigationError.background#A22929
editorMarkerNavigationWarning.background#3c6382
editorOverviewRuler.border#3c6382
editorOverviewRuler.commonContentForeground#3c638255
editorOverviewRuler.currentContentForeground#ee3a4355
editorOverviewRuler.incomingContentForeground#78e08f55
editorRuler.foreground#3C638250
editorSuggestWidget.background#0a3d62
editorSuggestWidget.border#0a3d62
editorSuggestWidget.foreground#ffffff
editorSuggestWidget.highlightForeground#e84545
editorSuggestWidget.selectedBackground#0c2461
editorWarning.border#ffffff00
editorWarning.foreground#d50000
editorWhitespace.foreground#ffffff1a
editorWidget.background#0a3d62
editorWidget.border#3c6382
errorForeground#A22929
extensionButton.prominentBackground#3c6382
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#eb2f06
focusBorder#3c6382
foreground#ffffff
gitDecoration.conflictingResourceForeground#FF7200
gitDecoration.deletedResourceForeground#eb2f06
gitDecoration.ignoredResourceForeground#808080
gitDecoration.modifiedResourceForeground#fad390
gitDecoration.untrackedResourceForeground#78e08f
input.background#0e1e2b
input.border#3c6382
input.foreground#eb2f06
input.placeholderForeground#ffffff
inputOption.activeBorder#8dffff
inputValidation.errorBackground#0e1e2b
inputValidation.errorBorder#3c6382
inputValidation.infoBackground#0e1e2b
inputValidation.infoBorder#3c6382
inputValidation.warningBackground#0e1e2b
inputValidation.warningBorder#3c6382
list.activeSelectionBackground#0c2461
list.activeSelectionForeground#ffffff
list.dropBackground#3c6382
list.focusBackground#3c6382
list.focusForeground#ffffff
list.highlightForeground#eb2f06
list.hoverBackground#0e1e2b
list.hoverForeground#ffffff
list.inactiveSelectionBackground#3c6382
list.inactiveSelectionForeground#ffffff
menu.background#3c6382
menu.border#0a3d62
menu.selectionForeground#ffffff
menubar.selectionBackground#0c2461
merge.border#ffffff00
merge.commonContentBackground#c97d0c
merge.commonHeaderBackground#c97d0c
merge.currentContentBackground#2F7366
merge.currentHeaderBackground#2F7366
merge.incomingContentBackground#185294
merge.incomingHeaderBackground#185294
notificationCenter.border#3c6382
notificationCenterHeader.background#3c6382
notificationCenterHeader.foreground#ffffff
notificationLink.foreground#3c6382
notifications.background#3c6382
notifications.border#3c6382
notifications.foreground#ffffff
notificationToast.border#3c6382
panel.background#3c6382
panel.border#eb2f06
panelTitle.activeBorder#eb2f06
panelTitle.activeForeground#eb2f06
panelTitle.inactiveForeground#ffffff
peekView.border#3c6382
peekViewEditor.background#0e1e2b
peekViewEditor.matchHighlightBackground#0e1e2b00
peekViewEditorGutter.background#3c6382
peekViewResult.background#0a3d62
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#ffffff
peekViewResult.matchHighlightBackground#3c6382
peekViewResult.selectionBackground#0c2461
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#0a3d62
peekViewTitleDescription.foreground#ffffff
peekViewTitleLabel.foreground#3c6382
pickerGroup.border#3c6382
pickerGroup.foreground#ffffff
progressBar.background#3c6382
sash.hoverBorder#3c6382
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#eb2f06cc
scrollbarSlider.background#0c246180
scrollbarSlider.hoverBackground#0c2461cc
selection.background#3c6382
sideBar.background#0a3d62
sideBar.border#3c6382
sideBar.foreground#ffffff
sideBarSectionHeader.background#0e1e2b
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffff
statusBar.background#0a3d62
statusBar.border#eb2f06
statusBar.debuggingBackground#0a3d62
statusBar.debuggingBorder#3c6382
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#0a3d62
statusBar.noFolderBorder#3c6382
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#82ccdd
statusBarItem.hoverBackground#0c2461
statusBarItem.prominentBackground#0a3d62
statusBarItem.prominentHoverBackground#3c6382
tab.activeBackground#0c2461
tab.activeBorder#eb2f06
tab.activeForeground#ffffff
tab.border#1e3799
tab.inactiveBackground#3c6382
tab.inactiveForeground#ffffff
tab.unfocusedActiveForeground#ffffff
tab.unfocusedInactiveForeground#ffffff
terminal.ansiBlack#000000
terminal.ansiBlue#82ccdd
terminal.ansiBrightBlack#e58e26
terminal.ansiBrightBlue#82ccdd
terminal.ansiBrightCyan#80fcff
terminal.ansiBrightGreen#78e08f
terminal.ansiBrightMagenta#b71540
terminal.ansiBrightRed#e55039
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fad390
terminal.ansiCyan#80fcff
terminal.ansiGreen#78e08f
terminal.ansiMagenta#b71540
terminal.ansiRed#e55039
terminal.ansiWhite#ffffff
terminal.ansiYellow#fad390
terminal.background#0a3d62
terminal.foreground#ffffff
terminalCursor.background#eb2f06
terminalCursor.foreground#eb2f06
textBlockQuote.background#0e1e2b
textBlockQuote.border#82ccdd
textCodeBlock.background#0e1e2b
textLink.activeForeground#eb2f06
textLink.foreground#6a89cc
textPreformat.foreground#eb2f06
textSeparator.foreground#3c6382
titleBar.activeBackground#0a3d62
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#0e1e2b
titleBar.inactiveForeground#ffffff33
walkThrough.embeddedEditorBackground#3c6382
welcomePage.buttonBackground#3c6382
welcomePage.buttonHoverBackground#0c2461
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#eb2f0670	italic
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
constant	#fad390	—
entity	#e55039	—
invalid	#eb2f06	—
storage.type.function	#079992	—
keyword, storage.type.class, keyword.control.default.ts	#079992	—
meta	#e1efff	—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx	#fff	—
meta.brace	#e1efff	—
punctuation	#f8c291	—
punctuation.definition.parameters	#f6b93b	—
punctuation.definition.template-expression	#f6b93b	—
storage	#e55039	—
storage.type.function.arrow	#e55039	—
string, punctuation.definition.string	#b8e994	—
string.template, punctuation.definition.string.template	#78e08f	—
support	#80ffbb	—
support.function	#079992	—
support.variable.property.dom	#e1efff	—
variable	#e1efff	—
source.css entity, source.stylus entity	#78e08f	—
entity.other.attribute-name.id.css	#b71540	—
entity.name.tag	#82ccdd	—
source.css support, source.stylus support	#b8e994	—
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant	#f6b93b	—
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string	#f6b93b	—
source.css variable, source.stylus variable	#82ccdd	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#e53935	—
text.html.basic entity.name	#82ccdd	—
meta.toc-list.id.html	#b8e994	—
text.html.basic entity.other	#e55039	italic
meta.tag.metadata.script.html entity.name.tag.html	#e55039	—
punctuation.definition.string.begin, punctuation.definition.string.end	#6a89cc	—
source.ini entity	#e1efff	—
source.ini keyword	#e55039	—
source.ini punctuation.definition	#f6b93b	—
source.ini punctuation.separator	#079992	—
source.js storage.type.function, source.ts storage.type.function	#ff4b5c	—
variable.language, entity.name.type.class.js	#ff4b5c	—
entity.other.inherited-class.js	#ccc	—
variable.parameter.function.language.special.self.python	#ff4b5c	—
source.json support	#e55039	—
source.json string, source.json punctuation.definition.string	#e1efff	—
punctuation.definition.heading.markdown	#e1efff	—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown	#e55039	bold
meta.paragraph.markdown	#e1efff	—
beginning.punctuation.definition.quote.markdown	#e55039	—
markup.quote.markdown meta.paragraph.markdown	#82ccdd	italic
meta.separator.markdown	#e55039	—
markup.bold.markdown	#82ccdd	bold
markup.italic.markdown	#82ccdd	italic
beginning.punctuation.definition.list.markdown	#e55039	—
string.other.link.title.markdown	#b8e994	—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown	#b8e994	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#82ccdd	—
fenced_code.block.language, markup.inline.raw.markdown	#82ccdd	—
fenced_code.block.language, markup.inline.raw.markdown	#82ccdd	—
text.jade entity.name	#82ccdd	—
text.jade entity.other.attribute-name.tag	—	italic
text.jade string.interpolated	#f6b93b	—
source.ts entity.name.type	#80ffbb	—
source.ts keyword	#e55039	—
source.ts punctuation.definition.parameters	#e1efff	—
meta.arrow.ts punctuation.definition.parameters	#f6b93b	—
source.php entity	#82ccdd	—
variable.other.php	#e55039	—
storage.type.cs	#82ccdd	—
entity.name.variable.property.cs	#82ccdd	—
storage.modifier.cs	#80ffbb	—
modifier, this, comment, storage.modifier, entity.other.attribute-name.js, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.html	—	italic
keyword.control.export	#079992	italic
meta.return.type.ts	#ef476f	italic