Ultimate VSCode Themes & Icons Pack - 50+ Professional Themes with 11 Icon Sets

Name: Ultimate VSCode Themes & Icons Pack - 50+ Professional Themes with 11 Icon Sets
Author: SecureDev

Publisher: SecureDevThemes in package: 101

Ultimate collection of 50+ professional VSCode themes: dark themes like Nebula Storm, Stellar Operator, Cosmic Eclipse, Ocean Depths, Hacker, Bad Hacker, Nord, Tokyo Night, Dracula, Solarized, Gruvbox, One Dark Pro, Goku Code, Nebula, Neon Dream, Dark Green Jungle, Black and White TV, Maple Dark, Ne

Open in VS Code GitHub

Color themes

VS Code preview

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

Ultimate VSCode Themes & Icons Pack - 50+ Professional Themes with 11 Icon Sets — Neon Dream Code

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.activeBorder#ff2a6d
activityBar.background#060920
activityBar.border#0a0e27
activityBar.foreground#00f0ff
activityBar.inactiveForeground#5865a8
activityBarBadge.background#ff2a6d
activityBarBadge.foreground#ffffff
badge.background#ff2a6d
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#ff2a6d
breadcrumb.background#0a0e27
breadcrumb.focusForeground#00f0ff
breadcrumb.foreground#7a8ec9
button.background#ff2a6d
button.foreground#ffffff
button.hoverBackground#e6245f
button.secondaryBackground#2d3561
button.secondaryForeground#00f0ff
button.secondaryHoverBackground#3d4a7a
diffEditor.insertedLineBackground#05ffa110
diffEditor.insertedTextBackground#05ffa120
diffEditor.removedLineBackground#ff2a6d10
diffEditor.removedTextBackground#ff2a6d20
dropdown.background#121838
dropdown.border#3d4a7a
dropdown.foreground#e4f0fb
editor.background#0a0e27
editor.findMatchBackground#ff2a6d80
editor.findMatchHighlightBackground#ff2a6d40
editor.foreground#e4f0fb
editor.lineHighlightBackground#121838
editor.selectionBackground#2d3561
editor.selectionHighlightBackground#2d356180
editorBracketMatch.background#ff2a6d40
editorBracketMatch.border#ff2a6d
editorCursor.foreground#00f0ff
editorError.border#ff2a6d80
editorError.foreground#ff2a6d
editorGutter.addedBackground#05ffa1
editorGutter.deletedBackground#ff2a6d
editorGutter.modifiedBackground#ffe600
editorHint.foreground#05ffa1
editorIndentGuide.activeBackground#3d4a7a
editorIndentGuide.background#1e2548
editorInfo.foreground#5c9fff
editorLineNumber.activeForeground#00f0ff
editorLineNumber.foreground#3d4a7a
editorOverviewRuler.addedForeground#05ffa1
editorOverviewRuler.border#1e2548
editorOverviewRuler.deletedForeground#ff2a6d
editorOverviewRuler.errorForeground#ff2a6d
editorOverviewRuler.infoForeground#5c9fff
editorOverviewRuler.modifiedForeground#ffe600
editorOverviewRuler.warningForeground#ffe600
editorRuler.foreground#1e2548
editorSuggestWidget.background#121838
editorSuggestWidget.border#00f0ff
editorSuggestWidget.focusHighlightForeground#00f0ff
editorSuggestWidget.highlightForeground#ff2a6d
editorSuggestWidget.selectedBackground#2d3561
editorWarning.border#ffe60080
editorWarning.foreground#ffe600
editorWhitespace.foreground#1e2548
editorWidget.background#121838
editorWidget.border#3d4a7a
editorWidget.foreground#e4f0fb
gitDecoration.addedResourceForeground#05ffa1
gitDecoration.conflictingResourceForeground#bd5eff
gitDecoration.deletedResourceForeground#ff2a6d
gitDecoration.ignoredResourceForeground#5865a8
gitDecoration.modifiedResourceForeground#ffe600
gitDecoration.submoduleResourceForeground#5c9fff
gitDecoration.untrackedResourceForeground#05ffa1
input.background#121838
input.border#3d4a7a
input.foreground#e4f0fb
input.placeholderForeground#7a8ec9
inputOption.activeBorder#00f0ff
inputValidation.errorBackground#121838
inputValidation.errorBorder#ff2a6d
inputValidation.infoBorder#5c9fff
inputValidation.warningBorder#ffe600
list.activeSelectionBackground#2d3561
list.activeSelectionForeground#00f0ff
list.errorForeground#ff2a6d
list.focusBackground#2d3561
list.focusOutline#00f0ff
list.highlightForeground#ff2a6d
list.hoverBackground#12183880
list.inactiveSelectionBackground#1e2548
list.warningForeground#ffe600
menu.background#121838
menu.border#1e2548
menu.foreground#e4f0fb
menu.selectionBackground#2d3561
menu.selectionForeground#00f0ff
menu.separatorBackground#3d4a7a
minimap.background#0a0e2780
minimapGutter.addedBackground#05ffa1
minimapGutter.deletedBackground#ff2a6d
minimapGutter.modifiedBackground#ffe600
minimapSlider.activeBackground#00f0ff40
minimapSlider.background#1e254880
minimapSlider.hoverBackground#3d4a7a80
notificationCenter.border#3d4a7a
notificationCenterHeader.background#121838
notificationLink.foreground#00f0ff
notifications.background#121838
notifications.border#3d4a7a
notificationsErrorIcon.foreground#ff2a6d
notificationsInfoIcon.foreground#5c9fff
notificationsWarningIcon.foreground#ffe600
panel.background#0d1130
panel.border#1e2548
panelTitle.activeBorder#00f0ff
panelTitle.activeForeground#00f0ff
panelTitle.inactiveForeground#7a8ec9
peekView.border#00f0ff
peekViewEditor.background#0d1130
peekViewEditor.matchHighlightBackground#ff2a6d40
peekViewResult.background#0a0e27
peekViewTitle.background#060920
progressBar.background#ff2a6d
scrollbarSlider.activeBackground#00f0ff60
scrollbarSlider.background#1e254880
scrollbarSlider.hoverBackground#3d4a7a80
sideBar.background#0d1130
sideBar.border#1e2548
sideBar.foreground#b8c5d6
sideBarSectionHeader.background#0a0e27
sideBarSectionHeader.border#1e2548
sideBarSectionHeader.foreground#00f0ff
sideBarTitle.foreground#00f0ff
statusBar.background#060920
statusBar.border#ff2a6d
statusBar.debuggingBackground#ff2a6d
statusBar.debuggingForeground#ffffff
statusBar.foreground#7a8ec9
statusBar.noFolderBackground#060920
statusBarItem.prominentBackground#2d3561
statusBarItem.prominentHoverBackground#3d4a7a
statusBarItem.remoteBackground#ff2a6d
statusBarItem.remoteForeground#ffffff
tab.activeBackground#0a0e27
tab.activeBorder#ff2a6d
tab.activeBorderTop#00f0ff
tab.activeForeground#00f0ff
tab.border#0a0e27
tab.hoverBackground#121838
tab.hoverForeground#00f0ff
tab.inactiveBackground#060920
tab.inactiveForeground#7a8ec9
tab.unfocusedActiveBorder#5865a8
terminal.ansiBlack#0a0e27
terminal.ansiBlue#5c9fff
terminal.ansiBrightBlack#3d4a7a
terminal.ansiBrightBlue#7ab8ff
terminal.ansiBrightCyan#00f0ff
terminal.ansiBrightGreen#05ffa1
terminal.ansiBrightMagenta#d896ff
terminal.ansiBrightRed#ff2a6d
terminal.ansiBrightWhite#e4f0fb
terminal.ansiBrightYellow#fffb00
terminal.ansiCyan#00d4e8
terminal.ansiGreen#05ffa1
terminal.ansiMagenta#bd5eff
terminal.ansiRed#ff2a6d
terminal.ansiWhite#b8c5d6
terminal.ansiYellow#ffe600
terminal.background#0a0e27
terminal.foreground#e4f0fb
terminal.selectionBackground#2d356180
titleBar.activeBackground#060920
titleBar.activeForeground#00f0ff
titleBar.border#1e2548
titleBar.inactiveBackground#0a0e27
titleBar.inactiveForeground#5865a8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5865a8	italic
string, string.quoted	#05ffa1	—
string.template	#05ffa1	—
string.regexp	#ff2a6d	—
constant.numeric, constant.language, constant.character	#d896ff	—
constant.character.escape, constant.other.placeholder	#00f0ff	—
keyword, storage.type, storage.modifier	#ff2a6d	bold
keyword.control	#ff2a6d	italic bold
keyword.operator	#00f0ff	—
keyword.operator.logical, keyword.operator.comparison, keyword.operator.assignment	#00f0ff	bold
entity.name.function, meta.function-call, support.function	#fffb00
entity.name.type, entity.name.class, support.type, support.class	#5c9fff	bold
entity.name.tag	#ff2a6d	bold
entity.other.attribute-name	#d896ff	italic
variable, variable.other	#e4f0fb	—
variable.parameter	#ffa057	italic
variable.language	#bd5eff	italic bold
variable.other.constant	#d896ff	bold
support.constant	#d896ff	—
meta.import, meta.export	#ff2a6d	—
punctuation.definition.tag	#ff2a6d	—
punctuation.separator, punctuation.terminator	#b8c5d6	—
meta.brace, punctuation.section	#00f0ff	—
markup.heading	#ff2a6d	bold
markup.italic	#05ffa1	italic
markup.bold	#fffb00	bold
markup.underline.link	#5c9fff	underline
markup.inline.raw, markup.fenced_code	#05ffa1	—
markup.quote	#5865a8	italic
markup.list	#ff2a6d	—
invalid, invalid.illegal	#ffffff	—
invalid.deprecated	#ffffff	—
entity.name.section	#5c9fff	bold
meta.property-name, support.type.property-name	#00f0ff	—
meta.object-literal.key	#00f0ff	—
support.variable	#d896ff	—
entity.name.module	#5c9fff	—
meta.decorator, meta.annotation	#bd5eff	—
entity.other.inherited-class	#5c9fff	italic
support.other.namespace	#5c9fff	—
meta.method.declaration, meta.method	#fffb00	—
support.type.primitive	#d896ff	—
entity.name.namespace	#5c9fff	—

