arcobow

Name: arcobow
Author: YesCode

Publisher: YesCodeThemes in package: 8

Open in VS Code GitHub

Color themes

VS Code preview

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

arcobow — Arcobow Blue Medium

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#011c37
activityBar.activeBorder#82aedb
activityBar.background#011c37
activityBar.border#011c37
activityBar.foreground#fff
activityBar.inactiveForeground#9aa8b6
activityBarBadge.background#962118
activityBarBadge.foreground#fff
badge.background#962118
badge.foreground#f3e5e4
banner.background#2f293f
breadcrumb.background#011c37
breadcrumb.focusForeground#fd7018
breadcrumb.foreground#c6cadd
button.background#fd7018c4
button.border#fd7018
button.foreground#fff
button.hoverBackground#1e2a72
button.secondaryBackground#962118
button.secondaryForeground#ddd
button.secondaryHoverBackground#1b2581
descriptionForeground#eccdb8
editor.background#011c37
editor.findMatchBackground#11255c79
editor.findMatchHighlightBackground#272f9b38
editor.findMatchHighlightBorder#1874fd54
editor.foreground#ddd
editor.hoverHighlightBackground#7c3f078f
editor.inactiveSelectionBackground#16335e6b
editor.lineHighlightBackground#011529c7
editor.lineHighlightBorder#011529c7
editor.rangeHighlightBackground#041424
editor.selectionBackground#2445776b
editor.selectionHighlightBackground#383e57
editor.selectionHighlightBorder#187bfd67
editor.wordHighlightBackground#33190571
editor.wordHighlightBorder#fd70182f
editor.wordHighlightStrongBackground#3f365c
editor.wordHighlightStrongBorder#3a334e
editorBracketHighlight.foreground1#fd7018
editorBracketHighlight.foreground2#ffcccc
editorBracketHighlight.foreground3#b0cfe4
editorBracketHighlight.foreground4#eefcbb
editorBracketHighlight.foreground5#c6f7f1
editorBracketHighlight.foreground6#d9c1ff
editorBracketMatch.background#70310941
editorBracketMatch.border#fd70181a
editorCursor.foreground#fd7018
editorError.background#f4425165
editorError.border#b80000
editorError.foreground#ff0000
editorGroup.border#434d62
editorGroupHeader.tabsBackground#011c37
editorGroupHeader.tabsBorder#0e5194
editorGutter.background#011c37
editorHoverWidget.background#011c37
editorHoverWidget.border#0e5194
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#62adf8
editorIndentGuide.background#68629e4b
editorInfo.border#434962
editorLineNumber.activeForeground#fd7018
editorLineNumber.foreground#82afdb73
editorOverviewRuler.border#011c37
editorOverviewRuler.findMatchForeground#fd7018
editorSuggestWidget.background#011c37
editorSuggestWidget.border#82afdb79
editorSuggestWidget.focusHighlightForeground#fbadf7
editorSuggestWidget.foreground#d9e6f5
editorSuggestWidget.highlightForeground#fd7018
editorSuggestWidget.selectedBackground#041424
editorSuggestWidget.selectedForeground#fff
editorSuggestWidget.selectedIconForeground#82aedb
editorWidget.background#041424
editorWidget.border#697694
editorWidget.foreground#e1e6ec
editorWidget.resizeBorder#fd7018
focusBorder#82afdb8f
foreground#f7f2ed
icon.foreground#82aedb
input.background#041424
input.border#fd7018a6
input.foreground#e0e7f1
input.placeholderForeground#ddd
inputOption.activeBackground#fd70183a
inputOption.activeBorder#fd701877
inputOption.activeForeground#e2d1bb
inputOption.hoverBackground#2f4672
list.activeSelectionBackground#46436286
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#82aedb
list.deemphasizedForeground#cdcdcd
list.hoverBackground#041424
list.hoverForeground#b0abe6
list.inactiveSelectionBackground#041424
list.inactiveSelectionForeground#82b1ee
list.inactiveSelectionIconForeground#82aedb
menu.background#011c37
menu.border#82afdb48
menu.foreground#c1defc
menu.selectionBackground#2f4668c5
menu.selectionBorder#2f3e68c5
menu.selectionForeground#fff
menu.separatorBackground#434f62
menubar.selectionBackground#203c648a
menubar.selectionForeground#bad3f8
minimap.selectionHighlight#464362
minimapSlider.activeBackground#00000028
minimapSlider.background#0000001a
minimapSlider.hoverBackground#7a410b4d
notifications.background#011c37
notifications.border#011c37
notifications.foreground#fff
panel.background#031222
panel.border#0e5194
panelTitle.activeBorder#0e5194
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#a7aeb6
quickInput.background#011c37
quickInput.foreground#fff
quickInputList.focusBackground#041424
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#82aedb
scrollbarSlider.activeBackground#fd7018a4
scrollbarSlider.background#fd701893
scrollbarSlider.hoverBackground#fd7018
settings.checkboxBackground#041424
settings.checkboxBorder#fd7018
settings.checkboxForeground#d3d0f3
settings.dropdownBackground#041424
settings.dropdownBorder#625e88
settings.dropdownForeground#c7c4e4
settings.focusedRowBackground#041424
settings.focusedRowBorder#625e88
settings.headerBorder#fd70187c
settings.headerForeground#fd7018
settings.modifiedItemIndicator#fd7018
settings.numberInputBackground#041424
settings.numberInputBorder#625e88
settings.numberInputForeground#c6def1
settings.rowHoverBackground#09407775
settings.sashBorder#625e88
settings.textInputBackground#041424
settings.textInputBorder#625e88
settings.textInputForeground#eee
sideBar.background#011c37
sideBar.border#011c37
sideBar.foreground#ddd
sideBarSectionHeader.background#011c37
sideBarSectionHeader.border#011c37
sideBarSectionHeader.foreground#ddd
sideBarTitle.foreground#92c4f7
statusBar.background#041424
statusBar.debuggingBackground#06213b
statusBar.debuggingForeground#fff
statusBar.foreground#cdd8e4
statusBar.noFolderBackground#011c37
statusBarItem.hoverBackground#263253
statusBarItem.remoteBackground#fd7018
statusBarItem.remoteForeground#e5caba
tab.activeBackground#011c37
tab.activeBorder#011c37
tab.activeBorderTop#0e5194
tab.activeForeground#d5e8fa
tab.border#011c37
tab.hoverBackground#011c37
tab.hoverBorder#bdd1e6
tab.hoverForeground#95c2f0
tab.inactiveBackground#011c37
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorderTop#a2b7e4
tab.unfocusedActiveForeground#f3f5f8
tab.unfocusedInactiveBackground#011c37
tab.unfocusedInactiveForeground#c0cad8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#807ab3
terminal.ansiBrightMagenta#8F4673
terminal.ansiBrightRed#FB543F
terminal.ansiBrightWhite#FDF4C1
terminal.ansiBrightYellow#FFCC80
terminal.ansiCyan#8BA59B
terminal.ansiGreen#95C085
terminal.ansiMagenta#8F4673
terminal.ansiRed#FB543F
terminal.ansiWhite#A89984
terminal.ansiYellow#FAC03B
terminal.background#011c37
terminal.findMatchBackground#735596
terminal.findMatchHighlightBackground#7d53ac50
terminal.foreground#b1c3d6
terminal.selectionBackground#0423428c
terminal.selectionForeground#fff
terminalCursor.foreground#fd7018
terminalOverviewRuler.cursorForeground#6f69a5
titleBar.activeBackground#011c37
titleBar.activeForeground#d0dce9
titleBar.inactiveBackground#011c37
titleBar.inactiveForeground#c0d8f0
tree.indentGuidesStroke#fd7018
widget.shadow#041424

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#adb6c4cc	italic
variable, string constant.other.placeholder	#81caec	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#ffeaa7	—
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	#fbadf7	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#fbadf7	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#f7be9a	—
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	#b4e0dd	—
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	#b4d5d3	italic
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
support.type	#819fce	—
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	#f0eda6	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
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	#FFCB6B	—
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	—

