Minimal Monochrome

Name: Minimal Monochrome
Author: Arihant Verma

Publisher: Arihant VermaThemes in package: 8

A minimal, monochrome color theme for VS Code with light and dark variants. Grayscale syntax with pastel semantic colors.

GitHub

Color themes

VS Code preview

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

Minimal Monochrome — Minimal Monochrome Slate Dark

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#1A1A1A
activityBar.border#3A3A3A
activityBar.foreground#EEEEEE
activityBar.inactiveForeground#B4B4B4
activityBarBadge.background#7B7B7B
activityBarBadge.foreground#FFFFFF
badge.background#3A3A3A
badge.foreground#EEEEEE
breadcrumb.activeSelectionForeground#EEEEEE
breadcrumb.focusForeground#EEEEEE
breadcrumb.foreground#B4B4B4
breadcrumbPicker.background#222222
button.background#3A3A3A
button.foreground#EEEEEE
button.hoverBackground#4A4A4A
debugIcon.breakpointForeground#F5A3A7
debugIcon.pauseForeground#F0C674
debugIcon.startForeground#8BCFAC
debugIcon.stopForeground#F5A3A7
debugToolBar.background#222222
debugToolBar.border#3A3A3A
descriptionForeground#B4B4B4
diffEditor.insertedTextBackground#8BCFAC20
diffEditor.removedTextBackground#F5A3A720
dropdown.background#222222
dropdown.border#3A3A3A
dropdown.foreground#EEEEEE
editor.background#121212
editor.findMatchBackground#606060
editor.findMatchHighlightBackground#60606080
editor.foreground#EEEEEE
editor.inactiveSelectionBackground#60606080
editor.lineHighlightBackground#3A3A3A
editor.selectionBackground#606060
editor.selectionHighlightBackground#60606080
editor.wordHighlightBackground#60606080
editor.wordHighlightStrongBackground#60606080
editorBracketHighlight.foreground1#B4B4B4
editorBracketHighlight.foreground2#8A8A8A
editorBracketHighlight.foreground3#6A6A6A
editorBracketHighlight.foreground4#B4B4B4
editorBracketHighlight.foreground5#8A8A8A
editorBracketHighlight.foreground6#6A6A6A
editorBracketHighlight.unexpectedBracket.foreground#F5A3A7
editorBracketMatch.background#2A2A2A
editorBracketMatch.border#3A3A3A
editorCursor.foreground#FFFFFF
editorError.background#F5A3A715
editorError.foreground#F5A3A7
editorGroup.border#3A3A3A
editorGroupHeader.noTabsBackground#222222
editorGroupHeader.tabsBackground#222222
editorGutter.addedBackground#8BCFAC
editorGutter.background#121212
editorGutter.deletedBackground#F5A3A7
editorGutter.foldingControlForeground#B4B4B4
editorGutter.modifiedBackground#89B4D4
editorHint.foreground#8BCFAC
editorHoverWidget.background#222222
editorHoverWidget.border#3A3A3A
editorIndentGuide.activeBackground1#5A5A5A
editorIndentGuide.background1#3A3A3A
editorInfo.background#89B4D415
editorInfo.foreground#89B4D4
editorInlayHint.background#3A3A3A80
editorInlayHint.foreground#B4B4B4
editorInlayHint.parameterForeground#B4B4B4
editorInlayHint.typeForeground#B4B4B4
editorLineNumber.activeForeground#EEEEEE
editorLineNumber.foreground#7B7B7B
editorOverviewRuler.border#3A3A3A
editorOverviewRuler.errorForeground#F5A3A7
editorOverviewRuler.infoForeground#89B4D4
editorOverviewRuler.warningForeground#F0C674
editorStickyScroll.background#1A1A1A
editorStickyScrollHover.background#222222
editorSuggestWidget.background#222222
editorSuggestWidget.border#3A3A3A
editorSuggestWidget.selectedBackground#3A3A3A
editorWarning.background#F0C67415
editorWarning.foreground#F0C674
editorWhitespace.foreground#3A3A3A
editorWidget.background#222222
editorWidget.border#3A3A3A
editorWidget.resizeBorder#7B7B7B
errorForeground#F5A3A7
focusBorder#7B7B7B
foreground#EEEEEE
gitDecoration.addedResourceForeground#8BCFAC
gitDecoration.conflictingResourceForeground#E8A46D
gitDecoration.deletedResourceForeground#F5A3A7
gitDecoration.ignoredResourceForeground#959da5
gitDecoration.modifiedResourceForeground#89B4D4
gitDecoration.untrackedResourceForeground#8BCFAC
icon.foreground#B4B4B4
input.background#222222
input.border#3A3A3A
input.foreground#EEEEEE
input.placeholderForeground#B4B4B4
inputOption.activeBorder#B4B4B4
keybindingLabel.background#3A3A3A
keybindingLabel.border#4A4A4A
keybindingLabel.foreground#EEEEEE
list.activeSelectionBackground#3A3A3A
list.activeSelectionForeground#D0D0D0
list.focusBackground#3A3A3A
list.focusForeground#D0D0D0
list.highlightForeground#D0D0D0
list.hoverBackground#3A3A3A
list.hoverForeground#D0D0D0
list.inactiveSelectionBackground#3A3A3A
list.inactiveSelectionForeground#D0D0D0
merge.border#3A3A3A
merge.commonContentBackground#F0C67420
merge.commonHeaderBackground#F0C67440
merge.currentContentBackground#8BCFAC20
merge.currentHeaderBackground#8BCFAC40
merge.incomingContentBackground#89B4D420
merge.incomingHeaderBackground#89B4D440
minimap.background#1A1A1A
minimapGutter.addedBackground#8BCFAC
minimapGutter.deletedBackground#F5A3A7
minimapGutter.modifiedBackground#89B4D4
notificationCenter.border#3A3A3A
notificationCenterHeader.background#222222
notificationCenterHeader.foreground#EEEEEE
notificationLink.foreground#D0D0D0
notifications.background#222222
notifications.border#3A3A3A
notifications.foreground#EEEEEE
notificationsErrorIcon.foreground#F5A3A7
notificationsInfoIcon.foreground#89B4D4
notificationsWarningIcon.foreground#F0C674
panel.background#222222
panel.border#3A3A3A
panelTitle.activeBorder#B4B4B4
panelTitle.activeForeground#EEEEEE
panelTitle.inactiveForeground#B4B4B4
peekView.border#3A3A3A
peekViewEditor.background#222222
peekViewEditor.matchHighlightBackground#606060
peekViewResult.background#222222
peekViewResult.fileForeground#EEEEEE
peekViewResult.lineForeground#B4B4B4
peekViewResult.matchHighlightBackground#606060
peekViewResult.selectionBackground#3A3A3A
peekViewResult.selectionForeground#EEEEEE
peekViewTitle.background#222222
peekViewTitleDescription.foreground#B4B4B4
peekViewTitleLabel.foreground#EEEEEE
progressBar.background#B4B4B4
quickInput.background#222222
quickInput.foreground#EEEEEE
quickInputList.focusBackground#3A3A3A
quickInputList.focusForeground#EEEEEE
quickInputTitle.background#222222
scrollbar.shadow#00000040
scrollbarSlider.activeBackground#959da555
scrollbarSlider.background#959da533
scrollbarSlider.hoverBackground#959da544
sideBar.background#222222
sideBar.border#3A3A3A
sideBar.foreground#ABABAB
sideBarSectionHeader.background#222222
sideBarSectionHeader.border#3A3A3A
sideBarSectionHeader.foreground#EEEEEE
sideBarTitle.foreground#EEEEEE
statusBar.background#1A1A1A
statusBar.border#3A3A3A
statusBar.debuggingBackground#1A1A1A
statusBar.debuggingForeground#EEEEEE
statusBar.foreground#EEEEEE
statusBar.noFolderBackground#1A1A1A
statusBar.noFolderForeground#EEEEEE
tab.activeBackground#121212
tab.activeBorder#EEEEEE
tab.activeBorderTop#121212
tab.activeForeground#EEEEEE
tab.border#3A3A3A
tab.inactiveBackground#222222
tab.inactiveForeground#B4B4B4
terminal.ansiBlack#1A1A1A
terminal.ansiBlue#89B4D4
terminal.ansiBrightBlack#646464
terminal.ansiBrightBlue#A8D1F0
terminal.ansiBrightCyan#9DE5E0
terminal.ansiBrightGreen#A8E6C3
terminal.ansiBrightMagenta#D9B8F0
terminal.ansiBrightRed#FFB8BA
terminal.ansiBrightWhite#FCFCFC
terminal.ansiBrightYellow#FFE082
terminal.ansiCyan#7DD4D0
terminal.ansiGreen#8BCFAC
terminal.ansiMagenta#C9A5E0
terminal.ansiRed#F5A3A7
terminal.ansiWhite#D0D0D0
terminal.ansiYellow#F0C674
terminal.background#1A1A1A
terminal.foreground#EEEEEE
terminalCursor.foreground#EEEEEE
testing.iconFailed#F5A3A7
testing.iconPassed#8BCFAC
testing.iconQueued#89B4D4
testing.iconSkipped#F0C674
testing.iconUnset#B4B4B4
textLink.activeForeground#D0D0D0
textLink.foreground#D0D0D0
titleBar.activeBackground#1A1A1A
titleBar.activeForeground#EEEEEE
titleBar.border#3A3A3A
titleBar.inactiveBackground#1A1A1A
titleBar.inactiveForeground#B4B4B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#515166	—
comment.block.documentation, comment.block.javadoc	#515166	—
constant, constant.language, constant.character	#89A7B1	—
constant.numeric, constant.other	#9eb2d9	—
entity.name.function, meta.function-call, support.function	#CBDAD5	—
entity.name.type, entity.name.class, entity.name.namespace	#89A7B1	—
support.type, support.class	#89A7B1	italic
entity.name.tag	#566981	—
entity.other.attribute-name	#89A7B1	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier	#566981	—
keyword.other	#686883	—
keyword.operator.assignment	#566981	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison	#EEEEEE	—
string, string.quoted, string.template	#9eb2d9	—
string.regexp	#9eb2d9	—
constant.character.escape, string.escape	#9eb2d9	—
variable, variable.other	#EEEEEE	—
variable.language	#EEEEEE	—
variable.parameter	#EEEEEE	italic
punctuation.bracket, punctuation.definition, punctuation.separator, punctuation.terminator	#EEEEEE	—
constant.language.boolean	#89A7B1	—
meta.preprocessor, keyword.control.directive	#566981	—
markup.heading, markup.heading.markdown, punctuation.definition.heading.markdown	#89A7B1	—
markup.italic	#EEEEEE	italic
markup.bold	#EEEEEE	—
markup.strikethrough	#515166	strikethrough
markup.underline.link, string.other.link	#566981	—
markup.inline.raw, markup.raw	#9eb2d9	—
markup.quote.markdown	#515166	italic
markup.list.numbered, markup.list.unnumbered, punctuation.definition.list	#686883	—
fenced_code.block.language.markdown	#686883	—
entity.name.section, entity.name.label	#89A7B1	—
support.variable, meta.object-literal.key	#EEEEEE	—
entity.other.inherited-class	#89A7B1	italic underline
support.type.property-name.json	#89A7B1	—
entity.name.tag.yaml, punctuation.definition.block.sequence.item.yaml	#566981	—
markup.inserted, punctuation.definition.inserted.diff	#8BCFAC	—
markup.deleted, punctuation.definition.deleted.diff	#F5A3A7	—
meta.diff.header	#EEEEEE	—
meta.diff.range	#89B4D4	—

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