greenspace

Name: greenspace
Author: YesCode

Publisher: YesCodeThemes in package: 21

Open in VS Code GitHub

Color themes

VS Code preview

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

greenspace — GreenSpace Sober Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

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

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

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

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

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#292e28
activityBar.activeBorder#9dc290
activityBar.background#2e332d
activityBar.border#2e332d
activityBar.foreground#c2d6bb
activityBar.inactiveForeground#999b99
activityBarBadge.background#1f221e
activityBarBadge.foreground#ecf3e2
badge.background#2d1761
badge.foreground#e7e6ec
banner.background#4744eb6e
breadcrumb.background#2e332d
breadcrumb.focusForeground#b8e6a8
breadcrumb.foreground#cdcdcd
button.background#222520
button.border#98a893
button.foreground#ddd
button.hoverBackground#372283d3
button.secondaryBackground#7d6dad
button.secondaryForeground#ddd
button.secondaryHoverBackground#31382f
checkbox.border#94a38f
descriptionForeground#aeb6ab
dropdown.border#94a38f
editor.background#2e332d
editor.findMatchBackground#1b1f19
editor.findMatchHighlightBackground#495745
editor.findMatchHighlightBorder#798675
editor.foreground#cdcdcd
editor.hoverHighlightBackground#4432a885
editor.inactiveSelectionBackground#40443fb4
editor.lineHighlightBackground#353b33
editor.lineHighlightBorder#353b33
editor.rangeHighlightBackground#262b25
editor.selectionBackground#40443fd2
editor.selectionHighlightBackground#6f6df098
editor.selectionHighlightBorder#798675
editor.wordHighlightBackground#2d362ad3
editor.wordHighlightBorder#7d8b78
editor.wordHighlightStrongBackground#21251f
editor.wordHighlightStrongBorder#748a6d
editorBracketHighlight.foreground1#e5fadf
editorBracketHighlight.foreground2#ffeaa7
editorBracketHighlight.foreground3#dfe6e9
editorBracketHighlight.foreground4#b69df0
editorBracketHighlight.foreground5#e1f196
editorBracketHighlight.foreground6#b3f8f8
editorBracketMatch.background#464e43
editorBracketMatch.border#464e43
editorCursor.foreground#c0d6b8
editorError.background#b8000052
editorError.border#e15555
editorError.foreground#ff0000
editorGroup.border#99ac93
editorGroupHeader.tabsBackground#353b33
editorGroupHeader.tabsBorder#353b33
editorGutter.background#2e332d
editorHoverWidget.background#2e332d
editorHoverWidget.border#00b89344
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#8d85be
editorIndentGuide.background#7a9ff017
editorInfo.border#5e479e
editorLineNumber.activeForeground#aec4a7
editorLineNumber.foreground#707a6c
editorOverviewRuler.border#2e332d
editorOverviewRuler.findMatchForeground#83947e
editorSuggestWidget.background#353b33
editorSuggestWidget.border#6b7768
editorSuggestWidget.focusHighlightForeground#fab1a0
editorSuggestWidget.foreground#dfe6e9
editorSuggestWidget.highlightForeground#81ecbf
editorSuggestWidget.selectedBackground#222520
editorSuggestWidget.selectedForeground#c5cfd9
editorSuggestWidget.selectedIconForeground#ffeaa7
editorWidget.background#292e28
editorWidget.border#83917f
editorWidget.foreground#bac2b7
editorWidget.resizeBorder#dbf3d4
focusBorder#6e7a6a
foreground#cdcdcd
icon.foreground#d0e6c9
input.background#2b302a
input.border#c9e4c0
input.foreground#fff
input.placeholderForeground#ddd
inputOption.activeBackground#1c1f1b
inputOption.activeBorder#5f695b
inputOption.activeForeground#fff
inputOption.hoverBackground#162258
list.activeSelectionBackground#4d554ac2
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#dcecd7
list.deemphasizedForeground#cdcdcd
list.hoverBackground#3a4139de
list.hoverForeground#fff
list.inactiveSelectionBackground#3e443c
list.inactiveSelectionForeground#cdcdcd
list.inactiveSelectionIconForeground#9fb698
menu.background#2e332d
menu.border#6c7968
menu.foreground#d3e2ce
menu.selectionBackground#42493f
menu.selectionBorder#555e52
menu.selectionForeground#fff
menu.separatorBackground#555e52
menubar.selectionBackground#3b4139
menubar.selectionForeground#bed3b6
minimap.selectionHighlight#717e6c
minimapSlider.activeBackground#00000028
minimapSlider.background#464b4471
minimapSlider.hoverBackground#5b685777
notifications.background#2e332d
notifications.border#6c7968
notifications.foreground#fff
panel.background#2e332dc9
panel.border#555f52
panelTitle.activeBorder#d5eecd
panelTitle.activeForeground#e0fcd7
panelTitle.inactiveForeground#aaafa9
quickInput.background#2e332d
quickInput.foreground#cdcdcd
quickInputList.focusBackground#191d19
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#b3c9ad
scrollbarSlider.activeBackground#515c4d
scrollbarSlider.background#444b42
scrollbarSlider.hoverBackground#4b5548
settings.checkboxBackground#292e28
settings.checkboxBorder#6e7a6a
settings.checkboxForeground#c4d6bd
settings.dropdownBackground#292e28
settings.dropdownBorder#6e7a6a
settings.dropdownForeground#c4d6bd
settings.focusedRowBackground#363b34
settings.focusedRowBorder#6e7a6a
settings.headerBorder#6e7a6a
settings.headerForeground#6e7a6a
settings.modifiedItemIndicator#6f7a6b
settings.numberInputBackground#292e28
settings.numberInputBorder#6e7a6a
settings.numberInputForeground#cdcdcd
settings.rowHoverBackground#48504598
settings.sashBorder#6e7a6a
settings.textInputBackground#292e28
settings.textInputBorder#6e7a6a
settings.textInputForeground#cdcdcd
sideBar.background#292e28
sideBar.border#2e332d
sideBar.foreground#ddd
sideBarSectionHeader.background#292e28
sideBarSectionHeader.border#353b3357
sideBarSectionHeader.foreground#e3ffda
sideBarTitle.foreground#d9eed2
statusBar.background#2e332d
statusBar.debuggingBackground#10130f
statusBar.foreground#b5beb2
statusBar.noFolderBackground#2e332d
statusBarItem.hoverBackground#434e3f
statusBarItem.remoteBackground#141614
statusBarItem.remoteForeground#f5f3fd
tab.activeBackground#2e332d
tab.activeBorder#2e332d
tab.activeBorderTop#2e332d
tab.activeForeground#e0fad7
tab.border#353b33
tab.hoverBackground#2e332d
tab.hoverBorder#a0b39a
tab.hoverForeground#cdc9e9
tab.inactiveBackground#353b33
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorder#2e332d
tab.unfocusedActiveBorderTop#2e332d
tab.unfocusedActiveForeground#f3f5f8
tab.unfocusedInactiveBackground#353b33
tab.unfocusedInactiveForeground#cdcdcd
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#b7ccb1
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#292e28
terminal.findMatchBackground#2b1883
terminal.findMatchHighlightBackground#2b3650
terminal.foreground#767e74
terminal.selectionBackground#41493e
terminal.selectionForeground#fff
terminalCursor.foreground#c0d6b8
terminalOverviewRuler.cursorForeground#fff
titleBar.activeBackground#2e332d
titleBar.activeForeground#dbf3d6
titleBar.border#353b33
titleBar.inactiveBackground#2e332d
titleBar.inactiveForeground#fff
tree.indentGuidesStroke#7e9975
widget.shadow#484c6e4f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8c9497	italic
variable, string constant.other.placeholder	#fdcb6e	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#ff7675	—
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	#fffa65	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#fffa65	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#ffb8b8	—
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	#84b7f1	—
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	#e4e9df	—
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	#b2cdee	—
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	#f3e49b	—
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.

