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 Pastel Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#F8F6F2
activityBar.border#D5D2CC
activityBar.foreground#575279
activityBar.inactiveForeground#797593
activityBarBadge.background#797593
activityBarBadge.foreground#FFFFFF
badge.background#EFEDE8
badge.foreground#575279
breadcrumb.activeSelectionForeground#575279
breadcrumb.focusForeground#575279
breadcrumb.foreground#797593
breadcrumbPicker.background#F4F2ED
button.background#EFEDE8
button.foreground#575279
button.hoverBackground#E5E2DC
debugIcon.breakpointForeground#C97A7D
debugIcon.pauseForeground#B8893A
debugIcon.startForeground#5A9E6F
debugIcon.stopForeground#C97A7D
debugToolBar.background#F4F2ED
debugToolBar.border#D5D2CC
descriptionForeground#797593
diffEditor.insertedTextBackground#5A9E6F20
diffEditor.removedTextBackground#C97A7D20
dropdown.background#F8F6F2
dropdown.border#D5D2CC
dropdown.foreground#575279
editor.background#F8F6F2
editor.findMatchBackground#D9D6CF
editor.findMatchHighlightBackground#D9D6CF80
editor.foreground#575279
editor.inactiveSelectionBackground#D0CDC780
editor.lineHighlightBackground#EFEDE8
editor.selectionBackground#D0CDC7
editor.selectionHighlightBackground#D0CDC780
editor.wordHighlightBackground#D0CDC780
editor.wordHighlightStrongBackground#D0CDC780
editorBracketHighlight.foreground1#797593
editorBracketHighlight.foreground2#9090A8
editorBracketHighlight.foreground3#A8A8BC
editorBracketHighlight.foreground4#797593
editorBracketHighlight.foreground5#9090A8
editorBracketHighlight.foreground6#A8A8BC
editorBracketHighlight.unexpectedBracket.foreground#C97A7D
editorBracketMatch.background#EFEDE8
editorBracketMatch.border#D5D2CC
editorCursor.foreground#575279
editorError.background#C97A7D10
editorError.foreground#C97A7D
editorGroup.border#D5D2CC
editorGroupHeader.noTabsBackground#F8F6F2
editorGroupHeader.tabsBackground#F8F6F2
editorGutter.addedBackground#5A9E6F
editorGutter.background#F8F6F2
editorGutter.deletedBackground#C97A7D
editorGutter.foldingControlForeground#797593
editorGutter.modifiedBackground#5A8FB8
editorHint.foreground#5A9E6F
editorHoverWidget.background#F4F2ED
editorHoverWidget.border#D5D2CC
editorIndentGuide.activeBackground1#A8A5A0
editorIndentGuide.background1#D5D2CC
editorInfo.background#5A8FB810
editorInfo.foreground#5A8FB8
editorInlayHint.background#EFEDE880
editorInlayHint.foreground#797593
editorInlayHint.parameterForeground#797593
editorInlayHint.typeForeground#797593
editorLineNumber.activeForeground#575279
editorLineNumber.foreground#5752794D
editorOverviewRuler.border#D5D2CC
editorOverviewRuler.errorForeground#C97A7D
editorOverviewRuler.infoForeground#5A8FB8
editorOverviewRuler.warningForeground#B8893A
editorStickyScroll.background#F8F6F2
editorStickyScrollHover.background#F4F2ED
editorSuggestWidget.background#F4F2ED
editorSuggestWidget.border#D5D2CC
editorSuggestWidget.selectedBackground#EFEDE8
editorWarning.background#B8893A10
editorWarning.foreground#B8893A
editorWhitespace.foreground#D5D2CC
editorWidget.background#F4F2ED
editorWidget.border#D5D2CC
editorWidget.resizeBorder#797593
errorForeground#C97A7D
focusBorder#797593
foreground#575279
gitDecoration.addedResourceForeground#5A9E6F
gitDecoration.conflictingResourceForeground#C98545
gitDecoration.deletedResourceForeground#C97A7D
gitDecoration.ignoredResourceForeground#959da5
gitDecoration.modifiedResourceForeground#5A8FB8
gitDecoration.untrackedResourceForeground#5A9E6F
icon.foreground#797593
input.background#F8F6F2
input.border#D5D2CC
input.foreground#575279
input.placeholderForeground#797593
inputOption.activeBorder#797593
keybindingLabel.background#EFEDE8
keybindingLabel.border#D5D2CC
keybindingLabel.foreground#575279
list.activeSelectionBackground#EFEDE8
list.activeSelectionForeground#575279
list.focusBackground#EFEDE8
list.focusForeground#575279
list.highlightForeground#575279
list.hoverBackground#EFEDE8
list.hoverForeground#575279
list.inactiveSelectionBackground#EFEDE8
list.inactiveSelectionForeground#575279
merge.border#D5D2CC
merge.commonContentBackground#B8893A15
merge.commonHeaderBackground#B8893A30
merge.currentContentBackground#5A9E6F15
merge.currentHeaderBackground#5A9E6F30
merge.incomingContentBackground#5A8FB815
merge.incomingHeaderBackground#5A8FB830
minimap.background#F8F6F2
minimapGutter.addedBackground#5A9E6F
minimapGutter.deletedBackground#C97A7D
minimapGutter.modifiedBackground#5A8FB8
notificationCenter.border#D5D2CC
notificationCenterHeader.background#F4F2ED
notificationCenterHeader.foreground#575279
notificationLink.foreground#575279
notifications.background#F4F2ED
notifications.border#D5D2CC
notifications.foreground#575279
notificationsErrorIcon.foreground#C97A7D
notificationsInfoIcon.foreground#5A8FB8
notificationsWarningIcon.foreground#B8893A
panel.background#F4F2ED
panel.border#D5D2CC
panelTitle.activeBorder#797593
panelTitle.activeForeground#575279
panelTitle.inactiveForeground#797593
peekView.border#D5D2CC
peekViewEditor.background#F4F2ED
peekViewEditor.matchHighlightBackground#D9D6CF
peekViewResult.background#F4F2ED
peekViewResult.fileForeground#575279
peekViewResult.lineForeground#797593
peekViewResult.matchHighlightBackground#D9D6CF
peekViewResult.selectionBackground#EFEDE8
peekViewResult.selectionForeground#575279
peekViewTitle.background#F4F2ED
peekViewTitleDescription.foreground#797593
peekViewTitleLabel.foreground#575279
progressBar.background#797593
quickInput.background#F4F2ED
quickInput.foreground#575279
quickInputList.focusBackground#EFEDE8
quickInputList.focusForeground#575279
quickInputTitle.background#F4F2ED
scrollbar.shadow#00000010
scrollbarSlider.activeBackground#959da555
scrollbarSlider.background#959da533
scrollbarSlider.hoverBackground#959da544
sideBar.background#F4F2ED
sideBar.border#D5D2CC
sideBar.foreground#6E6A8A
sideBarSectionHeader.background#F4F2ED
sideBarSectionHeader.border#D5D2CC
sideBarSectionHeader.foreground#575279
sideBarTitle.foreground#575279
statusBar.background#F8F6F2
statusBar.border#D5D2CC
statusBar.debuggingBackground#F8F6F2
statusBar.debuggingForeground#575279
statusBar.foreground#575279
statusBar.noFolderBackground#F8F6F2
statusBar.noFolderForeground#575279
tab.activeBackground#F4F2ED
tab.activeBorder#797593
tab.activeBorderTop#F4F2ED
tab.activeForeground#575279
tab.border#D5D2CC
tab.inactiveBackground#F8F6F2
tab.inactiveForeground#797593
terminal.ansiBlack#1A1A1A
terminal.ansiBlue#5A8FB8
terminal.ansiBrightBlack#797593
terminal.ansiBrightBlue#4A7FA8
terminal.ansiBrightCyan#3D8F99
terminal.ansiBrightGreen#4D8B5E
terminal.ansiBrightMagenta#7D5D9A
terminal.ansiBrightRed#B56B6B
terminal.ansiBrightWhite#F8F6F2
terminal.ansiBrightYellow#A67830
terminal.ansiCyan#4A9EA8
terminal.ansiGreen#5A9E6F
terminal.ansiMagenta#8B6BA8
terminal.ansiRed#C97A7D
terminal.ansiWhite#D5D2CC
terminal.ansiYellow#B8893A
terminal.background#F8F6F2
terminal.foreground#575279
terminalCursor.foreground#575279
testing.iconFailed#C97A7D
testing.iconPassed#5A9E6F
testing.iconQueued#5A8FB8
testing.iconSkipped#B8893A
testing.iconUnset#797593
textLink.activeForeground#575279
textLink.foreground#575279
titleBar.activeBackground#F8F6F2
titleBar.activeForeground#575279
titleBar.border#D5D2CC
titleBar.inactiveBackground#F8F6F2
titleBar.inactiveForeground#797593

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9090A8	—
comment.block.documentation, comment.block.javadoc	#9090A8	—
constant, constant.language, constant.character	#9080BB	—
constant.numeric, constant.other	#1DAFA8	—
entity.name.function, meta.function-call, support.function	#7FB3E1	—
entity.name.type, entity.name.class, entity.name.namespace, support.type, support.class	#9080BB	—
entity.name.tag	#8484DF	—
entity.other.attribute-name	#9080BB	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier	#8484DF	—
keyword.other	#9B72C0	—
keyword.operator.assignment	#8484DF	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison	#575279	—
string, string.quoted, string.template	#1DAFA8	—
string.regexp	#1DAFA8	—
constant.character.escape, string.escape	#1DAFA8	—
variable, variable.other	#575279	—
variable.language, variable.parameter	#575279	—
punctuation.bracket, punctuation.definition, punctuation.separator, punctuation.terminator	#575279	—
constant.language.boolean	#9080BB	—
meta.preprocessor, keyword.control.directive	#8484DF	—
markup.heading, markup.heading.markdown, punctuation.definition.heading.markdown	#9080BB	—
markup.italic	#575279	italic
markup.bold	#575279	—
markup.strikethrough	#9090A8	strikethrough
markup.underline.link, string.other.link	#8484DF	—
markup.inline.raw, markup.raw	#1DAFA8	—
markup.quote.markdown	#9090A8	italic
markup.list.numbered, markup.list.unnumbered, punctuation.definition.list	#9B72C0	—
fenced_code.block.language.markdown	#9B72C0	—
entity.name.section, entity.name.label	#9080BB	—
support.variable, meta.object-literal.key	#575279	—
entity.other.inherited-class	#9080BB	—
support.type.property-name.json	#9080BB	—
entity.name.tag.yaml, punctuation.definition.block.sequence.item.yaml	#8484DF	—
markup.inserted, punctuation.definition.inserted.diff	#5A9E6F	—
markup.deleted, punctuation.definition.deleted.diff	#C97A7D	—
meta.diff.header	#575279	—
meta.diff.range	#5A8FB8	—

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