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

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#101010
activityBar.background#101010
activityBar.border#191919
activityBar.foreground#b4b4b4
activityBar.inactiveForeground#444444
activityBarBadge.background#626262
badge.background#262626
badge.foreground#b4b4b4
button.background#252525
button.hoverBackground#2b2b2b
checkbox.border#191919
dart.closingLabels#212121
debugIcon.breakpointCurrentStackframeForeground#8d8d8d
debugIcon.breakpointDisabledForeground#8d8d8d
debugIcon.breakpointForeground#8d8d8d
debugIcon.breakpointStackframeForeground#8d8d8d
debugIcon.breakpointUnverifiedForeground#8d8d8d
debugIcon.continueForeground#8d8d8d
debugIcon.disconnectForeground#8d8d8d
debugIcon.pauseForeground#8d8d8d
debugIcon.restartForeground#8d8d8d
debugIcon.startForeground#8d8d8d
debugIcon.stepBackForeground#8d8d8d
debugIcon.stepIntoForeground#8d8d8d
debugIcon.stepOutForeground#8d8d8d
debugIcon.stepOverForeground#8d8d8d
debugIcon.stopForeground#8d8d8d
debugToolBar.background#101010
dropdown.background#101010
dropdown.foreground#8d8d8d
editor.background#101010
editor.findMatchBackground#101010
editor.findMatchBorder#7e7e7e
editor.findMatchHighlightBackground#101010
editor.findMatchHighlightBorder#444444
editor.foldBackground#101010
editor.foreground#aaaaaa
editor.hoverHighlightBackground#1d1d1d
editor.lineHighlightBackground#151515
editor.selectionBackground#1d1d1d
editorBracketMatch.background#101010
editorBracketMatch.border#444444
editorCursor.foreground#aaaaaa
editorError.foreground#5f5f5f
editorGroup.border#191919
editorGroupHeader.tabsBackground#101010
editorGroupHeader.tabsBorder#191919
editorHoverWidget.statusBarBackground#101010
editorIndentGuide.activeBackground#454545
editorIndentGuide.background#222222
editorInfo.foreground#5f5f5f
editorLightBulb.foreground#8d8d8d
editorLineNumber.activeForeground#494949
editorLineNumber.foreground#262626
editorLink.activeForeground#b4b4b4
editorOverviewRuler.border#191919
editorRuler.foreground#222222
editorSuggestWidget.foreground#626262
editorSuggestWidget.highlightForeground#b4b4b4
editorWarning.foreground#5f5f5f
editorWhitespace.foreground#262626
editorWidget.background#101010
focusBorder#101010
gitDecoration.addedResourceForeground#b5b5b5
gitDecoration.conflictingResourceForeground#b5b5b5
gitDecoration.deletedResourceForeground#626262
gitDecoration.ignoredResourceForeground#323232
gitDecoration.modifiedResourceForeground#b5b5b5
gitDecoration.submoduleResourceForeground#626262
gitDecoration.untrackedResourceForeground#b5b5b5
icon.foreground#404040
input.background#101010
input.border#101010
input.foreground#8d8d8d
list.activeSelectionBackground#191919
list.activeSelectionForeground#b4b4b4
list.errorForeground#ff6342
list.filterMatchBackground#262626
list.filterMatchBorder#101010
list.focusBackground#191919
list.highlightForeground#939393
list.hoverBackground#101010
list.inactiveSelectionBackground#101010
list.inactiveSelectionForeground#b4b4b4
list.warningForeground#ffb654
listFilterWidget.background#101010
listFilterWidget.noMatchesOutline#ff6342
listFilterWidget.outline#444444
menu.background#101010
menu.foreground#8d8d8d
menubar.selectionBackground#191919
panel.border#191919
panelTitle.activeBorder#101010
panelTitle.activeForeground#b4b4b4
panelTitle.inactiveForeground#444444
peekView.border#404040
peekViewEditor.background#101010
peekViewEditor.matchHighlightBackground#101010
peekViewEditor.matchHighlightBorder#444444
peekViewEditorGutter.background#101010
peekViewResult.background#151515
peekViewResult.fileForeground#939393
peekViewResult.lineForeground#444444
peekViewResult.matchHighlightBackground#1d1d1d
peekViewResult.selectionBackground#101010
peekViewResult.selectionForeground#b4b4b4
pickerGroup.foreground#979797
sash.hoverBorder#1d1d1d
scrollbar.shadow#101010
scrollbarSlider.activeBackground#ebebeb0f
scrollbarSlider.background#ebebeb0f
scrollbarSlider.hoverBackground#ebebeb0f
settings.checkboxBorder#191919
settings.dropdownBorder#191919
settings.modifiedItemIndicator#404040
settings.textInputBorder#191919
sideBar.background#101010
sideBar.border#191919
sideBar.foreground#626262
sideBarSectionHeader.background#101010
sideBarSectionHeader.border#191919
statusBar.background#101010
statusBar.border#191919
statusBar.debuggingBackground#101010
statusBar.debuggingBorder#191919
statusBar.debuggingForeground#8d8d8d
statusBar.foreground#8d8d8d
statusBar.noFolderBackground#101010
statusBar.noFolderBorder#191919
statusBar.noFolderForeground#8d8d8d
statusBarItem.activeBackground#101010
statusBarItem.hoverBackground#101010
symbolIcon.arrayForeground#8d8d8d
symbolIcon.booleanForeground#8d8d8d
symbolIcon.classForeground#8d8d8d
symbolIcon.colorForeground#8d8d8d
symbolIcon.constantForeground#8d8d8d
symbolIcon.constructorForeground#8d8d8d
symbolIcon.enumeratorForeground#8d8d8d
symbolIcon.enumeratorMemberForeground#8d8d8d
symbolIcon.eventForeground#8d8d8d
symbolIcon.fieldForeground#8d8d8d
symbolIcon.fileForeground#8d8d8d
symbolIcon.folderForeground#8d8d8d
symbolIcon.functionForeground#8d8d8d
symbolIcon.interfaceForeground#8d8d8d
symbolIcon.keyForeground#8d8d8d
symbolIcon.keywordForeground#8d8d8d
symbolIcon.methodForeground#8d8d8d
symbolIcon.moduleForeground#8d8d8d
symbolIcon.namespaceForeground#8d8d8d
symbolIcon.nullForeground#8d8d8d
symbolIcon.numberForeground#8d8d8d
symbolIcon.objectForeground#8d8d8d
symbolIcon.operatorForeground#8d8d8d
symbolIcon.packageForeground#8d8d8d
symbolIcon.propertyForeground#8d8d8d
symbolIcon.referenceForeground#8d8d8d
symbolIcon.snippetForeground#8d8d8d
symbolIcon.stringForeground#8d8d8d
symbolIcon.structForeground#8d8d8d
symbolIcon.textForeground#8d8d8d
symbolIcon.typeParameterForeground#8d8d8d
symbolIcon.unitForeground#8d8d8d
symbolIcon.variableForeground#8d8d8d
tab.activeForeground#b4b4b4
tab.border#101010
tab.inactiveBackground#101010
tab.inactiveForeground#444444
terminal.ansiBlack#101010
terminal.ansiBlue#3c3c3c
terminal.ansiBrightBlack#262626
terminal.ansiBrightBlue#3c3c3c
terminal.ansiBrightCyan#686868
terminal.ansiBrightGreen#525252
terminal.ansiBrightMagenta#939393
terminal.ansiBrightRed#7e7e7e
terminal.ansiBrightWhite#ebebeb
terminal.ansiBrightYellow#a9a9a9
terminal.ansiCyan#686868
terminal.ansiGreen#525252
terminal.ansiMagenta#939393
terminal.ansiRed#7e7e7e
terminal.ansiWhite#bfbfbf
terminal.ansiYellow#a9a9a9
terminal.background#101010
terminal.foreground#939393
terminalCursor.background#101010
terminalCursor.foreground#aaaaaa
textLink.activeForeground#ebebeb
textLink.foreground#ebebeb
textPreformat.foreground#8d8d8d
titleBar.activeBackground#101010
titleBar.activeForeground#8d8d8d
titleBar.border#191919
titleBar.inactiveBackground#101010
tree.indentGuidesStroke#212121
window.activeBorder#191919

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable.parameter.function	#aaaaaa	—
comment, punctuation.definition.comment	#383838	—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array	#aaaaaa	—
none	#aaaaaa	—
keyword.operator	#aaaaaa	—
keyword	#6c6c6c	—
variable	#707070	—
entity.name.function, meta.require, support.function.any-method	#626262	—
support.class, entity.name.class, entity.name.type.class	#939393	—
meta.class	#e2e2e2	—
keyword.other.special-method	#626262	—
storage	#6c6c6c	—
support.function	#7e7e7e	—
string, constant.other.symbol, entity.other.inherited-class	#878787	—
constant.numeric	#8d8d8d	—
none	#8d8d8d	—
none	#8d8d8d	—
constant	#8d8d8d	—
entity.name.tag	#707070	—
entity.other.attribute-name	#8d8d8d	—
entity.other.attribute-name.id, punctuation.definition.entity	#626262	—
meta.selector	#6c6c6c	—
none	#8d8d8d	—
markup.heading punctuation.definition.heading, entity.name.section	#626262
keyword.other.unit	#8d8d8d	—
markup.bold, punctuation.definition.bold	#939393	bold
markup.italic, punctuation.definition.italic	#6c6c6c	italic
markup.raw.inline	#878787	—
string.other.link, punctuation.definition.string.end.markdown	#707070	—
meta.link	#8d8d8d	—
markup.list	#707070	—
markup.quote	#8d8d8d	—
meta.separator	#aaaaaa	—
markup.inserted	#878787	—
markup.deleted	#707070	—
markup.changed	#6c6c6c	—
constant.other.color	#7e7e7e	—
string.regexp	#7e7e7e	—
constant.character.escape	#7e7e7e	—
punctuation.section.embedded, variable.interpolation	#6c6c6c	—
invalid.illegal	#e2e2e2	—
invalid.broken	#101010	—
invalid.deprecated	#e2e2e2	—
invalid.unimplemented	#e2e2e2	—

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