Sober code

Name: Sober code
Author: YesCode

Publisher: YesCodeThemes in package: 20

Open in VS Code

Color themes

VS Code preview

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

Sober code — Sober Code 13

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#0e1020
activityBar.activeBorder#9bacf7
activityBar.background#13162c
activityBar.foreground#939cee
activityBar.inactiveForeground#7d81b8
activityBarBadge.background#5233c2
activityBarBadge.foreground#ced6f0
badge.background#411274
badge.foreground#fff
banner.background#0d183a
breadcrumb.background#0e1020
breadcrumb.focusForeground#fff
breadcrumb.foreground#c2b5f0
button.background#4c26b470
button.border#5d4ac5
button.foreground#e6d4f5
button.hoverBackground#042580
button.secondaryBackground#340c5c
button.secondaryForeground#ddd
button.secondaryHoverBackground#230d74
checkbox.background#13132c
checkbox.border#7577ec
checkbox.foreground#cdcdcd
descriptionForeground#d5d7ee
dropdown.border#505ab8
editor.background#0e1020
editor.findMatchBackground#070e50ad
editor.findMatchHighlightBackground#302f6c60
editor.findMatchHighlightBorder#0d0c64c7
editor.foreground#cdcdcd
editor.hoverHighlightBackground#121b6b94
editor.inactiveSelectionBackground#1b1c709f
editor.lineHighlightBackground#161c3d9f
editor.lineHighlightBorder#191a3871
editor.rangeHighlightBackground#04034949
editor.rangeHighlightBorder#2f3d6c
editor.selectionBackground#1b1c709f
editor.selectionHighlightBackground#313859
editor.selectionHighlightBorder#807c98
editor.wordHighlightBackground#0d0649e0
editor.wordHighlightBorder#13152c
editor.wordHighlightStrongBackground#09245f98
editor.wordHighlightStrongBorder#2f3d6c
editorBracketHighlight.foreground1#ffeaa7
editorBracketHighlight.foreground2#f7b7bd
editorBracketHighlight.foreground3#dfe6e9
editorBracketHighlight.foreground4#daeb9c
editorBracketHighlight.foreground5#a4eeee
editorBracketHighlight.foreground6#dbe270
editorBracketMatch.background#202a55b0
editorBracketMatch.border#393a7c
editorCursor.foreground#5371f8
editorError.background#f4425165
editorError.border#ec3535
editorError.foreground#ff0000
editorGroup.border#37387e
editorGroupHeader.tabsBackground#13162c
editorGroupHeader.tabsBorder#5250b817
editorGutter.background#0e1020
editorHoverWidget.background#0e1020
editorHoverWidget.border#506cb8
editorHoverWidget.foreground#abacdd
editorIndentGuide.activeBackground#3e449e
editorIndentGuide.background#7a9ff017
editorInfo.border#2f3a6c
editorLineNumber.activeForeground#727af5
editorLineNumber.foreground#606580e5
editorOverviewRuler.border#0e1020
editorOverviewRuler.findMatchForeground#7587ecd5
editorSuggestWidget.background#0e1020
editorSuggestWidget.border#5060b86c
editorSuggestWidget.focusHighlightForeground#f1e1a8
editorSuggestWidget.foreground#d3dadd
editorSuggestWidget.highlightForeground#fab1a0
editorSuggestWidget.selectedBackground#090842b7
editorSuggestWidget.selectedForeground#9ae6cc
editorSuggestWidget.selectedIconForeground#c17ae2
editorWidget.background#07091f
editorWidget.border#7591ec
editorWidget.foreground#c8daf1
editorWidget.resizeBorder#7591ec
focusBorder#3551ec
foreground#b2b5e2
icon.foreground#7581ec
input.background#13132c
input.border#4751dbb0
input.foreground#d8e1f0
input.placeholderForeground#ddd
inputOption.activeBackground#050450dc
inputOption.activeBorder#7591ec
inputOption.activeForeground#cdcef8
inputOption.hoverBackground#240746
list.activeSelectionBackground#0c0b4b77
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#6587e6
list.deemphasizedForeground#cdcdcd
list.hoverBackground#151e44bd
list.hoverForeground#7e80f7
list.inactiveSelectionBackground#21274996
list.inactiveSelectionForeground#81acfc
list.inactiveSelectionIconForeground#90b1f8
menu.background#0e1020
menu.border#7595ec6b
menu.foreground#d1c8f1
menu.selectionBackground#080e42cc
menu.selectionBorder#5060b8
menu.selectionForeground#fff
menu.separatorBackground#3c51c56e
menubar.selectionBackground#1a3c7c48
menubar.selectionForeground#bdcce9
minimap.selectionHighlight#3d45495e
minimapSlider.activeBackground#00000028
minimapSlider.background#1212123f
minimapSlider.hoverBackground#3d45496e
notifications.background#0e1020
notifications.border#7c8198
notifications.foreground#fff
panel.background#06031fd7
panel.border#7591eca2
panelTitle.activeBorder#6876f7
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#a7abe4
quickInput.background#0e1020
quickInput.foreground#b8b7f3
quickInputList.focusBackground#050a3fb7
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#809ef1
scrollbarSlider.activeBackground#131842
scrollbarSlider.background#101558de
scrollbarSlider.hoverBackground#4f2996a9
settings.checkboxBackground#03044273
settings.checkboxBorder#7581ec
settings.checkboxForeground#bdbaeb
settings.dropdownBackground#13162c
settings.dropdownBorder#7581ec
settings.dropdownForeground#c2c9f1
settings.focusedRowBackground#03193383
settings.focusedRowBorder#7581ec
settings.headerBorder#7581ec
settings.headerForeground#7ba4fc
settings.modifiedItemIndicator#7581ec
settings.numberInputBackground#050a36b4
settings.numberInputBorder#7581ec
settings.numberInputForeground#c6c9f1
settings.rowHoverBackground#04054d50
settings.sashBorder#7581ec
settings.textInputBackground#0c065c52
settings.textInputBorder#7581ec
settings.textInputForeground#eee
sideBar.background#0e1020
sideBar.border#505ab817
sideBar.foreground#bbb3d6
sideBarSectionHeader.background#0e1020
sideBarSectionHeader.border#505ab80a
sideBarSectionHeader.foreground#a1a2fa
sideBarTitle.foreground#bccbfc
statusBar.background#13182c
statusBar.debuggingBackground#041b47
statusBar.debuggingForeground#fff
statusBar.foreground#c3caf1
statusBar.noFolderBackground#0e1020
statusBarItem.hoverBackground#172658
statusBarItem.remoteBackground#022241
statusBarItem.remoteForeground#c0d1f7
tab.activeBackground#0e1020
tab.activeBorder#0e1020
tab.activeBorderTop#0e1020
tab.activeForeground#fff
tab.border#13132c
tab.hoverBackground#26084263
tab.hoverBorder#4079e2
tab.hoverForeground#9fb2f0
tab.inactiveBackground#13162c
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorder#0e1020
tab.unfocusedActiveBorderTop#0e1020
tab.unfocusedActiveForeground#d2cbe9
tab.unfocusedInactiveBackground#13132c
tab.unfocusedInactiveForeground#c0c4d8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#788aec
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#080a13
terminal.findMatchBackground#300652b6
terminal.findMatchHighlightBackground#04325750
terminal.foreground#a0aee6
terminal.selectionBackground#13192c
terminal.selectionForeground#fff
terminalCursor.foreground#334283
terminalOverviewRuler.cursorForeground#fff
titleBar.activeBackground#0e1020
titleBar.activeForeground#d4d6f7
titleBar.border#5250b817
titleBar.inactiveBackground#0e1020
titleBar.inactiveForeground#dcd4f7
tree.indentGuidesStroke#75acec
widget.shadow#5057b85d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#696186	italic underline
variable, string constant.other.placeholder	#ffcccc	—
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	#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	—

