Theme Icon Pack

Name: Theme Icon Pack
Author: SecureDev

Publisher: SecureDevThemes in package: 5

Theme Icon Pack is a comprehensive VS Code extension featuring beautiful dark and light themes with matching icon sets, providing a complete visual experience for developers. 🚀

Open in VS Code GitHub

Color themes

VS Code preview

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

Theme Icon Pack — CharmMono 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#a87ffbff
activityBar.background#171f2bff
activityBar.border#333e4fff
activityBar.foreground#d9dfe7ff
activityBar.inactiveForeground#738295ff
activityBarBadge.background#a87ffbff
activityBarBadge.foreground#000000ff
badge.background#603bceff
badge.foreground#e0ccffff
breadcrumb.activeSelectionForeground#a4afbdff
breadcrumb.focusForeground#d9dfe7ff
breadcrumb.foreground#8b98a9ff
breadcrumbPicker.background#171f2bff
button.background#a87ffbff
button.foreground#000000ff
button.hoverBackground#b895fdff
button.secondaryBackground#475365ff
button.secondaryForeground#ffffffff
button.secondaryHoverBackground#5d6a7dff
checkbox.background#1f2939ff
checkbox.border#3d495aff
checkbox.foreground#d9dfe7ff
commandCenter.activeBackground#1f2939ff
commandCenter.activeBorder#3d495aff
commandCenter.activeForeground#d9dfe7ff
commandCenter.background#171f2bff
commandCenter.border#333e4fff
commandCenter.foreground#8b98a9ff
commandCenter.inactiveBorder#333e4fff
commandCenter.inactiveForeground#738295ff
debugToolBar.background#1f2939ff
descriptionForeground#8b98a9ff
diffEditor.insertedTextBackground#17975f40
diffEditor.removedTextBackground#df404740
dropdown.background#1f2939ff
dropdown.border#3d495aff
dropdown.foreground#d9dfe7ff
dropdown.listBackground#10151dff
editor.background#171f2bff
editor.findMatchBackground#83431466
editor.findMatchBorder#ffa23eff
editor.findMatchHighlightBackground#83431499
editor.findMatchHighlightBorder#834314ff
editor.focusedStackFrameHighlightBackground#2b6a3033
editor.foldBackground#1c2533ff
editor.foreground#d9dfe7ff
editor.inactiveSelectionBackground#264dcb4d
editor.lineHighlightBackground#1f2939ff
editor.linkedEditingBackground#4d21bb99
editor.selectionBackground#264dcb80
editor.selectionHighlightBackground#333e4f99
editor.selectionHighlightBorder#333e4fff
editor.stackFrameHighlightBackground#C6902625
editor.wordHighlightBackground#882d0066
editor.wordHighlightBorder#882d00ff
editor.wordHighlightStrongBackground#882d0099
editor.wordHighlightStrongBorder#882d00ff
editorBracketHighlight.foreground1#85cdf1ff
editorBracketHighlight.foreground2#ffd395ff
editorBracketHighlight.foreground3#bd9cfeff
editorBracketHighlight.foreground4#85cdf1ff
editorBracketHighlight.foreground5#ffd395ff
editorBracketHighlight.foreground6#bd9cfeff
editorBracketMatch.background#004b5e99
editorBracketMatch.border#004b5eff
editorCodeLens.foreground#8b98a9ff
editorCursor.foreground#e0ccffff
editorError.foreground#fc8f8eff
editorGhostText.foreground#5d6a7dff
editorGroup.border#333e4fff
editorGroupHeader.tabsBackground#10151dff
editorGroupHeader.tabsBorder#333e4fff
editorGutter.addedBackground#17975f80
editorGutter.deletedBackground#df4047ff
editorGutter.foldingControlForeground#8b98a9ff
editorGutter.modifiedBackground#3c60ddff
editorHint.foreground#66ce98ff
editorIndentGuide.activeBackground#475365ff
editorIndentGuide.background#333e4fff
editorInfo.foreground#a2b6ffff
editorInlayHint.background#73829533
editorInlayHint.foreground#8b98a9ff
editorInlayHint.typeBackground#73829533
editorInlayHint.typeForeground#8b98a9ff
editorLightBulb.foreground#ffc26eff
editorLineNumber.activeForeground#d9dfe7ff
editorLineNumber.foreground#475365ff
editorLink.activeForeground#a87ffbff
editorOverviewRuler.border#000000ff
editorWarning.foreground#ffc26eff
editorWhitespace.foreground#475365ff
editorWidget.background#10151dff
editorWidget.border#5d6a7dff
errorForeground#f76769ff
focusBorder#8964e8ff
foreground#d9dfe7ff
gitDecoration.addedResourceForeground#17b877ff
gitDecoration.conflictingResourceForeground#ffc26eff
gitDecoration.deletedResourceForeground#f76769ff
gitDecoration.ignoredResourceForeground#738295ff
gitDecoration.modifiedResourceForeground#708fffff
gitDecoration.submoduleResourceForeground#738295ff
gitDecoration.untrackedResourceForeground#17b877ff
icon.foreground#d9dfe7ff
input.background#1f2939ff
input.border#3d495aff
input.foreground#d9dfe7ff
input.placeholderForeground#8b98a9ff
inputOption.activeBorder#8964e8ff
inputValidation.errorBorder#f76769ff
keybindingLabel.background#171f2bff
keybindingLabel.border#333e4fff
keybindingLabel.bottomBorder#333e4fff
keybindingLabel.foreground#d9dfe7ff
list.activeSelectionBackground#1f2939ff
list.activeSelectionForeground#d9dfe7ff
list.errorForeground#fa7b7cff
list.focusBackground#340099ff
list.hoverBackground#141b25ff
list.hoverForeground#d9dfe7ff
list.inactiveFocusBackground#34009999
list.inactiveSelectionBackground#1f2939ff
list.inactiveSelectionForeground#d9dfe7ff
list.warningForeground#ffb256ff
menu.background#10151dff
menu.border#3d495aff
menu.foreground#d9dfe7ff
menu.selectionBackground#1f2939ff
menu.selectionForeground#d9dfe7ff
menu.separatorBackground#333e4fff
notificationCenterHeader.background#1f2939ff
notificationCenterHeader.foreground#738295ff
notifications.background#242e3fff
notifications.border#333e4fff
notifications.foreground#d9dfe7ff
notificationsErrorIcon.foreground#f76769ff
notificationsInfoIcon.foreground#8b98a9ff
notificationsWarningIcon.foreground#ffa23eff
panel.background#10151dff
panel.border#333e4fff
panelInput.border#333e4fff
panelSection.border#333e4fff
panelSectionHeader.background#0000
panelSectionHeader.foreground#d9dfe7ff
panelTitle.activeBorder#a87ffbff
panelTitle.activeForeground#d9dfe7ff
panelTitle.inactiveForeground#a4afbdff
peekView.border#a87ffbff
peekViewEditor.background#10151dff
peekViewEditor.matchHighlightBackground#83431466
peekViewEditor.matchHighlightBorder#ffa23e4d
peekViewResult.background#080a0eff
peekViewResult.matchHighlightBackground#83431466
peekViewResult.selectionBackground#333e4fff
pickerGroup.border#475365ff
pickerGroup.foreground#d9dfe7ff
problemsErrorIcon.foreground#f76769ff
problemsInfoIcon.foreground#8b98a9ff
problemsWarningIcon.foreground#ffa23eff
progressBar.background#8964e8ff
quickInput.background#10151dff
quickInput.foreground#d9dfe7ff
quickInputTitle.background#10151dff
sash.hoverBorder#a87ffbff
scrollbar.shadow#0008
scrollbarSlider.activeBackground#6a737d88
scrollbarSlider.background#6a737d33
scrollbarSlider.hoverBackground#6a737d44
settings.headerForeground#d9dfe7ff
settings.modifiedItemIndicator#5173f1ff
sideBar.background#10151dff
sideBar.border#333e4fff
sideBar.foreground#d9dfe7ff
sideBarSectionHeader.background#10151dff
sideBarSectionHeader.border#333e4fff
sideBarSectionHeader.foreground#d9dfe7ff
sideBarTitle.foreground#d9dfe7ff
statusBar.background#1f2939ff
statusBar.border#333e4fff
statusBar.debuggingBackground#891524ff
statusBar.debuggingForeground#ffffffff
statusBar.foreground#a4afbdff
statusBar.noFolderBackground#1f2939ff
statusBarItem.prominentBackground#282e34
tab.activeBackground#171f2bff
tab.activeBorder#171f2bff
tab.activeBorderTop#a87ffbff
tab.activeForeground#d9dfe7ff
tab.border#333e4fff
tab.hoverBackground#171f2bff
tab.inactiveBackground#10151dff
tab.inactiveForeground#a4afbdff
tab.unfocusedActiveBorder#171f2bff
tab.unfocusedActiveBorderTop#333e4fff
tab.unfocusedActiveForeground#738295ff
tab.unfocusedHoverBackground#1f2939ff
tab.unfocusedHoverForeground#a4afbdff
tab.unfocusedInactiveForeground#738295ff
terminal.ansiBlack#738295ff
terminal.ansiBlue#708fffff
terminal.ansiBrightBlack#8b98a9ff
terminal.ansiBrightBlue#a2b6ffff
terminal.ansiBrightCyan#71c2eeff
terminal.ansiBrightGreen#66ce98ff
terminal.ansiBrightMagenta#c8aaffff
terminal.ansiBrightRed#fc8f8eff
terminal.ansiBrightWhite#fafbfeff
terminal.ansiBrightYellow#ffc26eff
terminal.ansiCyan#25a6e9ff
terminal.ansiGreen#17b877ff
terminal.ansiMagenta#a87ffbff
terminal.ansiRed#f76769ff
terminal.ansiWhite#a4afbdff
terminal.ansiYellow#ffa23eff
terminal.foreground#a4afbdff
terminal.tab.activeBorder#a87ffbff
terminalCursor.background#5d6a7dff
terminalCursor.foreground#c8aaffff
textBlockQuote.background#1f2939ff
textBlockQuote.border#475365ff
textCodeBlock.background#333e4fff
textLink.activeForeground#c8aaffff
textLink.foreground#b895fdff
textPreformat.foreground#a4afbdff
textSeparator.foreground#5d6a7dff
titleBar.activeBackground#171f2bff
titleBar.activeForeground#d9dfe7ff
titleBar.border#333e4fff
titleBar.inactiveBackground#10151dff
titleBar.inactiveForeground#738295ff
tree.indentGuidesStroke#333e4fff
welcomePage.buttonBackground#333e4fff
welcomePage.buttonHoverBackground#475365ff
widget.shadow#080a0e4d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#7f8d9fff	—
constant, entity.name.constant, variable.other.constant, variable.language	#92a9ffff	—
entity, entity.name	#bd9cfeff	—
variable.parameter.function	#d9dfe7ff	—
entity.name.tag	#77d5a3ff	—
keyword	#fd8da3ff	—
storage, storage.type	#fd8da3ff	—
annotation	#fd8da3ff	—
storage.modifier.package, storage.modifier.import, storage.type.java	#d9dfe7ff	—
string, punctuation.definition.string, string punctuation.section.embedded source	#77d5a3ff	—
string.quoted.double.html, string.quoted.single.html, string.unquoted.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.xml, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, string punctuation.section.embedded source	#85cdf1ff	—
support	#92a9ffff	—
support.type.property-name	#85cdf1ff	—
meta.property-name	#92a9ffff	—
variable	#ffd395ff	—
variable.other	#d9dfe7ff	—
invalid.broken	#ffc6d0ff	italic
invalid.deprecated	#ffc6d0ff	italic
invalid.illegal	#ffc6d0ff	italic
invalid.unimplemented	#ffc6d0ff	italic
carriage-return	#1f2939ff	italic underline
message.error	#ffc6d0ff	—
string source	#d9dfe7ff	—
string variable	#92a9ffff	—
source.regexp, string.regexp	#77d5a3ff	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#77d5a3ff	—
string.regexp constant.character.escape	#77d5a3ff	bold
support.constant	#92a9ffff	—
support.variable	#92a9ffff	—
meta.module-reference	#92a9ffff	—
punctuation.definition.list.begin.markdown	#ffd395ff	—
markup.heading, markup.heading entity.name	#92a9ffff	bold
markup.quote	#77d5a3ff	—
markup.italic	#d9dfe7ff	italic
markup.bold	#d9dfe7ff	bold
markup.raw	#92a9ffff	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#ffc6d0ff	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#77d5a3ff	—
markup.changed, punctuation.definition.changed	#ffd395ff	—
markup.ignored, markup.untracked	#333e4fff	—
meta.diff.range	#bd9cfeff	bold
meta.diff.header	#92a9ffff	—
meta.separator	#92a9ffff	bold
meta.output	#92a9ffff	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#9ca7b6ff	—
brackethighlighter.unmatched	#ffc6d0ff	—
constant.other.reference.link, string.other.link	#77d5a3ff	underline
—	—	—
fenced_code.block.language	#92a9ffff	—
markup.inline.raw.string.markdown	#77d5a3ff	—
markup.bold, punctuation.definition.bold	#ffd395ff	bold
markup.italic, punctuation.definition.italic	#85cdf1ff	italic
markup.strikethrough, punctuation.definition.strikethrough	#ffc6d0ff	strikethrough

