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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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