greenspace — GreenSpace Sober Light S

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#141613
activityBar.activeBorder#9dc290
activityBar.background#141613
activityBar.border#2529246c
activityBar.foreground#c2d6bb
activityBar.inactiveForeground#999b99
activityBarBadge.background#406e30
activityBarBadge.foreground#ecf3e2
badge.background#2d1761
badge.foreground#e7e6ec
banner.background#4744eb6e
breadcrumb.background#252924
breadcrumb.focusForeground#b8e6a8
breadcrumb.foreground#cdcdcd
button.background#222520
button.border#98a893
button.foreground#ddd
button.hoverBackground#372283d3
button.secondaryBackground#7d6dad
button.secondaryForeground#ddd
button.secondaryHoverBackground#31382f
checkbox.border#94a38f
descriptionForeground#aeb6ab
dropdown.border#94a38f
editor.background#252924
editor.findMatchBackground#5561559f
editor.findMatchHighlightBackground#374135
editor.findMatchHighlightBorder#5f8b51
editor.foreground#cdcdcd
editor.hoverHighlightBackground#4432a885
editor.inactiveSelectionBackground#384136
editor.lineHighlightBackground#282c26
editor.lineHighlightBorder#353b33
editor.rangeHighlightBackground#1e221e
editor.selectionBackground#394237
editor.selectionHighlightBackground#435a43de
editor.selectionHighlightBorder#719466
editor.wordHighlightBackground#2d362ad3
editor.wordHighlightBorder#7d8b78
editor.wordHighlightStrongBackground#21251f
editor.wordHighlightStrongBorder#748a6d
editorBracketHighlight.foreground1#e5fadf
editorBracketHighlight.foreground2#ffeaa7
editorBracketHighlight.foreground3#dfe6e9
editorBracketHighlight.foreground4#b69df0
editorBracketHighlight.foreground5#e1f196
editorBracketHighlight.foreground6#b3f8f8
editorBracketMatch.background#464e43
editorBracketMatch.border#464e43
editorCursor.foreground#c0d6b8
editorError.background#b8000052
editorError.border#e15555
editorError.foreground#ff0000
editorGroup.border#99ac93
editorGroupHeader.tabsBackground#282c26
editorGroupHeader.tabsBorder#353b33
editorGutter.background#252924
editorHoverWidget.background#252924
editorHoverWidget.border#4f644fde
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#8d85be
editorIndentGuide.background#7a9ff017
editorInfo.border#5e479e
editorLineNumber.activeForeground#aec4a7
editorLineNumber.foreground#707a6c
editorOverviewRuler.border#252924
editorOverviewRuler.findMatchForeground#83947e
editorSuggestWidget.background#141613
editorSuggestWidget.border#474e42
editorSuggestWidget.focusHighlightForeground#fab1a0
editorSuggestWidget.foreground#dfe6e9
editorSuggestWidget.highlightForeground#81ecbf
editorSuggestWidget.selectedBackground#222520
editorSuggestWidget.selectedForeground#c5cfd9
editorSuggestWidget.selectedIconForeground#ffeaa7
editorWidget.background#292e28
editorWidget.border#83917f
editorWidget.foreground#bac2b7
editorWidget.resizeBorder#dbf3d4
focusBorder#6e7a6a
foreground#cdcdcd
icon.foreground#d0e6c9
input.background#2b302a
input.border#c9e4c0
input.foreground#fff
input.placeholderForeground#ddd
inputOption.activeBackground#1c1f1b
inputOption.activeBorder#5f695b
inputOption.activeForeground#fff
inputOption.hoverBackground#162258
list.activeSelectionBackground#4d554ac2
list.activeSelectionForeground#b2b2b2
list.activeSelectionIconForeground#79b979de
list.deemphasizedForeground#9cbd9cde
list.hoverBackground#242924de
list.hoverForeground#fff
list.inactiveSelectionBackground#0b0c0a
list.inactiveSelectionForeground#aafaaa
list.inactiveSelectionIconForeground#9bec9bde
menu.background#252924
menu.border#45633d
menu.foreground#d3e2ce
menu.selectionBackground#343a34de
menu.selectionBorder#555e52
menu.selectionForeground#fff
menu.separatorBackground#465546
menubar.selectionBackground#3b4139
menubar.selectionForeground#bed3b6
minimap.selectionHighlight#717e6c
minimapSlider.activeBackground#00000028
minimapSlider.background#464b4471
minimapSlider.hoverBackground#5b685777
notifications.background#252924
notifications.border#6c7968
notifications.foreground#fff
panel.background#141613
panel.border#485a42af
panelTitle.activeBorder#d5eecd
panelTitle.activeForeground#e0fcd7
panelTitle.inactiveForeground#aaafa9
quickInput.background#252924
quickInput.foreground#cdcdcd
quickInputList.focusBackground#191d19
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#b3c9ad
scrollbarSlider.activeBackground#33472b
scrollbarSlider.background#333b31
scrollbarSlider.hoverBackground#455a3f
settings.checkboxBackground#242924de
settings.checkboxBorder#4c5f46
settings.checkboxForeground#c4d6bd
settings.dropdownBackground#1a1d19
settings.dropdownBorder#4c5f46
settings.dropdownForeground#c4d6bd
settings.focusedRowBackground#191b17
settings.focusedRowBorder#4c5f46
settings.headerBorder#4c5f46
settings.headerForeground#d6eece
settings.modifiedItemIndicator#6f7a6b
settings.numberInputBackground#242924de
settings.numberInputBorder#4c5f46
settings.numberInputForeground#cdcdcd
settings.rowHoverBackground#39413698
settings.sashBorder#4c5f46
settings.textInputBackground#242924de
settings.textInputBorder#4c5f46
settings.textInputForeground#cdcdcd
sideBar.background#141613
sideBar.border#252924
sideBar.foreground#b2b2b2
sideBarSectionHeader.background#141613
sideBarSectionHeader.border#353b3333
sideBarSectionHeader.foreground#e3ffda
sideBarTitle.foreground#d9eed2
statusBar.background#141613
statusBar.debuggingBackground#10130f
statusBar.foreground#b5beb2
statusBar.noFolderBackground#252924
statusBarItem.hoverBackground#434e3f
statusBarItem.remoteBackground#141614
statusBarItem.remoteForeground#f5f3fd
tab.activeBackground#252924
tab.activeBorder#252924
tab.activeBorderTop#7c8879
tab.activeForeground#e0fad7
tab.border#282c26
tab.hoverBackground#252924
tab.hoverBorder#a0b39a
tab.hoverForeground#cdc9e9
tab.inactiveBackground#282c26
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorder#252924
tab.unfocusedActiveBorderTop#252924
tab.unfocusedActiveForeground#f3f5f8
tab.unfocusedInactiveBackground#353b33
tab.unfocusedInactiveForeground#cdcdcd
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#b7ccb1
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#141613
terminal.findMatchBackground#188371
terminal.findMatchHighlightBackground#2b3650
terminal.foreground#767e74
terminal.selectionBackground#41493e
terminal.selectionForeground#fff
terminalCursor.foreground#c0d6b8
terminalOverviewRuler.cursorForeground#fff
titleBar.activeBackground#252924
titleBar.activeForeground#dbf3d6
titleBar.border#353b33
titleBar.inactiveBackground#252924
titleBar.inactiveForeground#dde2ddde
tree.indentGuidesStroke#7e9975
widget.shadow#484c6e4f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8c9497	italic
variable, string constant.other.placeholder	#fdcb6e	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#ff7675	—
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	#fffa65	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#fffa65	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#ffb8b8	—
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	#84b7f1	—
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	#e4e9df	—
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	#b2cdee	—
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	#f3e49b	—
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.