VS Code preview

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

Theme Icon Pack — CharmMono Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

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

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

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

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

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#a87ffbff
activityBar.background#ffffffff
activityBar.border#d9dfe7ff
activityBar.foreground#333e4fff
activityBar.inactiveForeground#8b98a9ff
activityBarBadge.background#6f4cdeff
activityBarBadge.foreground#ffffffff
badge.background#f2e6ffff
badge.foreground#6f4cdeff
breadcrumb.activeSelectionForeground#5d6a7dff
breadcrumb.focusForeground#333e4fff
breadcrumb.foreground#738295ff
breadcrumbPicker.background#fafbfeff
button.background#6f4cdeff
button.foreground#ffffffff
button.hoverBackground#603bceff
button.secondaryBackground#d9dfe7ff
button.secondaryForeground#000000ff
button.secondaryHoverBackground#a4afbdff
checkbox.background#ffffffff
checkbox.border#bfc7d2ff
checkbox.foreground#333e4fff
commandCenter.activeBackground#fafbfeff
commandCenter.activeBorder#bfc7d2ff
commandCenter.activeForeground#333e4fff
commandCenter.background#ffffffff
commandCenter.border#d9dfe7ff
commandCenter.foreground#5d6a7dff
commandCenter.inactiveBorder#d9dfe7ff
commandCenter.inactiveForeground#738295ff
debugToolBar.background#ffffffff
descriptionForeground#5d6a7dff
diffEditor.insertedTextBackground#daf8e4ff
diffEditor.removedTextBackground#ffe5e4ff
dropdown.background#ffffffff
dropdown.border#bfc7d2ff
dropdown.foreground#333e4fff
dropdown.listBackground#f4f7fdff
editor.background#ffffffff
editor.findMatchBackground#df812866
editor.findMatchBorder#df8128ff
editor.findMatchHighlightBackground#ffc26e66
editor.findMatchHighlightBorder#ffc26eff
editor.focusedStackFrameHighlightBackground#28a74525
editor.foldBackground#f4f7fdff
editor.foreground#1f2939ff
editor.inactiveSelectionBackground#c7d3ff66
editor.lineHighlightBackground#f4f7fdff
editor.linkedEditingBackground#a87ffb99
editor.selectionBackground#c7d3ff99
editor.selectionHighlightBackground#98e4b999
editor.selectionHighlightBorder#98e4b999
editor.stackFrameHighlightBackground#ffd33d33
editor.wordHighlightBackground#ffc9aa66
editor.wordHighlightBorder#ffc9aaff
editor.wordHighlightStrongBackground#ffc9aa66
editor.wordHighlightStrongBorder#ffc9aaff
editorBracketHighlight.foreground1#0075a2ff
editorBracketHighlight.foreground2#d07826ff
editorBracketHighlight.foreground3#6f4cdeff
editorBracketHighlight.foreground4#0075a2ff
editorBracketHighlight.foreground5#d07826ff
editorBracketHighlight.foreground6#6f4cdeff
editorBracketMatch.background#abe1f899
editorBracketMatch.border#abe1f8ff
editorCodeLens.foreground#5d6a7dff
editorCursor.foreground#603bceff
editorError.foreground#df4047ff
editorGhostText.foreground#a4afbdff
editorGroup.border#d9dfe7ff
editorGroupHeader.tabsBackground#f4f7fdff
editorGroupHeader.tabsBorder#d9dfe7ff
editorGutter.addedBackground#98e4b9ff
editorGutter.deletedBackground#fc8f8eff
editorGutter.foldingControlForeground#5d6a7dff
editorGutter.modifiedBackground#a2b6ffff
editorHint.foreground#17975fff
editorIndentGuide.activeBackground#bfc7d2ff
editorIndentGuide.background#e7ebf2ff
editorInfo.foreground#5173f1ff
editorInlayHint.background#7382951a
editorInlayHint.foreground#738295ff
editorInlayHint.typeBackground#7382951a
editorInlayHint.typeForeground#738295ff
editorLightBulb.foreground#df8128ff
editorLineNumber.activeForeground#1f2939ff
editorLineNumber.foreground#bfc7d2ff
editorLink.activeForeground#6f4cdeff
editorOverviewRuler.border#ffffffff
editorWarning.foreground#df8128ff
editorWhitespace.foreground#bfc7d2ff
editorWidget.background#f4f7fdff
editorWidget.border#a4afbdff
errorForeground#c1313bff
focusBorder#8964e8ff
foreground#1f2939ff
gitDecoration.addedResourceForeground#17975fff
gitDecoration.conflictingResourceForeground#c16f23ff
gitDecoration.deletedResourceForeground#df4047ff
gitDecoration.ignoredResourceForeground#8b98a9ff
gitDecoration.modifiedResourceForeground#5173f1ff
gitDecoration.submoduleResourceForeground#8b98a9ff
gitDecoration.untrackedResourceForeground#17975fff
icon.foreground#1f2939ff
input.background#ffffffff
input.border#bfc7d2ff
input.foreground#333e4fff
input.placeholderForeground#8b98a9ff
inputOption.activeBorder#a87ffbff
inputValidation.errorBorder#c1313bff
keybindingLabel.background#f4f7fdff
keybindingLabel.border#d9dfe7ff
keybindingLabel.bottomBorder#d9dfe7ff
keybindingLabel.foreground#333e4fff
list.activeSelectionBackground#d9dfe7ff
list.activeSelectionForeground#333e4fff
list.errorForeground#c1313bff
list.focusBackground#e0ccffff
list.hoverBackground#e7ebf2ff
list.hoverForeground#333e4fff
list.inactiveFocusBackground#f2e6ffff
list.inactiveSelectionBackground#d9dfe7ff
list.inactiveSelectionForeground#333e4fff
list.warningForeground#c16f23ff
menu.background#f4f7fdff
menu.border#bfc7d2ff
menu.foreground#333e4fff
menu.selectionBackground#d9dfe7ff
menu.selectionForeground#333e4fff
menu.separatorBackground#d9dfe7ff
notificationCenterHeader.background#ffffffff
notificationCenterHeader.foreground#5d6a7dff
notifications.background#f4f7fdff
notifications.border#d9dfe7ff
notifications.foreground#333e4fff
notificationsErrorIcon.foreground#df4047ff
notificationsInfoIcon.foreground#738295ff
notificationsWarningIcon.foreground#df8128ff
panel.background#f4f7fdff
panel.border#d9dfe7ff
panelInput.border#d9dfe7ff
panelSection.border#d9dfe7ff
panelSectionHeader.background#0000
panelSectionHeader.foreground#333e4fff
panelTitle.activeBorder#8964e8ff
panelTitle.activeForeground#333e4fff
panelTitle.inactiveForeground#5d6a7dff
peekView.border#8964e8ff
peekViewEditor.background#f4f7fdff
peekViewEditor.matchHighlightBackground#df812866
peekViewEditor.matchHighlightBorder#df8128ff
peekViewResult.background#e7ebf2ff
peekViewResult.matchHighlightBackground#df812866
peekViewResult.selectionBackground#d9dfe7ff
pickerGroup.border#d9dfe7ff
pickerGroup.foreground#333e4fff
problemsErrorIcon.foreground#df4047ff
problemsInfoIcon.foreground#738295ff
problemsWarningIcon.foreground#df8128ff
progressBar.background#a87ffbff
quickInput.background#ffffffff
quickInput.foreground#333e4fff
quickInputTitle.background#ffffffff
sash.hoverBorder#8964e8ff
scrollbar.shadow#6a737d33
scrollbarSlider.activeBackground#959da588
scrollbarSlider.background#959da533
scrollbarSlider.hoverBackground#959da544
settings.headerForeground#333e4fff
settings.modifiedItemIndicator#708fffff
sideBar.background#f4f7fdff
sideBar.border#d9dfe7ff
sideBar.foreground#475365ff
sideBarSectionHeader.background#f4f7fdff
sideBarSectionHeader.border#d9dfe7ff
sideBarSectionHeader.foreground#333e4fff
sideBarTitle.foreground#333e4fff
statusBar.background#ffffffff
statusBar.border#d9dfe7ff
statusBar.debuggingBackground#fc8f8eff
statusBar.debuggingForeground#000000ff
statusBar.foreground#5d6a7dff
statusBar.noFolderBackground#ffffffff
statusBarItem.prominentBackground#e8eaed
tab.activeBackground#ffffffff
tab.activeBorder#ffffffff
tab.activeBorderTop#8964e8ff
tab.activeForeground#333e4fff
tab.border#d9dfe7ff
tab.hoverBackground#ffffffff
tab.inactiveBackground#f4f7fdff
tab.inactiveForeground#5d6a7dff
tab.unfocusedActiveBorder#ffffffff
tab.unfocusedActiveBorderTop#d9dfe7ff
tab.unfocusedActiveForeground#a4afbdff
tab.unfocusedHoverBackground#ffffffff
tab.unfocusedHoverForeground#5d6a7dff
tab.unfocusedInactiveForeground#a4afbdff
terminal.ansiBlack#333e4fff
terminal.ansiBlue#3c60ddff
terminal.ansiBrightBlack#000000ff
terminal.ansiBrightBlue#002487ff
terminal.ansiBrightCyan#00607eff
terminal.ansiBrightGreen#00522fff
terminal.ansiBrightMagenta#4d21bbff
terminal.ansiBrightRed#a52430ff
terminal.ansiBrightWhite#475365ff
terminal.ansiBrightYellow#904b1aff
terminal.ansiCyan#0075a2ff
terminal.ansiGreen#007b49ff
terminal.ansiMagenta#6f4cdeff
terminal.ansiRed#d03941ff
terminal.ansiWhite#5d6a7dff
terminal.ansiYellow#a65921ff
terminal.foreground#475365ff
terminal.tab.activeBorder#8964e8ff
terminalCursor.background#a4afbdff
terminalCursor.foreground#6f4cdeff
textBlockQuote.background#fafbfeff
textBlockQuote.border#d9dfe7ff
textCodeBlock.background#f4f7fdff
textLink.activeForeground#4d21bbff
textLink.foreground#6f4cdeff
textPreformat.foreground#5d6a7dff
textSeparator.foreground#a4afbdff
titleBar.activeBackground#ffffffff
titleBar.activeForeground#333e4fff
titleBar.border#d9dfe7ff
titleBar.inactiveBackground#f4f7fdff
titleBar.inactiveForeground#5d6a7dff
tree.indentGuidesStroke#d9dfe7ff
welcomePage.buttonBackground#f4f7fdff
welcomePage.buttonHoverBackground#d9dfe7ff
widget.shadow#1f293940

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#637083ff	—
constant, entity.name.constant, variable.other.constant, variable.language	#264dcbff	—
entity, entity.name	#6f4cdeff	—
variable.parameter.function	#1f2939ff	—
entity.name.tag	#007b49ff	—
keyword	#c43058ff	—
storage, storage.type	#c43058ff	—
annotation	#c43058ff	—
storage.modifier.package, storage.modifier.import, storage.type.java	#1f2939ff	—
string, punctuation.definition.string, string punctuation.section.embedded source	#007b49ff	—
string.quoted.double.html, string.quoted.single.html, string.unquoted.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.xml, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, string punctuation.section.embedded source	#0075a2ff	—
support	#264dcbff	—
support.type.property-name	#0075a2ff	—
meta.property-name	#264dcbff	—
variable	#d07826ff	—
variable.other	#1f2939ff	—
invalid.broken	#ad1c48ff	italic
invalid.deprecated	#ad1c48ff	italic
invalid.illegal	#ad1c48ff	italic
invalid.unimplemented	#ad1c48ff	italic
carriage-return	#fafbfeff	italic underline
message.error	#ad1c48ff	—
string source	#1f2939ff	—
string variable	#264dcbff	—
source.regexp, string.regexp	#007b49ff	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#007b49ff	—
string.regexp constant.character.escape	#007b49ff	bold
support.constant	#264dcbff	—
support.variable	#264dcbff	—
meta.module-reference	#264dcbff	—
punctuation.definition.list.begin.markdown	#d07826ff	—
markup.heading, markup.heading entity.name	#264dcbff	bold
markup.quote	#007b49ff	—
markup.italic	#1f2939ff	italic
markup.bold	#1f2939ff	bold
markup.raw	#264dcbff	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#ad1c48ff	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#007b49ff	—
markup.changed, punctuation.definition.changed	#d07826ff	—
markup.ignored, markup.untracked	#f4f7fdff	—
meta.diff.range	#6f4cdeff	bold
meta.diff.header	#264dcbff	—
meta.separator	#264dcbff	bold
meta.output	#264dcbff	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#5d6a7dff	—
brackethighlighter.unmatched	#ad1c48ff	—
constant.other.reference.link, string.other.link	#007b49ff	underline
fenced_code.block.language	#264dcbff	—
markup.inline.raw.string.markdown	#007b49ff	—
markup.bold, punctuation.definition.bold	#d07826ff	bold
markup.italic, punctuation.definition.italic	#0075a2ff	italic
markup.strikethrough, punctuation.definition.strikethrough	#ad1c48ff	strikethrough

