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

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#282435
activityBar.activeBorder#ad9ce2
activityBar.background#2b293c
activityBar.border#282435
activityBar.foreground#ddd
activityBar.inactiveForeground#a29fac
activityBarBadge.background#47306b
activityBarBadge.foreground#fff
badge.background#464362
badge.foreground#c5c1e9
banner.background#2f293f
breadcrumb.background#282435
breadcrumb.focusForeground#9b95df
breadcrumb.foreground#c9c6dd
button.background#6952a5d0
button.border#a578d4
button.foreground#fff
button.hoverBackground#1e2a72
button.secondaryBackground#3c2969
button.secondaryForeground#ddd
button.secondaryHoverBackground#1b2581
descriptionForeground#b8b7bd
editor.background#282435
editor.findMatchBackground#333e9c98
editor.findMatchHighlightBackground#3c279b38
editor.findMatchHighlightBorder#464362
editor.foreground#ddd
editor.hoverHighlightBackground#464362
editor.inactiveSelectionBackground#55447f6b
editor.lineHighlightBackground#2b293c
editor.lineHighlightBorder#2b293c
editor.rangeHighlightBackground#201c2c
editor.rangeHighlightBorder#282435
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#2b293c
editorGroupHeader.tabsBorder#4643623d
editorGutter.background#282435
editorHoverWidget.background#282435
editorHoverWidget.border#464362c4
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#5a51a8
editorIndentGuide.background#68629e4b
editorInfo.border#464362
editorLineNumber.activeForeground#f5f1ff
editorLineNumber.foreground#7e7e7eb9
editorOverviewRuler.border#282435
editorOverviewRuler.findMatchForeground#a06569
editorSuggestWidget.background#282435
editorSuggestWidget.border#464362
editorSuggestWidget.focusHighlightForeground#8e8d9e
editorSuggestWidget.foreground#d9e6f5
editorSuggestWidget.highlightForeground#a06569
editorSuggestWidget.selectedBackground#37275f
editorSuggestWidget.selectedForeground#fff
editorSuggestWidget.selectedIconForeground#ca9ef3
editorWidget.background#282435
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#282435
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#282435
notifications.border#282435
notifications.foreground#fff
panel.background#2b293c
panel.border#46436296
panelTitle.activeBorder#7b76ad
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#9694a5
quickInput.background#282435
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#282435
sideBar.border#282435
sideBar.foreground#ddd
sideBarSectionHeader.background#282435
sideBarSectionHeader.border#2b293c
sideBarSectionHeader.foreground#ddd
sideBarTitle.foreground#bbbbbb
statusBar.background#1d1a27
statusBar.border#282435
statusBar.debuggingBackground#1c1927
statusBar.debuggingForeground#fff
statusBar.foreground#e2dcf5
statusBar.noFolderBackground#282435
statusBarItem.hoverBackground#2a2f3d
statusBarItem.remoteBackground#0f0d16
statusBarItem.remoteForeground#d0c7ee
tab.activeBackground#282435
tab.activeBorder#282435
tab.activeBorderTop#282435
tab.activeForeground#fff
tab.border#2b293c
tab.hoverBackground#282435
tab.hoverBorder#b6a3f5
tab.hoverForeground#b3a3e6
tab.inactiveBackground#2b293c
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorderTop#a9a2e4
tab.unfocusedActiveForeground#f5f3f8
tab.unfocusedInactiveBackground#2b293c
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#282435
terminal.findMatchBackground#735596
terminal.findMatchHighlightBackground#7d53ac50
terminal.foreground#9795a896
terminal.selectionBackground#3b385396
terminal.selectionForeground#fff
terminalCursor.foreground#56507a
terminalOverviewRuler.cursorForeground#6f69a5
titleBar.activeBackground#282435
titleBar.activeForeground#b9b5dd
titleBar.inactiveBackground#282435
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	—

VS Code preview

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