VS Code preview

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

Ultimate VSCode Themes & Icons Pack - 50+ Professional Themes with 11 Icon Sets — Neon Genesis Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

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

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

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

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

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#e091ff
activityBar.background#8355a0
activityBar.border#42305a
activityBar.foreground#ffffff
activityBar.inactiveForeground#ffffff
activityBarBadge.background#a94cce
breadcrumb.foreground#e091ff
button.background#a94cce
button.foreground#f4d0ff
button.hoverBackground#ac71c4
editor.selectionBackground#e091ff2f
editorCursor.foreground#15ff00
editorGroupHeader.tabsBackground#242222
editorHoverWidget.border#a94cce
editorHoverWidget.foreground#e091ff
editorLineNumber.activeForeground#8355a0
editorLineNumber.foreground#93b853
editorSuggestWidget.foreground#15ff00
focusBorder#55ff00
foreground#c99ec7
icon.foreground#55ff00
input.foreground#e091ff
input.placeholderForeground#f4d0ff
list.activeSelectionBackground#8a55e06b
list.activeSelectionForeground#55ff00
list.focusBackground#8a55e06b
list.highlightForeground#a94cce
list.hoverBackground#8a55e06b
notifications.border#a94cce
notifications.foreground#e091ff
panel.border#15ff00
panelTitle.activeBorder#55ff00
panelTitle.activeForeground#a94cce
progressBar.background#e091ff
scrollbar.shadow#986FD8
selection.background#18172421
sideBar.background#1f1d2ed5
sideBar.border#000000
sideBar.foreground#ffffffc5
sideBarSectionHeader.background#42305a
sideBarSectionHeader.border#55ff00
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffff
statusBar.background#93b853
statusBar.border#000000
statusBar.debuggingBackground#f4d0ff
statusBar.debuggingForeground#a94cce
statusBar.foreground#000000
statusBarItem.hoverBackground#ac71c4
statusBarItem.remoteBackground#f4d0ff
statusBarItem.remoteForeground#a94cce
tab.activeBorder#a94cce
tab.activeForeground#ffffff
terminal.background#1b1a1a
terminal.border#a94cce
terminal.foreground#e091ff
terminal.selectionBackground#e091ff62
terminalCursor.background#55ff00
terminalCursor.foreground#a94cce
textLink.foreground#55ff00
titleBar.activeBackground#93b853
titleBar.activeForeground#000000
tree.indentGuidesStroke#55ff00
widget.shadow#1b1a1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#cac0c093	—
variable, string constant.other.placeholder	#c99ec7	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#fd0b34	—
keyword, storage.type, storage.modifier	#deadfd	—
constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#15ff00c5	—
keyword.control	#b06cfdf6	—
punctuation, meta.tag	#edd9f8	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#9b68ff	—
Others	#AE50F7	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#deadfd	—
meta.block variable.other	#f07178	—
support.other.variable, string.other.link	#f07178	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#ae5aaa	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#8bd450	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#fa04d3	—
support.type	#fa04d3	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	italic
entity.name.method.js	#82AAFF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#C792EA	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#e091ff	italic
entity.other.attribute-name.class	#e091ff	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFCB6B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F78C6C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF5370	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C17E70	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82AAFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f07178	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#EEFFFF	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f07178	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#f07178	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#e091ff	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#EEFFFF	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—
variable.other.constant, variable.other.object, variable.parameter	#ebab25	—