VS Code preview

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

Theme Icon Pack — Goku Code 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.activeBackground#2a1f3d33
activityBar.activeBorder#ffaa33
activityBar.activeFocusBorder#ff9500
activityBar.background#0f0e1a
activityBar.border#2d2440
activityBar.dropBorder#ff9500
activityBar.foreground#4fc3f7
activityBar.inactiveForeground#6b5b73
activityBarBadge.background#ff9500
activityBarBadge.foreground#0f0e1a
badge.background#ffaa33
badge.foreground#0f0e1a
breadcrumb.activeSelectionForeground#ffaa33
breadcrumb.background#0f0e1a
breadcrumb.focusForeground#e8d5b7
breadcrumb.foreground#6b5b73
breadcrumbPicker.background#1a1828
button.background#ff9500
button.border#ff9500
button.foreground#0f0e1a
button.hoverBackground#ffaa33
button.secondaryBackground#2a1f3d
button.secondaryForeground#4fc3f7
button.secondaryHoverBackground#3d2a55
button.separator#0f0e1a66
charts.blue#4fc3f7
charts.foreground#e8d5b7
charts.green#4caf50
charts.lines#2d2440
charts.orange#ff9500
charts.purple#9c27b0
charts.red#f44336
charts.yellow#ffeb3b
checkbox.background#2a1f3d
checkbox.border#ff9500
checkbox.foreground#e8d5b7
debugConsole.errorForeground#f44336
debugConsole.infoForeground#4fc3f7
debugConsole.sourceForeground#e8d5b7
debugConsole.warningForeground#ffaa33
debugConsoleInputIcon.foreground#4fc3f7
debugIcon.breakpointCurrentStackframeForeground#4fc3f7
debugIcon.breakpointDisabledForeground#6b5b73
debugIcon.breakpointForeground#f44336
debugIcon.breakpointStackframeForeground#03a9f4
debugIcon.breakpointUnverifiedForeground#ffaa33
debugIcon.continueForeground#4caf50
debugIcon.disconnectForeground#6b5b73
debugIcon.pauseForeground#ffaa33
debugIcon.restartForeground#4fc3f7
debugIcon.startForeground#4caf50
debugIcon.stepBackForeground#03a9f4
debugIcon.stepIntoForeground#4fc3f7
debugIcon.stepOutForeground#4fc3f7
debugIcon.stepOverForeground#4fc3f7
debugIcon.stopForeground#f44336
debugToolBar.background#1a1828
debugToolBar.border#ff9500
diffEditor.diagonalFill#2d2440
diffEditor.insertedLineBackground#4caf5011
diffEditor.insertedTextBackground#4caf5022
diffEditor.removedLineBackground#f4433611
diffEditor.removedTextBackground#f4433622
dropdown.background#2a1f3d
dropdown.border#ff9500
dropdown.foreground#e8d5b7
dropdown.listBackground#1a1828
editor.background#0f0e1a
editor.findMatchBackground#ff950088
editor.findMatchHighlightBackground#ff950044
editor.foreground#e8d5b7
editor.lineHighlightBackground#1a1625
editor.rangeHighlightBackground#2a1f3d22
editor.selectionBackground#2a1f3d55
editor.selectionHighlightBackground#2a1f3d33
editor.wordHighlightBackground#3d2a5544
editor.wordHighlightStrongBackground#3d2a5566
editorBracketHighlight.foreground1#ff9500
editorBracketHighlight.foreground2#4fc3f7
editorBracketHighlight.foreground3#ffaa33
editorBracketHighlight.foreground4#4caf50
editorBracketHighlight.foreground5#9c27b0
editorBracketHighlight.foreground6#00bcd4
editorBracketHighlight.unexpectedBracket.foreground#f44336
editorBracketMatch.background#2a1f3d66
editorBracketMatch.border#ff9500
editorCodeLens.foreground#6b5b73
editorCursor.foreground#ffaa33
editorError.background#f4433611
editorError.border#f4433633
editorError.foreground#f44336
editorGroup.border#2d2440
editorGroup.dropBackground#2a1f3d44
editorGroup.emptyBackground#0f0e1a
editorGroup.focusedEmptyBorder#ff9500
editorGroupHeader.border#2d2440
editorGroupHeader.noTabsBackground#1a1828
editorGroupHeader.tabsBackground#1a1828
editorGroupHeader.tabsBorder#2d2440
editorGutter.addedBackground#4caf50
editorGutter.background#0f0e1a
editorGutter.commentRangeForeground#6b5b73
editorGutter.deletedBackground#f44336
editorGutter.foldingControlForeground#ff9500
editorGutter.modifiedBackground#ffaa33
editorHint.border#9c27b033
editorHint.foreground#9c27b0
editorHoverWidget.background#1a1828
editorHoverWidget.border#ff9500
editorHoverWidget.foreground#e8d5b7
editorHoverWidget.statusBarBackground#0f0e1a
editorIndentGuide.activeBackground#ff9500
editorIndentGuide.background#2d2440
editorInfo.background#4fc3f711
editorInfo.border#4fc3f733
editorInfo.foreground#4fc3f7
editorInlayHint.background#1a162555
editorInlayHint.foreground#8a7ca8
editorInlayHint.parameterForeground#ffaa33
editorInlayHint.typeForeground#9c27b0
editorLineNumber.activeForeground#ff9500
editorLineNumber.foreground#6b5b73
editorOverviewRuler.addedForeground#4caf50
editorOverviewRuler.background#1a1828
editorOverviewRuler.border#2d2440
editorOverviewRuler.bracketMatchForeground#ff9500
editorOverviewRuler.commonContentForeground#ffaa33
editorOverviewRuler.currentContentForeground#4caf50
editorOverviewRuler.deletedForeground#f44336
editorOverviewRuler.errorForeground#f44336
editorOverviewRuler.findMatchForeground#ff9500
editorOverviewRuler.incomingContentForeground#4fc3f7
editorOverviewRuler.infoForeground#4fc3f7
editorOverviewRuler.modifiedForeground#ffaa33
editorOverviewRuler.rangeHighlightForeground#ff950066
editorOverviewRuler.selectionHighlightForeground#2a1f3d
editorOverviewRuler.warningForeground#ffaa33
editorOverviewRuler.wordHighlightForeground#3d2a55
editorOverviewRuler.wordHighlightStrongForeground#3d2a5588
editorSuggestWidget.background#1a1828
editorSuggestWidget.border#ff9500
editorSuggestWidget.focusHighlightForeground#ff9500
editorSuggestWidget.foreground#e8d5b7
editorSuggestWidget.highlightForeground#ffaa33
editorSuggestWidget.selectedBackground#2a1f3d
editorSuggestWidget.selectedIconForeground#ff9500
editorWarning.background#ffaa3311
editorWarning.border#ffaa3333
editorWarning.foreground#ffaa33
editorWidget.background#1a1828
editorWidget.border#ff9500
editorWidget.foreground#e8d5b7
editorWidget.resizeBorder#ff9500
errorForeground#f44336
extensionBadge.remoteBackground#4fc3f7
extensionBadge.remoteForeground#0f0e1a
extensionButton.prominentBackground#ff9500
extensionButton.prominentForeground#0f0e1a
extensionButton.prominentHoverBackground#ffaa33
gitDecoration.addedResourceForeground#8bc34a
gitDecoration.conflictingResourceForeground#9c27b0
gitDecoration.deletedResourceForeground#f44336
gitDecoration.ignoredResourceForeground#6b5b73
gitDecoration.modifiedResourceForeground#ffaa33
gitDecoration.stageDeletedResourceForeground#ff5722
gitDecoration.stageModifiedResourceForeground#ffc107
gitDecoration.submoduleResourceForeground#4fc3f7
gitDecoration.untrackedResourceForeground#4caf50
input.background#2a1f3d
input.border#ff9500
input.foreground#e8d5b7
input.placeholderForeground#6b5b73
inputOption.activeBackground#2a1f3d
inputOption.activeBorder#ffaa33
inputOption.activeForeground#e8d5b7
inputOption.hoverBackground#3d2a5544
inputValidation.errorBackground#f4433633
inputValidation.errorBorder#f44336
inputValidation.errorForeground#f44336
inputValidation.infoBackground#4fc3f733
inputValidation.infoBorder#4fc3f7
inputValidation.infoForeground#4fc3f7
inputValidation.warningBackground#ffaa3333
inputValidation.warningBorder#ffaa33
inputValidation.warningForeground#ffaa33
keybindingLabel.background#2a1f3d
keybindingLabel.border#ff9500
keybindingLabel.bottomBorder#ff9500
keybindingLabel.foreground#ff9500
list.activeSelectionBackground#2a1f3d
list.activeSelectionForeground#ff9500
list.activeSelectionIconForeground#ff9500
list.deemphasizedForeground#6b5b73
list.dropBackground#2a1f3d66
list.errorForeground#f44336
list.filterMatchBackground#ff950044
list.filterMatchBorder#ff9500
list.focusBackground#2a1f3d88
list.focusForeground#e8d5b7
list.focusOutline#ff9500
list.highlightForeground#ffaa33
list.hoverBackground#221e33
list.hoverForeground#e8d5b7
list.inactiveSelectionBackground#1e1b2e
list.inactiveSelectionForeground#e8d5b7
list.warningForeground#ffaa33
listFilterWidget.background#1a1828
listFilterWidget.noMatchesOutline#f44336
listFilterWidget.outline#ff9500
menu.background#1a1828
menu.border#2d2440
menu.foreground#e8d5b7
menu.selectionBackground#2a1f3d
menu.selectionBorder#ff950066
menu.selectionForeground#ff9500
menu.separatorBackground#2d2440
menubar.selectionBackground#2a1f3d
menubar.selectionBorder#ff950066
menubar.selectionForeground#ff9500
merge.border#2d2440
merge.commonContentBackground#ffaa3322
merge.commonHeaderBackground#ffaa3344
merge.currentContentBackground#4caf5022
merge.currentHeaderBackground#4caf5044
merge.incomingContentBackground#4fc3f722
merge.incomingHeaderBackground#4fc3f744
minimap.background#1a1828
minimap.errorHighlight#f44336
minimap.findMatchHighlight#ff9500
minimap.selectionHighlight#2a1f3d
minimap.selectionOccurrenceHighlight#2a1f3d88
minimap.warningHighlight#ffaa33
minimapGutter.addedBackground#4caf50
minimapGutter.deletedBackground#f44336
minimapGutter.modifiedBackground#ffaa33
minimapSlider.activeBackground#2d244099
minimapSlider.background#2d244055
minimapSlider.hoverBackground#2d244077
notificationCenter.border#ff9500
notificationCenterHeader.background#2a1f3d
notificationCenterHeader.foreground#ff9500
notificationLink.foreground#4fc3f7
notifications.background#1a1828
notifications.border#ff9500
notifications.foreground#e8d5b7
notificationsErrorIcon.foreground#f44336
notificationsInfoIcon.foreground#4fc3f7
notificationsWarningIcon.foreground#ffaa33
notificationToast.border#ff9500
panel.background#1a1828
panel.border#2d2440
panel.dropBorder#ff9500
panelInput.border#2d2440
panelSection.border#2d2440
panelSection.dropBackground#2a1f3d44
panelSectionHeader.background#1e1b2e
panelSectionHeader.border#2d2440
panelSectionHeader.foreground#4fc3f7
panelTitle.activeBorder#4fc3f7
panelTitle.activeForeground#ff9500
panelTitle.inactiveForeground#6b5b73
peekView.border#ff9500
peekViewEditor.background#0f0e1a
peekViewEditor.matchHighlightBackground#ff950044
peekViewResult.background#1e1b2e
peekViewResult.fileForeground#e8d5b7
peekViewResult.lineForeground#b0a3c4
peekViewResult.matchHighlightBackground#ff950044
peekViewResult.selectionBackground#2a1f3d
peekViewResult.selectionForeground#ff9500
peekViewTitle.background#2a1f3d
peekViewTitleDescription.foreground#6b5b73
peekViewTitleLabel.foreground#ff9500
problemsErrorIcon.foreground#f44336
problemsInfoIcon.foreground#4fc3f7
problemsWarningIcon.foreground#ffaa33
progressBar.background#ff9500
quickInput.background#1a1828
quickInput.foreground#e8d5b7
quickInputList.focusBackground#2a1f3d66
quickInputList.focusForeground#ff9500
quickInputList.focusIconForeground#ff9500
quickInputTitle.background#2a1f3d
scrollbar.shadow#00000055
scrollbarSlider.activeBackground#2d244088
scrollbarSlider.background#2d244044
scrollbarSlider.hoverBackground#2d244066
settings.checkboxBackground#2a1f3d
settings.checkboxBorder#ff9500
settings.checkboxForeground#e8d5b7
settings.dropdownBackground#2a1f3d
settings.dropdownBorder#ff9500
settings.dropdownForeground#e8d5b7
settings.dropdownListBorder#2d2440
settings.focusedRowBackground#2a1f3d44
settings.focusedRowBorder#ff9500
settings.headerForeground#ff9500
settings.modifiedItemIndicator#4fc3f7
settings.numberInputBackground#2a1f3d
settings.numberInputBorder#ff9500
settings.numberInputForeground#e8d5b7
settings.rowHoverBackground#1e1b2e44
settings.sashBorder#2d2440
settings.textInputBackground#2a1f3d
settings.textInputBorder#ff9500
settings.textInputForeground#e8d5b7
sideBar.background#1a1828
sideBar.border#2d2440
sideBar.dropBackground#2a1f3d44
sideBar.foreground#e8d5b7
sideBarSectionHeader.background#1e1b2e
sideBarSectionHeader.border#2d2440
sideBarSectionHeader.foreground#4fc3f7
sideBarTitle.foreground#ff9500
statusBar.background#0f0e1a
statusBar.border#2d2440
statusBar.debuggingBackground#f44336
statusBar.debuggingBorder#f44336
statusBar.debuggingForeground#ffffff
statusBar.foreground#e8d5b7
statusBar.noFolderBackground#1a1828
statusBarItem.activeBackground#2a1f3d66
statusBarItem.errorBackground#f44336
statusBarItem.errorForeground#ffffff
statusBarItem.hoverBackground#2a1f3d44
statusBarItem.prominentBackground#ff9500
statusBarItem.prominentForeground#0f0e1a
statusBarItem.prominentHoverBackground#ffaa33
statusBarItem.remoteBackground#4fc3f7
statusBarItem.remoteForeground#0f0e1a
statusBarItem.warningBackground#ffaa33
statusBarItem.warningForeground#0f0e1a
symbolIcon.arrayForeground#ffaa33
symbolIcon.booleanForeground#ff9500
symbolIcon.classForeground#9c27b0
symbolIcon.colorForeground#e91e63
symbolIcon.constantForeground#ffaa33
symbolIcon.constructorForeground#4fc3f7
symbolIcon.enumeratorForeground#ff9500
symbolIcon.enumeratorMemberForeground#ffaa33
symbolIcon.eventForeground#ffc107
symbolIcon.fieldForeground#00bcd4
symbolIcon.fileForeground#e8d5b7
symbolIcon.folderForeground#6b5b73
symbolIcon.functionForeground#4fc3f7
symbolIcon.interfaceForeground#9c27b0
symbolIcon.keyForeground#26c6da
symbolIcon.keywordForeground#f44336
symbolIcon.methodForeground#4fc3f7
symbolIcon.moduleForeground#03a9f4
symbolIcon.namespaceForeground#03a9f4
symbolIcon.nullForeground#f44336
symbolIcon.numberForeground#ffaa33
symbolIcon.objectForeground#e8d5b7
symbolIcon.operatorForeground#4caf50
symbolIcon.packageForeground#03a9f4
symbolIcon.propertyForeground#00bcd4
symbolIcon.referenceForeground#4fc3f7
symbolIcon.snippetForeground#ffeb3b
symbolIcon.stringForeground#ffeb3b
symbolIcon.structForeground#9c27b0
symbolIcon.textForeground#e8d5b7
symbolIcon.typeParameterForeground#9c27b0
symbolIcon.unitForeground#ffaa33
symbolIcon.variableForeground#e8d5b7
tab.activeBackground#0f0e1a
tab.activeBorder#ffaa33
tab.activeBorderTop#ffaa33
tab.activeForeground#ff9500
tab.activeModifiedBorder#4fc3f7
tab.border#2d2440
tab.hoverBackground#1e1b2e
tab.hoverBorder#ff950066
tab.hoverForeground#e8d5b7
tab.inactiveBackground#1a1828
tab.inactiveForeground#6b5b73
tab.inactiveModifiedBorder#4fc3f766
tab.lastPinnedBorder#4fc3f7
tab.unfocusedActiveBackground#1a1828
tab.unfocusedActiveBorder#6b5b73
tab.unfocusedActiveForeground#9e8aa0
tab.unfocusedHoverBackground#1e1b2e88
tab.unfocusedInactiveForeground#2d2440
terminal.ansiBlack#0f0e1a
terminal.ansiBlue#4fc3f7
terminal.ansiBrightBlack#6b5b73
terminal.ansiBrightBlue#03a9f4
terminal.ansiBrightCyan#26c6da
terminal.ansiBrightGreen#8bc34a
terminal.ansiBrightMagenta#e91e63
terminal.ansiBrightRed#ff5722
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffc107
terminal.ansiCyan#00bcd4
terminal.ansiGreen#4caf50
terminal.ansiMagenta#9c27b0
terminal.ansiRed#f44336
terminal.ansiWhite#e8d5b7
terminal.ansiYellow#ffeb3b
terminal.background#0f0e1a
terminal.border#2d2440
terminal.findMatchBackground#ff950044
terminal.findMatchHighlightBackground#ff950022
terminal.foreground#e8d5b7
terminal.inactiveSelectionBackground#2a1f3d44
terminal.selectionBackground#2a1f3d66
terminal.tab.activeBorder#ff9500
terminalCursor.background#0f0e1a
terminalCursor.foreground#ffaa33
titleBar.activeBackground#0f0e1a
titleBar.activeForeground#4fc3f7
titleBar.border#2d2440
titleBar.inactiveBackground#1a1828
titleBar.inactiveForeground#6b5b73
tree.inactiveIndentGuidesStroke#1e1b2e
tree.indentGuidesStroke#2d2440
walkThrough.embeddedEditorBackground#1a1828
welcomePage.background#0f0e1a
welcomePage.tileBackground#1a1828
welcomePage.tileBorder#2d2440
welcomePage.tileHoverBackground#2a1f3d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.block.documentation	#8a7ca8	italic
string, string.quoted, string.template, string.interpolated, string.regexp	#ffeb3b	—
string.regexp	#00bcd4	bold
string.template, punctuation.definition.string.template, meta.template.expression	#fff176	—
constant.character.escape, constant.other.placeholder	#ffaa33	bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#f44336	bold
keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.trycatch	#ff5722	bold italic
entity.name.function, meta.function-call entity.name.function, support.function, keyword.other.special-method	#4fc3f7	bold
meta.function-call, variable.function, support.function.builtin	#03a9f4	—
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class	#9c27b0	bold
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.decimal	#ffaa33	—
constant.language.boolean, constant.language.boolean.true, constant.language.boolean.false	#ff9500	bold
constant.language.null, constant.language.undefined, constant.language.nan	#f44336	bold
variable, variable.other, variable.other.readwrite	#e8d5b7	—
variable.parameter, meta.parameters variable	#ffc107	italic
variable.language.this, variable.language.self, variable.language.super	#ff9500	italic bold
variable.other.property, support.variable.property, meta.object-literal.key, entity.name.tag.yaml	#00bcd4	—
meta.object-literal.key, string.unquoted.yaml, support.type.property-name.json	#26c6da	—
constant, variable.other.constant, support.constant, constant.other	#ffaa33	bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational	#4caf50	—
keyword.operator.assignment, keyword.operator.assignment.compound	#8bc34a	bold
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#b0a3c4	—
punctuation.section.brackets, punctuation.section.parens, punctuation.section.braces, meta.brace	#9c88b5	—
entity.name.tag, meta.tag, markup.deleted.git_gutter	#f44336	bold
entity.other.attribute-name, meta.attribute, entity.other.attribute-name.html	#9c27b0	italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#4fc3f7	bold
entity.name.type.module, support.type.object.module	#03a9f4	—
support.type.property-name.json, meta.structure.dictionary.key.json, string.quoted.double.json support.type.property-name.json	#00bcd4	—
support.type.property-name.css, meta.property-name.css	#26c6da	—
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css	#ffaa33	—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css	#f44336	—
keyword.other.unit.css	#ff9500	—
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown	#ffaa33	bold
markup.bold, punctuation.definition.bold.markdown	#ff9500	bold
markup.italic, punctuation.definition.italic.markdown	#b0a3c4	italic
markup.inline.raw, markup.fenced_code.block.markdown, punctuation.definition.markdown	#ffeb3b	—
markup.underline.link, string.other.link.title.markdown, string.other.link.description.markdown	#4fc3f7	underline
markup.quote, punctuation.definition.quote.begin.markdown	#8a7ca8	italic
markup.list, punctuation.definition.list.begin.markdown	#4caf50	—
entity.name.function.decorator.python, punctuation.definition.decorator.python	#ffaa33	bold
variable.parameter.function.language.special.self.python, variable.language.special.self.python	#ff9500	italic bold
entity.name.type.class.python	#9c27b0	bold
support.class.component.tsx, support.class.component.jsx, entity.name.tag.tsx, entity.name.tag.jsx	#9c27b0	bold
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx	#9c27b0	bold
entity.name.type.interface.ts, entity.name.type.interface.tsx	#ab47bc	bold
string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp	#00bcd4	bold
string.quoted.docstring.multi.python, comment.block.documentation	#b0a3c4	italic
keyword.other.sql, keyword.other.DML.sql	#f44336	bold
entity.name.tag.yaml, string.unquoted.plain.out.yaml	#00bcd4	—
entity.name.tag.xml, entity.name.tag.localname.xml	#f44336	bold
invalid, invalid.deprecated, invalid.illegal	#ffffff	bold
markup.inserted, markup.inserted.git_gutter	#4caf50	—
markup.changed, markup.changed.git_gutter	#ffaa33	—
markup.deleted, markup.deleted.git_gutter	#f44336	—
log.info, markup.info	#4fc3f7	—
log.warning, markup.warning	#ffaa33	—
log.error, markup.error	#f44336	bold

