Monochrome

Name: Monochrome
Author: glitch

Publisher: glitchThemes in package: 8

Monochromatic theme collection, for those who seeks.

GitHub

Color themes

VS Code preview

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

Monochrome — Monochrome Dark Amplified

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.activeBorder#000000
activityBar.background#000000
activityBar.border#0a0a0a
activityBar.foreground#bfbfbf
activityBar.inactiveForeground#3d3d3d
activityBarBadge.background#606060
badge.background#1a1a1a
badge.foreground#bfbfbf
button.background#181818
button.hoverBackground#1f1f1f
checkbox.border#0a0a0a
dart.closingLabels#141414
debugIcon.breakpointCurrentStackframeForeground#919191
debugIcon.breakpointDisabledForeground#919191
debugIcon.breakpointForeground#919191
debugIcon.breakpointStackframeForeground#919191
debugIcon.breakpointUnverifiedForeground#919191
debugIcon.continueForeground#919191
debugIcon.disconnectForeground#919191
debugIcon.pauseForeground#919191
debugIcon.restartForeground#919191
debugIcon.startForeground#919191
debugIcon.stepBackForeground#919191
debugIcon.stepIntoForeground#919191
debugIcon.stepOutForeground#919191
debugIcon.stepOverForeground#919191
debugIcon.stopForeground#919191
debugToolBar.background#000000
dropdown.background#000000
dropdown.foreground#919191
editor.background#000000
editor.findMatchBackground#000000
editor.findMatchBorder#808080
editor.findMatchHighlightBackground#000000
editor.findMatchHighlightBorder#3d3d3d
editor.foldBackground#000000
editor.foreground#b3b3b3
editor.hoverHighlightBackground#0f0f0f
editor.lineHighlightBackground#060606
editor.selectionBackground#0f0f0f
editorBracketMatch.background#000000
editorBracketMatch.border#3d3d3d
editorCursor.foreground#b3b3b3
editorError.foreground#5c5c5c
editorGroup.border#0a0a0a
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#0a0a0a
editorHoverWidget.statusBarBackground#000000
editorIndentGuide.activeBackground#3d3d3d
editorIndentGuide.background#141414
editorInfo.foreground#5c5c5c
editorLightBulb.foreground#919191
editorLineNumber.activeForeground#424242
editorLineNumber.foreground#1a1a1a
editorLink.activeForeground#bfbfbf
editorOverviewRuler.border#0a0a0a
editorRuler.foreground#141414
editorSuggestWidget.foreground#606060
editorSuggestWidget.highlightForeground#bfbfbf
editorWarning.foreground#5c5c5c
editorWhitespace.foreground#1a1a1a
editorWidget.background#000000
focusBorder#000000
gitDecoration.addedResourceForeground#c0c0c0
gitDecoration.conflictingResourceForeground#c0c0c0
gitDecoration.deletedResourceForeground#606060
gitDecoration.ignoredResourceForeground#272727
gitDecoration.modifiedResourceForeground#c0c0c0
gitDecoration.submoduleResourceForeground#606060
gitDecoration.untrackedResourceForeground#c0c0c0
icon.foreground#383838
input.background#000000
input.border#000000
input.foreground#919191
list.activeSelectionBackground#0a0a0a
list.activeSelectionForeground#bfbfbf
list.errorForeground#ff6846
list.filterMatchBackground#1a1a1a
list.filterMatchBorder#000000
list.focusBackground#0a0a0a
list.highlightForeground#999999
list.hoverBackground#000000
list.inactiveSelectionBackground#000000
list.inactiveSelectionForeground#bfbfbf
list.warningForeground#ffbb58
listFilterWidget.background#000000
listFilterWidget.noMatchesOutline#ff6846
listFilterWidget.outline#3d3d3d
menu.background#000000
menu.foreground#919191
menubar.selectionBackground#0a0a0a
panel.border#0a0a0a
panelTitle.activeBorder#000000
panelTitle.activeForeground#bfbfbf
panelTitle.inactiveForeground#3d3d3d
peekView.border#383838
peekViewEditor.background#000000
peekViewEditor.matchHighlightBackground#000000
peekViewEditor.matchHighlightBorder#3d3d3d
peekViewEditorGutter.background#000000
peekViewResult.background#060606
peekViewResult.fileForeground#999999
peekViewResult.lineForeground#3d3d3d
peekViewResult.matchHighlightBackground#0f0f0f
peekViewResult.selectionBackground#000000
peekViewResult.selectionForeground#bfbfbf
pickerGroup.foreground#9d9d9d
sash.hoverBorder#0f0f0f
scrollbar.shadow#000000
scrollbarSlider.activeBackground#ffffff0f
scrollbarSlider.background#ffffff0f
scrollbarSlider.hoverBackground#ffffff0f
settings.checkboxBorder#0a0a0a
settings.dropdownBorder#0a0a0a
settings.modifiedItemIndicator#383838
settings.textInputBorder#0a0a0a
sideBar.background#000000
sideBar.border#0a0a0a
sideBar.foreground#606060
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#0a0a0a
statusBar.background#000000
statusBar.border#0a0a0a
statusBar.debuggingBackground#000000
statusBar.debuggingBorder#0a0a0a
statusBar.debuggingForeground#919191
statusBar.foreground#919191
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#0a0a0a
statusBar.noFolderForeground#919191
statusBarItem.activeBackground#000000
statusBarItem.hoverBackground#000000
symbolIcon.arrayForeground#919191
symbolIcon.booleanForeground#919191
symbolIcon.classForeground#919191
symbolIcon.colorForeground#919191
symbolIcon.constantForeground#919191
symbolIcon.constructorForeground#919191
symbolIcon.enumeratorForeground#919191
symbolIcon.enumeratorMemberForeground#919191
symbolIcon.eventForeground#919191
symbolIcon.fieldForeground#919191
symbolIcon.fileForeground#919191
symbolIcon.folderForeground#919191
symbolIcon.functionForeground#919191
symbolIcon.interfaceForeground#919191
symbolIcon.keyForeground#919191
symbolIcon.keywordForeground#919191
symbolIcon.methodForeground#919191
symbolIcon.moduleForeground#919191
symbolIcon.namespaceForeground#919191
symbolIcon.nullForeground#919191
symbolIcon.numberForeground#919191
symbolIcon.objectForeground#919191
symbolIcon.operatorForeground#919191
symbolIcon.packageForeground#919191
symbolIcon.propertyForeground#919191
symbolIcon.referenceForeground#919191
symbolIcon.snippetForeground#919191
symbolIcon.stringForeground#919191
symbolIcon.structForeground#919191
symbolIcon.textForeground#919191
symbolIcon.typeParameterForeground#919191
symbolIcon.unitForeground#919191
symbolIcon.variableForeground#919191
tab.activeForeground#bfbfbf
tab.border#000000
tab.inactiveBackground#000000
tab.inactiveForeground#3d3d3d
terminal.ansiBlack#000000
terminal.ansiBlue#333333
terminal.ansiBrightBlack#1a1a1a
terminal.ansiBrightBlue#333333
terminal.ansiBrightCyan#666666
terminal.ansiBrightGreen#4d4d4d
terminal.ansiBrightMagenta#999999
terminal.ansiBrightRed#808080
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#b3b3b3
terminal.ansiCyan#666666
terminal.ansiGreen#4d4d4d
terminal.ansiMagenta#999999
terminal.ansiRed#808080
terminal.ansiWhite#cccccc
terminal.ansiYellow#b3b3b3
terminal.background#000000
terminal.foreground#999999
terminalCursor.background#000000
terminalCursor.foreground#b3b3b3
textLink.activeForeground#ffffff
textLink.foreground#ffffff
textPreformat.foreground#919191
titleBar.activeBackground#000000
titleBar.activeForeground#919191
titleBar.border#0a0a0a
titleBar.inactiveBackground#000000
tree.indentGuidesStroke#141414
window.activeBorder#0a0a0a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable.parameter.function	#b3b3b3	—
comment, punctuation.definition.comment	#2e2e2e	—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array	#b3b3b3	—
none	#b3b3b3	—
keyword.operator	#b3b3b3	—
keyword	#6b6b6b	—
variable	#707070	—
entity.name.function, meta.require, support.function.any-method	#606060	—
support.class, entity.name.class, entity.name.type.class	#999999	—
meta.class	#f5f5f5	—
keyword.other.special-method	#606060	—
storage	#6b6b6b	—
support.function	#808080	—
string, constant.other.symbol, entity.other.inherited-class	#8a8a8a	—
constant.numeric	#919191	—
none	#919191	—
none	#919191	—
constant	#919191	—
entity.name.tag	#707070	—
entity.other.attribute-name	#919191	—
entity.other.attribute-name.id, punctuation.definition.entity	#606060	—
meta.selector	#6b6b6b	—
none	#919191	—
markup.heading punctuation.definition.heading, entity.name.section	#606060
keyword.other.unit	#919191	—
markup.bold, punctuation.definition.bold	#999999	bold
markup.italic, punctuation.definition.italic	#6b6b6b	italic
markup.raw.inline	#8a8a8a	—
string.other.link, punctuation.definition.string.end.markdown	#707070	—
meta.link	#919191	—
markup.list	#707070	—
markup.quote	#919191	—
meta.separator	#b3b3b3	—
markup.inserted	#8a8a8a	—
markup.deleted	#707070	—
markup.changed	#6b6b6b	—
constant.other.color	#808080	—
string.regexp	#808080	—
constant.character.escape	#808080	—
punctuation.section.embedded, variable.interpolation	#6b6b6b	—
invalid.illegal	#f5f5f5	—
invalid.broken	#000000	—
invalid.deprecated	#f5f5f5	—
invalid.unimplemented	#f5f5f5	—

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