VS Code preview

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

arcobow — Arcobow Blue Spacial

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#0d131b
activityBar.activeBorder#fbadf7
activityBar.background#0d131b
activityBar.border#0d131b
activityBar.foreground#fff
activityBar.inactiveForeground#9aa8b6
activityBarBadge.background#752571
activityBarBadge.foreground#fff
badge.background#6b2e68
badge.foreground#eecbec
banner.background#2f293f
breadcrumb.background#0d131b
breadcrumb.focusForeground#fbadf7
breadcrumb.foreground#c6cadd
button.background#813b7e
button.border#b14eac
button.foreground#fff
button.hoverBackground#1e2a72
button.secondaryBackground#182596
button.secondaryForeground#ddd
button.secondaryHoverBackground#1b2581
descriptionForeground#eccdb8
editor.background#0d131b
editor.findMatchBackground#2a334f
editor.findMatchHighlightBackground#272f9b38
editor.findMatchHighlightBorder#2a334f
editor.foreground#ddd
editor.hoverHighlightBackground#2a334f
editor.inactiveSelectionBackground#6827655d
editor.lineHighlightBackground#080c11
editor.lineHighlightBorder#080c11
editor.rangeHighlightBackground#011c37
editor.selectionBackground#6827653a
editor.selectionHighlightBackground#383e57
editor.selectionHighlightBorder#364266
editor.wordHighlightBackground#66126250
editor.wordHighlightBorder#fbadf73d
editor.wordHighlightStrongBackground#3f365c
editor.wordHighlightStrongBorder#3a334e
editorBracketHighlight.foreground1#fbadf7
editorBracketHighlight.foreground2#ffcccc
editorBracketHighlight.foreground3#b0cfe4
editorBracketHighlight.foreground4#eefcbb
editorBracketHighlight.foreground5#c6f7f1
editorBracketHighlight.foreground6#d9c1ff
editorBracketMatch.background#221f2e
editorBracketMatch.border#221f2e
editorCursor.foreground#fbadf7
editorError.background#f4425165
editorError.border#b80000
editorError.foreground#ff0000
editorGroup.border#434d62
editorGroupHeader.tabsBackground#0d131b
editorGroupHeader.tabsBorder#221f2e
editorGutter.background#0d131b
editorHoverWidget.background#0d131b
editorHoverWidget.border#2a334f
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#fbadf7
editorIndentGuide.background#68629e4b
editorInfo.border#434962
editorLineNumber.activeForeground#fbadf7
editorLineNumber.foreground#606a7a
editorOverviewRuler.border#0d131b
editorOverviewRuler.findMatchForeground#993494
editorSuggestWidget.background#0d131b
editorSuggestWidget.border#fbadf76c
editorSuggestWidget.focusHighlightForeground#8fa9ea
editorSuggestWidget.foreground#d9e6f5
editorSuggestWidget.highlightForeground#fd7018
editorSuggestWidget.selectedBackground#080c11
editorSuggestWidget.selectedForeground#fff
editorSuggestWidget.selectedIconForeground#fbadf7
editorWidget.background#0d131b
editorWidget.border#697694
editorWidget.foreground#e1e6ec
editorWidget.resizeBorder#fbadf7
focusBorder#fbadf76c
foreground#f7f2ed
icon.foreground#fbadf7
input.background#111a27
input.border#fbadf762
input.foreground#f8c6f6
input.placeholderForeground#ddd
inputOption.activeBackground#381236
inputOption.activeBorder#793b76
inputOption.activeForeground#c7a2c5
inputOption.hoverBackground#2f4672
list.activeSelectionBackground#46436286
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#fbadf7
list.deemphasizedForeground#cdcdcd
list.hoverBackground#080c11
list.hoverForeground#b0abe6
list.inactiveSelectionBackground#080c11
list.inactiveSelectionForeground#fbadf7
list.inactiveSelectionIconForeground#fbadf7
menu.background#0d131b
menu.border#30496e
menu.foreground#c1defc
menu.selectionBackground#010813da
menu.selectionBorder#2f3e68c5
menu.selectionForeground#fff
menu.separatorBackground#30496e28
menubar.selectionBackground#172e4e8a
menubar.selectionForeground#bad3f8
minimap.selectionHighlight#464362
minimapSlider.activeBackground#00000028
minimapSlider.background#0000001a
minimapSlider.hoverBackground#510b7a4d
notifications.background#0d131b
notifications.border#0d131b
notifications.foreground#fff
panel.background#0d131b
panel.border#152030
panelTitle.activeBorder#fbadf7
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#a7aeb6
quickInput.background#0d131b
quickInput.foreground#fff
quickInputList.focusBackground#010b14
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#fbadf7
scrollbarSlider.activeBackground#221f2e
scrollbarSlider.background#221f2e
scrollbarSlider.hoverBackground#fbadf783
settings.checkboxBackground#152030
settings.checkboxBorder#fd7018
settings.checkboxForeground#d3d0f3
settings.dropdownBackground#152030
settings.dropdownBorder#fbadf7
settings.dropdownForeground#c7c4e4
settings.focusedRowBackground#152030
settings.focusedRowBorder#fbadf7
settings.headerBorder#fbadf7
settings.headerForeground#fbadf7
settings.modifiedItemIndicator#fbadf7
settings.numberInputBackground#152030
settings.numberInputBorder#fbadf7
settings.numberInputForeground#c6def1
settings.rowHoverBackground#5308514d
settings.sashBorder#fbadf7
settings.textInputBackground#152030
settings.textInputBorder#fbadf7
settings.textInputForeground#eee
sideBar.background#0d131b
sideBar.border#0d131b
sideBar.foreground#ddd
sideBarSectionHeader.background#0d131b
sideBarSectionHeader.border#0d131b
sideBarSectionHeader.foreground#ddd
sideBarTitle.foreground#fbadf7
statusBar.background#0d131b
statusBar.debuggingBackground#06213b
statusBar.debuggingForeground#fff
statusBar.foreground#cdd8e4
statusBar.noFolderBackground#0d131b
statusBarItem.hoverBackground#172038
statusBarItem.remoteBackground#221f2e
statusBarItem.remoteForeground#8d8a9b
tab.activeBackground#0d131b
tab.activeBorder#0d131b
tab.activeBorderTop#2c283b
tab.activeForeground#fff0fe
tab.border#0d131b
tab.hoverBackground#0d131b
tab.hoverBorder#fbadf7
tab.hoverForeground#fbadf7
tab.inactiveBackground#0d131b
tab.inactiveForeground#c2bcc2
tab.unfocusedActiveBorderTop#a2b7e4
tab.unfocusedActiveForeground#f3f5f8
tab.unfocusedInactiveBackground#0d131b
tab.unfocusedInactiveForeground#c0cad8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#facef8
terminal.ansiBrightMagenta#8F4673
terminal.ansiBrightRed#FB543F
terminal.ansiBrightWhite#FDF4C1
terminal.ansiBrightYellow#FFCC80
terminal.ansiCyan#8BA59B
terminal.ansiGreen#95C085
terminal.ansiMagenta#8F4673
terminal.ansiRed#FB543F
terminal.ansiWhite#A89984
terminal.ansiYellow#FAC03B
terminal.background#0d131b
terminal.findMatchBackground#735596
terminal.findMatchHighlightBackground#7d53ac50
terminal.foreground#fbadf7
terminal.selectionBackground#772e734f
terminal.selectionForeground#fff
terminalCursor.foreground#fbadf7
terminalOverviewRuler.cursorForeground#fbadf7
titleBar.activeBackground#0d131b
titleBar.activeForeground#d0dce9
titleBar.inactiveBackground#0d131b
titleBar.inactiveForeground#c0d8f0
tree.indentGuidesStroke#fd7018
widget.shadow#011c37

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#adb6c4cc	italic
variable, string constant.other.placeholder	#58B19F	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#fdcaab	—
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	#d1adcf	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#fbadf7	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#8ba9f5	—
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	#c7ecee	—
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	#b4d5d3	italic
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
support.type	#819fce	—
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	#f0eda6	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
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	#FFCB6B	—
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	—

