PurpleSpace

Name: PurpleSpace
Author: YesCode

Publisher: YesCodeThemes in package: 12

Open in VS Code GitHub

Color themes

VS Code preview

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

PurpleSpace — PurpleSpace IV

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#170e20
activityBar.activeBorder#af9bf7
activityBar.background#1f132c
activityBar.foreground#a793ee
activityBar.inactiveForeground#897db8
activityBarBadge.background#5233c2
activityBarBadge.foreground#d5cef0
badge.background#411274
badge.foreground#fff
banner.background#33293f
breadcrumb.background#170e20
breadcrumb.focusForeground#fff
breadcrumb.foreground#c2b5f0
button.background#4c26b470
button.border#8f75ec
button.foreground#e6d4f5
button.hoverBackground#3e0480
button.secondaryBackground#340c5c
button.secondaryForeground#ddd
button.secondaryHoverBackground#4227a7
checkbox.background#1f132c
checkbox.border#8f75ec
checkbox.foreground#cdcdcd
descriptionForeground#dfd5ee
dropdown.border#7850b8
editor.background#170e20
editor.findMatchBackground#290750ad
editor.findMatchHighlightBackground#302f6c60
editor.findMatchHighlightBorder#2e0c64c7
editor.foreground#cdcdcd
editor.hoverHighlightBackground#32026894
editor.inactiveSelectionBackground#441b709f
editor.lineHighlightBackground#27153a
editor.lineHighlightBorder#28193871
editor.rangeHighlightBackground#47034949
editor.rangeHighlightBorder#5e2f6c
editor.selectionBackground#441b709f
editor.selectionHighlightBackground#403159
editor.selectionHighlightBorder#967c98
editor.wordHighlightBackground#2e0649e0
editor.wordHighlightBorder#1f132c
editor.wordHighlightStrongBackground#094e5f98
editor.wordHighlightStrongBorder#602f6c
editorBracketHighlight.foreground1#f7b7bd
editorBracketHighlight.foreground2#ffeaa7
editorBracketHighlight.foreground3#dfe6e9
editorBracketHighlight.foreground4#baec04
editorBracketHighlight.foreground5#81ecec
editorBracketHighlight.foreground6#dce285
editorBracketMatch.background#4f2f6c93
editorBracketMatch.border#462f6c
editorCursor.foreground#cba2f7
editorError.background#f4425165
editorError.border#ec3535
editorError.foreground#ff0000
editorGroup.border#4f2f6c
editorGroupHeader.tabsBackground#1f132c
editorGroupHeader.tabsBorder#7450b817
editorGutter.background#170e20
editorHoverWidget.background#170e20
editorHoverWidget.border#6750b8
editorHoverWidget.foreground#c1abdd
editorIndentGuide.activeBackground#6c3e9e
editorIndentGuide.background#7a9ff017
editorInfo.border#462f6c
editorLineNumber.activeForeground#9562cc
editorLineNumber.foreground#6f6080e5
editorOverviewRuler.border#170e20
editorOverviewRuler.findMatchForeground#8f75ecd5
editorSuggestWidget.background#170e20
editorSuggestWidget.border#6c50b86c
editorSuggestWidget.focusHighlightForeground#f1e1a8
editorSuggestWidget.foreground#d3dadd
editorSuggestWidget.highlightForeground#fab1a0
editorSuggestWidget.selectedBackground#260842b7
editorSuggestWidget.selectedForeground#9ae6cc
editorSuggestWidget.selectedIconForeground#c17ae2
editorWidget.background#12071f
editorWidget.border#8f75ec
editorWidget.foreground#c8f1e4
editorWidget.resizeBorder#8f75ec
focusBorder#8f75ec
foreground#c3b2e2
icon.foreground#8f75ec
input.background#1f132c
input.border#9f75ecb0
input.foreground#d8e1f0
input.placeholderForeground#ddd
inputOption.activeBackground#2e0450dc
inputOption.activeBorder#8f75ec
inputOption.activeForeground#e5cdf8
inputOption.hoverBackground#3f0746
list.activeSelectionBackground#3e0b4b77
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#a365e6
list.deemphasizedForeground#cdcdcd
list.hoverBackground#220f31
list.hoverForeground#a566e9
list.inactiveSelectionBackground#34214996
list.inactiveSelectionForeground#ba81fc
list.inactiveSelectionIconForeground#c290f8
menu.background#170e20
menu.border#8f75ec6b
menu.foreground#d1c8f1
menu.selectionBackground#2b0842cc
menu.selectionBorder#6f50b8
menu.selectionForeground#fff
menu.separatorBackground#a77fdb6e
menubar.selectionBackground#2f1a7c73
menubar.selectionForeground#c9bde9
minimap.selectionHighlight#3d45495e
minimapSlider.activeBackground#00000028
minimapSlider.background#1212123f
minimapSlider.hoverBackground#3d45496e
notifications.background#170e20
notifications.border#867c98
notifications.foreground#fff
panel.background#090113
panel.border#8f75eca2
panelTitle.activeBorder#8f75ec
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#bca7e4
quickInput.background#170e20
quickInput.foreground#d1b7f3
quickInputList.focusBackground#280842b7
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#8f75ec
scrollbarSlider.activeBackground#132742
scrollbarSlider.background#351058bb
scrollbarSlider.hoverBackground#602f6c
settings.checkboxBackground#1e034273
settings.checkboxBorder#8f75ec
settings.checkboxForeground#c9baeb
settings.dropdownBackground#1f132c
settings.dropdownBorder#8f75ec
settings.dropdownForeground#dcc2f1
settings.focusedRowBackground#03332283
settings.focusedRowBorder#8f75ec
settings.headerBorder#8f75ec
settings.headerForeground#bdabff
settings.modifiedItemIndicator#8f75ec
settings.numberInputBackground#1a0536b4
settings.numberInputBorder#8f75ec
settings.numberInputForeground#d3c6f1
settings.rowHoverBackground#1a044d6b
settings.sashBorder#8f75ec
settings.textInputBackground#2e065c52
settings.textInputBorder#8f75ec
settings.textInputForeground#eee
sideBar.background#170e20
sideBar.border#7450b817
sideBar.foreground#bbb3d6
sideBarSectionHeader.background#170e20
sideBarSectionHeader.border#7450b80a
sideBarSectionHeader.foreground#b4a1fa
sideBarTitle.foreground#cabcfc
statusBar.background#1f132c
statusBar.debuggingBackground#400447
statusBar.debuggingForeground#fff
statusBar.foreground#cdc3f1
statusBar.noFolderBackground#170e20
statusBarItem.hoverBackground#441758
statusBarItem.remoteBackground#2f1880
statusBarItem.remoteForeground#ccc0f7
tab.activeBackground#170e20
tab.activeBorder#170e20
tab.activeBorderTop#170e20
tab.activeForeground#fff
tab.border#1f132c
tab.hoverBackground#26084263
tab.hoverBorder#8f75ec
tab.hoverForeground#c29ff0
tab.inactiveBackground#1f132c
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorder#170e20
tab.unfocusedActiveBorderTop#170e20
tab.unfocusedActiveForeground#d2cbe9
tab.unfocusedInactiveBackground#1f132c
tab.unfocusedInactiveForeground#c0d1d8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#b2a1f0
terminal.ansiBrightMagenta#8F4673
terminal.ansiBrightRed#FB543F
terminal.ansiBrightWhite#FDF4C1
terminal.ansiBrightYellow#dfe6e9
terminal.ansiCyan#8BA59B
terminal.ansiGreen#95C085
terminal.ansiMagenta#8F4673
terminal.ansiRed#FB543F
terminal.ansiWhite#A89984
terminal.ansiYellow#FAC03B
terminal.background#0a0813
terminal.findMatchBackground#300652b6
terminal.findMatchHighlightBackground#57045350
terminal.foreground#b2acbb
terminal.selectionBackground#1f132c
terminal.selectionForeground#fff
terminalCursor.foreground#5a3383
terminalOverviewRuler.cursorForeground#fff
titleBar.activeBackground#170e20
titleBar.activeForeground#dcd4f7
titleBar.border#7450b817
titleBar.inactiveBackground#170e20
titleBar.inactiveForeground#dcd4f7
tree.indentGuidesStroke#8f75ec
widget.shadow#8650b827

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#696186	italic underline
variable, string constant.other.placeholder, source.python, meta.function-call.arguments.python	#ffeaa7	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#f88690	—
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	#ffdd59	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.type.exception.python	#f0cc1b	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#fab1a0	—
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	#7bed9f	—
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	#dbecec	—
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	#89b2db	—
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	#7bed9f	—
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	—
source.python support.type.python	#d67e5c	—
string.interpolated.python string.quoted.single.python	#16b673	—
meta.function-call.generic.python	#16a3b6	—
storage.type.string.python, source.python meta.function-call.python support.type.python, entity.other.inherited-class.python	#49ace9	—
source.python, meta.function-call.arguments.python	#e9a9a9	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.type.exception.python	#73bca2	—
source.python support.type.python	#d67e5c	—
string.interpolated.python string.quoted.single.python	#16b673	—
meta.function-call.generic.python	#16a3b6	—
storage.type.string.python, source.python meta.function-call.python support.type.python, entity.other.inherited-class.python	#49ace9	—

