Paper & Ink

Name: Paper & Ink
Author: listenerri

Publisher: listenerriThemes in package: 4

Paper and Ink: a warm cream-paper light theme and a warm ink dark theme

Open in VS Code GitHub

Color themes

VS Code preview

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

Paper & Ink — Ink

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.activeBorder#de7949
activityBar.background#241b14
activityBar.foreground#ece8d9
activityBar.inactiveForeground#b0a290
activityBarBadge.background#de7949
activityBarBadge.foreground#241b14
badge.background#de7949
badge.foreground#241b14
border.foreground#ece8d940
button.background#ece8d9
button.foreground#241b14
button.hoverBackground#de7949
button.secondaryBackground#312620
button.secondaryForeground#ece8d9
button.secondaryHoverBackground#41332a
charts.foreground#ece8d9
charts.primary#de7949
charts.secondary#83a58e
charts.third#94a2be
checkbox.background#312620
checkbox.border#ece8d940
debugExceptionWidget.background#cc7c761f
debugExceptionWidget.border#cc7c76
debugToolBar.background#312620
descriptionForeground#b0a290
diffEditor.insertedLineBackground#83a58e1f
diffEditor.insertedTextBackground#83a58e38
diffEditor.removedLineBackground#cc7c761a
diffEditor.removedTextBackground#cc7c762e
dropdown.background#312620
dropdown.border#ece8d940
dropdown.foreground#ece8d9
editor.background#241b14
editor.findMatchBackground#bba57973
editor.findMatchHighlightBackground#bba57938
editor.findRangeHighlightBackground#ece8d90f
editor.foreground#ece8d9
editor.hoverHighlightBackground#312620
editor.inactiveSelectionBackground#de794926
editor.lineHighlightBackground#312620
editor.linkDecorations.border#de794999
editor.rangeHighlightBackground#312620
editor.selectionBackground#de794947
editor.selectionHighlightBackground#de79491f
editor.wordHighlightBackground#de79492e
editor.wordHighlightStrongBackground#de79494d
editorBracketMatch.background#de794938
editorBracketMatch.border#de7949
editorBreadcrumbs.focusForeground#ece8d9
editorBreadcrumbs.foreground#b0a290
editorCursor.foreground#ece8d9
editorError.foreground#cc7c76
editorGhostText.foreground#b0a290
editorGutter.addedBackground#83a58e
editorGutter.background#241b14
editorGutter.deletedBackground#cc7c76
editorGutter.modifiedBackground#bba579
editorHint.foreground#b0a290
editorHoverWidget.background#312620
editorHoverWidget.border#ece8d940
editorIndentGuide.activeBackground1#b0a29080
editorIndentGuide.background1#ece8d940
editorInfo.foreground#94a2be
editorLineNumber.activeForeground#ece8d9
editorLineNumber.foreground#b0a290
editorLink.activeForeground#de7949
editorOverviewRuler.addedForeground#83a58e99
editorOverviewRuler.deletedForeground#cc7c7699
editorOverviewRuler.modifiedForeground#bba57999
editorStickyScroll.background#312620
editorStickyScrollHover.background#ece8d914
editorSuggestWidget.background#312620
editorSuggestWidget.border#ece8d940
editorSuggestWidget.foreground#ece8d9
editorSuggestWidget.highlightForeground#de7949
editorSuggestWidget.selectedBackground#de794947
editorWarning.foreground#bba579
editorWhitespace.foreground#ece8d940
editorWidget.background#312620
editorWidget.border#ece8d940
errorForeground#cc7c76
extensionButton.prominentBackground#ece8d9
extensionButton.prominentForeground#241b14
extensionButton.prominentHoverBackground#de7949
extensions.iconForeground#b0a290
extensions.listForeground#ece8d9
focusBorder#de7949
foreground#ece8d9
gitDecoration.conflictingResourceForeground#cc7c76
gitDecoration.deletedResourceForeground#cc7c76
gitDecoration.ignoredResourceForeground#b0a290
gitDecoration.modifiedResourceForeground#bba579
gitDecoration.unchangedResourceForeground#b0a290
gitDecoration.untrackedResourceForeground#83a58e
icon.foreground#ece8d9
input.activeBorder#de7949
input.background#241b14
input.border#ece8d940
input.foreground#ece8d9
input.placeholderForeground#b0a290
inputOption.activeBackground#ece8d926
inputOption.activeBorder#ece8d940
inputOption.activeForeground#ece8d9
inputValidation.errorBackground#cc7c761a
inputValidation.errorBorder#cc7c76
inputValidation.infoBackground#94a2be1a
inputValidation.infoBorder#94a2be
inputValidation.warningBackground#bba5791a
inputValidation.warningBorder#bba579
keybindingLabel.background#312620
keybindingLabel.borderColor#ece8d940
keybindingLabel.foreground#ece8d9
list.activeSelectionBackground#de794947
list.activeSelectionForeground#ece8d9
list.filterMatchBackground#bba57959
list.focusHighlightForeground#de7949
list.highlightForeground#de7949
list.hoverBackground#41332a
list.inactiveSelectionBackground#ece8d91a
list.inactiveSelectionForeground#ece8d9
menu.background#312620
menu.border#ece8d940
menu.foreground#ece8d9
menu.selectionBackground#de79494d
menu.selectionBorder#de7949
menu.selectionForeground#ece8d9
menubar.selectionBackground#41332a
menubar.selectionForeground#ece8d9
minimap.errorGutterForeground#cc7c76
minimap.findMatchHighlight#bba57999
minimap.selectionHighlight#ece8d940
notebook.cellEditorBackground#312620
notebook.outputEditorBackground#312620
notebook.statusBarBackground#312620
notebookEditor.background#241b14
notebookEditor.focusBordertransparent
notebookEditor.foreground#ece8d9
notificationCenter.border#ece8d940
notifications.background#312620
notifications.border#ece8d940
notifications.foreground#ece8d9
notificationToast.border#ece8d940
panel.background#241b14
panel.border#ece8d940
panelInput.border#ece8d940
panelTitle.activeBorder#de7949
panelTitle.activeForeground#ece8d9
panelTitle.inactiveForeground#b0a290
pickerGroup.border#ece8d940
pickerGroup.headerForeground#b0a290
portIndicator.foreground#b0a290
progressBar.background#de7949
quickInput.background#312620
quickInput.foreground#ece8d9
quickInput.titleBackground#ece8d914
quickInputList.focusBackground#de794947
quickInputList.focusForeground#ece8d9
scrollbarSlider.activeBackground#ece8d966
scrollbarSlider.background#ece8d926
scrollbarSlider.hoverBackground#ece8d947
selection.background#de79494d
settings.checkboxBackground#312620
settings.dropdownBackground#312620
settings.headerForeground#ece8d9
settings.modifiedIndicatorForeground#bba579
settings.textInputBackground#241b14
sideBar.background#241b14
sideBar.foreground#ece8d9
sideBarSectionHeader.background
sideBarSectionHeader.foreground#b0a290
sideBarTitle.foreground#b0a290
statusBar.background#1e1008
statusBar.debuggingBackground#de7949
statusBar.debuggingForeground#241b14
statusBar.focusBorder#de7949
statusBar.foreground#ece8d9
statusBar.noFolderBackground#1e1008
statusBar.noFolderForeground#ece8d9
statusBarItem.remoteBackground#de7949
statusBarItem.remoteForeground#241b14
tab.activeBackground#241b14
tab.activeBordertransparent
tab.activeBorderTop#de7949
tab.activeForeground#ece8d9
tab.border#ece8d940
tab.hoverBackground#41332a
tab.hoverBordertransparent
tab.inactiveBackground#312620
tab.inactiveForeground#b0a290
tab.lastPinnedBorder#ece8d940
tab.unfocusedActiveBorderTop#b0a290
terminal.ansiBlack#b0a290
terminal.ansiBlue#94a2be
terminal.ansiBrightBlack#b0a290
terminal.ansiBrightBlue#94a2be
terminal.ansiBrightCyan#94a2be
terminal.ansiBrightGreen#83a58e
terminal.ansiBrightMagenta#de7949
terminal.ansiBrightRed#cc7c76
terminal.ansiBrightWhite#ece8d9
terminal.ansiBrightYellow#bba579
terminal.ansiCyan#94a2be
terminal.ansiGreen#83a58e
terminal.ansiMagenta#de7949
terminal.ansiRed#cc7c76
terminal.ansiWhite#ece8d9
terminal.ansiYellow#bba579
terminal.background#312620
terminal.cursorForeground#ece8d9
terminal.foreground#ece8d9
terminal.selectionBackground#de794947
text.foreground#ece8d9
text.linkForeground#de7949
text.separator#b0a290
titleBar.activeBackground#241b14
titleBar.activeForeground#ece8d9
titleBar.inactiveBackground#241b14
titleBar.inactiveForeground#b0a290
tree.indentGuidesStroke#ece8d940
welcomePage.background#241b14
welcomePage.tileHoverBackground#41332a
widget.shadow#ece8d91a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#ece8d9	—
comment, punctuation.definition.comment	#b0a290	italic
string	#83a58e	—
string.regexp, string.interpolated	#83a58e	—
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant, support.constant	#bba579	—
keyword, storage, storage.type, storage.modifier, storage.unit, punctuation.section.embedded	#bc795b	—
entity.name.function, support.function	#94a2be	—
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.namespace, entity.other.namespace	#94a2be	—
entity.name.tag	#bc795b	—
entity.other.attribute-name	#bba579	—
variable.language	#bc795b	—
invalid	#cc7c76	—
markup.heading	#ece8d9	bold
markup.italic	—	italic
markup.bold	—	bold
markup.underline.link.markdown, markup.underline.link.html	#bc795b	underline
markup.inserted	#83a58e	—
markup.deleted	#cc7c76	—
markup.changed	#bba579	—
markup.quote	#b0a290	italic
markup.inline.raw, markup.raw	#83a58e	—
meta.diff.header, markup.meta.diff	#b0a290	—
meta.selector	#94a2be	—

