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-GB-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#273c75
activityBar.border#273c75
activityBar.foreground#e84118
activityBar.inactiveForeground#dcdde1
activityBarBadge.background#273c75
activityBarBadge.foreground#f5f6fa
badge.background#273c75
badge.foreground#f5f6fa
button.background#487eb0
button.foreground#f5f6fa
button.hoverBackground#7f8fa6
contrastBorder#ffffff00
debugExceptionWidget.background#0e1e2b
debugExceptionWidget.border#f5f6fa
debugToolBar.background#0e1e2b
descriptionForeground#f5f6fa
diffEditor.insertedTextBackground#4cd13733
diffEditor.insertedTextBorder#4cd13755
diffEditor.removedTextBackground#ee3a4333
diffEditor.removedTextBorder#ee3a4355
dropdown.background#0e1e2b
dropdown.border#273c75
dropdown.foreground#f5f6fa
editor.background#192a56
editor.findMatchBackground#FF720066
editor.findMatchHighlightBackground#CAD40F66
editor.findRangeHighlightBackground#273C7570
editor.foreground#f5f6fa
editor.hoverHighlightBackground#273c7533
editor.inactiveSelectionBackground#54a0ff
editor.lineHighlightBackground#273C75
editor.lineHighlightBorder#192a56
editor.rangeHighlightBackground#273C7550
editor.selectionBackground#7f8fa690
editor.selectionHighlightBackground#7f8fa680
editor.wordHighlightBackground#ffffff21
editor.wordHighlightStrongBackground#ffffff21
editorBracketMatch.background#192a5655
editorBracketMatch.border#273c7580
editorCodeLens.foreground#f5f6fa
editorCursor.foreground#00a8ff
editorError.border#273c75
editorError.foreground#A22929
editorGroup.border#273c75
editorGroup.dropBackground#273c7599
editorGroup.emptyBackground#273c75
editorGroupHeader.noTabsBackground#0e1e2b
editorGroupHeader.tabsBackground#273c75
editorGroupHeader.tabsBorder#273c75
editorGutter.addedBackground#3C9F4A
editorGutter.background#273c7566
editorGutter.deletedBackground#A22929
editorGutter.modifiedBackground#26506D
editorHoverWidget.background#273c75
editorHoverWidget.border#273c75
editorIndentGuide.background#3B5364
editorLineNumber.activeForeground#e84118
editorLineNumber.foreground#f5f6fa
editorLink.activeForeground#f5f6fa
editorMarkerNavigation.background#3B536433
editorMarkerNavigationError.background#A22929
editorMarkerNavigationWarning.background#273c75
editorOverviewRuler.border#273c75
editorOverviewRuler.commonContentForeground#273c7555
editorOverviewRuler.currentContentForeground#ee3a4355
editorOverviewRuler.incomingContentForeground#4cd13755
editorRuler.foreground#273C7550
editorSuggestWidget.background#273c75
editorSuggestWidget.border#273c75
editorSuggestWidget.foreground#f5f6fa
editorSuggestWidget.highlightForeground#e84545
editorSuggestWidget.selectedBackground#487eb0
editorWarning.border#ffffff00
editorWarning.foreground#d50000
editorWhitespace.foreground#ffffff1a
editorWidget.background#273c75
editorWidget.border#273c75
errorForeground#A22929
extensionButton.prominentBackground#487eb0
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#7f8fa6
focusBorder#273c75
foreground#f5f6fa
gitDecoration.conflictingResourceForeground#FF7200
gitDecoration.deletedResourceForeground#e84118
gitDecoration.ignoredResourceForeground#808080
gitDecoration.modifiedResourceForeground#fbc531
gitDecoration.untrackedResourceForeground#4cd137
input.background#0e1e2b
input.border#273c75
input.foreground#e84118
input.placeholderForeground#f5f6fa
inputOption.activeBorder#8dffff
inputValidation.errorBackground#0e1e2b
inputValidation.errorBorder#273c75
inputValidation.infoBackground#0e1e2b
inputValidation.infoBorder#273c75
inputValidation.warningBackground#0e1e2b
inputValidation.warningBorder#273c75
list.activeSelectionBackground#7f8fa6
list.activeSelectionForeground#f5f6fa
list.dropBackground#273c75
list.focusBackground#273c75
list.focusForeground#f5f6fa
list.highlightForeground#e84545
list.hoverBackground#0e1e2b
list.hoverForeground#f5f6fa
list.inactiveSelectionBackground#273c75
list.inactiveSelectionForeground#ffffff
menu.background#273c75
menu.border#192a56
menu.selectionForeground#f5f6fa
menubar.selectionBackground#7f8fa6
merge.border#ffffff00
merge.commonContentBackground#c97d0c
merge.commonHeaderBackground#c97d0c
merge.currentContentBackground#2F7366
merge.currentHeaderBackground#2F7366
merge.incomingContentBackground#185294
merge.incomingHeaderBackground#185294
notificationCenter.border#273c75
notificationCenterHeader.background#273c75
notificationCenterHeader.foreground#f5f6fa
notificationLink.foreground#273c75
notifications.background#273c75
notifications.border#273c75
notifications.foreground#f5f6fa
notificationToast.border#273c75
panel.background#273c75
panel.border#e84118
panelTitle.activeBorder#e84118
panelTitle.activeForeground#e84118
panelTitle.inactiveForeground#f5f6fa
peekView.border#273c75
peekViewEditor.background#0e1e2b
peekViewEditor.matchHighlightBackground#0e1e2b00
peekViewEditorGutter.background#273c75
peekViewResult.background#273c75
peekViewResult.fileForeground#f5f6fa
peekViewResult.lineForeground#f5f6fa
peekViewResult.matchHighlightBackground#273c75
peekViewResult.selectionBackground#7f8fa6
peekViewResult.selectionForeground#f5f6fa
peekViewTitle.background#273c75
peekViewTitleDescription.foreground#f5f6fa
peekViewTitleLabel.foreground#273c75
pickerGroup.border#273c75
pickerGroup.foreground#f5f6fa
progressBar.background#273c75
sash.hoverBorder#273c75
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#e84118cc
scrollbarSlider.background#7f8fa680
scrollbarSlider.hoverBackground#7f8fa6cc
selection.background#273c75
sideBar.background#192a56
sideBar.border#273c75
sideBar.foreground#f5f6fa
sideBarSectionHeader.background#0e1e2b
sideBarSectionHeader.foreground#f5f6fa
sideBarTitle.foreground#f5f6fa
statusBar.background#273c75
statusBar.border#e84118
statusBar.debuggingBackground#273c75
statusBar.debuggingBorder#273c75
statusBar.debuggingForeground#f5f6fa
statusBar.foreground#f5f6fa
statusBar.noFolderBackground#273c75
statusBar.noFolderBorder#273c75
statusBar.noFolderForeground#f5f6fa
statusBarItem.activeBackground#9c88ff
statusBarItem.hoverBackground#7f8fa6
statusBarItem.prominentBackground#273c75
statusBarItem.prominentHoverBackground#273c75
tab.activeBackground#7f8fa6
tab.activeBorder#e84118
tab.activeForeground#f5f6fa
tab.border#40739e
tab.inactiveBackground#273c75
tab.inactiveForeground#f5f6fa
tab.unfocusedActiveForeground#f5f6fa
tab.unfocusedInactiveForeground#f5f6fa
terminal.ansiBlack#000000
terminal.ansiBlue#9c88ff
terminal.ansiBrightBlack#279AF1
terminal.ansiBrightBlue#9c88ff
terminal.ansiBrightCyan#80fcff
terminal.ansiBrightGreen#4cd137
terminal.ansiBrightMagenta#ff4b5c
terminal.ansiBrightRed#e84118
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fbc531
terminal.ansiCyan#80fcff
terminal.ansiGreen#4cd137
terminal.ansiMagenta#ff4b5c
terminal.ansiRed#e84118
terminal.ansiWhite#ffffff
terminal.ansiYellow#fbc531
terminal.background#192a56
terminal.foreground#f5f6fa
terminalCursor.background#00a8ff
terminalCursor.foreground#00a8ff
textBlockQuote.background#0e1e2b
textBlockQuote.border#9c88ff
textCodeBlock.background#0e1e2b
textLink.activeForeground#fbc531
textLink.foreground#9c88ff
textPreformat.foreground#e84118
textSeparator.foreground#273c75
titleBar.activeBackground#273c75
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#0e1e2b
titleBar.inactiveForeground#ffffff33
walkThrough.embeddedEditorBackground#273c75
welcomePage.buttonBackground#487eb0
welcomePage.buttonHoverBackground#7f8fa6
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#e8411870	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	#fbc531	—
entity	#0097e6	—
invalid	#f44542	—
storage.type.function	#dcdde1	—
keyword, storage.type.class, keyword.control.default.ts	#dcdde1	—
meta	#e1efff	—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx	#fff	—
meta.brace	#e1efff	—
punctuation	#487eb0	—
punctuation.definition.parameters	#e1b12c	—
punctuation.definition.template-expression	#e1b12c	—
storage	#0097e6	—
storage.type.function.arrow	#0097e6	—
string, punctuation.definition.string	#c23616	—
string.template, punctuation.definition.string.template	#4cd137	—
support	#44bd32	—
support.function	#dcdde1	—
support.variable.property.dom	#e1efff	—
variable	#e1efff	—
source.css entity, source.stylus entity	#4cd137	—
entity.other.attribute-name.id.css	#487eb0	—
entity.name.tag	#9c88ff	—
source.css support, source.stylus support	#c23616	—
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant	#e1b12c	—
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string	#e1b12c	—
source.css variable, source.stylus variable	#9c88ff	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#e53935	—
text.html.basic entity.name	#9c88ff	—
meta.toc-list.id.html	#c23616	—
text.html.basic entity.other	#0097e6	italic
meta.tag.metadata.script.html entity.name.tag.html	#0097e6	—
punctuation.definition.string.begin, punctuation.definition.string.end	#dcdde1	—
source.ini entity	#e1efff	—
source.ini keyword	#0097e6	—
source.ini punctuation.definition	#e1b12c	—
source.ini punctuation.separator	#dcdde1	—
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	#0097e6	—
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	#0097e6	bold
meta.paragraph.markdown	#e1efff	—
beginning.punctuation.definition.quote.markdown	#0097e6	—
markup.quote.markdown meta.paragraph.markdown	#9c88ff	italic
meta.separator.markdown	#0097e6	—
markup.bold.markdown	#9c88ff	bold
markup.italic.markdown	#9c88ff	italic
beginning.punctuation.definition.list.markdown	#0097e6	—
string.other.link.title.markdown	#c23616	—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown	#c23616	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#9c88ff	—
fenced_code.block.language, markup.inline.raw.markdown	#9c88ff	—
fenced_code.block.language, markup.inline.raw.markdown	#9c88ff	—
text.jade entity.name	#9c88ff	—
text.jade entity.other.attribute-name.tag	—	italic
text.jade string.interpolated	#e1b12c	—
source.ts entity.name.type	#44bd32	—
source.ts keyword	#0097e6	—
source.ts punctuation.definition.parameters	#e1efff	—
meta.arrow.ts punctuation.definition.parameters	#e1b12c	—
source.php entity	#9c88ff	—
variable.other.php	#0097e6	—
storage.type.cs	#9c88ff	—
entity.name.variable.property.cs	#9c88ff	—
storage.modifier.cs	#44bd32	—
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	#dcdde1	italic
meta.return.type.ts	#ef476f	italic

