Zenburn Cold Gray (deprecated in favor of Zenburn In Grays)

Name: Zenburn Cold Gray (deprecated in favor of *Zenburn In Grays*)
Author: Nicola Granata

Publisher: Nicola GranataThemes in package: 11

Theme with Zenburn TokenColors on Gray Backgrounds (Cold / Midnight / Nirvana / Low Blue).

Open in VS Code

Color themes

VS Code preview

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

Zenburn Cold Gray (deprecated in favor of *Zenburn In Grays*) — Zenburn Cold Gray - Low Blue - Asphalt

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#13130fff
activityBar.border#0b0b0aff
activityBar.foreground#837b5bff
activityBar.inactiveForeground#837b5b55
activityBarBadge.background#f90000c4
activityBarBadge.foreground#dfd19aff
badge.background#f90000c4
badge.foreground#dfd19aff
breadcrumb.background#373325ff
breadcrumb.border#74f5bbff
breadcrumb.foreground#9e946dff
button.background#373325ff
button.foreground#e7d89eff
button.hoverBackground#474231ff
descriptionForeground#e7d89eff
dropdown.background#23221bff
dropdown.border#1b1b15ff
dropdown.foreground#bdb385ff
dropdown.listBackground#23221bff
editor.background#1b1b15ff
editor.foreground#a69b71ff
editor.lineHighlightBackground#53d5b320
editor.selectionBackground#53d5b340
editor.selectionHighlightBackground#53d5b360
editor.wordHighlightStrongBackground#53d5b380
editorGroup.border#0b0b0aff
editorGroupHeader.noTabsBackground#13130fff
editorGroupHeader.tabsBackground#13130fff
editorGutter.background#1b1b15ff
editorGutter.modifiedBackground#53d5b3ff
editorHoverWidget.border#7d7043ff
editorIndentGuide.activeBackground#837b5bff
editorIndentGuide.background#23221bff
editorLineNumber.activeForeground#bdad70ff
editorLineNumber.foreground#8d7f4eff
editorPane.background#13130fff
editorSuggestWidget.background#1b1b15ff
editorSuggestWidget.border#7d7043ff
editorSuggestWidget.selectedBackground#2b2a20ff
editorUnnecessaryCode.opacity#1b1b1580
editorWidget.border#837b5b55
errorForeground#53d5b3ff
focusBorder#7d7043ff
foreground#a69b71ff
input.background#2b2a20ff
input.border#1b1b15ff
input.foreground#bdad70ff
input.placeholderForeground#6c6138ff
inputOption.activeBorder#837b5bff
list.activeSelectionBackground#53d5b32b
list.activeSelectionForeground#ffb342ff
list.dropBackground#23221bff
list.focusBackground#ffb3422b
list.focusForeground#e7d89eff
list.highlightForeground#53d5b380
list.hoverBackground#32b79c2b
list.hoverForeground#e7d89eff
list.inactiveSelectionBackground#32b79c2b
list.inactiveSelectionForeground#e59838ff
listFilterWidget.outline#0b0b0aff
menu.background#13130fff
menu.foreground#9e946dff
menu.selectionBackground#32b79c2b
menu.selectionForeground#e7d89eff
menu.separatorBackground#5c5742ff
menubar.selectionBackground#53d5b340
menubar.selectionBorder#13130fff
notifications.background#373325ff
panel.background#1b1b15ff
panel.border#3c392bff
panelTitle.activeBorder#bdad70ff
panelTitle.activeForeground#bdad70ff
panelTitle.inactiveForeground#8d7f4eff
pickerGroup.foreground#ffb342ff
progressBar.background#373325ff
scrollbar.shadow#3c392bff
scrollbarSlider.activeBackground#53d5b360
scrollbarSlider.background#2b2a20a0
scrollbarSlider.hoverBackground#53d5b340
selection.background#53d5b380
settings.checkboxBackground#2b2a20ff
settings.checkboxBorder#1b1b15ff
settings.dropdownBorder#1b1b15ff
settings.dropdownListBorder#1b1b15ff
settings.modifiedItemIndicator#837b5b55
settings.numberInputBorder#1b1b15ff
settings.textInputBorder#1b1b15ff
sideBar.background#1b1b15ff
sideBar.border#171712ff
sideBar.dropBackground#837b5b55
sideBarSectionHeader.background#373325ff
sideBarSectionHeader.border#837b5b55
sideBarSectionHeader.foreground#9e946dff
sideBarTitle.foreground#867c5aff
statusBar.background#13130fff
statusBar.border#3c392bff
statusBar.debuggingBackground#a79d74ff
statusBar.debuggingForeground#5b553fff
statusBar.foreground#efdfa3ff
statusBar.noFolderBackground#53d5b380
statusBar.noFolderForeground#a9170080
statusBarItem.activeBackground#53d5b360
statusBarItem.hoverBackground#53d5b340
statusBarItem.prominentBackground#53d5b360
statusBarItem.prominentHoverBackground#53d5b340
tab.activeBackground#373325ff
tab.activeBorder#373325ff
tab.activeBorderTop#53d5b3ff
tab.activeForeground#dfd19aff
tab.activeModifiedBorder#53d5b3ff
tab.border#0b0b0aff
tab.hoverBorder#a69b71ff
tab.hoverForeground#343126ff
tab.inactiveBackground#13130fff
tab.inactiveForeground#867c5aff
tab.inactiveModifiedBorder#df0000c4
tab.unfocusedActiveBorder#373325ff
tab.unfocusedActiveBorderTop#8cc79eff
tab.unfocusedActiveModifiedBorder#8cc79eff
tab.unfocusedInactiveModifiedBorder#df0000c4
terminal.background#13130fff
terminal.border{terminal-borders}
terminal.foreground#efdfa3ff
terminal.selectionBackground#53d5b340
textLink.activeForeground#74f5bbff
textLink.foreground#53d5b3ff
titleBar.activeBackground#13130fff
titleBar.activeForeground#efdfa3ff
titleBar.inactiveBackground#13130fff
titleBar.inactiveForeground#a79c73ff
welcomePage.buttonBackground#373325ff
welcomePage.buttonHoverBackground#474231ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#87a564ff	—
meta.preprocessor, punctuation.definition.preprocessor	#e8b36dff	—
keyword.other.phpdoc	#56873aff	—
punctuation.definition.comment, punctuation.whitespace.comment	#a0c579ff	—
punctuation.section.embedded	#898267ff	—
source.ruby.embedded	#cc8d70ff	—
keyword.other.directive	#ded3a6ff	bold
keyword.other.directive.line-number	—	underline
string, string.unquoted	#d67f64ff	—
string.unquoted.heredoc	#d6cba0ff	—
support.constant.numeric, constant.numeric	#87cba0ff	—
constant, support.constant	#d6cb82ff	bold
constant.character, constant.other	#cc8d70ff	—
variable.other.constant	#d6cb82ff	—
keyword, keyword.control, meta.selector.css, entity.other.attribute-name	#fecb83ff	—
variable.other.readwrite.instance	#fecb83ff	—
entity.name.module, support.other.module	#ff7a00ff	bold
keyword.operator	#ece0b1ff	—
keyword.operator.symbol.infix.floating-point	—	underline
source.ocaml, keyword.operator.symbol.prefix.floating-point	—	underline
storage.type, storage.modifier, support.type	#ffee76ff	—
entity.name.class.variant	#407a78ff	—
entity.other	#d6cba0ff	—
entity.other.inherited-class	#d78614ff	—
storage.type.user-defined, meta.property-list	#ffd500ff	—
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class	#f49818ff	—
invalid	#ffc2b2ff	bold italic underline
entity.other.attribute-name.html	#d6cc83ff	bold
entity.name.tag	#d6cc83ff	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#898267ff	—
support.function.construct	#fecb83ff	—
punctuation.definition.variable	#fecb83ff	—
meta.function-name, entity.name.function	#fff065ff	—
support.function	#c7b112ff	—
meta.brace	#78c49980	—
punctuation.definition.string.begin, punctuation.definition.string.end	#d6cba080	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html	#feca8294	bold
entity.name.tag.yaml	#fecb83ff	bold
punctuation.definition.entry	#d6cba0ff	—
keyword.other.DML.sql, keyword.other.data-integrity.sql	#b7ae89ff	bold
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star	#95b5b6ff	bold
source.diff, meta.diff.comment, meta.toc-list.comment.diff	#fff2bfff	—
meta.diff.header.from-file	#ca6b55ff	bold
meta.diff.header.to-file	#60aa67ff	bold
meta.diff.range.unified	#8cc69eff	—
markup.inserted.diff	#60aa67ff	—
markup.deleted.diff	#ca6b55ff	—
string.regexp	#c76931ff	—
string.regexp.arbitrary-repitition	#9e6547ff	—
punctuation.definition.arbitrary-repitition	#fff2bf5e	—
string.regexp.character-class	#cb8761ff	—
punctuation.definition.character-class	#fff2bf5e	—
markup.raw.inline.markdown	#fecb83ff	—
markup.heading.markdown, punctuation.definition.heading	#fff2bfff	bold
markup.list	#ded3a6ff	—
sublimelinter.mark.warning	#ddae00ff	—
sublimelinter.gutter-mark	#fff2bfff	—
sublimelinter.mark.error	#d01e00ff	—
doctype	#c8c499ff	—
entity	#c8c499ff	—
hyperlink	#548878ff	—
invisibles	#fff2bfff	—
level0	#23421aff	—
level1	#232134ff	—
level10	#415e4aff	—
level2	#45421aff	—
level3	#452134ff	—
level4	#234234ff	—
level5	#633e31ff	—
level6	#415e31ff	—
level7	#413e4aff	—
level8	#635e31ff	—
level9	#633e4aff	—
markup	#d3c89eff	—
match	#ffc24cff	—
meta	#bca578ff	—
none	#7c6152ff	—
property	#879288ff	—
punctuation	#ffc74fff	bold
source	#dcd1a5ff	—
storage	#7d3e4aff	—
support	#ea9db3ff	—
text	#dcd1a5ff	—
variable	#e7c587ff	—
wordhighlight	#77f20dff	—