VS Code preview

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

arcobow — Arcobow 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#14121b
activityBar.activeBorder#ad9ce2
activityBar.background#181620
activityBar.border#14121b
activityBar.foreground#ddd
activityBar.inactiveForeground#a29fac
activityBarBadge.background#47306b
activityBarBadge.foreground#fff
badge.background#464362
badge.foreground#c5c1e9
banner.background#2f293f
breadcrumb.background#14121b
breadcrumb.focusForeground#9b95df
breadcrumb.foreground#c9c6dd
button.background#32225cd0
button.border#a578d4
button.foreground#fff
button.hoverBackground#1e2a72
button.secondaryBackground#3c2969
button.secondaryForeground#ddd
button.secondaryHoverBackground#1b2581
descriptionForeground#b8b7bd
editor.background#14121b
editor.findMatchBackground#333e9c98
editor.findMatchHighlightBackground#3c279b38
editor.findMatchHighlightBorder#464362
editor.foreground#ddd
editor.hoverHighlightBackground#464362
editor.inactiveSelectionBackground#1e1b29
editor.lineHighlightBackground#181620
editor.lineHighlightBorder#2824357c
editor.rangeHighlightBackground#201c2c
editor.rangeHighlightBorder#14121b
editor.selectionBackground#1e1b29
editor.selectionHighlightBackground#3f3857
editor.selectionHighlightBorder#464362
editor.wordHighlightBackground#37324bb6
editor.wordHighlightBorder#464362
editor.wordHighlightStrongBackground#3f365c
editor.wordHighlightStrongBorder#3a334e
editorBracketHighlight.foreground1#9cb4dd
editorBracketHighlight.foreground2#ffcccc
editorBracketHighlight.foreground3#b0cfe4
editorBracketHighlight.foreground4#eefcbb
editorBracketHighlight.foreground5#c6f7f1
editorBracketHighlight.foreground6#d9c1ff
editorBracketMatch.background#181620
editorBracketMatch.border#3f2f68c5
editorCursor.foreground#8a84c2
editorError.background#f4425165
editorError.border#b80000
editorError.foreground#ff0000
editorGroup.border#464362
editorGroupHeader.tabsBackground#181620
editorGroupHeader.tabsBorder#4643623d
editorGutter.background#14121b
editorHoverWidget.background#14121b
editorHoverWidget.border#464362c4
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#5a51a8
editorIndentGuide.background#68629e4b
editorInfo.border#464362
editorLineNumber.activeForeground#f5f1ff
editorLineNumber.foreground#7e7e7eb9
editorOverviewRuler.border#14121b
editorOverviewRuler.findMatchForeground#a06569
editorSuggestWidget.background#14121b
editorSuggestWidget.border#464362
editorSuggestWidget.focusHighlightForeground#998add
editorSuggestWidget.foreground#d9e6f5
editorSuggestWidget.highlightForeground#dfdd71
editorSuggestWidget.selectedBackground#09080c
editorSuggestWidget.selectedForeground#fff
editorSuggestWidget.selectedIconForeground#ca9ef3
editorWidget.background#14121b
editorWidget.border#6e6994
editorWidget.foreground#a19fb3
editorWidget.resizeBorder#a79ff0
focusBorder#464362
foreground#bbb9ca
icon.foreground#bfb2f1
input.background#55447f4b
input.border#55447f
input.foreground#e2e0f1
input.placeholderForeground#ddd
inputOption.activeBackground#464362
inputOption.activeBorder#67638f
inputOption.activeForeground#bfbbe2
inputOption.hoverBackground#3f3a6d
list.activeSelectionBackground#46436286
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#bfb2f1
list.deemphasizedForeground#cdcdcd
list.hoverBackground#221f2e
list.hoverForeground#b0abe6
list.inactiveSelectionBackground#221f2e
list.inactiveSelectionForeground#b0abe6
list.inactiveSelectionIconForeground#bfb2f1
menu.background#14121b
menu.border#464362
menu.foreground#c1bde9
menu.selectionBackground#3f2f68c5
menu.selectionBorder#3f2f68c5
menu.selectionForeground#fff
menu.separatorBackground#464362
menubar.selectionBackground#4643628a
menubar.selectionForeground#c1baf8
minimap.selectionHighlight#464362
minimapSlider.activeBackground#00000028
minimapSlider.background#0000001a
minimapSlider.hoverBackground#2a0b7a4d
notifications.background#14121b
notifications.border#14121b
notifications.foreground#fff
panel.background#181620
panel.border#46436296
panelTitle.activeBorder#7b76ad
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#9694a5
quickInput.background#14121b
quickInput.foreground#fff
quickInputList.focusBackground#3f2f68c5
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#dcc0ee
scrollbarSlider.activeBackground#55447f
scrollbarSlider.background#464362d0
scrollbarSlider.hoverBackground#5b456d
settings.checkboxBackground#221f2e
settings.checkboxBorder#514581
settings.checkboxForeground#d3d0f3
settings.dropdownBackground#221f2e
settings.dropdownBorder#514581
settings.dropdownForeground#c7c4e4
settings.focusedRowBackground#221f2e
settings.focusedRowBorder#514581
settings.headerBorder#443874
settings.headerForeground#bfb2f1
settings.modifiedItemIndicator#615d86
settings.numberInputBackground#221f2e
settings.numberInputBorder#514581
settings.numberInputForeground#c6def1
settings.rowHoverBackground#221f2e
settings.sashBorder#514581
settings.textInputBackground#221f2e
settings.textInputBorder#514581
settings.textInputForeground#eee
sideBar.background#14121b
sideBar.border#14121b
sideBar.foreground#ddd
sideBarSectionHeader.background#14121b
sideBarSectionHeader.border#181620
sideBarSectionHeader.foreground#ddd
sideBarTitle.foreground#bbbbbb
statusBar.background#1d1a27
statusBar.border#14121b
statusBar.debuggingBackground#1c1927
statusBar.debuggingForeground#fff
statusBar.foreground#e2dcf5
statusBar.noFolderBackground#14121b
statusBarItem.hoverBackground#2a2f3d
statusBarItem.remoteBackground#0f0d16
statusBarItem.remoteForeground#d0c7ee
tab.activeBackground#14121b
tab.activeBorder#14121b
tab.activeBorderTop#463979
tab.activeForeground#fff
tab.border#181620
tab.hoverBackground#14121b
tab.hoverBorder#b6a3f5
tab.hoverForeground#b3a3e6
tab.inactiveBackground#181620
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorderTop#a9a2e4
tab.unfocusedActiveForeground#f5f3f8
tab.unfocusedInactiveBackground#181620
tab.unfocusedInactiveForeground#c0c0d8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#807ab3
terminal.ansiBrightMagenta#8F4673
terminal.ansiBrightRed#FB543F
terminal.ansiBrightWhite#FDF4C1
terminal.ansiBrightYellow#FFCC80
terminal.ansiCyan#8BA59B
terminal.ansiGreen#95C085
terminal.ansiMagenta#8F4673
terminal.ansiRed#FB543F
terminal.ansiWhite#A89984
terminal.ansiYellow#FAC03B
terminal.background#14121b
terminal.findMatchBackground#735596
terminal.findMatchHighlightBackground#7d53ac50
terminal.foreground#9795a896
terminal.selectionBackground#3b385396
terminal.selectionForeground#fff
terminalCursor.foreground#56507a
terminalOverviewRuler.cursorForeground#6f69a5
titleBar.activeBackground#14121b
titleBar.activeForeground#b9b5dd
titleBar.border#4643621e
titleBar.inactiveBackground#14121b
titleBar.inactiveForeground#c5bffa
tree.indentGuidesStroke#a06569
widget.shadow#46436269

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#b0adc4cc	italic
variable, string constant.other.placeholder	#ffeaa7	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#81caec	—
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	#fab1a0	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#fab1a0	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#D6A2E8	—
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	#b4e0dd	—
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	#b4d5d3	italic
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
support.type	#819fce	—
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	#fffa65	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
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	#FFCB6B	—
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	—