VS Code preview

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

PurpleSpace — PurpleSpace IV 23

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#050307
activityBar.activeBorder#af9bf7
activityBar.background#050307
activityBar.foreground#cbbefc
activityBar.inactiveForeground#9f98bd
activityBarBadge.background#5233c2
activityBarBadge.foreground#d5cef0
badge.background#411274
badge.foreground#fff
banner.background#33293f
breadcrumb.background#170e20
breadcrumb.focusForeground#fff
breadcrumb.foreground#c2b5f0
button.background#4c26b470
button.border#8f75ec
button.foreground#e6d4f5
button.hoverBackground#3e0480
button.secondaryBackground#340c5c
button.secondaryForeground#ddd
button.secondaryHoverBackground#4227a7
checkbox.background#1f132c
checkbox.border#8f75ec
checkbox.foreground#cdcdcd
descriptionForeground#dfd5ee
dropdown.border#7850b8
editor.background#170e20
editor.findMatchBackground#290750ad
editor.findMatchHighlightBackground#302f6c60
editor.findMatchHighlightBorder#2e0c64c7
editor.foreground#cdcdcd
editor.hoverHighlightBackground#32026894
editor.inactiveSelectionBackground#441b709f
editor.lineHighlightBackground#7346a027
editor.lineHighlightBorder#28193871
editor.rangeHighlightBackground#47034949
editor.rangeHighlightBorder#5e2f6c
editor.selectionBackground#441b709f
editor.selectionHighlightBackground#403159
editor.selectionHighlightBorder#967c98
editor.wordHighlightBackground#2e0649e0
editor.wordHighlightBorder#1f132c
editor.wordHighlightStrongBackground#094e5f98
editor.wordHighlightStrongBorder#602f6c
editorBracketHighlight.foreground1#f7b7bd
editorBracketHighlight.foreground2#ffeaa7
editorBracketHighlight.foreground3#dfe6e9
editorBracketHighlight.foreground4#baec04
editorBracketHighlight.foreground5#81ecec
editorBracketHighlight.foreground6#dce285
editorBracketMatch.background#4f2f6c93
editorBracketMatch.border#462f6c
editorCursor.foreground#cba2f7
editorError.background#f4425165
editorError.border#ec3535
editorError.foreground#ff0000
editorGroup.border#4f2f6c
editorGroupHeader.tabsBackground#1f132c
editorGroupHeader.tabsBorder#472d64
editorGutter.background#170e20
editorHoverWidget.background#170e20
editorHoverWidget.border#6750b8
editorHoverWidget.foreground#c1abdd
editorIndentGuide.activeBackground#6c3e9e
editorIndentGuide.background#7a9ff017
editorInfo.border#462f6c
editorLineNumber.activeForeground#d8b4ff
editorLineNumber.foreground#968da0
editorOverviewRuler.border#170e20
editorOverviewRuler.findMatchForeground#8f75ecd5
editorSuggestWidget.background#170e20
editorSuggestWidget.border#6c50b86c
editorSuggestWidget.focusHighlightForeground#f1e1a8
editorSuggestWidget.foreground#d3dadd
editorSuggestWidget.highlightForeground#fab1a0
editorSuggestWidget.selectedBackground#260842b7
editorSuggestWidget.selectedForeground#9ae6cc
editorSuggestWidget.selectedIconForeground#c17ae2
editorWidget.background#12071f
editorWidget.border#8f75ec
editorWidget.foreground#c8f1e4
editorWidget.resizeBorder#8f75ec
focusBorder#8f75ec
foreground#c3b2e2
icon.foreground#8f75ec
input.background#1f132c
input.border#9f75ecb0
input.foreground#d8e1f0
input.placeholderForeground#ddd
inputOption.activeBackground#2e0450dc
inputOption.activeBorder#8f75ec
inputOption.activeForeground#e5cdf8
inputOption.hoverBackground#3f0746
list.activeSelectionBackground#28183896
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#c7a3ee
list.deemphasizedForeground#cdcdcd
list.hoverBackground#28183896
list.hoverForeground#a566e9
list.inactiveSelectionBackground#28183896
list.inactiveSelectionForeground#fbf7ff
list.inactiveSelectionIconForeground#c290f8
menu.background#170e20
menu.border#8f75ec6b
menu.foreground#d1c8f1
menu.selectionBackground#2b0842cc
menu.selectionBorder#6f50b8
menu.selectionForeground#fff
menu.separatorBackground#a77fdb6e
menubar.selectionBackground#2f1a7c73
menubar.selectionForeground#c9bde9
minimap.selectionHighlight#3d45495e
minimapSlider.activeBackground#00000028
minimapSlider.background#1212123f
minimapSlider.hoverBackground#3d45496e
notifications.background#170e20
notifications.border#867c98
notifications.foreground#fff
panel.background#050307
panel.border#3e2c80a2
panelTitle.activeBorder#b09bfd
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#bca7e4
quickInput.background#170e20
quickInput.foreground#d1b7f3
quickInputList.focusBackground#280842b7
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#8f75ec
scrollbarSlider.activeBackground#132742
scrollbarSlider.background#351058bb
scrollbarSlider.hoverBackground#602f6c
settings.checkboxBackground#1e034273
settings.checkboxBorder#8f75ec
settings.checkboxForeground#c9baeb
settings.dropdownBackground#1f132c
settings.dropdownBorder#8f75ec
settings.dropdownForeground#dcc2f1
settings.focusedRowBackground#03332283
settings.focusedRowBorder#8f75ec
settings.headerBorder#8f75ec
settings.headerForeground#bdabff
settings.modifiedItemIndicator#8f75ec
settings.numberInputBackground#1a0536b4
settings.numberInputBorder#8f75ec
settings.numberInputForeground#d3c6f1
settings.rowHoverBackground#1a044d6b
settings.sashBorder#8f75ec
settings.textInputBackground#2e065c52
settings.textInputBorder#8f75ec
settings.textInputForeground#eee
sideBar.background#050307
sideBar.border#7450b817
sideBar.foreground#bbb3d6
sideBarSectionHeader.background#050307
sideBarSectionHeader.border#7450b80a
sideBarSectionHeader.foreground#b4a1fa
sideBarTitle.foreground#cabcfc
statusBar.background#050307
statusBar.debuggingBackground#400447
statusBar.debuggingForeground#fff
statusBar.foreground#cdc3f1
statusBar.noFolderBackground#170e20
statusBarItem.hoverBackground#441758
statusBarItem.remoteBackground#2f1880
statusBarItem.remoteForeground#ccc0f7
tab.activeBackground#170e20
tab.activeBorder#170e20
tab.activeBorderTop#170e20
tab.activeForeground#fff
tab.border#472d64
tab.hoverBackground#26084263
tab.hoverBorder#8f75ec
tab.hoverForeground#c29ff0
tab.inactiveBackground#1f132c
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorder#170e20
tab.unfocusedActiveBorderTop#170e20
tab.unfocusedActiveForeground#d2cbe9
tab.unfocusedInactiveBackground#1f132c
tab.unfocusedInactiveForeground#c0d1d8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#b2a1f0
terminal.ansiBrightMagenta#8F4673
terminal.ansiBrightRed#FB543F
terminal.ansiBrightWhite#FDF4C1
terminal.ansiBrightYellow#dfe6e9
terminal.ansiCyan#8BA59B
terminal.ansiGreen#95C085
terminal.ansiMagenta#8F4673
terminal.ansiRed#FB543F
terminal.ansiWhite#A89984
terminal.ansiYellow#FAC03B
terminal.background#050307
terminal.findMatchBackground#300652b6
terminal.findMatchHighlightBackground#57045350
terminal.foreground#b2acbb
terminal.selectionBackground#1f132c
terminal.selectionForeground#fff
terminalCursor.foreground#5a3383
terminalOverviewRuler.cursorForeground#fff
titleBar.activeBackground#170e20
titleBar.activeForeground#dcd4f7
titleBar.border#472d64
titleBar.inactiveBackground#170e20
titleBar.inactiveForeground#dcd4f7
tree.indentGuidesStroke#8f75ec
widget.shadow#8650b827

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#756b97	bold
variable, string constant.other.placeholder, source.python, meta.function-call.arguments.python	#ffeaa7	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#f88690	—
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	#ffdd59	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.type.exception.python	#f0cc1b	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#fab1a0	—
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	#7bed9f	—
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	#dbecec	—
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	#89b2db	—
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	#7bed9f	—
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	—
source.python support.type.python	#d67e5c	—
string.interpolated.python string.quoted.single.python	#16b673	—
meta.function-call.generic.python	#16a3b6	—
storage.type.string.python, source.python meta.function-call.python support.type.python, entity.other.inherited-class.python	#49ace9	—
source.python, meta.function-call.arguments.python	#e9a9a9	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.type.exception.python	#73bca2	—
source.python support.type.python	#d67e5c	—
string.interpolated.python string.quoted.single.python	#16b673	—
meta.function-call.generic.python	#16a3b6	—
storage.type.string.python, source.python meta.function-call.python support.type.python, entity.other.inherited-class.python	#49ace9	—