greenspace — GreenSpace Sober S

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#141613
activityBar.activeBorder#9dc290
activityBar.background#141613
activityBar.border#1416136c
activityBar.foreground#c2d6bb
activityBar.inactiveForeground#999b99
activityBarBadge.background#406e30
activityBarBadge.foreground#ecf3e2
badge.background#2d1761
badge.foreground#e7e6ec
banner.background#4744eb6e
breadcrumb.background#141613
breadcrumb.focusForeground#b8e6a8
breadcrumb.foreground#cdcdcd
button.background#054619
button.border#98a893
button.foreground#ddd
button.hoverBackground#372283d3
button.secondaryBackground#7d6dad
button.secondaryForeground#ddd
button.secondaryHoverBackground#31382f
checkbox.border#94a38f
descriptionForeground#aeb6ab
dropdown.border#94a38f
editor.background#141613
editor.findMatchBackground#243a249f
editor.findMatchHighlightBackground#45643f63
editor.findMatchHighlightBorder#415c39
editor.foreground#cdcdcd
editor.hoverHighlightBackground#4432a885
editor.inactiveSelectionBackground#222921
editor.lineHighlightBackground#1c1f1a
editor.lineHighlightBorder#353b33
editor.rangeHighlightBackground#191d19
editor.selectionBackground#222921
editor.selectionHighlightBackground#233d23de
editor.selectionHighlightBorder#719466
editor.wordHighlightBackground#252e22d3
editor.wordHighlightBorder#59774e
editor.wordHighlightStrongBackground#1f241d
editor.wordHighlightStrongBorder#445c3c
editorBracketHighlight.foreground1#e5fadf
editorBracketHighlight.foreground2#ffeaa7
editorBracketHighlight.foreground3#dfe6e9
editorBracketHighlight.foreground4#b69df0
editorBracketHighlight.foreground5#e1f196
editorBracketHighlight.foreground6#b3f8f8
editorBracketMatch.background#464e43
editorBracketMatch.border#464e43
editorCursor.foreground#c0d6b8
editorError.background#b8000052
editorError.border#e15555
editorError.foreground#ff0000
editorGroup.border#99ac93
editorGroupHeader.tabsBackground#141613
editorGroupHeader.tabsBorder#353b33cb
editorGutter.background#141613
editorHoverWidget.background#141613
editorHoverWidget.border#4f644fde
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#8d85be
editorIndentGuide.background#7a9ff017
editorInfo.border#5e479e
editorLineNumber.activeForeground#aec4a7
editorLineNumber.foreground#707a6c
editorOverviewRuler.border#141613
editorOverviewRuler.findMatchForeground#83947e
editorSuggestWidget.background#141613
editorSuggestWidget.border#474e42
editorSuggestWidget.focusHighlightForeground#fab1a0
editorSuggestWidget.foreground#dfe6e9
editorSuggestWidget.highlightForeground#81ecbf
editorSuggestWidget.selectedBackground#222520
editorSuggestWidget.selectedForeground#c5cfd9
editorSuggestWidget.selectedIconForeground#ffeaa7
editorWidget.background#1a1d19
editorWidget.border#83917f
editorWidget.foreground#bac2b7
editorWidget.resizeBorder#568b46
focusBorder#6e7a6a71
foreground#cdcdcd
icon.foreground#d0e6c9
input.background#101a0e
input.border#547748
input.foreground#fff
input.placeholderForeground#ddd
inputOption.activeBackground#1c1f1b
inputOption.activeBorder#5f695b
inputOption.activeForeground#fff
inputOption.hoverBackground#162258
list.activeSelectionBackground#4d554ac2
list.activeSelectionForeground#b2b2b2
list.activeSelectionIconForeground#79b979de
list.deemphasizedForeground#9cbd9cde
list.hoverBackground#242924de
list.hoverForeground#fff
list.inactiveSelectionBackground#0b0c0a
list.inactiveSelectionForeground#aafaaa
list.inactiveSelectionIconForeground#9bec9bde
menu.background#141613
menu.border#30462a
menu.foreground#d3e2ce
menu.selectionBackground#242924de
menu.selectionBorder#555e52
menu.selectionForeground#fff
menu.separatorBackground#242924
menubar.selectionBackground#242c21
menubar.selectionForeground#bed3b6
minimap.selectionHighlight#717e6c
minimapSlider.activeBackground#00000028
minimapSlider.background#464b4471
minimapSlider.hoverBackground#5b685777
notifications.background#141613
notifications.border#6c7968
notifications.foreground#fff
panel.background#141613
panel.border#485a42af
panelTitle.activeBorder#d5eecd
panelTitle.activeForeground#e0fcd7
panelTitle.inactiveForeground#aaafa9
quickInput.background#141613
quickInput.foreground#cdcdcd
quickInputList.focusBackground#191d19
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#b3c9ad
scrollbarSlider.activeBackground#33472b
scrollbarSlider.background#333b31
scrollbarSlider.hoverBackground#455a3f
settings.checkboxBackground#242924de
settings.checkboxBorder#4c5f46
settings.checkboxForeground#c4d6bd
settings.dropdownBackground#1a1d19
settings.dropdownBorder#4c5f46
settings.dropdownForeground#c4d6bd
settings.focusedRowBackground#191b17
settings.focusedRowBorder#4c5f46
settings.headerBorder#4c5f46
settings.headerForeground#d6eece
settings.modifiedItemIndicator#6f7a6b
settings.numberInputBackground#242924de
settings.numberInputBorder#4c5f46
settings.numberInputForeground#cdcdcd
settings.rowHoverBackground#39413698
settings.sashBorder#4c5f46
settings.textInputBackground#242924de
settings.textInputBorder#4c5f46
settings.textInputForeground#cdcdcd
sideBar.background#141613
sideBar.border#141613
sideBar.foreground#b2b2b2
sideBarSectionHeader.background#141613
sideBarSectionHeader.border#353b3333
sideBarSectionHeader.foreground#e3ffda
sideBarTitle.foreground#d9eed2
statusBar.background#141613
statusBar.debuggingBackground#10130f
statusBar.foreground#b5beb2
statusBar.noFolderBackground#141613
statusBarItem.hoverBackground#434e3f
statusBarItem.remoteBackground#141614
statusBarItem.remoteForeground#f5f3fd
tab.activeBackground#141613
tab.activeBorder#141613
tab.activeBorderTop#7c8879
tab.activeForeground#e0fad7
tab.border#1c1f1a
tab.hoverBackground#141613
tab.hoverBorder#a0b39a
tab.hoverForeground#cdc9e9
tab.inactiveBackground#141613
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorder#141613
tab.unfocusedActiveBorderTop#141613
tab.unfocusedActiveForeground#f3f5f8
tab.unfocusedInactiveBackground#353b33
tab.unfocusedInactiveForeground#cdcdcd
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#b7ccb1
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#141613
terminal.findMatchBackground#188371
terminal.findMatchHighlightBackground#2b3650
terminal.foreground#767e74
terminal.selectionBackground#242924de
terminal.selectionForeground#fff
terminalCursor.foreground#c0d6b8
terminalOverviewRuler.cursorForeground#fff
titleBar.activeBackground#141613
titleBar.activeForeground#dbf3d6
titleBar.border#353b33cb
titleBar.inactiveBackground#141613
titleBar.inactiveForeground#dde2ddde
tree.indentGuidesStroke#7e9975
widget.shadow#484c6e4f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8c9497	italic
variable, string constant.other.placeholder	#6fd2db	—
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	#FDA7DF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#cd84f1	—
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	#e4e9df	—
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	#f3e49b	—
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.