VS Code preview

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

arcobow — Arcobow Medium

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#1e1b29
activityBar.activeBorder#ad9ce2
activityBar.background#201d2b
activityBar.border#1e1b29
activityBar.foreground#ddd
activityBar.inactiveForeground#a29fac
activityBarBadge.background#47306b
activityBarBadge.foreground#fff
badge.background#464362
badge.foreground#c5c1e9
banner.background#2f293f
breadcrumb.background#1e1b29
breadcrumb.focusForeground#9b95df
breadcrumb.foreground#c9c6dd
button.background#32225cd0
button.border#a578d4
button.foreground#fff
button.hoverBackground#1e2a72
button.secondaryBackground#3c2969
button.secondaryForeground#ddd
button.secondaryHoverBackground#1b2581
descriptionForeground#b8b7bd
editor.background#1e1b29
editor.findMatchBackground#333e9c98
editor.findMatchHighlightBackground#3c279b38
editor.findMatchHighlightBorder#464362
editor.foreground#ddd
editor.hoverHighlightBackground#464362
editor.inactiveSelectionBackground#55447f6b
editor.lineHighlightBackground#221e2ea2
editor.lineHighlightBorder#2824357c
editor.rangeHighlightBackground#201c2c
editor.rangeHighlightBorder#1e1b29
editor.selectionBackground#55447f6b
editor.selectionHighlightBackground#3f3857
editor.selectionHighlightBorder#464362
editor.wordHighlightBackground#37324bb6
editor.wordHighlightBorder#464362
editor.wordHighlightStrongBackground#3f365c
editor.wordHighlightStrongBorder#3a334e
editorBracketHighlight.foreground1#d4898e
editorBracketHighlight.foreground2#ffcccc
editorBracketHighlight.foreground3#b0cfe4
editorBracketHighlight.foreground4#eefcbb
editorBracketHighlight.foreground5#c6f7f1
editorBracketHighlight.foreground6#d9c1ff
editorBracketMatch.background#3f2f68c5
editorBracketMatch.border#3f2f68c5
editorCursor.foreground#8a84c2
editorError.background#f4425165
editorError.border#b80000
editorError.foreground#ff0000
editorGroup.border#464362
editorGroupHeader.tabsBackground#201d2b
editorGroupHeader.tabsBorder#4643623d
editorGutter.background#1e1b29
editorHoverWidget.background#1e1b29
editorHoverWidget.border#464362c4
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#5a51a8
editorIndentGuide.background#68629e4b
editorInfo.border#464362
editorLineNumber.activeForeground#f5f1ff
editorLineNumber.foreground#7e7e7eb9
editorOverviewRuler.border#1e1b29
editorOverviewRuler.findMatchForeground#a06569
editorSuggestWidget.background#1e1b29
editorSuggestWidget.border#464362
editorSuggestWidget.focusHighlightForeground#8e8d9e
editorSuggestWidget.foreground#d9e6f5
editorSuggestWidget.highlightForeground#a06569
editorSuggestWidget.selectedBackground#37275f
editorSuggestWidget.selectedForeground#fff
editorSuggestWidget.selectedIconForeground#ca9ef3
editorWidget.background#1e1b29
editorWidget.border#6e6994
editorWidget.foreground#a19fb3
editorWidget.resizeBorder#a79ff0
focusBorder#464362
foreground#bbb9ca
icon.foreground#ce8f93
input.background#55447f4b
input.border#55447f
input.foreground#e2e0f1
input.placeholderForeground#ddd
inputOption.activeBackground#464362
inputOption.activeBorder#67638f
inputOption.activeForeground#bfbbe2
inputOption.hoverBackground#3f3a6d
list.activeSelectionBackground#46436286
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#464362
list.deemphasizedForeground#cdcdcd
list.hoverBackground#3629559a
list.hoverForeground#b0abe6
list.inactiveSelectionBackground#312f49b7
list.inactiveSelectionForeground#b0abe6
list.inactiveSelectionIconForeground#b4d5d3
menu.background#1e1b29
menu.border#464362
menu.foreground#c1bde9
menu.selectionBackground#3f2f68c5
menu.selectionBorder#3f2f68c5
menu.selectionForeground#fff
menu.separatorBackground#464362
menubar.selectionBackground#4643628a
menubar.selectionForeground#c1baf8
minimap.selectionHighlight#464362
minimapSlider.activeBackground#00000028
minimapSlider.background#0000001a
minimapSlider.hoverBackground#2a0b7a4d
notifications.background#1e1b29
notifications.border#1e1b29
notifications.foreground#fff
panel.background#201d2b
panel.border#46436296
panelTitle.activeBorder#7b76ad
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#9694a5
quickInput.background#1e1b29
quickInput.foreground#fff
quickInputList.focusBackground#3f2f68c5
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#dcc0ee
scrollbarSlider.activeBackground#55447f
scrollbarSlider.background#464362d0
scrollbarSlider.hoverBackground#5b456d
settings.checkboxBackground#46436296
settings.checkboxBorder#625e88
settings.checkboxForeground#d3d0f3
settings.dropdownBackground#46436296
settings.dropdownBorder#625e88
settings.dropdownForeground#c7c4e4
settings.focusedRowBackground#46436296
settings.focusedRowBorder#625e88
settings.headerBorder#625e88
settings.headerForeground#bbb7dd
settings.modifiedItemIndicator#615d86
settings.numberInputBackground#46436296
settings.numberInputBorder#625e88
settings.numberInputForeground#c6def1
settings.rowHoverBackground#46436296
settings.sashBorder#625e88
settings.textInputBackground#46436296
settings.textInputBorder#625e88
settings.textInputForeground#eee
sideBar.background#1e1b29
sideBar.border#1e1b29
sideBar.foreground#ddd
sideBarSectionHeader.background#1e1b29
sideBarSectionHeader.border#201d2b
sideBarSectionHeader.foreground#ddd
sideBarTitle.foreground#bbbbbb
statusBar.background#1d1a27
statusBar.border#1e1b29
statusBar.debuggingBackground#1c1927
statusBar.debuggingForeground#fff
statusBar.foreground#e2dcf5
statusBar.noFolderBackground#1e1b29
statusBarItem.hoverBackground#2a2f3d
statusBarItem.remoteBackground#0f0d16
statusBarItem.remoteForeground#d0c7ee
tab.activeBackground#1e1b29
tab.activeBorder#1e1b29
tab.activeBorderTop#1e1b29
tab.activeForeground#fff
tab.border#201d2b
tab.hoverBackground#1e1b29
tab.hoverBorder#b6a3f5
tab.hoverForeground#b3a3e6
tab.inactiveBackground#201d2b
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorderTop#a9a2e4
tab.unfocusedActiveForeground#f5f3f8
tab.unfocusedInactiveBackground#201d2b
tab.unfocusedInactiveForeground#c0c0d8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#807ab3
terminal.ansiBrightMagenta#8F4673
terminal.ansiBrightRed#FB543F
terminal.ansiBrightWhite#FDF4C1
terminal.ansiBrightYellow#FFCC80
terminal.ansiCyan#8BA59B
terminal.ansiGreen#95C085
terminal.ansiMagenta#8F4673
terminal.ansiRed#FB543F
terminal.ansiWhite#A89984
terminal.ansiYellow#FAC03B
terminal.background#1e1b29
terminal.findMatchBackground#735596
terminal.findMatchHighlightBackground#7d53ac50
terminal.foreground#9795a896
terminal.selectionBackground#3b385396
terminal.selectionForeground#fff
terminalCursor.foreground#56507a
terminalOverviewRuler.cursorForeground#6f69a5
titleBar.activeBackground#1e1b29
titleBar.activeForeground#b9b5dd
titleBar.border#4643621e
titleBar.inactiveBackground#1e1b29
titleBar.inactiveForeground#c5bffa
tree.indentGuidesStroke#a06569
widget.shadow#46436269

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#b0adc4cc	italic
variable, string constant.other.placeholder	#81caec	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#ffeaa7	—
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	#fab1a0	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#fab1a0	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#6de6dd	—
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	#b4e0dd	—
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	#b4d5d3	italic
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
support.type	#819fce	—
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	#fffa65	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
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	#FFCB6B	—
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	—