Monochromator

Name: Monochromator
Author: Josias Beem

Publisher: Josias BeemThemes in package: 16

Distraction-free monochrome coding theme

Color themes

VS Code preview

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

Monochromator — Monochromator Light Plain

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.activeForeground#303034
activityBar.background#f0f0f2
activityBar.foreground#000000
activityBar.inactiveForeground#303034
activityBarBadge.background#303034
activityBarBadge.foreground#ffffff
badge.background#00000000
badge.foreground#000000
breadcrumb.foreground#76767c
button.background#303036
button.foreground#ffffff
button.secondaryBackground#30303680
checkbox.background#ffffff
commandCenter.activeBackground#ffffff
commandCenter.activeBorder#a2a2a580
commandCenter.activeForeground#000000
commandCenter.background#ffffff
commandCenter.border#a2a2a580
commandCenter.foreground#303034
diffEditor.insertedLineBackground#017f4526
diffEditor.insertedTextBackground#017f454d
diffEditor.removedLineBackground#e01b2426
diffEditor.removedTextBackground#e01b244d
dropdown.background#ffffff
dropdown.border#a2a2a5
editor.background#ffffff
editor.findMatchBackground#d8d8dc
editor.findMatchHighlightBackground#d8d8dcbf
editor.foldBackground#f0f0f280
editor.foreground#000000
editor.hoverHighlightBackground#d8d8dc80
editor.lineHighlightBackground#f0f0f2
editor.selectionBackground#d8d8dc
editor.selectionHighlightBackground#d8d8dc
editor.wordHighlightBackground#d8d8dc80
editor.wordHighlightStrongBackground#2563eb40
editor.wordHighlightTextBackground#d8d8dc80
editorBracketHighlight.foreground1#000000
editorBracketHighlight.foreground2#000000
editorBracketHighlight.foreground3#000000
editorBracketHighlight.foreground4#000000
editorBracketHighlight.foreground5#000000
editorBracketHighlight.foreground6#000000
editorBracketHighlight.unexpectedBracket.foreground#000000
editorBracketMatch.background#ffffff
editorBracketMatch.border#000000
editorCodeLens.foreground#76767c
editorCursor.foreground#000000
editorError.foreground#e01b24
editorGroup.border#f0f0f2
editorGroupHeader.tabsBackground#f0f0f2
editorGutter.addedBackground#017f45
editorGutter.addedSecondaryBackground#017f4580
editorGutter.deletedBackground#e01b24
editorGutter.deletedSecondaryBackground#e01b2480
editorGutter.modifiedBackground#bf4e00
editorGutter.modifiedSecondaryBackground#bf4e0080
editorHoverWidget.border#a2a2a5
editorHoverWidget.foreground#000000
editorIndentGuide.activeBackground#76767c
editorIndentGuide.background#76767c50
editorInfo.foreground#2563eb
editorInlayHint.background#f0f0f280
editorInlayHint.foreground#76767c
editorLightBulb.foreground#76767c
editorLightBulbAi.foreground#76767c
editorLightBulbAutoFix.foreground#76767c
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#76767c
editorLink.activeForeground#000000
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#e01b24
editorOverviewRuler.infoForeground#2563eb
editorOverviewRuler.warningForeground#bf4e00
editorStickyScrollHover.background#f0f0f2
editorSuggestWidget.background#f0f0f2
editorSuggestWidget.focusHighlightForeground#000000
editorSuggestWidget.highlightForeground#000000
editorSuggestWidget.selectionBackground#d8d8dc
editorWarning.foreground#bf4e00
editorWidget.background#f0f0f2
extensionButton.background#303036
focusBorder#00000000
gitDecoration.addedResourceForeground#017f45
gitDecoration.deletedResourceForeground#e01b24
gitDecoration.ignoredResourceForeground#76767c
gitDecoration.modifiedResourceForeground#bf4e00
gitDecoration.renamedResourceForeground#017f45
gitDecoration.stageDeletedResourceForeground#e01b24
gitDecoration.stageModifiedResourceForeground#bf4e00
gitDecoration.untrackedResourceForeground#017f45
icon.foreground#303034
input.background#ffffff
input.border#a2a2a5
inputValidation.errorBackground#f0f0f2
inputValidation.errorBorder#e01b24
inputValidation.infoBackground#f0f0f2
inputValidation.infoBorder#a2a2a5
inputValidation.warningBackground#f0f0f2
inputValidation.warningBorder#bf4e00
keybindingLabel.background#ffffff
keybindingLabel.border#76767c
keybindingLabel.bottomBorder#76767c
keybindingLabel.foreground#303034
list.activeSelectionBackground#d8d8dc
list.activeSelectionForeground#000000
list.errorForeground#e01b24
list.focusBackground#d8d8dc
list.highlightForeground#000000
list.hoverBackground#d8d8dc
list.inactiveSelectionBackground#d8d8dc80
list.warningForeground#bf4e00
menu.background#f0f0f2
menu.border#a2a2a5
menu.selectionBackground#d8d8dc
menu.selectionForeground#303034
menu.separatorBackground#d8d8dc
minimap.errorHighlight#e01b24
minimap.findMatchHighlight#d8d8dc
minimap.infoHighlight#2563eb
minimap.selectionHighlight#d8d8dc
minimap.selectionOccurrenceHighlight#d8d8dc
minimap.warningHighlight#bf4e00
multiDiffEditor.border#a2a2a5
multiDiffEditor.headerBackground#f0f0f2
notifications.background#f0f0f2
notifications.foreground#303034
notificationsErrorIcon.foreground#303034
notificationsInfoIcon.foreground#303034
notificationsWarningIcon.foreground#303034
panel.border#f0f0f2
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#303034
pickerGroup.border#a2a2a5
pickerGroup.foreground#303034
progressBar.background#303034
quickInput.background#f0f0f2
quickInput.foreground#303034
quickInputList.focusBackground#d8d8dc
quickInputList.focusForeground#000000
scmGraph.historyItemHoverAdditionsForeground#017f45
scmGraph.historyItemHoverDeletionsForeground#e01b24
scmGraph.historyItemHoverLabelForeground#ffffff
scmGraph.historyItemRefColor#303034
scmGraph.historyItemRemoteRefColor#76767c
scrollbarSlider.activeBackground#76767c70
scrollbarSlider.background#d8d8dc60
scrollbarSlider.hoverBackground#76767c50
selection.background#d8d8dc
sideBar.background#f0f0f2
sideBar.border#f0f0f2
sideBar.foreground#303034
sideBarSectionHeader.background#f0f0f2
sideBarSectionHeader.border#f0f0f2
statusBar.background#f0f0f2
statusBar.border#00000000
statusBar.debuggingBackground#f0f0f2
statusBar.foreground#303034
statusBar.noFolderBackground#f0f0f2
statusBarItem.errorBackground#e01b24
statusBarItem.hoverBackground#d8d8dc
statusBarItem.prominentBackground#d8d8dc
statusBarItem.remoteBackground#f0f0f2
statusBarItem.remoteForeground#303034
statusBarItem.warningBackground#bf4e00
tab.activeForeground#303034
tab.border#00000000
tab.hoverBackground#ffffff
tab.inactiveBackground#f0f0f2
terminal.ansiBlack#000000
terminal.ansiBlue#2563eb
terminal.ansiBrightBlack#76767c
terminal.ansiBrightBlue#2563eb
terminal.ansiBrightCyan#007b94
terminal.ansiBrightGreen#017f45
terminal.ansiBrightMagenta#cf207e
terminal.ansiBrightRed#e01b24
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#856e00
terminal.ansiCyan#007b94
terminal.ansiGreen#017f45
terminal.ansiMagenta#cf207e
terminal.ansiRed#e01b24
terminal.ansiWhite#76767c
terminal.ansiYellow#856e00
terminal.background#ffffff
terminal.foreground#000000
terminal.selectionBackground#000000
terminal.selectionForeground#ffffff
terminalCommandDecoration.defaultBackground#76767c
terminalCommandDecoration.errorBackground#e01b24
terminalCommandDecoration.successBackground#017f45
textBlockQuote.background#f0f0f2
textBlockQuote.border#a2a2a5
textCodeBlock.background#f0f0f2
textCodeBlock.border#a2a2a5
textLink.activeForeground#2563eb
textLink.foreground#2563eb
textPreformat.background#d8d8dc
textPreformat.foreground#000000
textSeparator.foreground#d8d8dc
titleBar.activeBackground#f0f0f2
titleBar.activeForeground#303034
titleBar.border#00000000
titleBar.inactiveBackground#f0f0f2
titleBar.inactiveForeground#76767c
tree.indentGuidesStroke#76767c50
welcomePage.progress.foreground#303034
widget.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#76767c	italic

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