greenspace — GreenSpace Sober V

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#192020
activityBar.activeBorder#cf884f
activityBar.background#1c2322
activityBar.foreground#ffebda
activityBar.inactiveForeground#79888a
activityBarBadge.background#753d0f
activityBarBadge.foreground#f5e0ce
badge.background#753807
badge.foreground#ebdbce
banner.background#29393f
breadcrumb.background#192020
breadcrumb.focusForeground#aff7e5
breadcrumb.foreground#8ba7a0
button.background#8d582c
button.border#cf884f
button.foreground#fae7d7
button.hoverBackground#3b1f08
button.secondaryBackground#192020
button.secondaryForeground#ddd
button.secondaryHoverBackground#457867
checkbox.background#1c2322
checkbox.border#50b896
checkbox.foreground#cdcdcd
descriptionForeground#fcf4ed
dropdown.border#50b896
editor.background#192020
editor.findMatchBackground#1c2322
editor.findMatchHighlightBackground#032b2b
editor.findMatchHighlightBorder#4e6e6ebb
editor.foreground#cdcdcd
editor.hoverHighlightBackground#063333
editor.inactiveSelectionBackground#2b4549
editor.lineHighlightBackground#000f0d
editor.lineHighlightBorder#000f0d
editor.rangeHighlightBackground#011613
editor.rangeHighlightBorder#2e3d3b
editor.selectionBackground#2b4549
editor.selectionHighlightBackground#31594d
editor.selectionHighlightBorder#7c9098
editor.wordHighlightBackground#272e2efd
editor.wordHighlightBorder#344646
editor.wordHighlightStrongBackground#012727
editor.wordHighlightStrongBorder#364e4b
editorBracketHighlight.foreground1#d98f45
editorBracketHighlight.foreground2#fffa65
editorBracketHighlight.foreground3#ffeaa7
editorBracketHighlight.foreground4#baec04
editorBracketHighlight.foreground5#81ecec
editorBracketHighlight.foreground6#dce285
editorBracketMatch.background#222d2f
editorBracketMatch.border#324346
editorCursor.foreground#cf884f
editorError.background#f4425165
editorError.border#ec3535
editorError.foreground#ff0000
editorGroup.border#2f6c58
editorGroupHeader.tabsBackground#1c2322
editorGroupHeader.tabsBorder#192020
editorGutter.background#192020
editorHoverWidget.background#192020
editorHoverWidget.border#5e7474
editorHoverWidget.foreground#cef8ff
editorIndentGuide.activeBackground#7f8c8e
editorIndentGuide.background#577770
editorInfo.border#2f6c58
editorLineNumber.activeForeground#aaf4ff
editorLineNumber.foreground#7f8c8e
editorOverviewRuler.border#192020
editorOverviewRuler.findMatchForeground#cf884f
editorSuggestWidget.background#192020
editorSuggestWidget.border#384949
editorSuggestWidget.focusHighlightForeground#f1e1a8
editorSuggestWidget.foreground#d3dadd
editorSuggestWidget.highlightForeground#fab1a0
editorSuggestWidget.selectedBackground#171d1d
editorSuggestWidget.selectedForeground#a0b7b2
editorSuggestWidget.selectedIconForeground#50b896
editorWidget.background#171d1d
editorWidget.border#50b8a7
editorWidget.foreground#f8dec4
editorWidget.resizeBorder#cf884f
focusBorder#cf884f
foreground#f1e1d4
icon.foreground#a8c4bd
input.background#171d1d
input.border#cf894fd2
input.foreground#f1d3b4
input.placeholderForeground#ddd
inputOption.activeBackground#033b2b
inputOption.activeBorder#4b7066
inputOption.activeForeground#cdf8ea
inputOption.hoverBackground#074631
list.activeSelectionBackground#0b4b354b
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#cf884f
list.deemphasizedForeground#cdcdcd
list.hoverBackground#27363a
list.hoverForeground#8aeccc
list.inactiveSelectionBackground#222d2f
list.inactiveSelectionForeground#ebccb3
list.inactiveSelectionIconForeground#a8c4bd
menu.background#192020
menu.border#7f8c8e
menu.foreground#bed5d8
menu.selectionBackground#083b42b7
menu.selectionBorder#50b5b8
menu.selectionForeground#fff
menu.separatorBackground#a0b7b262
menubar.selectionBackground#093b3b9d
menubar.selectionForeground#50b896
minimap.selectionHighlight#cf884f
minimapSlider.activeBackground#5a2e0956
minimapSlider.background#1212123f
minimapSlider.hoverBackground#cf894f75
notifications.background#192020
notifications.border#7c9098
notifications.foreground#fff
panel.background#001310
panel.border#435a57
panelTitle.activeBorder#cf884f
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#dacec4
quickInput.background#192020
quickInput.foreground#cacccc
quickInputList.focusBackground#000f0d
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#a4eede
scrollbarSlider.activeBackground#134234
scrollbarSlider.background#5c300fc4
scrollbarSlider.hoverBackground#2f6c58
settings.checkboxBackground#1e2523
settings.checkboxBorder#cf884f
settings.checkboxForeground#baebda
settings.dropdownBackground#1e2523
settings.dropdownBorder#cf884f
settings.dropdownForeground#c2f1e2
settings.focusedRowBackground#57796f25
settings.focusedRowBorder#cf884f
settings.headerBorder#cf884f
settings.headerForeground#a0b7b2
settings.modifiedItemIndicator#77a39a
settings.numberInputBackground#1e2523
settings.numberInputBorder#cf884f
settings.numberInputForeground#c6f1e3
settings.rowHoverBackground#57796f25
settings.sashBorder#cf884f
settings.textInputBackground#1e2523
settings.textInputBorder#cf884f
settings.textInputForeground#eee
sideBar.background#192020
sideBar.foreground#a0b7b2
sideBarSectionHeader.background#192020
sideBarSectionHeader.foreground#a8c4bd
sideBarTitle.foreground#f0e2d7
statusBar.background#171d1d
statusBar.debuggingBackground#011d1d
statusBar.debuggingForeground#fff
statusBar.foreground#c4f1e2
statusBar.noFolderBackground#171d1d
statusBarItem.hoverBackground#124132
statusBarItem.remoteBackground#855025
statusBarItem.remoteForeground#ffe7d3
tab.activeBackground#192020
tab.activeBorder#192020
tab.activeBorderTop#192020
tab.activeForeground#fff
tab.border#1c2322
tab.hoverBackground#000f0d
tab.hoverBorder#50b896
tab.hoverForeground#50b896
tab.inactiveBackground#1c2322
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorder#192020
tab.unfocusedActiveBorderTop#192020
tab.unfocusedActiveForeground#f3f8f7
tab.unfocusedInactiveBackground#1c2322
tab.unfocusedInactiveForeground#c0d1d8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#cf884f
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#000f0d
terminal.findMatchBackground#065245b6
terminal.findMatchHighlightBackground#04515750
terminal.foreground#acbbb6
terminal.selectionBackground#053b3485
terminal.selectionForeground#fff
terminalCursor.foreground#cf884f
terminalOverviewRuler.cursorForeground#cf884f
titleBar.activeBackground#192020
titleBar.activeForeground#b9c0be
titleBar.inactiveBackground#192020
titleBar.inactiveForeground#a5c7bb
tree.indentGuidesStroke#cf884f
widget.shadow#171d1d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#757d8b	—
variable, string constant.other.placeholder	#ffb8b8	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#ffaf40	—
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	#bfebe2	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#bfebe2	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#55efc4	—
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	#fac8a0	—
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	#a8c4bd	—
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	#cfccfa	—
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	#db8f8f	italic
entity.name.method.js	#82AAFF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#ffcccc	—
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	—