VS Code preview

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

Sober code — Sober Code 2

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#2f2f2f
activityBar.activeBorder#7286d4
activityBar.background#2f2f2f
activityBar.border#2f2f2f
activityBar.foreground#fff
activityBar.inactiveForeground#718288
activityBarBadge.background#103631
activityBarBadge.foreground#ccd5f8
badge.background#3f5378
badge.foreground#fff
banner.background#29393f
breadcrumb.background#2f2f2f
breadcrumb.focusForeground#8bcaca
breadcrumb.foreground#cdcdcd
button.background#4a4578
button.border#8d85be
button.foreground#ddd
button.hoverBackground#210e5a
button.secondaryBackground#3b2c69
button.secondaryForeground#ddd
button.secondaryHoverBackground#4a4578
checkbox.background#2b434c
checkbox.border#bad8e4
checkbox.foreground#cdcdcd
descriptionForeground#bad8e4
dropdown.border#bad8e4
editor.background#2f2f2f
editor.findMatchBackground#314759
editor.findMatchHighlightBackground#32273b
editor.findMatchHighlightBorder#7c9098
editor.foreground#cdcdcd
editor.hoverHighlightBackground#13b9a685
editor.inactiveSelectionBackground#6a45a646
editor.lineHighlightBackground#242424
editor.lineHighlightBorder#2f2f2f
editor.rangeHighlightBackground#3147599c
editor.selectionBackground#6a45a646
editor.selectionHighlightBackground#314759
editor.selectionHighlightBorder#7c9098
editor.wordHighlightBackground#314759
editor.wordHighlightBorder#7c9098
editor.wordHighlightStrongBackground#032f4d9a
editor.wordHighlightStrongBorder#314759
editorBracketHighlight.foreground1#bad8e4
editorBracketHighlight.foreground2#dfe6e9
editorBracketHighlight.foreground3#ffeaa7
editorBracketHighlight.foreground4#baec04
editorBracketHighlight.foreground5#81ecec
editorBracketHighlight.foreground6#fab1a0
editorBracketMatch.background#3d4549
editorBracketMatch.border#3d4549
editorCursor.foreground#9cabb3
editorError.background#553640
editorError.border#e97b7b
editorError.foreground#ff0000
editorGroup.border#3d4549
editorGroupHeader.tabsBackground#242424
editorGroupHeader.tabsBorder#2f2f2f
editorGutter.background#2f2f2f
editorHoverWidget.background#2f2f2f
editorHoverWidget.border#8d85be70
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#5768ae
editorIndentGuide.background#7a9ff017
editorInfo.border#5e479e
editorLineNumber.activeForeground#80d1bf
editorLineNumber.foreground#898a8a
editorOverviewRuler.border#2f2f2f
editorOverviewRuler.findMatchForeground#6494db
editorSuggestWidget.background#2f2f2f
editorSuggestWidget.border#28353b
editorSuggestWidget.focusHighlightForeground#7c9098
editorSuggestWidget.foreground#d3dadd
editorSuggestWidget.highlightForeground#fab1a0
editorSuggestWidget.selectedBackground#032521
editorSuggestWidget.selectedForeground#c5cfd9
editorSuggestWidget.selectedIconForeground#a1dacb
editorWidget.background#2f2f2f
editorWidget.border#bad8e4
editorWidget.foreground#d5ebf3
editorWidget.resizeBorder#bad8e4
focusBorder#7c9098
foreground#cdcdcd
icon.foreground#a5c4c4
input.background#28353b
input.border#7c9098
input.foreground#7c9098
input.placeholderForeground#ddd
inputOption.activeBackground#2b4754
inputOption.activeBorder#7c9098
inputOption.activeForeground#cdcdcd
inputOption.hoverBackground#29363d
list.activeSelectionBackground#1b2f36
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#cbe7e5
list.deemphasizedForeground#cdcdcd
list.hoverBackground#103631
list.hoverForeground#fff
list.inactiveSelectionBackground#103631ce
list.inactiveSelectionForeground#cdcdcd
list.inactiveSelectionIconForeground#96afb8
menu.background#2f2f2f
menu.border#8d85be73
menu.foreground#dfe6e9
menu.selectionBackground#272f32
menu.selectionBorder#313b3f
menu.selectionForeground#fff
menu.separatorBackground#3e484c
menubar.selectionBackground#032521
menubar.selectionForeground#7d9fac
minimap.selectionHighlight#3d45495e
minimapSlider.activeBackground#00000028
minimapSlider.background#2f2f2f3f
minimapSlider.hoverBackground#3d45496e
notifications.background#2f2f2f
notifications.border#7c9098
notifications.foreground#fff
panel.background#2f2f2fc9
panel.border#8d85be
panelTitle.activeBorder#8bcaca
panelTitle.activeForeground#bad8e4
panelTitle.inactiveForeground#bbbbbb
quickInput.background#2f2f2f
quickInput.foreground#cdcdcd
quickInputList.focusBackground#2b47548c
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#7c9098
scrollbarSlider.activeBackground#5b6e77
scrollbarSlider.background#3d4549
scrollbarSlider.hoverBackground#3d4549
settings.checkboxBackground#32273b
settings.checkboxBorder#7c9098
settings.checkboxForeground#b7d8d8
settings.dropdownBackground#253241
settings.dropdownBorder#7c9098
settings.dropdownForeground#d9e6eb
settings.focusedRowBackground#272f32d8
settings.focusedRowBorder#7c9098
settings.headerBorder#7c9098
settings.headerForeground#bad8e4
settings.modifiedItemIndicator#7c9098
settings.numberInputBackground#2b434c
settings.numberInputBorder#7c9098
settings.numberInputForeground#cdcdcd
settings.rowHoverBackground#08331e56
settings.sashBorder#7c9098
settings.textInputBackground#3f5670
settings.textInputBorder#7c9098
settings.textInputForeground#cdcdcd
sideBar.background#2f2f2f
sideBar.border#2f2f2f
sideBar.foreground#ddd
sideBarSectionHeader.background#2f2f2f
sideBarSectionHeader.border#7c909813
sideBarSectionHeader.foreground#b4b7b8
sideBarTitle.foreground#e4e4e4
statusBar.background#242729
statusBar.debuggingBackground#041a22
statusBar.debuggingForeground#fff
statusBar.foreground#bec0c0
statusBar.noFolderBackground#2f2f2f
statusBarItem.hoverBackground#293332
statusBarItem.remoteBackground#2e414b
statusBarItem.remoteForeground#aecedb
tab.activeBackground#2f2f2f
tab.activeBorder#2f2f2f
tab.activeBorderTop#2f2f2f
tab.activeForeground#fff
tab.border#242424
tab.hoverBackground#2f2f2f
tab.hoverBorder#7c9098
tab.hoverForeground#95a8af
tab.inactiveBackground#242424
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorder#2f2f2f
tab.unfocusedActiveBorderTop#2f2f2f
tab.unfocusedActiveForeground#f3f5f8
tab.unfocusedHoverBorder#7c9098
tab.unfocusedInactiveBackground#242424
tab.unfocusedInactiveForeground#c0d1d8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#7c9098
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#2f2f2f
terminal.findMatchBackground#2b1883
terminal.findMatchHighlightBackground#2b3650
terminal.foreground#3d4549
terminal.selectionBackground#484c6e
terminal.selectionForeground#fff
terminalCursor.background#9486ee
terminalCursor.foreground#7c8d95
terminalOverviewRuler.cursorForeground#fff
titleBar.activeBackground#2f2f2f
titleBar.activeForeground#ddd
titleBar.border#2f2f2f
titleBar.inactiveBackground#2f2f2f
titleBar.inactiveForeground#fff
tree.indentGuidesStroke#ffde3c
widget.shadow#272f32

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#848686	italic
variable, string constant.other.placeholder	#65c9c0	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#eab6f5	—
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	#b9ced6	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#9bb4be	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#ffeaa7	—
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	#fab1a0	—
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	#faf0ed	—
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	#9f9eee	—
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	#a4b7f8	—
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.

