Parchment (monochrome themes)

Name: Parchment (monochrome themes)
Author: Jonas Hvid

Publisher: Jonas HvidThemes in package: 4

Almost monochromatic, light and dark color theme with highlighted comments

Open in VS Code GitHub

Color themes

VS Code preview

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

Parchment (monochrome themes) — Parchment Starlight

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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.background#262626
activityBar.border#3b3b3b
activityBar.foreground#848484
activityBar.inactiveForeground#525252
activityBarBadge.background#6f3538
activityBarBadge.foreground#e87f84
breadcrumb.background#1f1f1f
breadcrumb.focusForeground#848484
breadcrumb.foreground#525252
button.background#e87f84
button.foreground#390a0e
button.hoverBackground#e54f58
checkbox.background#1b1b1b
checkbox.border#1b1b1b
checkbox.foreground#9e9e9e
descriptionForeground#9e9e9e
dropdown.background#1b1b1b
dropdown.border#1b1b1b
dropdown.foreground#b9b9b9
dropdown.listBackground#1b1b1b
editor.background#181818
editor.foreground#d4d4d4
editor.hoverHighlightBackground#262626
editor.selectionBackground#262626
editor.selectionForeground#9e9e9e
editor.selectionHighlightBackground#262626
editor.wordHighlightBackground#262626
editorCursor.foreground#e87f84
editorGroup.border#262626
editorGroupHeader.border#303030
editorGroupHeader.tabsBackground#1b1b1b
editorGroupHeader.tabsBorder#303030
editorGutter.addedBackground#813b56
editorGutter.deletedBackground#3f5374
editorGutter.modifiedBackground#674286
editorLineNumber.activeForeground#848484
editorLineNumber.foreground#3b3b3b
editorLink.activeForeground#7092c7
editorRuler.foreground#262626
editorSuggestWidget.highlightForeground#e87f84
editorSuggestWidget.selectedBackground#303030
editorWhitespace.foreground#262626
editorWidget.background#181818
editorWidget.border#00000000
editorWidget.foreground#9e9e9e
errorForeground#e87f84
focusBorder#6f3538
foreground#d4d4d4
gitDecoration.addedResourceForeground#d587a2
gitDecoration.conflictingResourceForeground#e87f84
gitDecoration.deletedResourceForeground#829fd0
gitDecoration.ignoredResourceForeground#525252
gitDecoration.modifiedResourceForeground#b091cf
gitDecoration.submoduleResourceForeground#9da26e
gitDecoration.untrackedResourceForeground#848484
icon.foreground#9e9e9e
list.activeSelectionBackground#262626
list.activeSelectionForeground#b9b9b9
list.dropBackground#1b1b1b
list.focusBackground#262626
list.focusForeground#b9b9b9
list.highlightForeground#e87f84
list.hoverBackground#1b1b1b
list.hoverForeground#b9b9b9
list.inactiveFocusBackground#1b1b1b
list.inactiveSelectionBackground#1b1b1b
list.inactiveSelectionForeground#b9b9b9
minimap.errorHighlight#e87f84
minimap.findMatchHighlight#313e39
minimap.selectionHighlight#262626
minimap.warningHighlight#e87f84
minimapGutter.addedBackground#813b56
minimapGutter.deletedBackground#3f5374
minimapGutter.modifiedBackground#674286
minimapSlider.activeBackground#d4d4d438
minimapSlider.background#d4d4d410
minimapSlider.hoverBackground#d4d4d420
pickerGroup.border#3b3b3b
pickerGroup.foreground#6a6a6a
selection.background#525252
settings.modifiedItemIndicator#674286
sideBar.background#1b1b1b
sideBar.border#262626
sideBarSectionHeader.background#262626
sideBarSectionHeader.foreground#848484
statusBar.background#262626
statusBar.border#3b3b3b
statusBar.debuggingBackground#383c3c
statusBar.debuggingBorder#434748
statusBar.debuggingForeground#ababab
statusBar.foreground#848484
statusBar.noFolderBackground#262626
statusBar.noFolderBorder#3b3b3b
statusBar.noFolderForeground#848484
statusBarItem.hoverBackground#303030
tab.activeBackground#1f1f1f
tab.activeBorder#b9b9b9
tab.activeForeground#b9b9b9
tab.border#00000000
tab.inactiveBackground#1b1b1b
tab.inactiveForeground#525252
terminal.ansiBlack#474747
terminal.ansiBlue#7e9fd4
terminal.ansiBrightBlack#303030
terminal.ansiBrightBlue#6285bb
terminal.ansiBrightCyan#5c8c90
terminal.ansiBrightGreen#728c56
terminal.ansiBrightMagenta#9e70c7
terminal.ansiBrightRed#d55d63
terminal.ansiBrightWhite#d4d4d4
terminal.ansiBrightYellow#988057
terminal.ansiCyan#6ea7ac
terminal.ansiGreen#89a768
terminal.ansiMagenta#b290d4
terminal.ansiRed#db868a
terminal.ansiWhite#c6c6c6
terminal.ansiYellow#b69a69
terminal.background#1b1b1b
terminal.foreground#c6c6c6
terminal.selectionBackground#525252
terminalCursor.background#262626
terminalCursor.foreground#e87f84
textBlockQuote.background#262626
textBlockQuote.border#525252
textCodeBlock.background#262626
textLink.activeForeground#7092c7
textLink.foreground#95acd6
textPreformat.foreground#b9b9b9
textSeparator.foreground#3b3b3b
titleBar.activeBackground#303030
titleBar.activeForeground#848484
titleBar.border#3b3b3b
titleBar.inactiveBackground#303030
titleBar.inactiveForeground#525252
widget.shadow#d4d4d410
window.activeBorder#262626
window.inactiveBorder#262626

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#998ba8	bold
keyword	—	bold
storage	—	bold
entity.name.type	—	italic
punctuation.separator	#5e5e5e	—
punctuation.terminator	#5e5e5e	—
string	#ababab	italic
punctuation	#474747	bold
meta.brace	#474747	bold
string.unquoted.plain.out.yaml	#848484	normal
string.quoted.double.yaml	#848484	normal
string.quoted.double.json	#848484	normal
constant.numeric.json	#848484	bold
constant.numeric.integer.yaml	#848484	bold
constant.numeric.float.yaml	#848484	bold
constant.language.json	#848484	bold
constant.language.boolean.yaml	#848484	bold
support.type.property-name.json	#9e9e9e	bold
entity.name.tag.yaml	#9e9e9e	bold
markup.heading	—	bold
markup.inline	#ababab	—
markup.italic	—	italic
markup.bold	—	bold
markup.quote	#ababab	italic
markup.raw.block	#ababab	—
markup.fenced_code	#ababab	—
fenced_code.block.language	#6a6a6a	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}