VS Code preview

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

Theme Icon Pack — Neo Hacker Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

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

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

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

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

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0f3d2a33
activityBar.activeBorder#39ff14
activityBar.activeFocusBorder#00ff88
activityBar.background#0a0c0a
activityBar.border#1a3329
activityBar.foreground#1aff8c
activityBar.inactiveForeground#2d5a3d
activityBarBadge.background#39ff14
activityBarBadge.foreground#0a0c0a
badge.background#39ff14
badge.foreground#0a0c0a
breadcrumb.activeSelectionForeground#39ff14
breadcrumb.background#0a0c0a
breadcrumb.focusForeground#00d463
breadcrumb.foreground#2d5a3d
button.background#1aff8c
button.foreground#0a0c0a
button.hoverBackground#39ff14
button.secondaryBackground#0f3d2a
button.secondaryForeground#00ff88
button.secondaryHoverBackground#133a2e
checkbox.background#0f3d2a
checkbox.border#1aff8c
checkbox.foreground#00ff99
diffEditor.insertedLineBackground#00ff6611
diffEditor.insertedTextBackground#00ff6622
diffEditor.removedLineBackground#ff537011
diffEditor.removedTextBackground#ff537022
dropdown.background#0f3d2a
dropdown.border#1aff8c
dropdown.foreground#00ff99
dropdown.listBackground#0d110e
editor.background#0a0c0a
editor.findMatchBackground#2d6e4d88
editor.findMatchHighlightBackground#2d6e4d44
editor.foreground#00d463
editor.lineHighlightBackground#0f1a12
editor.rangeHighlightBackground#0f3d2a22
editor.selectionBackground#0f3d2a55
editor.selectionHighlightBackground#0f3d2a33
editor.wordHighlightBackground#1a4a3344
editor.wordHighlightStrongBackground#1a4a3366
editorBracketHighlight.foreground1#00ff88
editorBracketHighlight.foreground2#39ff14
editorBracketHighlight.foreground3#1aff8c
editorBracketMatch.background#0f3d2a66
editorBracketMatch.border#00ff88
editorCursor.foreground#39ff14
editorError.foreground#ff5370
editorGroup.border#1a3329
editorGroup.dropBackground#0f3d2a44
editorGroup.emptyBackground#0a0c0a
editorGroupHeader.noTabsBackground#0d110e
editorGroupHeader.tabsBackground#0d110e
editorGroupHeader.tabsBorder#1a3329
editorGutter.addedBackground#00ff66
editorGutter.background#0a0c0a
editorGutter.commentRangeForeground#2d5a3d
editorGutter.deletedBackground#ff5370
editorGutter.modifiedBackground#ffb74d
editorHint.foreground#82b1ff
editorHoverWidget.background#0d110e
editorHoverWidget.border#1aff8c
editorHoverWidget.statusBarBackground#0a0c0a
editorIndentGuide.activeBackground1#00ff66
editorIndentGuide.background1#1a3329
editorInfo.foreground#40c4ff
editorLineNumber.activeForeground#00ff88
editorLineNumber.foreground#2d5a3d
editorRuler.foreground#1a3329
editorSuggestWidget.background#0d110e
editorSuggestWidget.border#1aff8c
editorSuggestWidget.foreground#00d463
editorSuggestWidget.highlightForeground#39ff14
editorSuggestWidget.selectedBackground#0f3d2a
editorWarning.foreground#ffb74d
editorWidget.background#0d110e
editorWidget.border#1aff8c
editorWidget.foreground#00d463
errorForeground#ff5370
extensionButton.prominentBackground#1aff8c
extensionButton.prominentForeground#0a0c0a
extensionButton.prominentHoverBackground#39ff14
gitDecoration.conflictingResourceForeground#ff80ff
gitDecoration.deletedResourceForeground#ff5370
gitDecoration.ignoredResourceForeground#2d5a3d
gitDecoration.modifiedResourceForeground#ffb74d
gitDecoration.submoduleResourceForeground#40c4ff
gitDecoration.untrackedResourceForeground#00ff66
input.background#0f3d2a
input.border#1aff8c
input.foreground#00ff99
input.placeholderForeground#2d5a3d
inputOption.activeBackground#0f3d2a
inputOption.activeBorder#39ff14
inputValidation.errorBackground#ff537033
inputValidation.errorBorder#ff5370
inputValidation.infoBackground#40c4ff33
inputValidation.infoBorder#40c4ff
inputValidation.warningBackground#ffb74d33
inputValidation.warningBorder#ffb74d
keybindingLabel.background#0f3d2a
keybindingLabel.border#1aff8c
keybindingLabel.foreground#00ff88
list.activeSelectionBackground#0f3d2a
list.activeSelectionForeground#00ff88
list.deemphasizedForeground#2d5a3d
list.dropBackground#0f3d2a66
list.focusBackground#0f3d2a88
list.highlightForeground#39ff14
list.hoverBackground#0d2818
list.inactiveSelectionBackground#0a1f15
list.inactiveSelectionForeground#00d463
listFilterWidget.background#0d110e
listFilterWidget.noMatchesOutline#ff5370
listFilterWidget.outline#1aff8c
menu.background#0d110e
menu.foreground#00d463
menu.selectionBackground#0f3d2a
menu.selectionForeground#00ff88
menu.separatorBackground#1a3329
menubar.selectionBackground#0f3d2a
menubar.selectionForeground#00ff88
merge.border#1a3329
merge.commonContentBackground#ffb74d22
merge.commonHeaderBackground#ffb74d44
merge.currentContentBackground#00ff6622
merge.currentHeaderBackground#00ff6644
merge.incomingContentBackground#40c4ff22
merge.incomingHeaderBackground#40c4ff44
minimap.background#0d110e
minimapGutter.addedBackground#00ff66
minimapGutter.deletedBackground#ff5370
minimapGutter.modifiedBackground#ffb74d
minimapSlider.activeBackground#1a332999
minimapSlider.background#1a332955
minimapSlider.hoverBackground#1a332977
notificationCenter.border#1aff8c
notificationCenterHeader.background#0f3d2a
notificationCenterHeader.foreground#00ff88
notifications.background#0d110e
notifications.border#1aff8c
notifications.foreground#00d463
notificationsErrorIcon.foreground#ff5370
notificationsInfoIcon.foreground#40c4ff
notificationsWarningIcon.foreground#ffb74d
notificationToast.border#1aff8c
panel.background#0d110e
panel.border#1a3329
panelInput.border#1a3329
panelTitle.activeBorder#1aff8c
panelTitle.activeForeground#00ff88
panelTitle.inactiveForeground#2d5a3d
peekViewEditor.background#0a0c0a
peekViewResult.background#101613
peekViewTitle.background#0f3d2a
peekViewTitleDescription.foreground#2d5a3d
peekViewTitleLabel.foreground#00ff88
progressBar.background#1aff8c
quickInput.background#0d110e
quickInput.foreground#00d463
quickInputList.focusBackground#0f3d2a66
quickInputTitle.background#0f3d2a
scrollbar.shadow#00000055
scrollbarSlider.activeBackground#1a332988
scrollbarSlider.background#1a332944
scrollbarSlider.hoverBackground#1a332966
settings.checkboxBackground#0f3d2a
settings.checkboxBorder#1aff8c
settings.checkboxForeground#00ff99
settings.dropdownBackground#0f3d2a
settings.dropdownBorder#1aff8c
settings.dropdownForeground#00ff99
settings.headerForeground#00ff88
settings.modifiedItemIndicator#1aff8c
settings.numberInputBackground#0f3d2a
settings.numberInputBorder#1aff8c
settings.numberInputForeground#00ff99
settings.textInputBackground#0f3d2a
settings.textInputBorder#1aff8c
settings.textInputForeground#00ff99
sideBar.background#0d110e
sideBar.border#1a3329
sideBar.foreground#00d463
sideBarSectionHeader.background#101613
sideBarSectionHeader.border#1a3329
sideBarSectionHeader.foreground#1aff8c
sideBarTitle.foreground#00ff88
statusBar.background#0a0c0a
statusBar.border#1a3329
statusBar.debuggingBackground#ff5370
statusBar.debuggingForeground#ffffff
statusBar.foreground#00d463
statusBar.noFolderBackground#0d110e
statusBarItem.activeBackground#0f3d2a66
statusBarItem.hoverBackground#0f3d2a44
statusBarItem.prominentBackground#1aff8c
statusBarItem.prominentForeground#0a0c0a
statusBarItem.prominentHoverBackground#39ff14
tab.activeBackground#0a0c0a
tab.activeBorder#39ff14
tab.activeBorderTop#39ff14
tab.activeForeground#00ff88
tab.border#1a3329
tab.hoverBackground#0f1a12
tab.hoverForeground#00d463
tab.inactiveBackground#0d110e
tab.inactiveForeground#2d5a3d
tab.lastPinnedBorder#1aff8c
tab.unfocusedActiveBackground#0d110e
tab.unfocusedActiveForeground#339966
tab.unfocusedInactiveForeground#1a3329
terminal.ansiBlack#0a0c0a
terminal.ansiBlue#40c4ff
terminal.ansiBrightBlack#2d5a3d
terminal.ansiBrightBlue#64b5f6
terminal.ansiBrightCyan#4dffb3
terminal.ansiBrightGreen#00ff88
terminal.ansiBrightMagenta#ff99ff
terminal.ansiBrightRed#ff6b8a
terminal.ansiBrightWhite#33ffaa
terminal.ansiBrightYellow#fff176
terminal.ansiCyan#1aff8c
terminal.ansiGreen#00ff66
terminal.ansiMagenta#ff80ff
terminal.ansiRed#ff5370
terminal.ansiWhite#00d463
terminal.ansiYellow#ffee58
terminal.background#0a0c0a
terminal.foreground#00d463
terminal.selectionBackground#0f3d2a66
terminalCursor.background#0a0c0a
terminalCursor.foreground#39ff14
titleBar.activeBackground#0a0c0a
titleBar.activeForeground#1aff8c
titleBar.border#1a3329
titleBar.inactiveBackground#0d110e
titleBar.inactiveForeground#2d5a3d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.block.documentation	#4d8f6a	italic
string, string.quoted, string.template, string.interpolated, string.regexp	#ffee58	—
string.template, punctuation.definition.string.template	#fff176	—
constant.character.escape	#ffb74d	bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#ff5370	bold
keyword.control.flow, keyword.control.conditional, keyword.control.loop	#ff6b8a	bold
entity.name.function, meta.function-call entity.name.function, support.function, keyword.other.special-method	#40c4ff	bold
meta.function-call, variable.function	#64b5f6	—
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class	#82b1ff	bold
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex	#ffb74d	—
constant.language.boolean	#ff9800	bold
constant.language.null, constant.language.undefined	#ff5370	bold
variable, variable.other, variable.parameter	#ff80ff	—
variable.language.this, variable.language.self	#ff5370	italic bold
variable.other.property, support.variable.property, meta.object-literal.key, entity.name.tag.yaml	#1aff8c	—
meta.object-literal.key, string.unquoted.yaml	#00ff88	—
constant, variable.other.constant, support.constant	#39ff14	bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison	#00ff66	—
keyword.operator.assignment	#39ff14	bold
punctuation, punctuation.separator, punctuation.terminator	#66ff99	—
punctuation.section.brackets, punctuation.section.parens, punctuation.section.braces	#00d463	—
entity.name.tag, meta.tag, markup.deleted.git_gutter	#ff5370	bold
entity.other.attribute-name, meta.attribute	#82b1ff	—
keyword.control.import, keyword.control.export, keyword.control.from	#40c4ff	bold
entity.name.type.module	#64b5f6	—
support.type.property-name.json, meta.structure.dictionary.key.json	#1aff8c	—
support.type.property-name.css, meta.property-name	#00ff88	—
support.constant.property-value.css, meta.property-value	#ffb74d	—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#ff5370	—
markup.heading, entity.name.section.markdown	#39ff14	bold
markup.bold	#00ff88	bold
markup.italic	#66ff99	italic
markup.inline.raw, markup.fenced_code	#ffee58	—
markup.underline.link	#40c4ff	—
markup.quote	#4d8f6a	italic
entity.name.function.decorator.python	#ffb74d	bold
variable.parameter.function.language.special.self.python	#ff5370	italic bold
support.class.component.tsx, support.class.component.jsx	#82b1ff	bold
entity.name.type.ts, entity.name.type.tsx	#82b1ff	bold
string.regexp	#1aff8c	bold
string.quoted.docstring.multi.python	#66ff99	italic
invalid, invalid.deprecated	#ffffff	bold
markup.inserted.git_gutter	#00ff66	—
markup.changed.git_gutter	#ffb74d	—
markup.deleted.git_gutter	#ff5370	—
log.info	#40c4ff	—
log.warning	#ffb74d	—
log.error	#ff5370	—