VS Code preview

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

Ultimate VSCode Themes & Icons Pack - 50+ Professional Themes with 11 Icon Sets — Neon Orchid Protocol

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.activeBorder#e091ff
activityBar.background#8355a0
activityBar.border#42305a
activityBar.foreground#ffffff
activityBar.inactiveForeground#ffffff
activityBarBadge.background#a94cce
breadcrumb.foreground#e091ff
button.background#a94cce
button.foreground#f4d0ff
button.hoverBackground#ac71c4
editor.selectionBackground#e091ff2f
editorCursor.foreground#15ff00
editorGroupHeader.tabsBackground#242222
editorHoverWidget.border#a94cce
editorHoverWidget.foreground#e091ff
editorLineNumber.activeForeground#8355a0
editorLineNumber.foreground#93b853
editorSuggestWidget.foreground#15ff00
focusBorder#55ff00
foreground#c99ec7
icon.foreground#55ff00
input.foreground#e091ff
input.placeholderForeground#f4d0ff
list.activeSelectionBackground#8a55e06b
list.activeSelectionForeground#55ff00
list.focusBackground#8a55e06b
list.highlightForeground#a94cce
list.hoverBackground#8a55e06b
notifications.border#a94cce
notifications.foreground#e091ff
panel.border#15ff00
panelTitle.activeBorder#55ff00
panelTitle.activeForeground#a94cce
progressBar.background#e091ff
scrollbar.shadow#986FD8
selection.background#7F47CF
sideBar.border#000000
sideBar.foreground#ffffffc5
sideBarSectionHeader.background#42305a
sideBarSectionHeader.border#55ff00
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffff
statusBar.background#93b853
statusBar.border#000000
statusBar.debuggingBackground#f4d0ff
statusBar.debuggingForeground#a94cce
statusBar.foreground#000000
statusBarItem.hoverBackground#ac71c4
statusBarItem.remoteBackground#f4d0ff
statusBarItem.remoteForeground#a94cce
tab.activeBorder#a94cce
tab.activeForeground#ffffff
terminal.background#1b1a1a
terminal.border#a94cce
terminal.foreground#e091ff
terminal.selectionBackground#e091ff62
terminalCursor.background#55ff00
terminalCursor.foreground#a94cce
textLink.foreground#55ff00
titleBar.activeBackground#93b853
titleBar.activeForeground#000000
tree.indentGuidesStroke#55ff00
widget.shadow#1b1a1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#3d8a3c	—
variable, string constant.other.placeholder	#c99ec7	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#fd0b34	—
keyword, storage.type, storage.modifier	#78FFC0	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#15ff00c5	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#9b68ff	—
Others	#AE50F7	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#C030F0	—
meta.block variable.other	#f07178	—
support.other.variable, string.other.link	#f07178	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#ae5aaa	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#D8A8F0	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#fa04d3	—
support.type	#fa04d3	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	italic
entity.name.method.js	#82AAFF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#C792EA	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#e091ff	italic
entity.other.attribute-name.class	#e091ff	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFCB6B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F78C6C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF5370	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C17E70	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82AAFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f07178	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#EEFFFF	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f07178	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#f07178	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#e091ff	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#EEFFFF	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—
variable.other.constant, variable.other.object, variable.parameter	#ebab25	—