VS Code preview

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

PurpleSpace — PurpleSpace IV Black

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#050307
activityBar.activeBorder#af9bf7
activityBar.background#050307
activityBar.foreground#cbbefc
activityBar.inactiveForeground#9f98bd
activityBarBadge.background#5233c2
activityBarBadge.foreground#d5cef0
badge.background#411274
badge.foreground#fff
banner.background#33293f
breadcrumb.background#050307
breadcrumb.focusForeground#fff
breadcrumb.foreground#c2b5f0
button.background#4c26b470
button.border#8f75ec
button.foreground#e6d4f5
button.hoverBackground#3e0480
button.secondaryBackground#340c5c
button.secondaryForeground#ddd
button.secondaryHoverBackground#4227a7
checkbox.background#100916
checkbox.border#8f75ec
checkbox.foreground#cdcdcd
descriptionForeground#dfd5ee
dropdown.border#7850b8
editor.background#050307
editor.findMatchBackground#290750ad
editor.findMatchHighlightBackground#302f6c60
editor.findMatchHighlightBorder#2e0c64c7
editor.foreground#cdcdcd
editor.hoverHighlightBackground#32026894
editor.inactiveSelectionBackground#441b709f
editor.lineHighlightBackground#7346a027
editor.lineHighlightBorder#28193871
editor.rangeHighlightBackground#47034949
editor.rangeHighlightBorder#5e2f6c
editor.selectionBackground#441b709f
editor.selectionHighlightBackground#403159
editor.selectionHighlightBorder#967c98
editor.wordHighlightBackground#2e0649e0
editor.wordHighlightBorder#100916
editor.wordHighlightStrongBackground#094e5f98
editor.wordHighlightStrongBorder#602f6c
editorBracketHighlight.foreground1#f7b7bd
editorBracketHighlight.foreground2#ffeaa7
editorBracketHighlight.foreground3#dfe6e9
editorBracketHighlight.foreground4#baec04
editorBracketHighlight.foreground5#81ecec
editorBracketHighlight.foreground6#dce285
editorBracketMatch.background#4f2f6c93
editorBracketMatch.border#462f6c
editorCursor.foreground#cba2f7
editorError.background#f4425165
editorError.border#ec3535
editorError.foreground#ff0000
editorGroup.border#4f2f6c
editorGroupHeader.tabsBackground#100916
editorGroupHeader.tabsBorder#271a35
editorGutter.background#0b070f
editorHoverWidget.background#050307
editorHoverWidget.border#6750b8
editorHoverWidget.foreground#c1abdd
editorIndentGuide.activeBackground#6c3e9e
editorIndentGuide.background#7a9ff017
editorInfo.border#462f6c
editorLineNumber.activeForeground#d8b4ff
editorLineNumber.foreground#968da0
editorOverviewRuler.border#050307
editorOverviewRuler.findMatchForeground#8f75ecd5
editorSuggestWidget.background#050307
editorSuggestWidget.border#6c50b86c
editorSuggestWidget.focusHighlightForeground#f1e1a8
editorSuggestWidget.foreground#d3dadd
editorSuggestWidget.highlightForeground#fab1a0
editorSuggestWidget.selectedBackground#260842b7
editorSuggestWidget.selectedForeground#9ae6cc
editorSuggestWidget.selectedIconForeground#c17ae2
editorWidget.background#12071f
editorWidget.border#8f75ec
editorWidget.foreground#c8f1e4
editorWidget.resizeBorder#8f75ec
focusBorder#8f75ec
foreground#c3b2e2
icon.foreground#8f75ec
input.background#100916
input.border#9f75ecb0
input.foreground#d8e1f0
input.placeholderForeground#ddd
inputOption.activeBackground#2e0450dc
inputOption.activeBorder#8f75ec
inputOption.activeForeground#e5cdf8
inputOption.hoverBackground#3f0746
list.activeSelectionBackground#28183896
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#c7a3ee
list.deemphasizedForeground#cdcdcd
list.hoverBackground#28183896
list.hoverForeground#a566e9
list.inactiveSelectionBackground#28183896
list.inactiveSelectionForeground#fbf7ff
list.inactiveSelectionIconForeground#c290f8
menu.background#050307
menu.border#8f75ec6b
menu.foreground#d1c8f1
menu.selectionBackground#2b0842cc
menu.selectionBorder#6f50b8
menu.selectionForeground#fff
menu.separatorBackground#a77fdb6e
menubar.selectionBackground#2f1a7c73
menubar.selectionForeground#c9bde9
minimap.selectionHighlight#3d45495e
minimapSlider.activeBackground#00000028
minimapSlider.background#1212123f
minimapSlider.hoverBackground#3d45496e
notifications.background#050307
notifications.border#867c98
notifications.foreground#fff
panel.background#050307
panel.border#3e2c80a2
panelTitle.activeBorder#b09bfd
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#bca7e4
quickInput.background#050307
quickInput.foreground#d1b7f3
quickInputList.focusBackground#280842b7
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#8f75ec
scrollbarSlider.activeBackground#4d2b6e96
scrollbarSlider.background#281838b9
scrollbarSlider.hoverBackground#28183896
settings.checkboxBackground#1e034273
settings.checkboxBorder#8f75ec
settings.checkboxForeground#c9baeb
settings.dropdownBackground#100916
settings.dropdownBorder#8f75ec
settings.dropdownForeground#dcc2f1
settings.focusedRowBackground#03332283
settings.focusedRowBorder#8f75ec
settings.headerBorder#8f75ec
settings.headerForeground#bdabff
settings.modifiedItemIndicator#8f75ec
settings.numberInputBackground#1a0536b4
settings.numberInputBorder#8f75ec
settings.numberInputForeground#d3c6f1
settings.rowHoverBackground#1a044d6b
settings.sashBorder#8f75ec
settings.textInputBackground#2e065c52
settings.textInputBorder#8f75ec
settings.textInputForeground#eee
sideBar.background#050307
sideBar.border#7450b817
sideBar.foreground#bbb3d6
sideBarSectionHeader.background#050307
sideBarSectionHeader.border#7450b80a
sideBarSectionHeader.foreground#b4a1fa
sideBarTitle.foreground#cabcfc
statusBar.background#050307
statusBar.debuggingBackground#400447
statusBar.debuggingForeground#fff
statusBar.foreground#cdc3f1
statusBar.noFolderBackground#050307
statusBarItem.hoverBackground#441758
statusBarItem.remoteBackground#2f1880
statusBarItem.remoteForeground#ccc0f7
tab.activeBackground#050307
tab.activeBorder#050307
tab.activeBorderTop#b062ff
tab.activeForeground#fff
tab.border#271a35
tab.hoverBackground#26084263
tab.hoverBorder#8f75ec
tab.hoverForeground#c29ff0
tab.inactiveBackground#100916
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorder#050307
tab.unfocusedActiveBorderTop#050307
tab.unfocusedActiveForeground#d2cbe9
tab.unfocusedInactiveBackground#100916
tab.unfocusedInactiveForeground#c0d1d8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#b2a1f0
terminal.ansiBrightMagenta#8F4673
terminal.ansiBrightRed#FB543F
terminal.ansiBrightWhite#FDF4C1
terminal.ansiBrightYellow#dfe6e9
terminal.ansiCyan#8BA59B
terminal.ansiGreen#95C085
terminal.ansiMagenta#8F4673
terminal.ansiRed#FB543F
terminal.ansiWhite#A89984
terminal.ansiYellow#FAC03B
terminal.background#050307
terminal.findMatchBackground#300652b6
terminal.findMatchHighlightBackground#57045350
terminal.foreground#b2acbb
terminal.selectionBackground#100916
terminal.selectionForeground#fff
terminalCursor.foreground#5a3383
terminalOverviewRuler.cursorForeground#fff
titleBar.activeBackground#050307
titleBar.activeForeground#dcd4f7
titleBar.border#271a35
titleBar.inactiveBackground#050307
titleBar.inactiveForeground#dcd4f7
tree.indentGuidesStroke#8f75ec
widget.shadow#8650b827

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#756b97	bold
variable, string constant.other.placeholder, source.python, meta.function-call.arguments.python	#ffeaa7	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#f88690	—
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	#ffdd59	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.type.exception.python	#f0cc1b	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#fab1a0	—
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	#7bed9f	—
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	#dbecec	—
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	#89b2db	—
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	#7bed9f	—
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	—
source.python support.type.python	#d67e5c	—
string.interpolated.python string.quoted.single.python	#16b673	—
meta.function-call.generic.python	#16a3b6	—
storage.type.string.python, source.python meta.function-call.python support.type.python, entity.other.inherited-class.python	#49ace9	—
source.python, meta.function-call.arguments.python	#e9a9a9	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.type.exception.python	#73bca2	—
source.python support.type.python	#d67e5c	—
string.interpolated.python string.quoted.single.python	#16b673	—
meta.function-call.generic.python	#16a3b6	—
storage.type.string.python, source.python meta.function-call.python support.type.python, entity.other.inherited-class.python	#49ace9	—