Sober code — Sober Code 3

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#121117
activityBar.activeBorder#8372c9
activityBar.background#121117
activityBar.border#121117
activityBar.foreground#fff
activityBar.inactiveForeground#6e6d6e
activityBarBadge.background#58498b
activityBarBadge.foreground#ccd5f8
badge.background#0e1f5c
badge.foreground#fff
banner.background#29393f
breadcrumb.background#121117
breadcrumb.focusForeground#8bcaca
breadcrumb.foreground#cdcdcd
button.background#534689c2
button.border#534689
button.foreground#ddd
button.hoverBackground#4930ad
button.secondaryBackground#3b2c69
button.secondaryForeground#ddd
button.secondaryHoverBackground#4a4578
checkbox.background#241e3c
checkbox.border#534689
checkbox.foreground#cdcdcd
descriptionForeground#e0dbe7
dropdown.border#534689
editor.background#121117
editor.findMatchBackground#08031f
editor.findMatchHighlightBackground#32273b
editor.findMatchHighlightBorder#34295c
editor.foreground#cdcdcd
editor.hoverHighlightBackground#2d2357
editor.inactiveSelectionBackground#6a45a646
editor.lineHighlightBackground#1c1b23
editor.lineHighlightBorder#1c1b23
editor.rangeHighlightBackground#241e3c
editor.selectionBackground#6a45a646
editor.selectionHighlightBackground#383159
editor.selectionHighlightBorder#972a47
editor.wordHighlightBackground#3c121d
editor.wordHighlightBorder#642939
editor.wordHighlightStrongBackground#892943c9
editor.wordHighlightStrongBorder#892942
editorBracketHighlight.foreground1#bad8e4
editorBracketHighlight.foreground2#dfe6e9
editorBracketHighlight.foreground3#ffeaa7
editorBracketHighlight.foreground4#baec04
editorBracketHighlight.foreground5#81ecec
editorBracketHighlight.foreground6#fab1a0
editorBracketMatch.background#3f346dbb
editorBracketMatch.border#241e3c
editorCursor.foreground#9c9c9e
editorError.background#e22a2a8a
editorError.border#e97b7b
editorError.foreground#ff0000
editorGroup.border#63585b
editorGroupHeader.tabsBackground#1c1b23
editorGroupHeader.tabsBorder#121117
editorGutter.background#121117
editorHoverWidget.background#121117
editorHoverWidget.border#282144
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#5768ae
editorIndentGuide.background#7a9ff017
editorInfo.border#5e479e
editorLineNumber.activeForeground#b6a8ec
editorLineNumber.foreground#636072
editorOverviewRuler.border#121117
editorOverviewRuler.findMatchForeground#6494db
editorSuggestWidget.background#121117
editorSuggestWidget.border#241e3c
editorSuggestWidget.focusHighlightForeground#807c98
editorSuggestWidget.foreground#d3dadd
editorSuggestWidget.highlightForeground#fab1a0
editorSuggestWidget.selectedBackground#241e3c
editorSuggestWidget.selectedForeground#c5cfd9
editorSuggestWidget.selectedIconForeground#b5a1da
editorWidget.background#121117
editorWidget.border#534689
editorWidget.foreground#d6d0f1
editorWidget.resizeBorder#5b5869
focusBorder#534689
foreground#cdcdcd
icon.foreground#a5c4c4
input.background#241e3c
input.border#534689
input.foreground#dcdae2
input.placeholderForeground#ddd
inputOption.activeBackground#534689
inputOption.activeBorder#534689
inputOption.activeForeground#cdcdcd
inputOption.hoverBackground#3c2c7c
list.activeSelectionBackground#534689
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#e7cbdb
list.deemphasizedForeground#cdcdcd
list.hoverBackground#241e3c
list.hoverForeground#fff
list.inactiveSelectionBackground#241e3c
list.inactiveSelectionForeground#cdcdcd
list.inactiveSelectionIconForeground#c7b9bd
menu.background#121117
menu.border#8d85be73
menu.foreground#dbdbdb
menu.selectionBackground#241e3c
menu.selectionBorder#3a3063
menu.selectionForeground#fff
menu.separatorBackground#5346897c
menubar.selectionBackground#282635
menubar.selectionForeground#a1a1da
minimap.selectionHighlight#3d45495e
minimapSlider.activeBackground#00000028
minimapSlider.background#1211173f
minimapSlider.hoverBackground#3d45496e
notifications.background#121117
notifications.border#7c9098
notifications.foreground#fff
panel.background#121117c9
panel.border#414141
panelTitle.activeBorder#534689
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#bbbbbb
quickInput.background#121117
quickInput.foreground#cdcdcd
quickInputList.focusBackground#241e3c
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#877c98
scrollbarSlider.activeBackground#2b1f5c
scrollbarSlider.background#2b1f5ca6
scrollbarSlider.hoverBackground#892942
settings.checkboxBackground#241e3c
settings.checkboxBorder#6a59af
settings.checkboxForeground#f0b6c5
settings.dropdownBackground#241e3c
settings.dropdownBorder#6a59af
settings.dropdownForeground#f1cfd8
settings.focusedRowBackground#19103b65
settings.focusedRowBorder#6a59af
settings.headerBorder#6a59af
settings.headerForeground#ccc6e4
settings.modifiedItemIndicator#6a59af
settings.numberInputBackground#241e3c
settings.numberInputBorder#6a59af
settings.numberInputForeground#cdcdcd
settings.rowHoverBackground#241e3c80
settings.sashBorder#6a59af
settings.textInputBackground#241e3c
settings.textInputBorder#6a59af
settings.textInputForeground#cdcdcd
sideBar.background#121117
sideBar.border#121117
sideBar.foreground#ddd
sideBarSectionHeader.background#121117
sideBarSectionHeader.border#5346891a
sideBarSectionHeader.foreground#aaaaaa
sideBarTitle.foreground#e4e4e4
statusBar.background#242729
statusBar.debuggingBackground#0b032b
statusBar.debuggingForeground#fff
statusBar.foreground#bec0c0
statusBar.noFolderBackground#121117
statusBarItem.hoverBackground#241e3c
statusBarItem.remoteBackground#241e3c
statusBarItem.remoteForeground#baaedb
tab.activeBackground#121117
tab.activeBorder#121117
tab.activeBorderTop#121117
tab.activeForeground#fff
tab.border#1c1b23
tab.hoverBackground#121117
tab.hoverBorder#534689
tab.hoverForeground#c2b0e7
tab.inactiveBackground#1c1b23
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorder#121117
tab.unfocusedActiveBorderTop#121117
tab.unfocusedActiveForeground#f3f5f8
tab.unfocusedHoverBorder#7c9098
tab.unfocusedInactiveBackground#1c1b23
tab.unfocusedInactiveForeground#c0d1d8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#6a59af
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#121117
terminal.findMatchBackground#2b1883
terminal.findMatchHighlightBackground#2b3650
terminal.foreground#555354
terminal.selectionBackground#241e3c
terminal.selectionForeground#fff
terminalCursor.background#9486ee
terminalCursor.foreground#d53f66
terminalOverviewRuler.cursorForeground#fff
titleBar.activeBackground#121117
titleBar.activeForeground#ddd
titleBar.border#121117
titleBar.inactiveBackground#121117
titleBar.inactiveForeground#fff
tree.indentGuidesStroke#ffde3c
widget.shadow#241e3c63

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6d6f70	italic
variable, string constant.other.placeholder	#fab1a0	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#f1b0c6	—
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	#b9ced6	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#9bb4be	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#ffeaa7	—
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	#a09fe7	—
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	#faf0ed	—
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	#eab6f5	italic
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	#a4b7f8	—
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.

