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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8C939C	italic
comment.block.documentation, comment.block.javadoc	#8C939C	italic
constant, constant.language, constant.character	#5078A8	—
constant.numeric, constant.other	#5078A8	—
entity.name.function, meta.function-call, support.function	#2C3038	—
entity.name.type, entity.name.class, entity.name.namespace	#35608C	italic
support.type, support.class	#35608C	italic
entity.name.tag	#35608C	—
entity.other.attribute-name	#5078A8	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier	#35608C	—
keyword.other	#4A6D96	—
keyword.operator.assignment	#35608C	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison	#2C3038	—
string, string.quoted, string.template	#5078A8	—
string.regexp	#5078A8	—
constant.character.escape, string.escape	#5078A8	—
variable, variable.other	#2C3038	—
variable.language	#2C3038	—
variable.parameter	#2C3038	italic
punctuation.bracket, punctuation.definition, punctuation.separator, punctuation.terminator	#2C3038	—
constant.language.boolean	#5078A8	—
meta.preprocessor, keyword.control.directive	#35608C	—
markup.heading, markup.heading.markdown, punctuation.definition.heading.markdown	#35608C	—
markup.italic	#2C3038	italic
markup.bold	#2C3038	—
markup.strikethrough	#8C939C	strikethrough
markup.underline.link, string.other.link	#35608C	—
markup.inline.raw, markup.raw	#5078A8	—
markup.quote.markdown	#8C939C	italic
markup.list.numbered, markup.list.unnumbered, punctuation.definition.list	#4A6D96	—
fenced_code.block.language.markdown	#4A6D96	—
entity.name.section, entity.name.label	#35608C	—
support.variable, meta.object-literal.key	#2C3038	—
entity.other.inherited-class	#35608C	italic underline
support.type.property-name.json	#35608C	—
entity.name.tag.yaml, punctuation.definition.block.sequence.item.yaml	#35608C	—
markup.inserted, punctuation.definition.inserted.diff	#5A9E6F	—
markup.deleted, punctuation.definition.deleted.diff	#C97A7D	—
meta.diff.header	#2C3038	—
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}!`;
}