arcobow — Arcobow Blue

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#1d2731
activityBar.activeBorder#8054f0
activityBar.background#232e3a
activityBar.border#1d2731
activityBar.foreground#ddd
activityBar.inactiveForeground#919191
activityBarBadge.background#5d2bdb
activityBarBadge.foreground#fff
badge.background#411e61
badge.foreground#d5baf1
banner.background#29313f
breadcrumb.background#1d2731
breadcrumb.focusForeground#c094f3
breadcrumb.foreground#bbcaf0
button.background#6952a5d0
button.border#a578d4
button.foreground#fff
button.hoverBackground#633dbb
button.secondaryBackground#502ca5
button.secondaryForeground#ddd
button.secondaryHoverBackground#421b81
descriptionForeground#edf4fc
editor.background#1d2731
editor.findMatchBackground#4f1c70c0
editor.findMatchHighlightBackground#3c279b38
editor.findMatchHighlightBorder#4e5d6ebb
editor.foreground#ddd
editor.hoverHighlightBackground#521386bd
editor.inactiveSelectionBackground#55447f6b
editor.lineHighlightBackground#151c24be
editor.lineHighlightBorder#151c24be
editor.rangeHighlightBackground#172029
editor.rangeHighlightBorder#6f53b4
editor.selectionBackground#341b72cb
editor.selectionHighlightBackground#6f6df098
editor.selectionHighlightBorder#7c8998
editor.wordHighlightBackground#532c7971
editor.wordHighlightBorder#444e6b
editor.wordHighlightStrongBackground#5313869f
editor.wordHighlightStrongBorder#b278e0d8
editorBracketHighlight.foreground1#dff9fb
editorBracketHighlight.foreground2#ffcccc
editorBracketHighlight.foreground3#b0cfe4
editorBracketHighlight.foreground4#eefcbb
editorBracketHighlight.foreground5#c6f7f1
editorBracketHighlight.foreground6#d9c1ff
editorBracketMatch.background#3f2f68c5
editorBracketMatch.border#3f2f68c5
editorCursor.foreground#c78df7
editorError.background#f4425165
editorError.border#b80000
editorError.foreground#ff0000
editorGroup.border#2f546c
editorGroupHeader.tabsBackground#232e3a
editorGroupHeader.tabsBorder#263342
editorGutter.background#1d2731
editorHoverWidget.background#1d2731
editorHoverWidget.border#a478d47c
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#a3a541
editorIndentGuide.background#627d9e4b
editorInfo.border#2f4a6c
editorLineNumber.activeForeground#f5f1ff
editorLineNumber.foreground#7e7e7eb9
editorOverviewRuler.border#1d2731
editorOverviewRuler.findMatchForeground#654aaac5
editorSuggestWidget.background#1d2731
editorSuggestWidget.border#2d3c4b
editorSuggestWidget.focusHighlightForeground#989899
editorSuggestWidget.foreground#d9e6f5
editorSuggestWidget.highlightForeground#d8ec67
editorSuggestWidget.selectedBackground#37275f
editorSuggestWidget.selectedForeground#fff
editorSuggestWidget.selectedIconForeground#ca9ef3
editorWidget.background#1d2731
editorWidget.border#5086b8
editorWidget.foreground#d6bbf0
editorWidget.resizeBorder#9768c9
focusBorder#55447f
foreground#acb8c7
icon.foreground#d0b9e6
input.background#55447f6b
input.border#55447f
input.foreground#c7d8ee
input.placeholderForeground#ddd
inputOption.activeBackground#354457
inputOption.activeBorder#87a0be
inputOption.activeForeground#cde3f8
inputOption.hoverBackground#2f3855
list.activeSelectionBackground#5313869f
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#8d35d4
list.deemphasizedForeground#cdcdcd
list.hoverBackground#3629559a
list.hoverForeground#c2a5e4
list.inactiveSelectionBackground#3f2f68c5
list.inactiveSelectionForeground#ceb4f8
list.inactiveSelectionIconForeground#9d77ce
menu.background#1d2731
menu.border#1d2731
menu.foreground#bec5d8
menu.selectionBackground#3f2f68c5
menu.selectionBorder#3f2f68c5
menu.selectionForeground#fff
menu.separatorBackground#a0a7b762
menubar.selectionBackground#0f243d
menubar.selectionForeground#cbdae9
minimap.selectionHighlight#7c38b4a2
minimapSlider.activeBackground#00000028
minimapSlider.background#0000001a
minimapSlider.hoverBackground#2a0b7a4d
notifications.background#1d2731
notifications.border#1d2731
notifications.foreground#fff
panel.background#212b36
panel.border#3e5268
panelTitle.activeBorder#cf98fc
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#adb6c2
quickInput.background#1d2731
quickInput.foreground#fff
quickInputList.focusBackground#2d0546b2
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#dcc0ee
scrollbarSlider.activeBackground#55447f
scrollbarSlider.background#55447fcb
scrollbarSlider.hoverBackground#5b456d
settings.checkboxBackground#5313869f
settings.checkboxBorder#a578d4
settings.checkboxForeground#bacfeb
settings.dropdownBackground#1d2731
settings.dropdownBorder#a578d4
settings.dropdownForeground#c2d5f1
settings.focusedRowBackground#652e9233
settings.focusedRowBorder#a578d4
settings.headerBorder#a578d4
settings.headerForeground#d097ff
settings.modifiedItemIndicator#783ca8
settings.numberInputBackground#5213866b
settings.numberInputBorder#a578d4
settings.numberInputForeground#c6def1
settings.rowHoverBackground#52138646
settings.sashBorder#a578d4
settings.textInputBackground#5213866b
settings.textInputBorder#a578d4
settings.textInputForeground#eee
sideBar.background#1d2731
sideBar.border#1d2731
sideBar.foreground#ddd
sideBarSectionHeader.background#1d2731
sideBarSectionHeader.border#27435f41
sideBarSectionHeader.foreground#ddd
sideBarTitle.foreground#bbbbbb
statusBar.background#1d2731
statusBar.border#1d2731
statusBar.debuggingBackground#04172b
statusBar.debuggingForeground#fff
statusBar.foreground#c4d7f1
statusBar.noFolderBackground#1d2731
statusBarItem.hoverBackground#2a2f3d
statusBarItem.remoteBackground#162a42
statusBarItem.remoteForeground#a4c7f1
tab.activeBackground#1d2731
tab.activeBorder#1d2731
tab.activeBorderTop#1d2731
tab.activeForeground#fff
tab.border#232e3a
tab.hoverBackground#28365a8a
tab.hoverBorder#8ba6c0
tab.hoverForeground#c5d8ee
tab.inactiveBackground#232e3a
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorderTop#465f7c
tab.unfocusedActiveForeground#f3f8f7
tab.unfocusedInactiveBackground#232e3a
tab.unfocusedInactiveForeground#c0d1d8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#986abe
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#1d2731
terminal.findMatchBackground#735596
terminal.findMatchHighlightBackground#7d53ac50
terminal.foreground#a19ba7
terminal.selectionBackground#55337044
terminal.selectionForeground#fff
terminalCursor.foreground#c78df7
terminalOverviewRuler.cursorForeground#c68ef3
titleBar.activeBackground#1d2731
titleBar.activeForeground#ddd
titleBar.inactiveBackground#1a232e
titleBar.inactiveForeground#a5b2c7
tree.indentGuidesStroke#b88ee7
widget.shadow#52138627

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#66808b	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	#bea8fa	—
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	#7efff5	—
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	#dff9fb	—
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	#cd84f1	—
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 Blue 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#010a14
activityBar.activeBorder#82aedb
activityBar.background#010a14
activityBar.border#010a14
activityBar.foreground#fff
activityBar.inactiveForeground#9aa8b6
activityBarBadge.background#962118
activityBarBadge.foreground#fff
badge.background#962118
badge.foreground#f3e5e4
banner.background#2f293f
breadcrumb.background#010a14
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#010a14
editor.findMatchBackground#11255c79
editor.findMatchHighlightBackground#272f9b38
editor.findMatchHighlightBorder#1874fd54
editor.foreground#ddd
editor.hoverHighlightBackground#7c3f078f
editor.inactiveSelectionBackground#16335e6b
editor.lineHighlightBackground#030d18b7
editor.lineHighlightBorder#041424
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#fd701841
editorBracketMatch.border#fd701841
editorCursor.foreground#fd7018
editorError.background#f4425165
editorError.border#b80000
editorError.foreground#ff0000
editorGroup.border#434d62
editorGroupHeader.tabsBackground#010a14
editorGroupHeader.tabsBorder#1e2731d7
editorGutter.background#010a14
editorHoverWidget.background#010a14
editorHoverWidget.border#0e5194
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#62adf8
editorIndentGuide.background#68629e4b
editorInfo.border#434962
editorLineNumber.activeForeground#fd7018
editorLineNumber.foreground#82afdb73
editorOverviewRuler.border#010a14
editorOverviewRuler.findMatchForeground#fd7018
editorSuggestWidget.background#010a14
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#010a14
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#010a14
notifications.border#010a14
notifications.foreground#fff
panel.background#010a14
panel.border#1e2731
panelTitle.activeBorder#0e5194
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#a7aeb6
quickInput.background#010a14
quickInput.foreground#fff
quickInputList.focusBackground#041424
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#82aedb
scrollbarSlider.activeBackground#fd7018a4
scrollbarSlider.background#69300d93
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#010a14
sideBar.border#010a14
sideBar.foreground#ddd
sideBarSectionHeader.background#010a14
sideBarSectionHeader.border#010a14
sideBarSectionHeader.foreground#ddd
sideBarTitle.foreground#92c4f7
statusBar.background#041424
statusBar.debuggingBackground#06213b
statusBar.debuggingForeground#fff
statusBar.foreground#cdd8e4
statusBar.noFolderBackground#010a14
statusBarItem.hoverBackground#263253
statusBarItem.remoteBackground#fd7018
statusBarItem.remoteForeground#e5caba
tab.activeBackground#010a14
tab.activeBorder#010a14
tab.activeBorderTop#1e2731d7
tab.activeForeground#d5e8fa
tab.border#010a14
tab.hoverBackground#010a14
tab.hoverBorder#bdd1e6
tab.hoverForeground#95c2f0
tab.inactiveBackground#010a14
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorderTop#a2b7e4
tab.unfocusedActiveForeground#f3f5f8
tab.unfocusedInactiveBackground#010a14
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#010a14
terminal.findMatchBackground#735596
terminal.findMatchHighlightBackground#7d53ac50
terminal.foreground#b1c3d6
terminal.selectionBackground#0423428c
terminal.selectionForeground#fff
terminalCursor.foreground#fd7018
terminalOverviewRuler.cursorForeground#6f69a5
titleBar.activeBackground#010a14
titleBar.activeForeground#d0dce9
titleBar.inactiveBackground#010a14
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 Fog

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#041424
activityBar.activeBorder#18dcff
activityBar.background#041424
activityBar.border#041424
activityBar.foreground#fff
activityBar.inactiveForeground#9aa8b6
activityBarBadge.background#962118
activityBarBadge.foreground#fff
badge.background#057e94
badge.foreground#ccf5fc
banner.background#2f293f
breadcrumb.background#041424
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#041424
editor.findMatchBackground#11255c79
editor.findMatchHighlightBackground#272f9b38
editor.findMatchHighlightBorder#1874fd54
editor.foreground#ddd
editor.hoverHighlightBackground#7c3f078f
editor.inactiveSelectionBackground#2445776b
editor.lineHighlightBackground#011c3788
editor.lineHighlightBorder#011c37
editor.rangeHighlightBackground#011c37
editor.selectionBackground#2445776b
editor.selectionHighlightBackground#383e57
editor.selectionHighlightBorder#187bfd67
editor.wordHighlightBackground#33190571
editor.wordHighlightBorder#fd70182f
editor.wordHighlightStrongBackground#3f365c
editor.wordHighlightStrongBorder#3a334e
editorBracketHighlight.foreground1#18dcff
editorBracketHighlight.foreground2#ffcccc
editorBracketHighlight.foreground3#b0cfe4
editorBracketHighlight.foreground4#eefcbb
editorBracketHighlight.foreground5#c6f7f1
editorBracketHighlight.foreground6#d9c1ff
editorBracketMatch.background#81390c41
editorBracketMatch.border#81390c41
editorCursor.foreground#fd7018
editorError.background#f4425165
editorError.border#b80000
editorError.foreground#ff0000
editorGroup.border#434d62
editorGroupHeader.tabsBackground#041424
editorGroupHeader.tabsBorder#0e5194
editorGutter.background#041424
editorHoverWidget.background#041424
editorHoverWidget.border#0e5194
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#62adf8
editorIndentGuide.background#68629e4b
editorInfo.border#434962
editorLineNumber.activeForeground#fd7018
editorLineNumber.foreground#82afdb73
editorOverviewRuler.border#041424
editorOverviewRuler.findMatchForeground#fd7018
editorSuggestWidget.background#041424
editorSuggestWidget.border#82afdb79
editorSuggestWidget.focusHighlightForeground#7c9ec0
editorSuggestWidget.foreground#d9e6f5
editorSuggestWidget.highlightForeground#fd7018
editorSuggestWidget.selectedBackground#011c37
editorSuggestWidget.selectedForeground#fff
editorSuggestWidget.selectedIconForeground#18dcff
editorWidget.background#011c37
editorWidget.border#697694
editorWidget.foreground#e1e6ec
editorWidget.resizeBorder#fd7018
focusBorder#82afdb8f
foreground#f7f2ed
icon.foreground#18dcff
input.background#011c37
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#18dcff
list.deemphasizedForeground#cdcdcd
list.hoverBackground#011c37
list.hoverForeground#b0abe6
list.inactiveSelectionBackground#011c37
list.inactiveSelectionForeground#82b1ee
list.inactiveSelectionIconForeground#18dcff
menu.background#041424
menu.border#82afdb48
menu.foreground#c1defc
menu.selectionBackground#121d2ec5
menu.selectionBorder#2f3e68c5
menu.selectionForeground#fff
menu.separatorBackground#434f62
menubar.selectionBackground#1a33558a
menubar.selectionForeground#bad3f8
minimap.selectionHighlight#464362
minimapSlider.activeBackground#00000028
minimapSlider.background#0000001a
minimapSlider.hoverBackground#7a410b4d
notifications.background#041424
notifications.border#041424
notifications.foreground#fff
panel.background#031222
panel.border#0e5194
panelTitle.activeBorder#0e5194
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#a7aeb6
quickInput.background#041424
quickInput.foreground#fff
quickInputList.focusBackground#011c37
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#18dcff
scrollbarSlider.activeBackground#fd7018a4
scrollbarSlider.background#fd701893
scrollbarSlider.hoverBackground#fd7018
settings.checkboxBackground#011c37
settings.checkboxBorder#fd7018
settings.checkboxForeground#d3d0f3
settings.dropdownBackground#011c37
settings.dropdownBorder#625e88
settings.dropdownForeground#c7c4e4
settings.focusedRowBackground#011c37
settings.focusedRowBorder#625e88
settings.headerBorder#fd70187c
settings.headerForeground#fd7018
settings.modifiedItemIndicator#fd7018
settings.numberInputBackground#011c37
settings.numberInputBorder#625e88
settings.numberInputForeground#c6def1
settings.rowHoverBackground#09407775
settings.sashBorder#625e88
settings.textInputBackground#011c37
settings.textInputBorder#625e88
settings.textInputForeground#eee
sideBar.background#041424
sideBar.border#041424
sideBar.foreground#ddd
sideBarSectionHeader.background#041424
sideBarSectionHeader.border#041424
sideBarSectionHeader.foreground#ddd
sideBarTitle.foreground#92c4f7
statusBar.background#011c37
statusBar.debuggingBackground#06213b
statusBar.debuggingForeground#fff
statusBar.foreground#cdd8e4
statusBar.noFolderBackground#041424
statusBarItem.hoverBackground#263253
statusBarItem.remoteBackground#fd7018
statusBarItem.remoteForeground#e5caba
tab.activeBackground#041424
tab.activeBorder#041424
tab.activeBorderTop#0e5194
tab.activeForeground#d5e8fa
tab.border#041424
tab.hoverBackground#041424
tab.hoverBorder#bdd1e6
tab.hoverForeground#95c2f0
tab.inactiveBackground#041424
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorderTop#a2b7e4
tab.unfocusedActiveForeground#f3f5f8
tab.unfocusedInactiveBackground#041424
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#041424
terminal.findMatchBackground#735596
terminal.findMatchHighlightBackground#7d53ac50
terminal.foreground#b1c3d6
terminal.selectionBackground#0423428c
terminal.selectionForeground#fff
terminalCursor.foreground#fd7018
terminalOverviewRuler.cursorForeground#6f69a5
titleBar.activeBackground#041424
titleBar.activeForeground#d0dce9
titleBar.inactiveBackground#041424
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	#ff9393	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#fbadf7	—
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	#18dcff	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#18dcff	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#fffa65	—
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	—