Sober code — Sober Code 4

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#0d1117
activityBar.activeBorder#1f6feb
activityBar.background#0d1117
activityBar.border#0d1117
activityBar.foreground#e1e1e2
activityBar.inactiveForeground#7c7d80
activityBarBadge.background#1f6feb
activityBarBadge.foreground#ccd5f8
badge.background#3f5378
badge.foreground#fff
banner.background#29393f
breadcrumb.background#0d1117
breadcrumb.focusForeground#8bcaca
breadcrumb.foreground#cdcdcd
button.background#1f6feb
button.border#1f71eb96
button.foreground#ddd
button.hoverBackground#051831
button.secondaryBackground#2c4469
button.secondaryForeground#ddd
button.secondaryHoverBackground#4a4578
checkbox.background#2b434c
checkbox.border#bad8e4
checkbox.foreground#cdcdcd
descriptionForeground#bad8e4
dropdown.border#bad8e4
editor.background#0d1117
editor.findMatchBackground#1f71eb5e
editor.findMatchHighlightBackground#13233a
editor.findMatchHighlightBorder#1f71eb67
editor.foreground#cdcdcd
editor.hoverHighlightBackground#052b63bd
editor.inactiveSelectionBackground#13233a
editor.lineHighlightBackground#161b22
editor.lineHighlightBorder#161b22
editor.rangeHighlightBackground#13233a
editor.selectionBackground#13233a
editor.selectionHighlightBackground#314759
editor.selectionHighlightBorder#7c9098
editor.wordHighlightBackground#13233a
editor.wordHighlightBorder#1f71eb4b
editor.wordHighlightStrongBackground#014a7a98
editor.wordHighlightStrongBorder#314759
editorBracketHighlight.foreground1#fab1a0
editorBracketHighlight.foreground2#ffeaa7
editorBracketHighlight.foreground3#dfe6e9
editorBracketHighlight.foreground4#baec04
editorBracketHighlight.foreground5#81ecec
editorBracketHighlight.foreground6#bad8e4
editorBracketMatch.background#183357a6
editorBracketMatch.border#13233a
editorCursor.foreground#d6cffb
editorError.background#553640
editorError.border#e97b7b
editorError.foreground#ff0000
editorGroup.border#3d4549
editorGroupHeader.tabsBackground#161b22
editorGroupHeader.tabsBorder#0d1117
editorGutter.background#0d1117
editorHoverWidget.background#0d1117
editorHoverWidget.border#8d85be70
editorHoverWidget.foreground#fff
editorIndentGuide.activeBackground#5768ae
editorIndentGuide.background#7a9ff017
editorInfo.border#5e479e
editorLineNumber.activeForeground#88accf
editorLineNumber.foreground#55595e
editorOverviewRuler.border#0d1117
editorOverviewRuler.findMatchForeground#6494db
editorSuggestWidget.background#0d1117
editorSuggestWidget.border#13233a
editorSuggestWidget.focusHighlightForeground#6b99dd
editorSuggestWidget.foreground#d3dadd
editorSuggestWidget.highlightForeground#fab1a0
editorSuggestWidget.selectedBackground#13233a
editorSuggestWidget.selectedForeground#c5cfd9
editorSuggestWidget.selectedIconForeground#a1dacb
editorWidget.background#0d1117
editorWidget.border#bad8e4
editorWidget.foreground#d5ebf3
editorWidget.resizeBorder#bad8e4
focusBorder#9691af
foreground#cdcdcd
icon.foreground#a5c4c4
input.background#13233a
input.border#1f71eb94
input.foreground#d8e1f0
input.placeholderForeground#ddd
inputOption.activeBackground#13233a
inputOption.activeBorder#1f71ebb0
inputOption.activeForeground#cdcdcd
inputOption.hoverBackground#1f71ebcb
list.activeSelectionBackground#1f71eb49
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#cbe7e5
list.deemphasizedForeground#cdcdcd
list.hoverBackground#13233a
list.hoverForeground#fff
list.inactiveSelectionBackground#13233a
list.inactiveSelectionForeground#cdcdcd
list.inactiveSelectionIconForeground#96afb8
menu.background#0d1117
menu.border#8d85be73
menu.foreground#dfe6e9
menu.selectionBackground#13233a
menu.selectionBorder#13233a
menu.selectionForeground#fff
menu.separatorBackground#161b22
menubar.selectionBackground#13233a
menubar.selectionForeground#a9afb9
minimap.selectionHighlight#3d45495e
minimapSlider.activeBackground#00000028
minimapSlider.background#0d11173f
minimapSlider.hoverBackground#3d45496e
notifications.background#0d1117
notifications.border#7c9098
notifications.foreground#fff
panel.background#0d1117e7
panel.border#28292c
panelTitle.activeBorder#1f71eb6c
panelTitle.activeForeground#fff
panelTitle.inactiveForeground#bbbbbb
quickInput.background#0d1117
quickInput.foreground#cdcdcd
quickInputList.focusBackground#13233a
quickInputList.focusForeground#fff
quickInputList.focusIconForeground#7c9098
scrollbarSlider.activeBackground#132742
scrollbarSlider.background#13233a
scrollbarSlider.hoverBackground#3d4549
settings.checkboxBackground#13233a
settings.checkboxBorder#1f6feb
settings.checkboxForeground#749cd4
settings.dropdownBackground#13233a
settings.dropdownBorder#1f6feb
settings.dropdownForeground#d9e6eb
settings.focusedRowBackground#13233a
settings.focusedRowBorder#1f6feb
settings.headerBorder#1f6feb
settings.headerForeground#4d8ff1
settings.modifiedItemIndicator#1f6feb
settings.numberInputBackground#13233a
settings.numberInputBorder#1f6feb
settings.numberInputForeground#cdcdcd
settings.rowHoverBackground#13233a
settings.sashBorder#1f6feb
settings.textInputBackground#13233a
settings.textInputBorder#1f6feb
settings.textInputForeground#eee
sideBar.background#0d1117
sideBar.border#0d1117
sideBar.foreground#ddd
sideBarSectionHeader.background#0d1117
sideBarSectionHeader.border#7c909813
sideBarSectionHeader.foreground#8ea3ac
sideBarTitle.foreground#e4e4e4
statusBar.background#242729
statusBar.debuggingBackground#02132e
statusBar.debuggingForeground#fff
statusBar.foreground#bec0c0
statusBar.noFolderBackground#0d1117
statusBarItem.hoverBackground#13233a
statusBarItem.remoteBackground#2e414b
statusBarItem.remoteForeground#aecedb
tab.activeBackground#0d1117
tab.activeBorder#0d1117
tab.activeBorderTop#0d1117
tab.activeForeground#fff
tab.border#161b22
tab.hoverBackground#0d1117
tab.hoverBorder#1f6feb
tab.hoverForeground#b1bac7
tab.inactiveBackground#161b22
tab.inactiveForeground#cdcdcd
tab.unfocusedActiveBorder#0d1117
tab.unfocusedActiveBorderTop#0d1117
tab.unfocusedActiveForeground#f3f5f8
tab.unfocusedHoverBorder#7c9098
tab.unfocusedInactiveBackground#161b22
tab.unfocusedInactiveForeground#c0d1d8
terminal.ansiBlack#1d211d
terminal.ansiBlue#00f95f
terminal.ansiBrightBlack#665C54
terminal.ansiBrightBlue#0D6678
terminal.ansiBrightCyan#8BA59B
terminal.ansiBrightGreen#7c9098
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#0d1117
terminal.findMatchBackground#2b1883
terminal.findMatchHighlightBackground#2b3650
terminal.foreground#3d4549
terminal.selectionBackground#183357a9
terminal.selectionForeground#fff
terminalCursor.background#9486ee
terminalCursor.foreground#d6cffb
terminalOverviewRuler.cursorForeground#fff
titleBar.activeBackground#0d1117
titleBar.activeForeground#ddd
titleBar.border#0d1117
titleBar.inactiveBackground#0d1117
titleBar.inactiveForeground#fff
tree.indentGuidesStroke#ffde3c
widget.shadow#272f32

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6d6f70	italic
variable, string constant.other.placeholder	#d6cffb	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#f58970	—
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	#b9ced6	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#9bb4be	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#f1b0c6	—
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	#f5f5dc	—
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	#faf0ed	—
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	#eab6f5	italic
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	#a4b7f8	—
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	—