Work Shirt

Name: Work Shirt
Author: Brian Buie

Publisher: Brian BuieThemes in package: 1

A well-worn color theme built around semantic syntax highlighting, a limited palette, and a minimalist workbench.

Open in VS Code GitHub

VS Code preview

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

Work Shirt — Work Shirt

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#262A31
activityBar.activeBorder#DE79B2
activityBar.background#1E2227
activityBar.border#000000
activityBar.foreground#DE79B2
activityBar.inactiveForeground#546685
activityBarBadge.background#DE79B2
activityBarBadge.foreground#000000
badge.background#DE79B2
badge.foreground#000000
disabledForeground#546685
editor.background#262A31
editor.findMatchBackground#5A9ED766
editor.findMatchHighlightBackground#5A9ED733
editor.foldBackground#22262C
editor.foreground#B0ACBE
editor.lineHighlightBackground#DE79B20D
editor.selectionBackground#DE79B259
editor.selectionHighlightBackground#B0ACBE26
editorBracketHighlight.foreground1#DE79B2
editorBracketHighlight.foreground2#9872C3
editorBracketHighlight.foreground3#5A9ED7
editorBracketHighlight.unexpectedBracket.foreground#D86E77
editorBracketMatch.border#262A31
editorCursor.foreground#B0ACBE
editorGroup.border#000000
editorGroup.dropBackground#DE79B211
editorGroupHeader.tabsBackground#1E2227
editorGutter.addedBackground#6EC97966
editorGutter.deletedBackground#D86E7766
editorGutter.modifiedBackground#5A9ED7
editorHoverWidget.background#1E2227
editorHoverWidget.border#262A31
editorHoverWidget.foreground#B0ACBE
editorInfo.border#000000
editorLineNumber.activeForeground#7D6C93
editorLineNumber.foreground#546685
editorOverviewRuler.addedForeground#262A31
editorOverviewRuler.deletedForeground#262A31
editorOverviewRuler.errorForeground#D86E77
editorOverviewRuler.findMatchForeground#5A9ED733
editorOverviewRuler.modifiedForeground#262A31
editorOverviewRuler.selectionHighlightForeground#DE79B233
editorWidget.background#1E2227
editorWidget.border#262A31
editorWidget.foreground#B0ACBE
errorForeground#C87E84
focusBorder#262A31
gitDecoration.addedResourceForeground#6EC979
gitDecoration.ignoredResourceForeground#546685
gitDecoration.modifiedResourceForeground#5A9ED7
gitDecoration.renamedResourceForeground#5A9ED7
gitDecoration.stageModifiedResourceForeground#5A9ED7
gitDecoration.untrackedResourceForeground#6EC979
icon.foreground#B0ACBE
input.background#191B20
input.foreground#B0ACBE
list.activeSelectionBackground#DE79B20D
list.activeSelectionForeground#B0ACBE
list.activeSelectionIconForeground#B0ACBE
list.deemphasizedForeground#546685
list.dropBackground#DE79B212
list.errorForeground#D86E77
list.filterMatchBackground#D86E77
list.focusBackground#DE79B20D
list.focusForeground#DE79B2
list.focusHighlightForeground#DE79B2
list.highlightForeground#DE79B2
list.hoverBackground#DE79B20D
list.hoverForeground#B0ACBE
list.inactiveFocusBackground#DE79B20D
list.inactiveSelectionBackground#DE79B20D
list.inactiveSelectionForeground#B0ACBE
list.inactiveSelectionIconForeground#B0ACBE
list.warningForeground#B7B767
minimap.errorHighlight#D86E77
minimap.findMatchHighlight#DE79B20D
minimapGutter.addedBackground#6EC979
minimapGutter.modifiedBackground#5A9ED7
panel.background#262A31
panel.border#000000
panelSection.dropBackground#DE79B211
panelTitle.activeBorder#DE79B2
panelTitle.activeForeground#B0ACBE
panelTitle.inactiveForeground#546685
peekView.border#9872C3
peekViewEditor.background#1D1E26
peekViewEditor.matchHighlightBackground#DE79B266
peekViewResult.background#1A1A21
peekViewResult.lineForeground#546685
peekViewResult.matchHighlightBackground#DE79B266
peekViewTitleDescription.foreground#546685
scrollbar.shadow#262A31
scrollbarSlider.activeBackground#393F4A
scrollbarSlider.background#313740
scrollbarSlider.hoverBackground#353B45
searchEditor.findMatchBackground#DE79B20D
sideBar.background#1E2227
sideBar.border#000000
sideBar.foreground#B0ACBE
sideBarSectionHeader.background#1E2227
sideBarSectionHeader.border#000000
sideBarSectionHeader.foreground#B0ACBE
sideBarTitle.foreground#B0ACBE
statusBar.background#1E2227
statusBar.border#000000
statusBar.debuggingBackground#DE79B211
statusBar.foreground#B0ACBE
tab.activeBackground#262A31
tab.activeForeground#B0ACBE
tab.hoverBackground#262A31
tab.inactiveBackground#1E2227
tab.inactiveForeground#B0ACBE
tab.unfocusedActiveForeground#B0ACBE
tab.unfocusedHoverBackground#262A31
tab.unfocusedInactiveBackground#1E2227
tab.unfocusedInactiveForeground#B0ACBE
terminal.ansiBlack#000000
terminal.ansiBlue#5A9ED7
terminal.ansiBrightBlack#1E2227
terminal.ansiBrightBlue#A4C9E9
terminal.ansiBrightCyan#8BD1CE
terminal.ansiBrightGreen#B2E2B8
terminal.ansiBrightMagenta#F2CCE1
terminal.ansiBrightRed#EDBBBF
terminal.ansiBrightWhite#EAE9EE
terminal.ansiBrightYellow#D3D3A1
terminal.ansiCyan#52BAB6
terminal.ansiGreen#6EC979
terminal.ansiMagenta#DE79B2
terminal.ansiRed#D86E77
terminal.ansiWhite#B0ACBE
terminal.ansiYellow#B7B767
terminal.background#262A31
terminal.foreground#B0ACBE
terminal.selectionBackground#DE79B259
titleBar.activeBackground#1E2227
titleBar.activeForeground#B0ACBE
titleBar.border#000000
titleBar.inactiveBackground#1E2227
titleBar.inactiveForeground#B0ACBE
tree.indentGuidesStroke#262A31
widget.shadow#262A31

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, punctuation.definition.keyword, variable.language, variable.parameter.function.language.special, storage, storage.modifier	#9872C3	—
keyword.operator, storage.type.function.arrow, punctuation.terminator, meta.delimiter.comma	#9872C3	—
support.function.magic, support.variable, support.type.object.module, variable.other.predefined, string.regexp, constant.character.escape, constant.regexp, constant.other.date, constant.other.timestamp, support.type.primitive, support.type.builtin	#52BAB6	—
support.constant.property-value.css, support.function.misc.css	#DFA465	—
meta.function-call variable.other.readwrite	#B0ACBE	—
constant.other.object.key	#B0ACBE	—
support.type.property-name, entity.other.attribute-name, meta.definition.property, meta.section.configblock constant.other.object.key	#DE79B2	—
constant, string.quoted, string.template, punctuation.definition.string, meta.property-value.css, keyword.other.unit	#B7B767	—
variable.language.this	#DFA465	—
entity.name.function, support.function	#5A9ED7	—
variable.parameter, meta.function.parameters	#B0ACBE	italic
entity.name.tag, support.class.component.open, support.class.component.close, punctuation.definition.tag, meta.selector	#6EC979	—
comment, storage.type.class.jsdoc, entity.name.type.instance.jsdoc	#546685	italic
punctuation.separator	#9872C3	—
meta.brace, punctuation.definition.arguments, punctuation.definition.entity, punctuation.definition.type, punctuation.section.scope	#B0ACBE	—
log.error	#D86E77	—
log.warning	#B7B767	—
log.info	#52BAB6	—
log.debug	#546685	—
log.constant	#B0ACBE	—
emphasis, markup.italic	—	italic
strong, markup.bold	—	bold
markup.inserted	#6EC979	—
markup.deleted	#D86E77	—
markup.error	#D86E77	—
markup.changed	#B7B767	—
markup.underline	—	underline
invalid	#D86E77	underline italic
markup.heading	#DE79B2	—
markup.inline.raw	#9872C3	—
markup.underline.link, string.other.link.description, string.other.link.title	#5A9ED7	—
markup.quote	#B7B767	italic