VS Code preview

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

Zenburn Cold Gray (deprecated in favor of *Zenburn In Grays*) — Zenburn Cold Gray - Low Blue - Lazy

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#13130fff
activityBar.border#0b0b0aff
activityBar.foreground#917065ff
activityBar.inactiveForeground#91706555
activityBarBadge.background#f90000c4
activityBarBadge.foreground#dfd19aff
badge.background#f90000c4
badge.foreground#dfd19aff
breadcrumb.background#432c2fff
breadcrumb.border#74f5bbff
breadcrumb.foreground#9e946dff
button.background#432c2fff
button.foreground#e7d89eff
button.hoverBackground#533b3aff
descriptionForeground#e7d89eff
dropdown.background#23221bff
dropdown.border#1b1b15ff
dropdown.foreground#bdb385ff
dropdown.listBackground#23221bff
editor.background#1b1b15ff
editor.foreground#a69b71ff
editor.lineHighlightBackground#53d5b320
editor.selectionBackground#53d5b340
editor.selectionHighlightBackground#53d5b360
editor.wordHighlightStrongBackground#53d5b380
editorGroup.border#0b0b0aff
editorGroupHeader.noTabsBackground#13130fff
editorGroupHeader.tabsBackground#13130fff
editorGutter.background#1b1b15ff
editorGutter.modifiedBackground#53d5b3ff
editorHoverWidget.border#7d7043ff
editorIndentGuide.activeBackground#8d7362ff
editorIndentGuide.background#23221bff
editorLineNumber.activeForeground#bdad70ff
editorLineNumber.foreground#8d7f4eff
editorPane.background#13130fff
editorSuggestWidget.background#1b1b15ff
editorSuggestWidget.border#7d7043ff
editorSuggestWidget.selectedBackground#2b2a20ff
editorUnnecessaryCode.opacity#1b1b1580
editorWidget.border#91706555
errorForeground#53d5b3ff
focusBorder#7d7043ff
foreground#a69b71ff
input.background#2b2a20ff
input.border#1b1b15ff
input.foreground#bdad70ff
input.placeholderForeground#6c6138ff
inputOption.activeBorder#917065ff
list.activeSelectionBackground#53d5b32b
list.activeSelectionForeground#ffb342ff
list.dropBackground#23221bff
list.focusBackground#ffb3422b
list.focusForeground#e7d89eff
list.highlightForeground#53d5b380
list.hoverBackground#32b79c2b
list.hoverForeground#e7d89eff
list.inactiveSelectionBackground#32b79c2b
list.inactiveSelectionForeground#e59838ff
listFilterWidget.outline#0b0b0aff
menu.background#13130fff
menu.foreground#9e946dff
menu.selectionBackground#32b79c2b
menu.selectionForeground#e7d89eff
menu.separatorBackground#5c5742ff
menubar.selectionBackground#53d5b340
menubar.selectionBorder#13130fff
notifications.background#432c2fff
panel.background#1b1b15ff
panel.border#3c392bff
panelTitle.activeBorder#bdad70ff
panelTitle.activeForeground#bdad70ff
panelTitle.inactiveForeground#8d7f4eff
pickerGroup.foreground#ffb342ff
progressBar.background#432c2fff
scrollbar.shadow#3c392bff
scrollbarSlider.activeBackground#53d5b360
scrollbarSlider.background#2b2a20a0
scrollbarSlider.hoverBackground#53d5b340
selection.background#53d5b380
settings.checkboxBackground#2b2a20ff
settings.checkboxBorder#1b1b15ff
settings.dropdownBorder#1b1b15ff
settings.dropdownListBorder#1b1b15ff
settings.modifiedItemIndicator#91706555
settings.numberInputBorder#1b1b15ff
settings.textInputBorder#1b1b15ff
sideBar.background#1b1b15ff
sideBar.border#171712ff
sideBar.dropBackground#91706555
sideBarSectionHeader.background#432c2fff
sideBarSectionHeader.border#91706555
sideBarSectionHeader.foreground#9e946dff
sideBarTitle.foreground#867c5aff
statusBar.background#13130fff
statusBar.border#3c392bff
statusBar.debuggingBackground#b5927eff
statusBar.debuggingForeground#4d6034ff
statusBar.foreground#efdfa3ff
statusBar.noFolderBackground#53d5b380
statusBar.noFolderForeground#a9170080
statusBarItem.activeBackground#53d5b360
statusBarItem.hoverBackground#53d5b340
statusBarItem.prominentBackground#53d5b360
statusBarItem.prominentHoverBackground#53d5b340
tab.activeBackground#432c2fff
tab.activeBorder#432c2fff
tab.activeBorderTop#53d5b3ff
tab.activeForeground#dfd19aff
tab.activeModifiedBorder#53d5b3ff
tab.border#0b0b0aff
tab.hoverBorder#a69b71ff
tab.hoverForeground#343126ff
tab.inactiveBackground#13130fff
tab.inactiveForeground#867c5aff
tab.inactiveModifiedBorder#df0000c4
tab.unfocusedActiveBorder#432c2fff
tab.unfocusedActiveBorderTop#8cc79eff
tab.unfocusedActiveModifiedBorder#8cc79eff
tab.unfocusedInactiveModifiedBorder#df0000c4
terminal.background#13130fff
terminal.border{terminal-borders}
terminal.foreground#efdfa3ff
terminal.selectionBackground#53d5b340
textLink.activeForeground#74f5bbff
textLink.foreground#53d5b3ff
titleBar.activeBackground#13130fff
titleBar.activeForeground#efdfa3ff
titleBar.inactiveBackground#13130fff
titleBar.inactiveForeground#a79c73ff
welcomePage.buttonBackground#432c2fff
welcomePage.buttonHoverBackground#533b3aff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#87a564ff	—
meta.preprocessor, punctuation.definition.preprocessor	#e8b36dff	—
keyword.other.phpdoc	#56873aff	—
punctuation.definition.comment, punctuation.whitespace.comment	#a0c579ff	—
punctuation.section.embedded	#898267ff	—
source.ruby.embedded	#cc8d70ff	—
keyword.other.directive	#ded3a6ff	bold
keyword.other.directive.line-number	—	underline
string, string.unquoted	#d67f64ff	—
string.unquoted.heredoc	#d6cba0ff	—
support.constant.numeric, constant.numeric	#87cba0ff	—
constant, support.constant	#d6cb82ff	bold
constant.character, constant.other	#cc8d70ff	—
variable.other.constant	#d6cb82ff	—
keyword, keyword.control, meta.selector.css, entity.other.attribute-name	#fecb83ff	—
variable.other.readwrite.instance	#fecb83ff	—
entity.name.module, support.other.module	#ff7a00ff	bold
keyword.operator	#ece0b1ff	—
keyword.operator.symbol.infix.floating-point	—	underline
source.ocaml, keyword.operator.symbol.prefix.floating-point	—	underline
storage.type, storage.modifier, support.type	#ffee76ff	—
entity.name.class.variant	#407a78ff	—
entity.other	#d6cba0ff	—
entity.other.inherited-class	#d78614ff	—
storage.type.user-defined, meta.property-list	#ffd500ff	—
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class	#f49818ff	—
invalid	#ffc2b2ff	bold italic underline
entity.other.attribute-name.html	#d6cc83ff	bold
entity.name.tag	#d6cc83ff	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#898267ff	—
support.function.construct	#fecb83ff	—
punctuation.definition.variable	#fecb83ff	—
meta.function-name, entity.name.function	#fff065ff	—
support.function	#c7b112ff	—
meta.brace	#78c49980	—
punctuation.definition.string.begin, punctuation.definition.string.end	#d6cba080	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html	#feca8294	bold
entity.name.tag.yaml	#fecb83ff	bold
punctuation.definition.entry	#d6cba0ff	—
keyword.other.DML.sql, keyword.other.data-integrity.sql	#b7ae89ff	bold
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star	#95b5b6ff	bold
source.diff, meta.diff.comment, meta.toc-list.comment.diff	#fff2bfff	—
meta.diff.header.from-file	#ca6b55ff	bold
meta.diff.header.to-file	#60aa67ff	bold
meta.diff.range.unified	#8cc69eff	—
markup.inserted.diff	#60aa67ff	—
markup.deleted.diff	#ca6b55ff	—
string.regexp	#c76931ff	—
string.regexp.arbitrary-repitition	#9e6547ff	—
punctuation.definition.arbitrary-repitition	#fff2bf5e	—
string.regexp.character-class	#cb8761ff	—
punctuation.definition.character-class	#fff2bf5e	—
markup.raw.inline.markdown	#fecb83ff	—
markup.heading.markdown, punctuation.definition.heading	#fff2bfff	bold
markup.list	#ded3a6ff	—
sublimelinter.mark.warning	#ddae00ff	—
sublimelinter.gutter-mark	#fff2bfff	—
sublimelinter.mark.error	#d01e00ff	—
doctype	#c8c499ff	—
entity	#c8c499ff	—
hyperlink	#548878ff	—
invisibles	#fff2bfff	—
level0	#23421aff	—
level1	#232134ff	—
level10	#415e4aff	—
level2	#45421aff	—
level3	#452134ff	—
level4	#234234ff	—
level5	#633e31ff	—
level6	#415e31ff	—
level7	#413e4aff	—
level8	#635e31ff	—
level9	#633e4aff	—
markup	#d3c89eff	—
match	#ffc24cff	—
meta	#bca578ff	—
none	#7c6152ff	—
property	#879288ff	—
punctuation	#ffc74fff	bold
source	#dcd1a5ff	—
storage	#7d3e4aff	—
support	#ea9db3ff	—
text	#dcd1a5ff	—
variable	#e7c587ff	—
wordhighlight	#77f20dff	—