VS Code preview

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

Coco — coco-theme-IN-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#6D214F
activityBar.border#6D214F
activityBar.foreground#FC427B
activityBar.inactiveForeground#f5f6fa
activityBarBadge.background#6D214F
activityBarBadge.foreground#f5f6fa
badge.background#6D214F
badge.foreground#f5f6fa
button.background#6D214F
button.foreground#fff
button.hoverBackground#3B3B98
contrastBorder#ffffff00
debugExceptionWidget.background#82589F
debugExceptionWidget.border#f5f6fa
debugToolBar.background#82589F
descriptionForeground#f5f6fa
diffEditor.insertedTextBackground#58B19F33
diffEditor.insertedTextBorder#58B19F55
diffEditor.removedTextBackground#ee3a4333
diffEditor.removedTextBorder#ee3a4355
dropdown.background#82589F
dropdown.border#2C3A47
dropdown.foreground#f5f6fa
editor.background#2C3A47
editor.findMatchBackground#FF720066
editor.findMatchHighlightBackground#CAD40F66
editor.findRangeHighlightBackground#6D214F70
editor.foreground#f5f6fa
editor.hoverHighlightBackground#6D214F33
editor.inactiveSelectionBackground#38ada9
editor.lineHighlightBackground#6D214F
editor.lineHighlightBorder#2C3A47
editor.rangeHighlightBackground#6D214F50
editor.selectionBackground#3B3B9890
editor.selectionHighlightBackground#3B3B9880
editor.wordHighlightBackground#ffffff21
editor.wordHighlightStrongBackground#ffffff21
editorBracketMatch.background#2C3A4755
editorBracketMatch.border#6D214F80
editorCodeLens.foreground#f5f6fa
editorCursor.foreground#FC427B
editorError.border#6D214F
editorError.foreground#A22929
editorGroup.border#6D214F
editorGroup.dropBackground#6D214F99
editorGroup.emptyBackground#6D214F
editorGroupHeader.noTabsBackground#82589F
editorGroupHeader.tabsBackground#6D214F
editorGroupHeader.tabsBorder#2C3A47
editorGutter.addedBackground#3C9F4A
editorGutter.background#6D214F66
editorGutter.deletedBackground#A22929
editorGutter.modifiedBackground#26506D
editorHoverWidget.background#2C3A47
editorHoverWidget.border#6D214F
editorIndentGuide.background#3B5364
editorLineNumber.activeForeground#FC427B
editorLineNumber.foreground#f5f6fa
editorLink.activeForeground#f5f6fa
editorMarkerNavigation.background#3B536433
editorMarkerNavigationError.background#A22929
editorMarkerNavigationWarning.background#6D214F
editorOverviewRuler.border#6D214F
editorOverviewRuler.commonContentForeground#6D214F55
editorOverviewRuler.currentContentForeground#ee3a4355
editorOverviewRuler.incomingContentForeground#58B19F55
editorRuler.foreground#6D214F50
editorSuggestWidget.background#2C3A47
editorSuggestWidget.border#2C3A47
editorSuggestWidget.foreground#f5f6fa
editorSuggestWidget.highlightForeground#e84545
editorSuggestWidget.selectedBackground#3B3B98
editorWarning.border#ffffff00
editorWarning.foreground#d50000
editorWhitespace.foreground#ffffff1a
editorWidget.background#2C3A47
editorWidget.border#6D214F
errorForeground#A22929
extensionButton.prominentBackground#6D214F
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#FC427B
focusBorder#6D214F
foreground#f5f6fa
gitDecoration.conflictingResourceForeground#FF7200
gitDecoration.deletedResourceForeground#FC427B
gitDecoration.ignoredResourceForeground#808080
gitDecoration.modifiedResourceForeground#fad390
gitDecoration.untrackedResourceForeground#58B19F
input.background#82589F
input.border#6D214F
input.foreground#FC427B
input.placeholderForeground#f5f6fa
inputOption.activeBorder#8dffff
inputValidation.errorBackground#82589F
inputValidation.errorBorder#6D214F
inputValidation.infoBackground#82589F
inputValidation.infoBorder#6D214F
inputValidation.warningBackground#82589F
inputValidation.warningBorder#6D214F
list.activeSelectionBackground#3B3B98
list.activeSelectionForeground#f5f6fa
list.dropBackground#6D214F
list.focusBackground#6D214F
list.focusForeground#f5f6fa
list.highlightForeground#FC427B
list.hoverBackground#82589F
list.hoverForeground#f5f6fa
list.inactiveSelectionBackground#6D214F
list.inactiveSelectionForeground#ffffff
menu.background#6D214F
menu.border#2C3A47
menu.selectionForeground#ffffff
menubar.selectionBackground#3B3B98
merge.border#ffffff00
merge.commonContentBackground#c97d0c
merge.commonHeaderBackground#c97d0c
merge.currentContentBackground#2F7366
merge.currentHeaderBackground#2F7366
merge.incomingContentBackground#185294
merge.incomingHeaderBackground#185294
notificationCenter.border#6D214F
notificationCenterHeader.background#6D214F
notificationCenterHeader.foreground#f5f6fa
notificationLink.foreground#6D214F
notifications.background#6D214F
notifications.border#6D214F
notifications.foreground#f5f6fa
notificationToast.border#6D214F
panel.background#6D214F
panel.border#FC427B
panelTitle.activeBorder#FC427B
panelTitle.activeForeground#FC427B
panelTitle.inactiveForeground#f5f6fa
peekView.border#6D214F
peekViewEditor.background#82589F
peekViewEditor.matchHighlightBackground#82589F00
peekViewEditorGutter.background#6D214F
peekViewResult.background#2C3A47
peekViewResult.fileForeground#f5f6fa
peekViewResult.lineForeground#f5f6fa
peekViewResult.matchHighlightBackground#6D214F
peekViewResult.selectionBackground#3B3B98
peekViewResult.selectionForeground#f5f6fa
peekViewTitle.background#2C3A47
peekViewTitleDescription.foreground#f5f6fa
peekViewTitleLabel.foreground#6D214F
pickerGroup.border#6D214F
pickerGroup.foreground#f5f6fa
progressBar.background#6D214F
sash.hoverBorder#6D214F
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#FC427Bcc
scrollbarSlider.background#3B3B9880
scrollbarSlider.hoverBackground#3B3B98cc
selection.background#6D214F
sideBar.background#2C3A47
sideBar.border#6D214F
sideBar.foreground#f5f6fa
sideBarSectionHeader.background#82589F
sideBarSectionHeader.foreground#f5f6fa
sideBarTitle.foreground#f5f6fa
statusBar.background#2C3A47
statusBar.border#FC427B
statusBar.debuggingBackground#2C3A47
statusBar.debuggingBorder#6D214F
statusBar.debuggingForeground#f5f6fa
statusBar.foreground#f5f6fa
statusBar.noFolderBackground#2C3A47
statusBar.noFolderBorder#6D214F
statusBar.noFolderForeground#f5f6fa
statusBarItem.activeBackground#EAB543
statusBarItem.hoverBackground#3B3B98
statusBarItem.prominentBackground#2C3A47
statusBarItem.prominentHoverBackground#6D214F
tab.activeBackground#3B3B98
tab.activeBorder#FC427B
tab.activeForeground#f5f6fa
tab.border#6D214F
tab.inactiveBackground#6D214F
tab.inactiveForeground#f5f6fa
tab.unfocusedActiveForeground#f5f6fa
tab.unfocusedInactiveForeground#f5f6fa
terminal.ansiBlack#000000
terminal.ansiBlue#1B9CFC
terminal.ansiBrightBlack#D6A2E8
terminal.ansiBrightBlue#1B9CFC
terminal.ansiBrightCyan#80fcff
terminal.ansiBrightGreen#58B19F
terminal.ansiBrightMagenta#B33771
terminal.ansiBrightRed#F97F51
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fad390
terminal.ansiCyan#80fcff
terminal.ansiGreen#58B19F
terminal.ansiMagenta#B33771
terminal.ansiRed#F97F51
terminal.ansiWhite#ffffff
terminal.ansiYellow#fad390
terminal.background#2C3A47
terminal.foreground#f5f6fa
terminalCursor.background#FC427B
terminalCursor.foreground#FC427B
textBlockQuote.background#82589F
textBlockQuote.border#EAB543
textCodeBlock.background#82589F
textLink.activeForeground#FC427B
textLink.foreground#F8EFBA
textPreformat.foreground#FC427B
textSeparator.foreground#6D214F
titleBar.activeBackground#2C3A47
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#82589F
titleBar.inactiveForeground#ffffff33
walkThrough.embeddedEditorBackground#6D214F
welcomePage.buttonBackground#6D214F
welcomePage.buttonHoverBackground#3B3B98
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#FC427B70	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	#25CCF7	—
invalid	#FC427B	—
storage.type.function	#55E6C1	—
keyword, storage.type.class, keyword.control.default.ts	#55E6C1	—
meta	#ffffff	—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx	#fff	—
meta.brace	#ffffff	—
punctuation	#CAD3C8	—
punctuation.definition.parameters	#BDC581	—
punctuation.definition.template-expression	#BDC581	—
storage	#25CCF7	—
storage.type.function.arrow	#25CCF7	—
string, punctuation.definition.string	#55E6C1	—
string.template, punctuation.definition.string.template	#58B19F	—
support	#80ffbb	—
support.function	#55E6C1	—
support.variable.property.dom	#ffffff	—
variable	#ffffff	—
source.css entity, source.stylus entity	#58B19F	—
entity.other.attribute-name.id.css	#9AECDB	—
entity.name.tag	#EAB543	—
source.css support, source.stylus support	#55E6C1	—
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant	#BDC581	—
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string	#BDC581	—
source.css variable, source.stylus variable	#EAB543	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#FEA47F	—
text.html.basic entity.name	#EAB543	—
meta.toc-list.id.html	#55E6C1	—
text.html.basic entity.other	#25CCF7	italic
meta.tag.metadata.script.html entity.name.tag.html	#25CCF7	—
punctuation.definition.string.begin, punctuation.definition.string.end	#F8EFBA	—
source.ini entity	#ffffff	—
source.ini keyword	#25CCF7	—
source.ini punctuation.definition	#BDC581	—
source.ini punctuation.separator	#55E6C1	—
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	#25CCF7	—
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	#25CCF7	bold
meta.paragraph.markdown	#ffffff	—
beginning.punctuation.definition.quote.markdown	#25CCF7	—
markup.quote.markdown meta.paragraph.markdown	#EAB543	italic
meta.separator.markdown	#25CCF7	—
markup.bold.markdown	#EAB543	bold
markup.italic.markdown	#EAB543	italic
beginning.punctuation.definition.list.markdown	#25CCF7	—
string.other.link.title.markdown	#55E6C1	—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown	#55E6C1	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#EAB543	—
fenced_code.block.language, markup.inline.raw.markdown	#EAB543	—
fenced_code.block.language, markup.inline.raw.markdown	#EAB543	—
text.jade entity.name	#EAB543	—
text.jade entity.other.attribute-name.tag	—	italic
text.jade string.interpolated	#BDC581	—
source.ts entity.name.type	#80ffbb	—
source.ts keyword	#25CCF7	—
source.ts punctuation.definition.parameters	#ffffff	—
meta.arrow.ts punctuation.definition.parameters	#BDC581	—
source.php entity	#EAB543	—
variable.other.php	#25CCF7	—
storage.type.cs	#EAB543	—
entity.name.variable.property.cs	#EAB543	—
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	#55E6C1	italic
meta.return.type.ts	#FD7272	italic