VS Code preview

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

PurpleSpace — PurpleSpace IV Bordered

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#170e20
activityBar.activeBorder#af9bf7
activityBar.background#1f132c
activityBar.foreground#aae7e9
activityBar.inactiveForeground#897db8
activityBarBadge.background#032c2e
activityBarBadge.foreground#d5cef0
badge.background#411274
badge.foreground#fff
banner.background#33293f
breadcrumb.background#170e20
breadcrumb.focusForeground#fff
breadcrumb.foreground#c2b5f0
button.background#4c26b470
button.border#8f75ec
button.foreground#e6d4f5
button.hoverBackground#3e0480
button.secondaryBackground#340c5c
button.secondaryForeground#ddd
button.secondaryHoverBackground#4227a7
checkbox.background#1f132c
checkbox.border#8f75ec
checkbox.foreground#cdcdcd
descriptionForeground#dfd5ee
dropdown.border#7850b8
editor.background#170e20
editor.findMatchBackground#290750ad
editor.findMatchHighlightBackground#302f6c60
editor.findMatchHighlightBorder#2e0c64c7
editor.foreground#cdcdcd
editor.hoverHighlightBackground#32026894
editor.inactiveSelectionBackground#441b709f
editor.lineHighlightBackground#27153a
editor.lineHighlightBorder#28193871
editor.rangeHighlightBackground#47034949
editor.rangeHighlightBorder#5e2f6c
editor.selectionBackground#441b709f
editor.selectionHighlightBackground#403159
editor.selectionHighlightBorder#967c98
editor.wordHighlightBackground#2e0649e0
editor.wordHighlightBorder#1f132c
editor.wordHighlightStrongBackground#094e5f98
editor.wordHighlightStrongBorder#602f6c
editorBracketHighlight.foreground1#75e8ec
editorBracketHighlight.foreground2#ffeaa7
editorBracketHighlight.foreground3#dfe6e9
editorBracketHighlight.foreground4#baec04
editorBracketHighlight.foreground5#81ecec
editorBracketHighlight.foreground6#dce285
editorBracketMatch.background#4f2f6c93
editorBracketMatch.border#462f6c
editorCursor.foreground#cba2f7
editorError.background#f4425165
editorError.border#ec3535
editorError.foreground#ff0000
editorGroup.border#4f2f6c
editorGroupHeader.tabsBackground#1f132c
editorGroupHeader.tabsBorder#7450b857
editorGutter.background#170e20
editorHoverWidget.background#170e20
editorHoverWidget.border#6750b8
editorHoverWidget.foreground#c1abdd
editorIndentGuide.activeBackground#6c3e9e
editorIndentGuide.background#7a9ff017
editorInfo.border#462f6c
editorLineNumber.activeForeground#9562cc
editorLineNumber.foreground#6f6080e5
editorOverviewRuler.border#170e20
editorOverviewRuler.findMatchForeground#8f75ecd5
editorSuggestWidget.background#170e20
editorSuggestWidget.border#6c50b86c
editorSuggestWidget.focusHighlightForeground#f1e1a8
editorSuggestWidget.foreground#d3dadd
editorSuggestWidget.highlightForeground#fab1a0
editorSuggestWidget.selectedBackground#260842b7
editorSuggestWidget.selectedForeground#9ae6cc
editorSuggestWidget.selectedIconForeground#c17ae2
editorWidget.background#12071f
editorWidget.border#8f75ec
editorWidget.foreground#c8f1e4
editorWidget.resizeBorder#8f75ec
focusBorder#8f75ec
foreground#c3b2e2
icon.foreground#75e8ec
input.background#1f132c
input.border#9f75ecb0
input.foreground#d8e1f0
input.placeholderForeground#ddd
inputOption.activeBackground#2e0450dc
inputOption.activeBorder#8f75ec
inputOption.activeForeground#e5cdf8
inputOption.hoverBackground#3f0746
list.activeSelectionBackground#3e0b4b77
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#b585e7
list.deemphasizedForeground#cdcdcd
list.hoverBackground#220f31
list.hoverForeground#a566e9
list.inactiveSelectionBackground#34214996
list.inactiveSelectionForeground#fbf7ff
list.inactiveSelectionIconForeground#75e8ec
menu.background#170e20
menu.border#8f75ec6b
menu.foreground#d1c8f1
menu.selectionBackground#2b0842cc
menu.selectionBorder#6f50b8
menu.selectionForeground#fff
menu.separatorBackground#a77fdb6e
menubar.selectionBackground#2f1a7c73
menubar.selectionForeground#c9bde9
minimap.selectionHighlight#3d45495e
minimapSlider.activeBackground#00000028
minimapSlider.background#1212123f
minimapSlider.hoverBackground#3d45496e
notifications.background#170e20
notifications.border#867c98
notifications.foreground#fff
panel.background#090113
panel.border#8f75eca2
panelTitle.activeBorder#8f75ec
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#bca7e4
quickInput.background#170e20
quickInput.foreground#d1b7f3
quickInputList.focusBackground#280842b7
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#8f75ec
scrollbarSlider.activeBackground#132742
scrollbarSlider.background#351058bb
scrollbarSlider.hoverBackground#602f6c
settings.checkboxBackground#1e034273
settings.checkboxBorder#8f75ec
settings.checkboxForeground#c9baeb
settings.dropdownBackground#1f132c
settings.dropdownBorder#8f75ec
settings.dropdownForeground#dcc2f1
settings.focusedRowBackground#03332283
settings.focusedRowBorder#8f75ec
settings.headerBorder#8f75ec
settings.headerForeground#bdabff
settings.modifiedItemIndicator#8f75ec
settings.numberInputBackground#1a0536b4
settings.numberInputBorder#8f75ec
settings.numberInputForeground#d3c6f1
settings.rowHoverBackground#1a044d6b
settings.sashBorder#8f75ec
settings.textInputBackground#2e065c52
settings.textInputBorder#8f75ec
settings.textInputForeground#eee
sideBar.background#170e20
sideBar.border#7450b817
sideBar.foreground#bbb3d6
sideBarSectionHeader.background#170e20
sideBarSectionHeader.border#7450b80a
sideBarSectionHeader.foreground#aadadb
sideBarTitle.foreground#aadadb
statusBar.background#0e0914
statusBar.debuggingBackground#27011c
statusBar.debuggingForeground#fff
statusBar.foreground#cdc3f1
statusBar.noFolderBackground#170e20
statusBarItem.hoverBackground#441758
statusBarItem.remoteBackground#1f132c
statusBarItem.remoteForeground#ccc0f7
tab.activeBackground#170e20
tab.activeBorder#170e20
tab.activeBorderTop#734cbb
tab.activeForeground#fff
tab.border#7450b857
tab.hoverBackground#26084263
tab.hoverBorder#8f75ec
tab.hoverForeground#c29ff0
tab.inactiveBackground#1f132c
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorder#170e20
tab.unfocusedActiveBorderTop#170e20
tab.unfocusedActiveForeground#d2cbe9
tab.unfocusedInactiveBackground#1f132c
tab.unfocusedInactiveForeground#c0d1d8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#b2a1f0
terminal.ansiBrightMagenta#8F4673
terminal.ansiBrightRed#FB543F
terminal.ansiBrightWhite#FDF4C1
terminal.ansiBrightYellow#dfe6e9
terminal.ansiCyan#8BA59B
terminal.ansiGreen#95C085
terminal.ansiMagenta#8F4673
terminal.ansiRed#FB543F
terminal.ansiWhite#A89984
terminal.ansiYellow#FAC03B
terminal.background#0a0813
terminal.findMatchBackground#300652b6
terminal.findMatchHighlightBackground#57045350
terminal.foreground#b2acbb
terminal.selectionBackground#1f132c
terminal.selectionForeground#fff
terminalCursor.foreground#5a3383
terminalOverviewRuler.cursorForeground#fff
titleBar.activeBackground#170e20
titleBar.activeForeground#dcd4f7
titleBar.border#7450b857
titleBar.inactiveBackground#170e20
titleBar.inactiveForeground#dcd4f7
tree.indentGuidesStroke#8f75ec
widget.shadow#8650b827

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#696186	italic underline
variable, string constant.other.placeholder, source.python, meta.function-call.arguments.python	#a5ec75	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#75e8ec	—
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	#ffdd59	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.type.exception.python	#f0cc1b	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#ff9d87	—
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	#f8fcbd	—
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	#f7f4cb	—
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	#89b2db	—
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	#7bed9f	—
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	—
source.python support.type.python	#d67e5c	—
string.interpolated.python string.quoted.single.python	#16b673	—
meta.function-call.generic.python	#16a3b6	—
storage.type.string.python, source.python meta.function-call.python support.type.python, entity.other.inherited-class.python	#49ace9	—
source.python, meta.function-call.arguments.python	#e9a9a9	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.type.exception.python	#73bca2	—
source.python support.type.python	#d67e5c	—
string.interpolated.python string.quoted.single.python	#16b673	—
meta.function-call.generic.python	#16a3b6	—
storage.type.string.python, source.python meta.function-call.python support.type.python, entity.other.inherited-class.python	#49ace9	—