VS Code preview

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

Zenburn Cold Gray (deprecated in favor of *Zenburn In Grays*) — Zenburn Cold Gray - Midnight - Sugar Paper

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#17212B
activityBar.border#000611ff
activityBar.foreground#708498ff
activityBar.inactiveForeground#70849855
activityBarBadge.background#6b1b47c4
activityBarBadge.foreground#dcdcdcff
badge.background#6b1b47c4
badge.foreground#dcdcdcff
breadcrumb.background#304050
breadcrumb.border#86f9ffff
breadcrumb.foreground#9c9c9cff
button.background#304050
button.foreground#f1e9deff
button.hoverBackground#405060ff
descriptionForeground#f1e9deff
dropdown.background#121d2bff
dropdown.border#0e1621
dropdown.foreground#aeb6c1ff
dropdown.listBackground#121d2bff
editor.background#0e1621
editor.foreground#909090
editor.lineHighlightBackground#66d9ef20
editor.selectionBackground#66d9ef40
editor.selectionHighlightBackground#66d9ef60
editor.wordHighlightStrongBackground#66d9ef80
editorGroup.border#000611ff
editorGroupHeader.noTabsBackground#060e19ff
editorGroupHeader.tabsBackground#060e19ff
editorGutter.background#0e1621
editorGutter.modifiedBackground#66d9ef
editorHoverWidget.border#3e5661ff
editorIndentGuide.activeBackground#748392ff
editorIndentGuide.background#161e29ff
editorLineNumber.activeForeground#7e96a1ff
editorLineNumber.foreground#4e6671ff
editorPane.background#060e19ff
editorSuggestWidget.background#0e1621
editorSuggestWidget.border#3e5661ff
editorSuggestWidget.selectedBackground#1e2631ff
editorUnnecessaryCode.opacity#0e162180
editorWidget.border#70849855
errorForeground#66d9ef
focusBorder#3e5661ff
foreground#909090
input.background#1e2631ff
input.border#0e1621
input.foreground#7e96a1ff
input.placeholderForeground#2e4651ff
inputOption.activeBorder#708498ff
list.activeSelectionBackground#66d9ef2b
list.activeSelectionForeground#ffc67aff
list.dropBackground#121d2bff
list.focusBackground#ffc67a2b
list.focusForeground#d0d0d0ff
list.highlightForeground#66d9ef80
list.hoverBackground#0e1621
list.hoverForeground#d0d0d0ff
list.inactiveSelectionBackground#0e1621
list.inactiveSelectionForeground#d9a868ff
listFilterWidget.outline#000611ff
menu.background#17212B
menu.foreground#9c9c9cff
menu.selectionBackground#0e1621
menu.selectionForeground#d0d0d0ff
menu.separatorBackground#4e5661ff
menubar.selectionBackground#66d9ef40
menubar.selectionBorder#060e19ff
notifications.background#304050
panel.background#0e1621
panel.border#2e3641ff
panelTitle.activeBorder#7e96a1ff
panelTitle.activeForeground#7e96a1ff
panelTitle.inactiveForeground#4e6671ff
pickerGroup.foreground#ffc67aff
progressBar.background#304050
scrollbar.shadow#2e3641ff
scrollbarSlider.activeBackground#66d9ef60
scrollbarSlider.background#1e2631a0
scrollbarSlider.hoverBackground#66d9ef40
selection.background#66d9ef80
settings.checkboxBackground#1e2631ff
settings.checkboxBorder#0e1621
settings.dropdownBorder#0e1621
settings.dropdownListBorder#0e1621
settings.modifiedItemIndicator#70849855
settings.numberInputBorder#0e1621
settings.textInputBorder#0e1621
sideBar.background#0f1620ff
sideBar.border#0a121dff
sideBar.dropBackground#70849855
sideBarSectionHeader.background#304050
sideBarSectionHeader.border#70849855
sideBarSectionHeader.foreground#9c9c9cff
sideBarTitle.foreground#707070ff
statusBar.background#17212bff
statusBar.border#2e3641ff
statusBar.debuggingBackground#94a8bcff
statusBar.debuggingForeground#6b5743ff
statusBar.foreground#e8ded4ff
statusBar.noFolderBackground#66d9ef80
statusBar.noFolderForeground#99261080
statusBarItem.activeBackground#66d9ef60
statusBarItem.hoverBackground#66d9ef40
statusBarItem.prominentBackground#66d9ef60
statusBarItem.prominentHoverBackground#66d9ef40
tab.activeBackground#304050
tab.activeBorder#304050
tab.activeBorderTop#66d9ef
tab.activeForeground#dcdcdcff
tab.activeModifiedBorder#66d9ef
tab.border#000611ff
tab.hoverBorder#909090
tab.hoverForeground#262e39ff
tab.inactiveBackground#060e19ff
tab.inactiveForeground#707070ff
tab.inactiveModifiedBorder#53032fc4
tab.unfocusedActiveBorder#304050
tab.unfocusedActiveBorderTop#94cdd8ff
tab.unfocusedActiveModifiedBorder#94cdd8ff
tab.unfocusedInactiveModifiedBorder#53032fc4
terminal.background#17212B
terminal.border{terminal-borders}
terminal.foreground#e8ded4ff
terminal.selectionBackground#66d9ef40
textLink.activeForeground#86f9ffff
textLink.foreground#66d9ef
titleBar.activeBackground#060e19ff
titleBar.activeForeground#f9f1e6ff
titleBar.inactiveBackground#060e19ff
titleBar.inactiveForeground#aea9a1ff
welcomePage.buttonBackground#304050
welcomePage.buttonHoverBackground#405060ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6e8f6dff	—
meta.preprocessor, punctuation.definition.preprocessor	#c29e7bff	—
keyword.other.phpdoc	#42713bff	—
punctuation.definition.comment, punctuation.whitespace.comment	#86ac87ff	—
punctuation.section.embedded	#6e6e6eff	—
source.ruby.embedded	#a97a7bff	—
keyword.other.directive	#bcbcbcff	bold
keyword.other.directive.line-number	—	underline
string, string.unquoted	#b06e6eff	—
string.unquoted.heredoc	#b5b5b5ff	—
support.constant.numeric, constant.numeric	#71b3b2ff	—
constant, support.constant	#b5b593ff	bold
constant.character, constant.other	#a97a7bff	—
variable.other.constant	#b5b593ff	—
keyword, keyword.control, meta.selector.css, entity.other.attribute-name	#d7b695ff	—
variable.other.readwrite.instance	#d7b695ff	—
entity.name.module, support.other.module	#d36a0eff	bold
keyword.operator	#c9c9c9ff	—
keyword.operator.symbol.infix.floating-point	—	underline
source.ocaml, keyword.operator.symbol.prefix.floating-point	—	underline
storage.type, storage.modifier, support.type	#dad688ff	—
entity.name.class.variant	#30657fff	—
entity.other	#b5b5b5ff	—
entity.other.inherited-class	#b17415ff	—
storage.type.user-defined, meta.property-list	#d8be13ff	—
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class	#ca851bff	—
invalid	#d8aecaff	bold italic underline
entity.other.attribute-name.html	#b5b694ff	bold
entity.name.tag	#b5b694ff	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#6e6e6eff	—
support.function.construct	#d7b695ff	—
punctuation.definition.variable	#d7b695ff	—
meta.function-name, entity.name.function	#dad876ff	—
support.function	#a59a14ff	—
meta.brace	#64acaa80	—
punctuation.definition.string.begin, punctuation.definition.string.end	#b5b5b580	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html	#d7b59494	bold
entity.name.tag.yaml	#d7b695ff	bold
punctuation.definition.entry	#b5b5b5ff	—
keyword.other.DML.sql, keyword.other.data-integrity.sql	#989898ff	bold
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star	#7da0cbff	bold
source.diff, meta.diff.comment, meta.toc-list.comment.diff	#dbdbdbff	—
meta.diff.header.from-file	#a55b5cff	bold
meta.diff.header.to-file	#4d9371ff	bold
meta.diff.range.unified	#76adb0ff	—
markup.inserted.diff	#4d9371ff	—
markup.deleted.diff	#a55b5cff	—
string.regexp	#a25933ff	—
string.regexp.arbitrary-repitition	#7e544aff	—
punctuation.definition.arbitrary-repitition	#dbdbdb5e	—
string.regexp.character-class	#a7756aff	—
punctuation.definition.character-class	#dbdbdb5e	—
markup.raw.inline.markdown	#d7b695ff	—
markup.heading.markdown, punctuation.definition.heading	#dbdbdbff	bold
markup.list	#bcbcbcff	—
sublimelinter.mark.warning	#b8980fff	—
sublimelinter.gutter-mark	#dbdbdbff	—
sublimelinter.mark.error	#a7150aff	—
doctype	#a8aeacff	—
entity	#a8aeacff	—
hyperlink	#417380ff	—
invisibles	#dbdbdbff	—
level0	#122e12ff	—
level1	#11112cff	—
level10	#2e4a4aff	—
level2	#2f2f13ff	—
level3	#2e122eff	—
level4	#122e2eff	—
level5	#492d2dff	—
level6	#2e4a2eff	—
level7	#2c2c48ff	—
level8	#4b4b2fff	—
level9	#492d49ff	—
markup	#b2b2b2ff	—
match	#d7ad58ff	—
meta	#9c9085ff	—
none	#614f54ff	—
property	#6e7e94ff	—
punctuation	#d7b25cff	bold
source	#bababaff	—
storage	#602e4aff	—
support	#c48bc8ff	—
text	#bababaff	—
variable	#c3ae99ff	—
wordhighlight	#65d712ff	—