VS Code preview

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

Paper & Ink — Ink Mono

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.activeBorder#de7949
activityBar.background#241b14
activityBar.foreground#ece8d9
activityBar.inactiveForeground#b0a290
activityBarBadge.background#de7949
activityBarBadge.foreground#241b14
badge.background#de7949
badge.foreground#241b14
border.foreground#ece8d940
button.background#ece8d9
button.foreground#241b14
button.hoverBackground#de7949
button.secondaryBackground#312620
button.secondaryForeground#ece8d9
button.secondaryHoverBackground#41332a
charts.foreground#ece8d9
charts.primary#de7949
charts.secondary#83a58e
charts.third#94a2be
checkbox.background#312620
checkbox.border#ece8d940
debugExceptionWidget.background#cc7c761f
debugExceptionWidget.border#cc7c76
debugToolBar.background#312620
descriptionForeground#b0a290
diffEditor.insertedLineBackground#83a58e1f
diffEditor.insertedTextBackground#83a58e38
diffEditor.removedLineBackground#cc7c761a
diffEditor.removedTextBackground#cc7c762e
dropdown.background#312620
dropdown.border#ece8d940
dropdown.foreground#ece8d9
editor.background#241b14
editor.findMatchBackground#bba57973
editor.findMatchHighlightBackground#bba57938
editor.findRangeHighlightBackground#ece8d90f
editor.foreground#ece8d9
editor.hoverHighlightBackground#312620
editor.inactiveSelectionBackground#de794926
editor.lineHighlightBackground#312620
editor.linkDecorations.border#de794999
editor.rangeHighlightBackground#312620
editor.selectionBackground#de794947
editor.selectionHighlightBackground#de79491f
editor.wordHighlightBackground#de79492e
editor.wordHighlightStrongBackground#de79494d
editorBracketMatch.background#de794938
editorBracketMatch.border#de7949
editorBreadcrumbs.focusForeground#ece8d9
editorBreadcrumbs.foreground#b0a290
editorCursor.foreground#ece8d9
editorError.foreground#cc7c76
editorGhostText.foreground#b0a290
editorGutter.addedBackground#83a58e
editorGutter.background#241b14
editorGutter.deletedBackground#cc7c76
editorGutter.modifiedBackground#bba579
editorHint.foreground#b0a290
editorHoverWidget.background#312620
editorHoverWidget.border#ece8d940
editorIndentGuide.activeBackground1#b0a29080
editorIndentGuide.background1#ece8d940
editorInfo.foreground#94a2be
editorLineNumber.activeForeground#ece8d9
editorLineNumber.foreground#b0a290
editorLink.activeForeground#de7949
editorOverviewRuler.addedForeground#83a58e99
editorOverviewRuler.deletedForeground#cc7c7699
editorOverviewRuler.modifiedForeground#bba57999
editorStickyScroll.background#312620
editorStickyScrollHover.background#ece8d914
editorSuggestWidget.background#312620
editorSuggestWidget.border#ece8d940
editorSuggestWidget.foreground#ece8d9
editorSuggestWidget.highlightForeground#de7949
editorSuggestWidget.selectedBackground#de794947
editorWarning.foreground#bba579
editorWhitespace.foreground#ece8d940
editorWidget.background#312620
editorWidget.border#ece8d940
errorForeground#cc7c76
extensionButton.prominentBackground#ece8d9
extensionButton.prominentForeground#241b14
extensionButton.prominentHoverBackground#de7949
extensions.iconForeground#b0a290
extensions.listForeground#ece8d9
focusBorder#de7949
foreground#ece8d9
gitDecoration.conflictingResourceForeground#cc7c76
gitDecoration.deletedResourceForeground#cc7c76
gitDecoration.ignoredResourceForeground#b0a290
gitDecoration.modifiedResourceForeground#bba579
gitDecoration.unchangedResourceForeground#b0a290
gitDecoration.untrackedResourceForeground#83a58e
icon.foreground#ece8d9
input.activeBorder#de7949
input.background#241b14
input.border#ece8d940
input.foreground#ece8d9
input.placeholderForeground#b0a290
inputOption.activeBackground#ece8d926
inputOption.activeBorder#ece8d940
inputOption.activeForeground#ece8d9
inputValidation.errorBackground#cc7c761a
inputValidation.errorBorder#cc7c76
inputValidation.infoBackground#94a2be1a
inputValidation.infoBorder#94a2be
inputValidation.warningBackground#bba5791a
inputValidation.warningBorder#bba579
keybindingLabel.background#312620
keybindingLabel.borderColor#ece8d940
keybindingLabel.foreground#ece8d9
list.activeSelectionBackground#de794947
list.activeSelectionForeground#ece8d9
list.filterMatchBackground#bba57959
list.focusHighlightForeground#de7949
list.highlightForeground#de7949
list.hoverBackground#41332a
list.inactiveSelectionBackground#ece8d91a
list.inactiveSelectionForeground#ece8d9
menu.background#312620
menu.border#ece8d940
menu.foreground#ece8d9
menu.selectionBackground#de79494d
menu.selectionBorder#de7949
menu.selectionForeground#ece8d9
menubar.selectionBackground#41332a
menubar.selectionForeground#ece8d9
minimap.errorGutterForeground#cc7c76
minimap.findMatchHighlight#bba57999
minimap.selectionHighlight#ece8d940
notebook.cellEditorBackground#312620
notebook.outputEditorBackground#312620
notebook.statusBarBackground#312620
notebookEditor.background#241b14
notebookEditor.focusBordertransparent
notebookEditor.foreground#ece8d9
notificationCenter.border#ece8d940
notifications.background#312620
notifications.border#ece8d940
notifications.foreground#ece8d9
notificationToast.border#ece8d940
panel.background#241b14
panel.border#ece8d940
panelInput.border#ece8d940
panelTitle.activeBorder#de7949
panelTitle.activeForeground#ece8d9
panelTitle.inactiveForeground#b0a290
pickerGroup.border#ece8d940
pickerGroup.headerForeground#b0a290
portIndicator.foreground#b0a290
progressBar.background#de7949
quickInput.background#312620
quickInput.foreground#ece8d9
quickInput.titleBackground#ece8d914
quickInputList.focusBackground#de794947
quickInputList.focusForeground#ece8d9
scrollbarSlider.activeBackground#ece8d966
scrollbarSlider.background#ece8d926
scrollbarSlider.hoverBackground#ece8d947
selection.background#de79494d
settings.checkboxBackground#312620
settings.dropdownBackground#312620
settings.headerForeground#ece8d9
settings.modifiedIndicatorForeground#bba579
settings.textInputBackground#241b14
sideBar.background#241b14
sideBar.foreground#ece8d9
sideBarSectionHeader.background
sideBarSectionHeader.foreground#b0a290
sideBarTitle.foreground#b0a290
statusBar.background#1e1008
statusBar.debuggingBackground#de7949
statusBar.debuggingForeground#241b14
statusBar.focusBorder#de7949
statusBar.foreground#ece8d9
statusBar.noFolderBackground#1e1008
statusBar.noFolderForeground#ece8d9
statusBarItem.remoteBackground#de7949
statusBarItem.remoteForeground#241b14
tab.activeBackground#241b14
tab.activeBordertransparent
tab.activeBorderTop#de7949
tab.activeForeground#ece8d9
tab.border#ece8d940
tab.hoverBackground#41332a
tab.hoverBordertransparent
tab.inactiveBackground#312620
tab.inactiveForeground#b0a290
tab.lastPinnedBorder#ece8d940
tab.unfocusedActiveBorderTop#b0a290
terminal.ansiBlack#b0a290
terminal.ansiBlue#94a2be
terminal.ansiBrightBlack#b0a290
terminal.ansiBrightBlue#94a2be
terminal.ansiBrightCyan#94a2be
terminal.ansiBrightGreen#83a58e
terminal.ansiBrightMagenta#de7949
terminal.ansiBrightRed#cc7c76
terminal.ansiBrightWhite#ece8d9
terminal.ansiBrightYellow#bba579
terminal.ansiCyan#94a2be
terminal.ansiGreen#83a58e
terminal.ansiMagenta#de7949
terminal.ansiRed#cc7c76
terminal.ansiWhite#ece8d9
terminal.ansiYellow#bba579
terminal.background#312620
terminal.cursorForeground#ece8d9
terminal.foreground#ece8d9
terminal.selectionBackground#de794947
text.foreground#ece8d9
text.linkForeground#de7949
text.separator#b0a290
titleBar.activeBackground#241b14
titleBar.activeForeground#ece8d9
titleBar.inactiveBackground#241b14
titleBar.inactiveForeground#b0a290
tree.indentGuidesStroke#ece8d940
welcomePage.background#241b14
welcomePage.tileHoverBackground#41332a
widget.shadow#ece8d91a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#ece8d9	—
comment, punctuation.definition.comment	#b0a290	italic
markup.quote	#b0a290	italic
meta.diff.header, markup.meta.diff	#b0a290	—
markup.heading	#ece8d9	bold
markup.italic	—	italic
markup.bold	—	bold
markup.underline.link.markdown, markup.underline.link.html	—	underline