VS Code preview

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

Coco — coco-theme-Personnal-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#0c1a25
activityBar.border#19647e
activityBar.foreground#ffc600
activityBar.inactiveForeground#4b6584
activityBarBadge.background#19647e
activityBarBadge.foreground#f2e5bc
badge.background#19647e
badge.foreground#f2e5bc
button.background#052f5f
button.foreground#f2e5bc
button.hoverBackground#19647e
contrastBorder#ffffff00
debugExceptionWidget.background#0e1e2b
debugExceptionWidget.border#f2e5bc
debugToolBar.background#0e1e2b
descriptionForeground#f2e5bc
diffEditor.insertedTextBackground#3ad90033
diffEditor.insertedTextBorder#3ad90055
diffEditor.removedTextBackground#ee3a4333
diffEditor.removedTextBorder#ee3a4355
dropdown.background#0e1e2b
dropdown.border#0c1821
dropdown.foreground#f2e5bc
editor.background#09131b
editor.findMatchBackground#FF720066
editor.findMatchHighlightBackground#CAD40F66
editor.findRangeHighlightBackground#243E5180
editor.foreground#f2e5bc
editor.hoverHighlightBackground#19647e33
editor.inactiveSelectionBackground#003b8b
editor.lineHighlightBackground#0e1e2b
editor.lineHighlightBorder#09131B
editor.rangeHighlightBackground#1F4662
editor.selectionBackground#19647e90
editor.selectionHighlightBackground#19647e80
editor.wordHighlightBackground#ffffff21
editor.wordHighlightStrongBackground#ffffff21
editorBracketMatch.background#09131b55
editorBracketMatch.border#19647e80
editorCodeLens.foreground#f2e5bc
editorCursor.foreground#ffc600
editorError.border#19647e
editorError.foreground#A22929
editorGroup.border#0c1a25
editorGroup.dropBackground#0c1a2599
editorGroup.emptyBackground#0c1a25
editorGroupHeader.noTabsBackground#0e1e2b
editorGroupHeader.tabsBackground#0c1a25
editorGroupHeader.tabsBorder#0c1821
editorGutter.addedBackground#3C9F4A
editorGutter.background#0c1a2566
editorGutter.deletedBackground#A22929
editorGutter.modifiedBackground#26506D
editorHoverWidget.background#0c1821
editorHoverWidget.border#19647e
editorIndentGuide.background#3B5364
editorLineNumber.activeForeground#19647e
editorLineNumber.foreground#f2e5bc
editorLink.activeForeground#f2e5bc
editorMarkerNavigation.background#3B536433
editorMarkerNavigationError.background#A22929
editorMarkerNavigationWarning.background#19647e
editorOverviewRuler.border#19647e
editorOverviewRuler.commonContentForeground#19647e55
editorOverviewRuler.currentContentForeground#ee3a4355
editorOverviewRuler.incomingContentForeground#3ad90055
editorRuler.foreground#1F4662
editorSuggestWidget.background#0c1821
editorSuggestWidget.border#0c1821
editorSuggestWidget.foreground#f2e5bc
editorSuggestWidget.highlightForeground#e84545
editorSuggestWidget.selectedBackground#052f5f
editorWarning.border#ffffff00
editorWarning.foreground#d50000
editorWhitespace.foreground#ffffff1a
editorWidget.background#0c1821
editorWidget.border#19647e
errorForeground#A22929
extensionButton.prominentBackground#052f5f
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#19647e
focusBorder#19647e
foreground#f2e5bc
gitDecoration.conflictingResourceForeground#FF7200
gitDecoration.deletedResourceForeground#ff628c
gitDecoration.ignoredResourceForeground#808080
gitDecoration.modifiedResourceForeground#ffc600
gitDecoration.untrackedResourceForeground#3ad900
input.background#0e1e2b
input.border#19647e
input.foreground#ffc600
input.placeholderForeground#f2e5bc
inputOption.activeBorder#8dffff
inputValidation.errorBackground#0e1e2b
inputValidation.errorBorder#19647e
inputValidation.infoBackground#0e1e2b
inputValidation.infoBorder#19647e
inputValidation.warningBackground#0e1e2b
inputValidation.warningBorder#19647e
list.activeSelectionBackground#19647e
list.activeSelectionForeground#f2e5bc
list.dropBackground#19647e
list.focusBackground#19647e
list.focusForeground#f2e5bc
list.highlightForeground#ffc600
list.hoverBackground#0e1e2b
list.hoverForeground#f2e5bc
list.inactiveSelectionBackground#19647e
list.inactiveSelectionForeground#ffffff
menu.background#0c1a25
menu.border#052f5f
menu.selectionForeground#f2e5bc
menubar.selectionBackground#19647e
merge.border#ffffff00
merge.commonContentBackground#c97d0c
merge.commonHeaderBackground#c97d0c
merge.currentContentBackground#2F7366
merge.currentHeaderBackground#2F7366
merge.incomingContentBackground#185294
merge.incomingHeaderBackground#185294
notificationCenter.border#19647e
notificationCenterHeader.background#0c1a25
notificationCenterHeader.foreground#f2e5bc
notificationLink.foreground#19647e
notifications.background#0c1a25
notifications.border#19647e
notifications.foreground#f2e5bc
notificationToast.border#19647e
panel.background#0c1a25
panel.border#ffc600
panelTitle.activeBorder#ffc600
panelTitle.activeForeground#ffc600
panelTitle.inactiveForeground#f2e5bc
peekView.border#19647e
peekViewEditor.background#0e1e2b
peekViewEditor.matchHighlightBackground#0e1e2b00
peekViewEditorGutter.background#0c1a25
peekViewResult.background#0c1821
peekViewResult.fileForeground#f2e5bc
peekViewResult.lineForeground#f2e5bc
peekViewResult.matchHighlightBackground#19647e
peekViewResult.selectionBackground#19647e
peekViewResult.selectionForeground#f2e5bc
peekViewTitle.background#0c1821
peekViewTitleDescription.foreground#f2e5bc
peekViewTitleLabel.foreground#19647e
pickerGroup.border#19647e
pickerGroup.foreground#f2e5bc
progressBar.background#19647e
sash.hoverBorder#19647e
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#ffc600cc
scrollbarSlider.background#19647e80
scrollbarSlider.hoverBackground#19647ecc
selection.background#19647e
sideBar.background#0c1821
sideBar.border#19647e
sideBar.foreground#f2e5bc
sideBarSectionHeader.background#0e1e2b
sideBarSectionHeader.foreground#f2e5bc
sideBarTitle.foreground#f2e5bc
statusBar.background#0c1821
statusBar.border#ffc600
statusBar.debuggingBackground#0c1821
statusBar.debuggingBorder#19647e
statusBar.debuggingForeground#f2e5bc
statusBar.foreground#f2e5bc
statusBar.noFolderBackground#0c1821
statusBar.noFolderBorder#19647e
statusBar.noFolderForeground#f2e5bc
statusBarItem.activeBackground#0088ff
statusBarItem.hoverBackground#19647e
statusBarItem.prominentBackground#0c1821
statusBarItem.prominentHoverBackground#19647e
tab.activeBackground#19647e
tab.activeBorder#ffc600
tab.activeForeground#f2e5bc
tab.border#0c1821
tab.inactiveBackground#0c1a25
tab.inactiveForeground#f2e5bc
tab.unfocusedActiveForeground#f2e5bc
tab.unfocusedInactiveForeground#f2e5bc
terminal.ansiBlack#000000
terminal.ansiBlue#0088ff
terminal.ansiBrightBlack#3867d6
terminal.ansiBrightBlue#0088ff
terminal.ansiBrightCyan#80fcff
terminal.ansiBrightGreen#3ad900
terminal.ansiBrightMagenta#ff4b5c
terminal.ansiBrightRed#ff628c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffc600
terminal.ansiCyan#80fcff
terminal.ansiGreen#3ad900
terminal.ansiMagenta#ff4b5c
terminal.ansiRed#ff628c
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffc600
terminal.background#0e1e2b
terminal.foreground#f2e5bc
terminalCursor.background#ffc600
terminalCursor.foreground#ffc600
textBlockQuote.background#0e1e2b
textBlockQuote.border#0088ff
textCodeBlock.background#0e1e2b
textLink.activeForeground#ffc600
textLink.foreground#0088ff
textPreformat.foreground#ffc600
textSeparator.foreground#19647e
titleBar.activeBackground#0c1821
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#353b48
titleBar.inactiveForeground#ffffff33
walkThrough.embeddedEditorBackground#19647e
welcomePage.buttonBackground#052f5f
welcomePage.buttonHoverBackground#19647e
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4b658490	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	#ffc600	—
invalid	#f44542	—
storage.type.function	#ff6f00	—
keyword, storage.type.class, keyword.control.default.ts	#ff6f00	—
meta	#e1efff	—
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	#ffc600	—
storage.type.function.arrow	#ffc600	—
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	#6fffe9	—
entity.name.tag	#0088ff	—
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	#0088ff	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#e53935	—
text.html.basic entity.name	#0088ff	—
meta.toc-list.id.html	#06d6a0	—
text.html.basic entity.other	#ffc600	italic
meta.tag.metadata.script.html entity.name.tag.html	#ffc600	—
punctuation.definition.string.begin, punctuation.definition.string.end	#2fff00	—
source.ini entity	#e1efff	—
source.ini keyword	#ffc600	—
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	#ffc600	—
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	#ffc600	bold
meta.paragraph.markdown	#e1efff	—
beginning.punctuation.definition.quote.markdown	#ffc600	—
markup.quote.markdown meta.paragraph.markdown	#0088ff	italic
meta.separator.markdown	#ffc600	—
markup.bold.markdown	#0088ff	bold
markup.italic.markdown	#0088ff	italic
beginning.punctuation.definition.list.markdown	#ffc600	—
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	#0088ff	—
fenced_code.block.language, markup.inline.raw.markdown	#0088ff	—
fenced_code.block.language, markup.inline.raw.markdown	#0088ff	—
text.jade entity.name	#0088ff	—
text.jade entity.other.attribute-name.tag	—	italic
text.jade string.interpolated	#ffee80	—
source.ts entity.name.type	#80ffbb	—
source.ts keyword	#ffc600	—
source.ts punctuation.definition.parameters	#e1efff	—
meta.arrow.ts punctuation.definition.parameters	#ffee80	—
source.php entity	#0088ff	—
variable.other.php	#ffc600	—
storage.type.cs	#0088ff	—
entity.name.variable.property.cs	#0088ff	—
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-SE-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#485460
activityBar.border#485460
activityBar.foreground#ffd32a
activityBar.inactiveForeground#ffffff
activityBarBadge.background#485460
activityBarBadge.foreground#ffffff
badge.background#485460
badge.foreground#ffffff
button.background#485460
button.foreground#fff
button.hoverBackground#808e9b
contrastBorder#ffffff00
debugExceptionWidget.background#1e272e50
debugExceptionWidget.border#ffffff
debugToolBar.background#1e272e50
descriptionForeground#ffffff
diffEditor.insertedTextBackground#0be88133
diffEditor.insertedTextBorder#0be88155
diffEditor.removedTextBackground#ee3a4333
diffEditor.removedTextBorder#ee3a4355
dropdown.background#485460
dropdown.border#1e272e
dropdown.foreground#ffffff
editor.background#1e272e
editor.findMatchBackground#FF720066
editor.findMatchHighlightBackground#CAD40F66
editor.findRangeHighlightBackground#00d8d650
editor.foreground#ffffff
editor.hoverHighlightBackground#48546033
editor.inactiveSelectionBackground#00d8d670
editor.lineHighlightBackground#48546070
editor.lineHighlightBorder#1e272e
editor.rangeHighlightBackground#00d8d680
editor.selectionBackground#808e9b90
editor.selectionHighlightBackground#808e9b80
editor.wordHighlightBackground#ffffff21
editor.wordHighlightStrongBackground#ffffff21
editorBracketMatch.background#1e272e55
editorBracketMatch.border#48546080
editorCodeLens.foreground#ffffff
editorCursor.foreground#ffd32a
editorError.border#485460
editorError.foreground#A22929
editorGroup.border#485460
editorGroup.dropBackground#48546099
editorGroup.emptyBackground#485460
editorGroupHeader.noTabsBackground#1e272e50
editorGroupHeader.tabsBackground#485460
editorGroupHeader.tabsBorder#1e272e
editorGutter.addedBackground#3C9F4A
editorGutter.background#48546066
editorGutter.deletedBackground#A22929
editorGutter.modifiedBackground#26506D
editorHoverWidget.background#1e272e
editorHoverWidget.border#485460
editorIndentGuide.background#3B5364
editorLineNumber.activeForeground#ffd32a
editorLineNumber.foreground#ffffff
editorLink.activeForeground#ffffff
editorMarkerNavigation.background#3B536433
editorMarkerNavigationError.background#A22929
editorMarkerNavigationWarning.background#485460
editorOverviewRuler.border#485460
editorOverviewRuler.commonContentForeground#48546055
editorOverviewRuler.currentContentForeground#ee3a4355
editorOverviewRuler.incomingContentForeground#0be88155
editorRuler.foreground#00d8d690
editorSuggestWidget.background#1e272e
editorSuggestWidget.border#1e272e
editorSuggestWidget.foreground#ffffff
editorSuggestWidget.highlightForeground#e84545
editorSuggestWidget.selectedBackground#808e9b
editorWarning.border#ffffff00
editorWarning.foreground#d50000
editorWhitespace.foreground#ffffff1a
editorWidget.background#1e272e
editorWidget.border#485460
errorForeground#A22929
extensionButton.prominentBackground#ffd32a
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#808e9b
focusBorder#485460
foreground#ffffff
gitDecoration.conflictingResourceForeground#ff3f34
gitDecoration.deletedResourceForeground#f53b57
gitDecoration.ignoredResourceForeground#808080
gitDecoration.modifiedResourceForeground#ffa801
gitDecoration.untrackedResourceForeground#0be881
input.background#485460
input.border#1e272e50
input.foreground#ffd32a
input.placeholderForeground#ffffff
inputOption.activeBorder#8dffff
inputValidation.errorBackground#1e272e50
inputValidation.errorBorder#485460
inputValidation.infoBackground#1e272e50
inputValidation.infoBorder#485460
inputValidation.warningBackground#1e272e50
inputValidation.warningBorder#485460
list.activeSelectionBackground#808e9b
list.activeSelectionForeground#ffffff
list.dropBackground#485460
list.focusBackground#485460
list.focusForeground#ffffff
list.highlightForeground#ffd32a
list.hoverBackground#1e272e50
list.hoverForeground#ffffff
list.inactiveSelectionBackground#485460
list.inactiveSelectionForeground#ffffff
menu.background#485460
menu.border#1e272e
menu.selectionForeground#ffffff
menubar.selectionBackground#808e9b
merge.border#ffffff00
merge.commonContentBackground#c97d0c
merge.commonHeaderBackground#c97d0c
merge.currentContentBackground#2F7366
merge.currentHeaderBackground#2F7366
merge.incomingContentBackground#185294
merge.incomingHeaderBackground#185294
notificationCenter.border#485460
notificationCenterHeader.background#485460
notificationCenterHeader.foreground#ffffff
notificationLink.foreground#d2dae2
notifications.background#485460
notifications.border#485460
notifications.foreground#ffffff
notificationToast.border#485460
panel.background#485460
panel.border#ffd32a
panelTitle.activeBorder#ffd32a
panelTitle.activeForeground#ffd32a
panelTitle.inactiveForeground#ffffff
peekView.border#485460
peekViewEditor.background#1e272e50
peekViewEditor.matchHighlightBackground#1e272e5000
peekViewEditorGutter.background#485460
peekViewResult.background#1e272e
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#ffffff
peekViewResult.matchHighlightBackground#485460
peekViewResult.selectionBackground#808e9b
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#1e272e
peekViewTitleDescription.foreground#ffffff
peekViewTitleLabel.foreground#d2dae2
pickerGroup.border#485460
pickerGroup.foreground#ffffff
progressBar.background#485460
sash.hoverBorder#485460
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#ffd32acc
scrollbarSlider.background#808e9b80
scrollbarSlider.hoverBackground#808e9bcc
selection.background#808e9b
sideBar.background#1e272e
sideBar.border#485460
sideBar.foreground#ffffff
sideBarSectionHeader.background#1e272e50
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffff
statusBar.background#1e272e
statusBar.border#ffd32a
statusBar.debuggingBackground#1e272e
statusBar.debuggingBorder#485460
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#1e272e
statusBar.noFolderBorder#485460
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#0fbcf9
statusBarItem.hoverBackground#808e9b
statusBarItem.prominentBackground#1e272e
statusBarItem.prominentHoverBackground#485460
tab.activeBackground#1e272e50
tab.activeBorder#ffd32a
tab.activeForeground#ffffff
tab.border#485460
tab.inactiveBackground#485460
tab.inactiveForeground#ffffff
tab.unfocusedActiveForeground#ffffff
tab.unfocusedInactiveForeground#ffffff
terminal.ansiBlack#000000
terminal.ansiBlue#0fbcf9
terminal.ansiBrightBlack#010101
terminal.ansiBrightBlue#0fbcf9
terminal.ansiBrightCyan#00d8d6
terminal.ansiBrightGreen#0be881
terminal.ansiBrightMagenta#575fcf
terminal.ansiBrightRed#f53b57
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffa801
terminal.ansiCyan#00d8d6
terminal.ansiGreen#0be881
terminal.ansiMagenta#575fcf
terminal.ansiRed#f53b57
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffa801
terminal.background#1e272e
terminal.foreground#ffffff
terminalCursor.background#ffd32a
terminalCursor.foreground#ffd32a
textBlockQuote.background#1e272e50
textBlockQuote.border#0fbcf9
textCodeBlock.background#1e272e50
textLink.activeForeground#ffd32a
textLink.foreground#808e9b
textPreformat.foreground#ffa801
textSeparator.foreground#d2dae2
titleBar.activeBackground#1e272e
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#1e272e50
titleBar.inactiveForeground#ffffff33
walkThrough.embeddedEditorBackground#485460
welcomePage.buttonBackground#d2dae2
welcomePage.buttonHoverBackground#ffd32a
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#ffd32a70	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	#34e7e4	—
entity	#f53b57	—
invalid	#575fcf	—
storage.type.function	#ffa801	—
keyword, storage.type.class, keyword.control.default.ts	#ffa801	—
meta	#ffffff	—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx	#fff	—
meta.brace	#ffffff	—
punctuation	#d2dae2	—
punctuation.definition.parameters	#ffdd59	—
punctuation.definition.template-expression	#ffdd59	—
storage	#f53b57	—
storage.type.function.arrow	#f53b57	—
string, punctuation.definition.string	#ffd32a	—
string.template, punctuation.definition.string.template	#0be881	—
support	#05c46b	—
support.function	#ffa801	—
support.variable.property.dom	#ffffff	—
variable	#ffffff	—
source.css entity, source.stylus entity	#0be881	—
entity.other.attribute-name.id.css	#ef5777	—
entity.name.tag	#0fbcf9	—
source.css support, source.stylus support	#ffd32a	—
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant	#575fcf	—
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string	#575fcf	—
source.css variable, source.stylus variable	#0fbcf9	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#ff5e57	—
text.html.basic entity.name	#0fbcf9	—
meta.toc-list.id.html	#ffd32a	—
text.html.basic entity.other	#f53b57	italic
meta.tag.metadata.script.html entity.name.tag.html	#f53b57	—
punctuation.definition.string.begin, punctuation.definition.string.end	#d2dae2	—
source.ini entity	#ffffff	—
source.ini keyword	#f53b57	—
source.ini punctuation.definition	#ffdd59	—
source.ini punctuation.separator	#ffa801	—
source.js storage.type.function, source.ts storage.type.function	#ffc048	—
variable.language, entity.name.type.class.js	#ffc048	—
entity.other.inherited-class.js	#ccc	—
variable.other.object.js	#4bcffa	—
variable.parameter.function.language.special.self.python	#ffc048	—
source.json support	#f53b57	—
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	#f53b57	bold
meta.paragraph.markdown	#ffffff	—
beginning.punctuation.definition.quote.markdown	#f53b57	—
markup.quote.markdown meta.paragraph.markdown	#0fbcf9	italic
meta.separator.markdown	#f53b57	—
markup.bold.markdown	#0fbcf9	bold
markup.italic.markdown	#0fbcf9	italic
beginning.punctuation.definition.list.markdown	#f53b57	—
string.other.link.title.markdown	#ffd32a	—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown	#ffd32a	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#0fbcf9	—
fenced_code.block.language, markup.inline.raw.markdown	#0fbcf9	—
fenced_code.block.language, markup.inline.raw.markdown	#0fbcf9	—
text.jade entity.name	#0fbcf9	—
text.jade entity.other.attribute-name.tag	—	italic
text.jade string.interpolated	#ffdd59	—
source.ts entity.name.type	#05c46b	—
source.ts keyword	#f53b57	—
source.ts punctuation.definition.parameters	#ffffff	—
meta.arrow.ts punctuation.definition.parameters	#ffdd59	—
source.php entity	#0fbcf9	—
variable.other.php	#f53b57	—
storage.type.cs	#0fbcf9	—
entity.name.variable.property.cs	#0fbcf9	—
storage.modifier.cs	#05c46b	—
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	#ffa801	italic
meta.return.type.ts	#ff4b5c	italic