VS Code preview

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

Zenburn Cold Gray (deprecated in favor of *Zenburn In Grays*) — Zenburn Cold Gray - Nirvana - Asphalt

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#141414ff
activityBar.border#0c0c0cff
activityBar.foreground#818181ff
activityBar.inactiveForeground#81818155
activityBarBadge.background#e90909c4
activityBarBadge.foreground#dcdcdcff
badge.background#e90909c4
badge.foreground#dcdcdcff
breadcrumb.background#363636
breadcrumb.border#86f9ffff
breadcrumb.foreground#9c9c9cff
button.background#363636
button.foreground#e3e3e3ff
button.hoverBackground#464646ff
descriptionForeground#e3e3e3ff
dropdown.background#242424ff
dropdown.border#1C1C1C
dropdown.foreground#bcbcbcff
dropdown.listBackground#242424ff
editor.background#1C1C1C
editor.foreground#a3a3a3ff
editor.lineHighlightBackground#66d9ef20
editor.selectionBackground#66d9ef40
editor.selectionHighlightBackground#66d9ef60
editor.wordHighlightStrongBackground#66d9ef80
editorGroup.border#0c0c0cff
editorGroupHeader.noTabsBackground#141414ff
editorGroupHeader.tabsBackground#141414ff
editorGutter.background#1C1C1C
editorGutter.modifiedBackground#66d9ef
editorHoverWidget.border#7e7662ff
editorIndentGuide.activeBackground#818181ff
editorIndentGuide.background#242424ff
editorLineNumber.activeForeground#beb6a2ff
editorLineNumber.foreground#8e8672ff
editorPane.background#141414ff
editorSuggestWidget.background#1C1C1C
editorSuggestWidget.border#7e7662ff
editorSuggestWidget.selectedBackground#2c2c2cff
editorUnnecessaryCode.opacity#1c1c1c80
editorWidget.border#81818155
errorForeground#66d9ef
focusBorder#7e7662ff
foreground#a3a3a3ff
input.background#2c2c2cff
input.border#1C1C1C
input.foreground#beb6a2ff
input.placeholderForeground#6e6652ff
inputOption.activeBorder#818181ff
list.activeSelectionBackground#66d9ef2b
list.activeSelectionForeground#ffc17dff
list.dropBackground#242424ff
list.focusBackground#ffc17d2b
list.focusForeground#e3e3e3ff
list.highlightForeground#66d9ef80
list.hoverBackground#46b9cf2b
list.hoverForeground#e3e3e3ff
list.inactiveSelectionBackground#46b9cf2b
list.inactiveSelectionForeground#d9a46aff
listFilterWidget.outline#0c0c0cff
menu.background#141414ff
menu.foreground#9c9c9cff
menu.selectionBackground#46b9cf2b
menu.selectionForeground#e3e3e3ff
menu.separatorBackground#5c5c5cff
menubar.selectionBackground#66d9ef40
menubar.selectionBorder#141414ff
notifications.background#363636
panel.background#1C1C1C
panel.border#3c3c3cff
panelTitle.activeBorder#beb6a2ff
panelTitle.activeForeground#beb6a2ff
panelTitle.inactiveForeground#8e8672ff
pickerGroup.foreground#ffc17dff
progressBar.background#363636
scrollbar.shadow#3c3c3cff
scrollbarSlider.activeBackground#66d9ef60
scrollbarSlider.background#2c2c2ca0
scrollbarSlider.hoverBackground#66d9ef40
selection.background#66d9ef80
settings.checkboxBackground#2c2c2cff
settings.checkboxBorder#1C1C1C
settings.dropdownBorder#1C1C1C
settings.dropdownListBorder#1C1C1C
settings.modifiedItemIndicator#81818155
settings.numberInputBorder#1C1C1C
settings.textInputBorder#1C1C1C
sideBar.background#1C1C1C
sideBar.border#181818ff
sideBar.dropBackground#81818155
sideBarSectionHeader.background#363636
sideBarSectionHeader.border#81818155
sideBarSectionHeader.foreground#9c9c9cff
sideBarTitle.foreground#838383ff
statusBar.background#141414ff
statusBar.border#3c3c3cff
statusBar.debuggingBackground#a5a5a5ff
statusBar.debuggingForeground#5a5a5aff
statusBar.foreground#ebebebff
statusBar.noFolderBackground#66d9ef80
statusBar.noFolderForeground#99261080
statusBarItem.activeBackground#66d9ef60
statusBarItem.hoverBackground#66d9ef40
statusBarItem.prominentBackground#66d9ef60
statusBarItem.prominentHoverBackground#66d9ef40
tab.activeBackground#363636
tab.activeBorder#363636
tab.activeBorderTop#66d9ef
tab.activeForeground#dcdcdcff
tab.activeModifiedBorder#66d9ef
tab.border#0c0c0cff
tab.hoverBorder#a3a3a3ff
tab.hoverForeground#343434ff
tab.inactiveBackground#141414ff
tab.inactiveForeground#838383ff
tab.inactiveModifiedBorder#d10000c4
tab.unfocusedActiveBorder#363636
tab.unfocusedActiveBorderTop#94cdd8ff
tab.unfocusedActiveModifiedBorder#94cdd8ff
tab.unfocusedInactiveModifiedBorder#d10000c4
terminal.background#141414ff
terminal.border{terminal-borders}
terminal.foreground#ebebebff
terminal.selectionBackground#66d9ef40
textLink.activeForeground#86f9ffff
textLink.foreground#66d9ef
titleBar.activeBackground#141414ff
titleBar.activeForeground#ebebebff
titleBar.inactiveBackground#141414ff
titleBar.inactiveForeground#a4a4a4ff
welcomePage.buttonBackground#363636
welcomePage.buttonHoverBackground#464646ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8ba171ff	—
meta.preprocessor, punctuation.definition.preprocessor	#deb681ff	—
keyword.other.phpdoc	#5d8248ff	—
punctuation.definition.comment, punctuation.whitespace.comment	#a5c188ff	—
punctuation.section.embedded	#87826eff	—
source.ruby.embedded	#c1927cff	—
keyword.other.directive	#dbd3b1ff	bold
keyword.other.directive.line-number	—	underline
string, string.unquoted	#c78672ff	—
string.unquoted.heredoc	#d3cbaaff	—
support.constant.numeric, constant.numeric	#92c5a5ff	—
constant, support.constant	#d2ca93ff	bold
constant.character, constant.other	#c1927cff	—
variable.other.constant	#d2ca93ff	—
keyword, keyword.control, meta.selector.css, entity.other.attribute-name	#f4ce98ff	—
variable.other.readwrite.instance	#f4ce98ff	—
entity.name.module, support.other.module	#e9852aff	bold
keyword.operator	#e9e0bcff	—
keyword.operator.symbol.infix.floating-point	—	underline
source.ocaml, keyword.operator.symbol.prefix.floating-point	—	underline
storage.type, storage.modifier, support.type	#f9ed93ff	—
entity.name.class.variant	#4b7675ff	—
entity.other	#d3cbaaff	—
entity.other.inherited-class	#c88c36ff	—
storage.type.user-defined, meta.property-list	#f5d536ff	—
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class	#e39e3eff	—
invalid	#f4c7bbff	bold italic underline
entity.other.attribute-name.html	#d3cb94ff	bold
entity.name.tag	#d3cb94ff	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#87826eff	—
support.function.construct	#f4ce98ff	—
punctuation.definition.variable	#f4ce98ff	—
meta.function-name, entity.name.function	#faee86ff	—
support.function	#c1b039ff	—
meta.brace	#85be9e80	—
punctuation.definition.string.begin, punctuation.definition.string.end	#d3cbaa80	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html	#f4cd9794	bold
entity.name.tag.yaml	#f4ce98ff	bold
punctuation.definition.entry	#d3cbaaff	—
keyword.other.DML.sql, keyword.other.data-integrity.sql	#b4ae92ff	bold
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star	#9bb3b4ff	bold
source.diff, meta.diff.comment, meta.toc-list.comment.diff	#fbf2cbff	—
meta.diff.header.from-file	#bb7363ff	bold
meta.diff.header.to-file	#6ca471ff	bold
meta.diff.range.unified	#96c1a3ff	—
markup.inserted.diff	#6ca471ff	—
markup.deleted.diff	#bb7363ff	—
string.regexp	#b77147ff	—
string.regexp.arbitrary-repitition	#946953ff	—
punctuation.definition.arbitrary-repitition	#fbf2cb5e	—
string.regexp.character-class	#bf8c70ff	—
punctuation.definition.character-class	#fbf2cb5e	—
markup.raw.inline.markdown	#f4ce98ff	—
markup.heading.markdown, punctuation.definition.heading	#fbf2cbff	bold
markup.list	#dbd3b1ff	—
sublimelinter.mark.warning	#d3af2dff	—
sublimelinter.gutter-mark	#fbf2cbff	—
sublimelinter.mark.error	#b9341dff	—
doctype	#c6c3a3ff	—
entity	#c6c3a3ff	—
hyperlink	#5d8478ff	—
invisibles	#fbf2cbff	—
level0	#283f21ff	—
level1	#232230ff	—
level10	#465c4dff	—
level2	#444123ff	—
level3	#402533ff	—
level4	#284035ff	—
level5	#5d4137ff	—
level6	#455b39ff	—
level7	#413f48ff	—
level8	#615d3cff	—
level9	#5d424bff	—
markup	#d0c8a8ff	—
match	#f3c56cff	—
meta	#b7a684ff	—
none	#776358ff	—
property	#899189ff	—
punctuation	#f3c96fff	bold
source	#d9d1b0ff	—
storage	#73444dff	—
support	#dea4b5ff	—
text	#d9d1b0ff	—
variable	#e0c698ff	—
wordhighlight	#8ae73bff	—