VS Code preview

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

Ultimate VSCode Themes & Icons Pack - 50+ Professional Themes with 11 Icon Sets — Neon Overdrive

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.activeBackground#00ffff10
activityBar.activeBorder#00ffff
activityBar.background#06060a
activityBar.foreground#00ffff
activityBar.inactiveForeground#6a6a8f
activityBarBadge.background#ff00ff
activityBarBadge.foreground#0a0a0f
badge.background#00ffaa
badge.foreground#0a0a0f
breadcrumb.activeSelectionForeground#e0e0ff
breadcrumb.background#0a0a0f
breadcrumb.focusForeground#00ffff
breadcrumb.foreground#a0a0d0
breadcrumbPicker.background#0d0d14
button.background#00ffff
button.foreground#0a0a0f
button.hoverBackground#4dffff
button.secondaryBackground#8a2be2
button.secondaryForeground#e0e0ff
button.secondaryHoverBackground#a64dff
diffEditor.insertedTextBackground#00ffaa20
diffEditor.removedTextBackground#ff008020
dropdown.background#0d0d14
dropdown.border#00ffff
dropdown.foreground#e0e0ff
editor.background#0a0a0f
editor.findMatchBackground#ffff0050
editor.findMatchHighlightBackground#ffff0030
editor.findRangeHighlightBackground#00ffff10
editor.foldBackground#00ffff10
editor.foreground#e0e0ff
editor.hoverHighlightBackground#00ffff15
editor.lineHighlightBorder#00ffff20
editor.rangeHighlightBackground#00ffff10
editor.selectionBackground#00ffff30
editor.selectionHighlightBackground#00ffff20
editor.wordHighlightBackground#ff00ff20
editor.wordHighlightStrongBackground#ff00ff30
editorBracketHighlight.foreground1#00ffff
editorBracketHighlight.foreground2#ff00ff
editorBracketHighlight.foreground3#ffff00
editorBracketHighlight.foreground4#00ffaa
editorBracketHighlight.foreground5#8a2be2
editorBracketHighlight.foreground6#ff0080
editorBracketHighlight.unexpectedBracket.foreground#ff0080
editorError.foreground#ff0080
editorGroup.border#00ffff30
editorGroup.dropBackground#00ffff10
editorGroupHeader.tabsBackground#06060a
editorGutter.addedBackground#00ffaa
editorGutter.deletedBackground#ff0080
editorGutter.modifiedBackground#ffff00
editorHoverWidget.background#0d0d14
editorHoverWidget.border#00ffff
editorInfo.foreground#00ffff
editorLineNumber.activeForeground#00ffff
editorLineNumber.foreground#6a6a8f
editorLink.activeForeground#00ffff
editorOverviewRuler.addedForeground#00ffaa
editorOverviewRuler.border#00ffff30
editorOverviewRuler.deletedForeground#ff0080
editorOverviewRuler.errorForeground#ff0080
editorOverviewRuler.infoForeground#00ffff
editorOverviewRuler.modifiedForeground#ffff00
editorOverviewRuler.selectionHighlightForeground#00ffff80
editorOverviewRuler.warningForeground#ffff00
editorOverviewRuler.wordHighlightForeground#ff00ff80
editorOverviewRuler.wordHighlightStrongForeground#ff00ffaa
editorSuggestWidget.background#0d0d14
editorSuggestWidget.foreground#e0e0ff
editorSuggestWidget.selectedBackground#00ffff20
editorWarning.foreground#ffff00
editorWidget.background#0d0d14
editorWidget.border#00ffff
errorForeground#ff0080
focusBorder#00ffff
foreground#e0e0ff
gitDecoration.conflictingResourceForeground#ff00ff
gitDecoration.deletedResourceForeground#ff0080
gitDecoration.ignoredResourceForeground#6a6a8f
gitDecoration.modifiedResourceForeground#ffff00
gitDecoration.untrackedResourceForeground#00ffaa
input.background#0d0d14
input.border#00ffff
input.foreground#e0e0ff
input.placeholderForeground#a0a0d0
inputOption.activeBorder#00ffff
inputValidation.errorBorder#ff0080
inputValidation.infoBorder#00ffff
inputValidation.warningBorder#ffff00
list.activeSelectionBackground#00ffff20
list.activeSelectionForeground#e0e0ff
list.dropBackground#00ffff10
list.errorForeground#ff0080
list.focusBackground#00ffff15
list.highlightForeground#00ffff
list.hoverBackground#00ffff10
list.inactiveSelectionBackground#6a6a8f20
list.warningForeground#ffff00
panel.background#0d0d14
panel.border#00ffff30
panelTitle.activeBorder#00ffff
panelTitle.activeForeground#e0e0ff
panelTitle.inactiveForeground#a0a0d0
progressBar.background#00ffff
selection.background#00ffff40
settings.checkboxBackground#0d0d14
settings.checkboxBorder#00ffff
settings.checkboxForeground#00ffff
settings.dropdownBackground#0d0d14
settings.dropdownBorder#00ffff
settings.dropdownForeground#e0e0ff
settings.headerForeground#e0e0ff
settings.modifiedItemIndicator#00ffff
settings.numberInputBackground#0d0d14
settings.numberInputBorder#00ffff
settings.numberInputForeground#e0e0ff
settings.textInputBackground#0d0d14
settings.textInputBorder#00ffff
settings.textInputForeground#e0e0ff
sideBar.background#0d0d14
sideBarSectionHeader.background#06060a
sideBarSectionHeader.border#00ffff30
sideBarTitle.foreground#e0e0ff
statusBar.background#06060a
statusBar.debuggingBackground#ff00ff
statusBar.debuggingForeground#0a0a0f
statusBar.foreground#e0e0ff
statusBar.noFolderBackground#8a2be2
statusBar.noFolderForeground#e0e0ff
statusBarItem.prominentBackground#00ffff
statusBarItem.prominentForeground#0a0a0f
statusBarItem.prominentHoverBackground#4dffff
statusBarItem.remoteBackground#00ffaa
statusBarItem.remoteForeground#0a0a0f
tab.activeBackground#0a0a0f
tab.activeBorderTop#00ffff
tab.activeForeground#e0e0ff
tab.border#00ffff30
tab.inactiveBackground#06060a
tab.inactiveForeground#a0a0d0
terminal.ansiBlack#06060a
terminal.ansiBlue#00ffff
terminal.ansiBrightBlack#6a6a8f
terminal.ansiBrightBlue#4dffff
terminal.ansiBrightCyan#4dffff
terminal.ansiBrightGreen#4dffcc
terminal.ansiBrightMagenta#ff4dff
terminal.ansiBrightRed#ff4da6
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffff4d
terminal.ansiCyan#00ffff
terminal.ansiGreen#00ffaa
terminal.ansiMagenta#ff00ff
terminal.ansiRed#ff0080
terminal.ansiWhite#e0e0ff
terminal.ansiYellow#ffff00
terminal.background#0a0a0f
terminal.foreground#e0e0ff
titleBar.activeBackground#06060a
titleBar.activeForeground#e0e0ff
titleBar.inactiveBackground#06060a
titleBar.inactiveForeground#6a6a8f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#00ffff	—
comment, punctuation.definition.comment	#6a6a8f	italic
comment keyword.codetag.notation, comment.block.documentation keyword	#8a2be2	—
string	#00ffaa	—
punctuation.definition.string.begin, punctuation.definition.string.end	#00ffaa	—
constant, variable.other.constant	#ff00ff	—
constant.numeric	#ff00ff	—
keyword, storage.type, storage.modifier	#00ffff	bold
entity.name.function, meta.function-call	#ffff00	—
variable.parameter	#e0e0ff	italic
entity.name.type.class, entity.name.class	#8a2be2	—
entity.name.type, storage.type	#8a2be2	italic
variable	#e0e0ff	—
variable.language	#ff0080	italic
entity.name.tag	#00ffff	—
entity.other.attribute-name	#ffff00	italic
meta.selector	#00ffff	—
support.type.property-name	#ff00ff	—
keyword.operator	#00ffff	—
punctuation	#a0a0d0	—
string.regexp	#ff00ff	—
markup.heading	#00ffff	bold
markup.bold	#e0e0ff	bold
markup.italic	#e0e0ff	italic
markup.underline.link	#00ffff	—
markup.inline.raw	#00ffaa	—
invalid	#ff0080	underline
invalid.deprecated	#ff0080	strikethrough