VS Code preview

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

Paper & Ink — Paper

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#aa3606
activityBar.background#f5f0e0
activityBar.foreground#30231b
activityBar.inactiveForeground#635147
activityBarBadge.background#aa3606
activityBarBadge.foreground#f5f0e0
badge.background#aa3606
badge.foreground#f5f0e0
border.foreground#30231b40
button.background#30231b
button.foreground#f5f0e0
button.hoverBackground#aa3606
button.secondaryBackground#ebe4d2
button.secondaryForeground#30231b
button.secondaryHoverBackground#e1d8c3
charts.foreground#30231b
charts.primary#aa3606
charts.secondary#3e7050
charts.third#4d6291
checkbox.background#ebe4d2
checkbox.border#30231b40
debugExceptionWidget.background#c13c3b1f
debugExceptionWidget.border#c13c3b
debugToolBar.background#ebe4d2
descriptionForeground#635147
diffEditor.insertedLineBackground#3e70501f
diffEditor.insertedTextBackground#3e705038
diffEditor.removedLineBackground#c13c3b1a
diffEditor.removedTextBackground#c13c3b2e
dropdown.background#ebe4d2
dropdown.border#30231b40
dropdown.foreground#30231b
editor.background#f5f0e0
editor.findMatchBackground#8f6f2373
editor.findMatchHighlightBackground#8f6f2338
editor.findRangeHighlightBackground#30231b0f
editor.foreground#30231b
editor.hoverHighlightBackground#ebe4d2
editor.inactiveSelectionBackground#aa360626
editor.lineHighlightBackground#ebe4d2
editor.linkDecorations.border#aa360699
editor.rangeHighlightBackground#ebe4d2
editor.selectionBackground#aa360647
editor.selectionHighlightBackground#aa36061f
editor.wordHighlightBackground#aa36062e
editor.wordHighlightStrongBackground#aa36064d
editorBracketMatch.background#aa360638
editorBracketMatch.border#aa3606
editorBreadcrumbs.focusForeground#30231b
editorBreadcrumbs.foreground#635147
editorCursor.foreground#30231b
editorError.foreground#c13c3b
editorGhostText.foreground#635147
editorGutter.addedBackground#3e7050
editorGutter.background#f5f0e0
editorGutter.deletedBackground#c13c3b
editorGutter.modifiedBackground#8f6f23
editorHint.foreground#635147
editorHoverWidget.background#ebe4d2
editorHoverWidget.border#30231b40
editorIndentGuide.activeBackground1#63514780
editorIndentGuide.background1#30231b40
editorInfo.foreground#4d6291
editorLineNumber.activeForeground#30231b
editorLineNumber.foreground#635147
editorLink.activeForeground#aa3606
editorOverviewRuler.addedForeground#3e705099
editorOverviewRuler.deletedForeground#c13c3b99
editorOverviewRuler.modifiedForeground#8f6f2399
editorStickyScroll.background#ebe4d2
editorStickyScrollHover.background#30231b14
editorSuggestWidget.background#ebe4d2
editorSuggestWidget.border#30231b40
editorSuggestWidget.foreground#30231b
editorSuggestWidget.highlightForeground#aa3606
editorSuggestWidget.selectedBackground#aa360647
editorWarning.foreground#8f6f23
editorWhitespace.foreground#30231b40
editorWidget.background#ebe4d2
editorWidget.border#30231b40
errorForeground#c13c3b
extensionButton.prominentBackground#30231b
extensionButton.prominentForeground#f5f0e0
extensionButton.prominentHoverBackground#aa3606
extensions.iconForeground#635147
extensions.listForeground#30231b
focusBorder#aa3606
foreground#30231b
gitDecoration.conflictingResourceForeground#c13c3b
gitDecoration.deletedResourceForeground#c13c3b
gitDecoration.ignoredResourceForeground#635147
gitDecoration.modifiedResourceForeground#8f6f23
gitDecoration.unchangedResourceForeground#635147
gitDecoration.untrackedResourceForeground#3e7050
icon.foreground#30231b
input.activeBorder#aa3606
input.background#f5f0e0
input.border#30231b40
input.foreground#30231b
input.placeholderForeground#635147
inputOption.activeBackground#30231b26
inputOption.activeBorder#30231b40
inputOption.activeForeground#30231b
inputValidation.errorBackground#c13c3b1a
inputValidation.errorBorder#c13c3b
inputValidation.infoBackground#4d62911a
inputValidation.infoBorder#4d6291
inputValidation.warningBackground#8f6f231a
inputValidation.warningBorder#8f6f23
keybindingLabel.background#ebe4d2
keybindingLabel.borderColor#30231b40
keybindingLabel.foreground#30231b
list.activeSelectionBackground#aa360647
list.activeSelectionForeground#30231b
list.filterMatchBackground#8f6f2359
list.focusHighlightForeground#aa3606
list.highlightForeground#aa3606
list.hoverBackground#e1d8c3
list.inactiveSelectionBackground#30231b1a
list.inactiveSelectionForeground#30231b
menu.background#ebe4d2
menu.border#30231b40
menu.foreground#30231b
menu.selectionBackground#aa36064d
menu.selectionBorder#aa3606
menu.selectionForeground#30231b
menubar.selectionBackground#e1d8c3
menubar.selectionForeground#30231b
minimap.errorGutterForeground#c13c3b
minimap.findMatchHighlight#8f6f2399
minimap.selectionHighlight#30231b40
notebook.cellEditorBackground#ebe4d2
notebook.outputEditorBackground#ebe4d2
notebook.statusBarBackground#ebe4d2
notebookEditor.background#f5f0e0
notebookEditor.focusBordertransparent
notebookEditor.foreground#30231b
notificationCenter.border#30231b40
notifications.background#ebe4d2
notifications.border#30231b40
notifications.foreground#30231b
notificationToast.border#30231b40
panel.background#f5f0e0
panel.border#30231b40
panelInput.border#30231b40
panelTitle.activeBorder#aa3606
panelTitle.activeForeground#30231b
panelTitle.inactiveForeground#635147
pickerGroup.border#30231b40
pickerGroup.headerForeground#635147
portIndicator.foreground#635147
progressBar.background#aa3606
quickInput.background#ebe4d2
quickInput.foreground#30231b
quickInput.titleBackground#30231b14
quickInputList.focusBackground#aa360647
quickInputList.focusForeground#30231b
scrollbarSlider.activeBackground#30231b66
scrollbarSlider.background#30231b26
scrollbarSlider.hoverBackground#30231b47
selection.background#aa36064d
settings.checkboxBackground#ebe4d2
settings.dropdownBackground#ebe4d2
settings.headerForeground#30231b
settings.modifiedIndicatorForeground#8f6f23
settings.textInputBackground#f5f0e0
sideBar.background#f5f0e0
sideBar.foreground#30231b
sideBarSectionHeader.background
sideBarSectionHeader.foreground#635147
sideBarTitle.foreground#635147
statusBar.background#30231b
statusBar.debuggingBackground#aa3606
statusBar.debuggingForeground#f5f0e0
statusBar.focusBorder#aa3606
statusBar.foreground#f5f0e0
statusBar.noFolderBackground#30231b
statusBar.noFolderForeground#f5f0e0
statusBarItem.remoteBackground#aa3606
statusBarItem.remoteForeground#f5f0e0
tab.activeBackground#f5f0e0
tab.activeBordertransparent
tab.activeBorderTop#aa3606
tab.activeForeground#30231b
tab.border#30231b40
tab.hoverBackground#e1d8c3
tab.hoverBordertransparent
tab.inactiveBackground#ebe4d2
tab.inactiveForeground#635147
tab.lastPinnedBorder#30231b40
tab.unfocusedActiveBorderTop#635147
terminal.ansiBlack#635147
terminal.ansiBlue#4d6291
terminal.ansiBrightBlack#635147
terminal.ansiBrightBlue#4d6291
terminal.ansiBrightCyan#4d6291
terminal.ansiBrightGreen#3e7050
terminal.ansiBrightMagenta#aa3606
terminal.ansiBrightRed#c13c3b
terminal.ansiBrightWhite#30231b
terminal.ansiBrightYellow#8f6f23
terminal.ansiCyan#4d6291
terminal.ansiGreen#3e7050
terminal.ansiMagenta#aa3606
terminal.ansiRed#c13c3b
terminal.ansiWhite#30231b
terminal.ansiYellow#8f6f23
terminal.background#ebe4d2
terminal.cursorForeground#30231b
terminal.foreground#30231b
terminal.selectionBackground#aa360647
text.foreground#30231b
text.linkForeground#aa3606
text.separator#635147
titleBar.activeBackground#f5f0e0
titleBar.activeForeground#30231b
titleBar.inactiveBackground#f5f0e0
titleBar.inactiveForeground#635147
tree.indentGuidesStroke#30231b40
welcomePage.background#f5f0e0
welcomePage.tileHoverBackground#e1d8c3
widget.shadow#30231b1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#30231b	—
comment, punctuation.definition.comment	#635147	italic
string	#3e7050	—
string.regexp, string.interpolated	#3e7050	—
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant, support.constant	#8f6f23	—
keyword, storage, storage.type, storage.modifier, storage.unit, punctuation.section.embedded	#aa3606	—
entity.name.function, support.function	#4d6291	—
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.namespace, entity.other.namespace	#4d6291	—
entity.name.tag	#aa3606	—
entity.other.attribute-name	#8f6f23	—
variable.language	#aa3606	—
invalid	#c13c3b	—
markup.heading	#30231b	bold
markup.italic	—	italic
markup.bold	—	bold
markup.underline.link.markdown, markup.underline.link.html	#aa3606	underline
markup.inserted	#3e7050	—
markup.deleted	#c13c3b	—
markup.changed	#8f6f23	—
markup.quote	#635147	italic
markup.inline.raw, markup.raw	#3e7050	—
meta.diff.header, markup.meta.diff	#635147	—
meta.selector	#4d6291	—

