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

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	#0F6E80	—
constant.numeric, constant.other	#3A5CB0	—
entity.name.function, meta.function-call, support.function	#1C6E48	—
entity.name.type, entity.name.class, entity.name.namespace	#0F6E80	—
support.type, support.class	#0F6E80	italic
entity.name.tag	#2E527A	—
entity.other.attribute-name	#0F6E80	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier	#2E527A	—
keyword.other	#5C5485	—
keyword.operator.assignment	#2E527A	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison	#000000DF	—
string, string.quoted, string.template	#3A5CB0	—
string.regexp	#3A5CB0	—
constant.character.escape, string.escape	#3A5CB0	—
variable, variable.other	#000000DF	—
variable.language	#000000DF	—
variable.parameter	#000000DF	italic
punctuation.bracket, punctuation.definition, punctuation.separator, punctuation.terminator	#000000DF	—
constant.language.boolean	#0F6E80	—
meta.preprocessor, keyword.control.directive	#2E527A	—
markup.heading, markup.heading.markdown, punctuation.definition.heading.markdown	#0F6E80	—
markup.italic	#000000DF	italic
markup.bold	#000000DF	—
markup.strikethrough	#9090A8	strikethrough
markup.underline.link, string.other.link	#2E527A	—
markup.inline.raw, markup.raw	#3A5CB0	—
markup.quote.markdown	#9090A8	italic
markup.list.numbered, markup.list.unnumbered, punctuation.definition.list	#5C5485	—
fenced_code.block.language.markdown	#5C5485	—
entity.name.section, entity.name.label	#0F6E80	—
support.variable, meta.object-literal.key	#000000DF	—
entity.other.inherited-class	#0F6E80	italic underline
support.type.property-name.json	#0F6E80	—
entity.name.tag.yaml, punctuation.definition.block.sequence.item.yaml	#2E527A	—
markup.inserted, punctuation.definition.inserted.diff	#5A9E6F	—
markup.deleted, punctuation.definition.deleted.diff	#C97A7D	—
meta.diff.header	#000000DF	—
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}!`;
}