VS Code preview

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

Paper & Ink — Paper Mono

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#aa3606
activityBar.background#f5f0e0
activityBar.foreground#30231b
activityBar.inactiveForeground#635147
activityBarBadge.background#aa3606
activityBarBadge.foreground#f5f0e0
badge.background#aa3606
badge.foreground#f5f0e0
border.foreground#30231b40
button.background#30231b
button.foreground#f5f0e0
button.hoverBackground#aa3606
button.secondaryBackground#ebe4d2
button.secondaryForeground#30231b
button.secondaryHoverBackground#e1d8c3
charts.foreground#30231b
charts.primary#aa3606
charts.secondary#3e7050
charts.third#4d6291
checkbox.background#ebe4d2
checkbox.border#30231b40
debugExceptionWidget.background#c13c3b1f
debugExceptionWidget.border#c13c3b
debugToolBar.background#ebe4d2
descriptionForeground#635147
diffEditor.insertedLineBackground#3e70501f
diffEditor.insertedTextBackground#3e705038
diffEditor.removedLineBackground#c13c3b1a
diffEditor.removedTextBackground#c13c3b2e
dropdown.background#ebe4d2
dropdown.border#30231b40
dropdown.foreground#30231b
editor.background#f5f0e0
editor.findMatchBackground#8f6f2373
editor.findMatchHighlightBackground#8f6f2338
editor.findRangeHighlightBackground#30231b0f
editor.foreground#30231b
editor.hoverHighlightBackground#ebe4d2
editor.inactiveSelectionBackground#aa360626
editor.lineHighlightBackground#ebe4d2
editor.linkDecorations.border#aa360699
editor.rangeHighlightBackground#ebe4d2
editor.selectionBackground#aa360647
editor.selectionHighlightBackground#aa36061f
editor.wordHighlightBackground#aa36062e
editor.wordHighlightStrongBackground#aa36064d
editorBracketMatch.background#aa360638
editorBracketMatch.border#aa3606
editorBreadcrumbs.focusForeground#30231b
editorBreadcrumbs.foreground#635147
editorCursor.foreground#30231b
editorError.foreground#c13c3b
editorGhostText.foreground#635147
editorGutter.addedBackground#3e7050
editorGutter.background#f5f0e0
editorGutter.deletedBackground#c13c3b
editorGutter.modifiedBackground#8f6f23
editorHint.foreground#635147
editorHoverWidget.background#ebe4d2
editorHoverWidget.border#30231b40
editorIndentGuide.activeBackground1#63514780
editorIndentGuide.background1#30231b40
editorInfo.foreground#4d6291
editorLineNumber.activeForeground#30231b
editorLineNumber.foreground#635147
editorLink.activeForeground#aa3606
editorOverviewRuler.addedForeground#3e705099
editorOverviewRuler.deletedForeground#c13c3b99
editorOverviewRuler.modifiedForeground#8f6f2399
editorStickyScroll.background#ebe4d2
editorStickyScrollHover.background#30231b14
editorSuggestWidget.background#ebe4d2
editorSuggestWidget.border#30231b40
editorSuggestWidget.foreground#30231b
editorSuggestWidget.highlightForeground#aa3606
editorSuggestWidget.selectedBackground#aa360647
editorWarning.foreground#8f6f23
editorWhitespace.foreground#30231b40
editorWidget.background#ebe4d2
editorWidget.border#30231b40
errorForeground#c13c3b
extensionButton.prominentBackground#30231b
extensionButton.prominentForeground#f5f0e0
extensionButton.prominentHoverBackground#aa3606
extensions.iconForeground#635147
extensions.listForeground#30231b
focusBorder#aa3606
foreground#30231b
gitDecoration.conflictingResourceForeground#c13c3b
gitDecoration.deletedResourceForeground#c13c3b
gitDecoration.ignoredResourceForeground#635147
gitDecoration.modifiedResourceForeground#8f6f23
gitDecoration.unchangedResourceForeground#635147
gitDecoration.untrackedResourceForeground#3e7050
icon.foreground#30231b
input.activeBorder#aa3606
input.background#f5f0e0
input.border#30231b40
input.foreground#30231b
input.placeholderForeground#635147
inputOption.activeBackground#30231b26
inputOption.activeBorder#30231b40
inputOption.activeForeground#30231b
inputValidation.errorBackground#c13c3b1a
inputValidation.errorBorder#c13c3b
inputValidation.infoBackground#4d62911a
inputValidation.infoBorder#4d6291
inputValidation.warningBackground#8f6f231a
inputValidation.warningBorder#8f6f23
keybindingLabel.background#ebe4d2
keybindingLabel.borderColor#30231b40
keybindingLabel.foreground#30231b
list.activeSelectionBackground#aa360647
list.activeSelectionForeground#30231b
list.filterMatchBackground#8f6f2359
list.focusHighlightForeground#aa3606
list.highlightForeground#aa3606
list.hoverBackground#e1d8c3
list.inactiveSelectionBackground#30231b1a
list.inactiveSelectionForeground#30231b
menu.background#ebe4d2
menu.border#30231b40
menu.foreground#30231b
menu.selectionBackground#aa36064d
menu.selectionBorder#aa3606
menu.selectionForeground#30231b
menubar.selectionBackground#e1d8c3
menubar.selectionForeground#30231b
minimap.errorGutterForeground#c13c3b
minimap.findMatchHighlight#8f6f2399
minimap.selectionHighlight#30231b40
notebook.cellEditorBackground#ebe4d2
notebook.outputEditorBackground#ebe4d2
notebook.statusBarBackground#ebe4d2
notebookEditor.background#f5f0e0
notebookEditor.focusBordertransparent
notebookEditor.foreground#30231b
notificationCenter.border#30231b40
notifications.background#ebe4d2
notifications.border#30231b40
notifications.foreground#30231b
notificationToast.border#30231b40
panel.background#f5f0e0
panel.border#30231b40
panelInput.border#30231b40
panelTitle.activeBorder#aa3606
panelTitle.activeForeground#30231b
panelTitle.inactiveForeground#635147
pickerGroup.border#30231b40
pickerGroup.headerForeground#635147
portIndicator.foreground#635147
progressBar.background#aa3606
quickInput.background#ebe4d2
quickInput.foreground#30231b
quickInput.titleBackground#30231b14
quickInputList.focusBackground#aa360647
quickInputList.focusForeground#30231b
scrollbarSlider.activeBackground#30231b66
scrollbarSlider.background#30231b26
scrollbarSlider.hoverBackground#30231b47
selection.background#aa36064d
settings.checkboxBackground#ebe4d2
settings.dropdownBackground#ebe4d2
settings.headerForeground#30231b
settings.modifiedIndicatorForeground#8f6f23
settings.textInputBackground#f5f0e0
sideBar.background#f5f0e0
sideBar.foreground#30231b
sideBarSectionHeader.background
sideBarSectionHeader.foreground#635147
sideBarTitle.foreground#635147
statusBar.background#30231b
statusBar.debuggingBackground#aa3606
statusBar.debuggingForeground#f5f0e0
statusBar.focusBorder#aa3606
statusBar.foreground#f5f0e0
statusBar.noFolderBackground#30231b
statusBar.noFolderForeground#f5f0e0
statusBarItem.remoteBackground#aa3606
statusBarItem.remoteForeground#f5f0e0
tab.activeBackground#f5f0e0
tab.activeBordertransparent
tab.activeBorderTop#aa3606
tab.activeForeground#30231b
tab.border#30231b40
tab.hoverBackground#e1d8c3
tab.hoverBordertransparent
tab.inactiveBackground#ebe4d2
tab.inactiveForeground#635147
tab.lastPinnedBorder#30231b40
tab.unfocusedActiveBorderTop#635147
terminal.ansiBlack#635147
terminal.ansiBlue#4d6291
terminal.ansiBrightBlack#635147
terminal.ansiBrightBlue#4d6291
terminal.ansiBrightCyan#4d6291
terminal.ansiBrightGreen#3e7050
terminal.ansiBrightMagenta#aa3606
terminal.ansiBrightRed#c13c3b
terminal.ansiBrightWhite#30231b
terminal.ansiBrightYellow#8f6f23
terminal.ansiCyan#4d6291
terminal.ansiGreen#3e7050
terminal.ansiMagenta#aa3606
terminal.ansiRed#c13c3b
terminal.ansiWhite#30231b
terminal.ansiYellow#8f6f23
terminal.background#ebe4d2
terminal.cursorForeground#30231b
terminal.foreground#30231b
terminal.selectionBackground#aa360647
text.foreground#30231b
text.linkForeground#aa3606
text.separator#635147
titleBar.activeBackground#f5f0e0
titleBar.activeForeground#30231b
titleBar.inactiveBackground#f5f0e0
titleBar.inactiveForeground#635147
tree.indentGuidesStroke#30231b40
welcomePage.background#f5f0e0
welcomePage.tileHoverBackground#e1d8c3
widget.shadow#30231b1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#30231b	—
comment, punctuation.definition.comment	#635147	italic
markup.quote	#635147	italic
meta.diff.header, markup.meta.diff	#635147	—
markup.heading	#30231b	bold
markup.italic	—	italic
markup.bold	—	bold
markup.underline.link.markdown, markup.underline.link.html	—	underline