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 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.activeBorder#ebebeb
activityBar.background#ebebeb
activityBar.border#e2e2e2
activityBar.foreground#474747
activityBar.inactiveForeground#b7b7b7
activityBarBadge.background#999999
badge.background#d5d5d5
badge.foreground#474747
button.background#d6d6d6
button.hoverBackground#d0d0d0
checkbox.border#e2e2e2
dart.closingLabels#dadada
debugIcon.breakpointCurrentStackframeForeground#6e6e6e
debugIcon.breakpointDisabledForeground#6e6e6e
debugIcon.breakpointForeground#6e6e6e
debugIcon.breakpointStackframeForeground#6e6e6e
debugIcon.breakpointUnverifiedForeground#6e6e6e
debugIcon.continueForeground#6e6e6e
debugIcon.disconnectForeground#6e6e6e
debugIcon.pauseForeground#6e6e6e
debugIcon.restartForeground#6e6e6e
debugIcon.startForeground#6e6e6e
debugIcon.stepBackForeground#6e6e6e
debugIcon.stepIntoForeground#6e6e6e
debugIcon.stepOutForeground#6e6e6e
debugIcon.stepOverForeground#6e6e6e
debugIcon.stopForeground#6e6e6e
debugToolBar.background#ebebeb
dropdown.background#ebebeb
dropdown.foreground#6e6e6e
editor.background#ebebeb
editor.findMatchBackground#ebebeb
editor.findMatchBorder#7d7d7d
editor.findMatchHighlightBackground#ebebeb
editor.findMatchHighlightBorder#b7b7b7
editor.foldBackground#ebebeb
editor.foreground#515151
editor.hoverHighlightBackground#dedede
editor.lineHighlightBackground#e6e6e6
editor.selectionBackground#dedede
editorBracketMatch.background#ebebeb
editorBracketMatch.border#b7b7b7
editorCursor.foreground#515151
editorError.foreground#9c9c9c
editorGroup.border#e2e2e2
editorGroupHeader.tabsBackground#ebebeb
editorGroupHeader.tabsBorder#e2e2e2
editorHoverWidget.statusBarBackground#ebebeb
editorIndentGuide.activeBackground#b6b6b6
editorIndentGuide.background#d9d9d9
editorInfo.foreground#9c9c9c
editorLightBulb.foreground#6e6e6e
editorLineNumber.activeForeground#b2b2b2
editorLineNumber.foreground#d5d5d5
editorLink.activeForeground#474747
editorOverviewRuler.border#e2e2e2
editorRuler.foreground#d9d9d9
editorSuggestWidget.foreground#999999
editorSuggestWidget.highlightForeground#474747
editorWarning.foreground#9c9c9c
editorWhitespace.foreground#d5d5d5
editorWidget.background#ebebeb
focusBorder#ebebeb
gitDecoration.addedResourceForeground#464646
gitDecoration.conflictingResourceForeground#464646
gitDecoration.deletedResourceForeground#999999
gitDecoration.ignoredResourceForeground#c9c9c9
gitDecoration.modifiedResourceForeground#464646
gitDecoration.submoduleResourceForeground#999999
gitDecoration.untrackedResourceForeground#464646
icon.foreground#bbbbbb
input.background#ebebeb
input.border#ebebeb
input.foreground#6e6e6e
list.activeSelectionBackground#e2e2e2
list.activeSelectionForeground#474747
list.errorForeground#be1e0c
list.filterMatchBackground#d5d5d5
list.filterMatchBorder#ebebeb
list.focusBackground#e2e2e2
list.highlightForeground#686868
list.hoverBackground#ebebeb
list.inactiveSelectionBackground#ebebeb
list.inactiveSelectionForeground#474747
list.warningForeground#bd7c16
listFilterWidget.background#ebebeb
listFilterWidget.noMatchesOutline#be1e0c
listFilterWidget.outline#b7b7b7
menu.background#ebebeb
menu.foreground#6e6e6e
menubar.selectionBackground#e2e2e2
panel.border#e2e2e2
panelTitle.activeBorder#ebebeb
panelTitle.activeForeground#474747
panelTitle.inactiveForeground#b7b7b7
peekView.border#bbbbbb
peekViewEditor.background#ebebeb
peekViewEditor.matchHighlightBackground#ebebeb
peekViewEditor.matchHighlightBorder#b7b7b7
peekViewEditorGutter.background#ebebeb
peekViewResult.background#e6e6e6
peekViewResult.fileForeground#686868
peekViewResult.lineForeground#b7b7b7
peekViewResult.matchHighlightBackground#dedede
peekViewResult.selectionBackground#ebebeb
peekViewResult.selectionForeground#474747
pickerGroup.foreground#646464
sash.hoverBorder#dedede
scrollbar.shadow#ebebeb
scrollbarSlider.activeBackground#1010100f
scrollbarSlider.background#1010100f
scrollbarSlider.hoverBackground#1010100f
settings.checkboxBorder#e2e2e2
settings.dropdownBorder#e2e2e2
settings.modifiedItemIndicator#bbbbbb
settings.textInputBorder#e2e2e2
sideBar.background#ebebeb
sideBar.border#e2e2e2
sideBar.foreground#999999
sideBarSectionHeader.background#ebebeb
sideBarSectionHeader.border#e2e2e2
statusBar.background#ebebeb
statusBar.border#e2e2e2
statusBar.debuggingBackground#ebebeb
statusBar.debuggingBorder#e2e2e2
statusBar.debuggingForeground#6e6e6e
statusBar.foreground#6e6e6e
statusBar.noFolderBackground#ebebeb
statusBar.noFolderBorder#e2e2e2
statusBar.noFolderForeground#6e6e6e
statusBarItem.activeBackground#ebebeb
statusBarItem.hoverBackground#ebebeb
symbolIcon.arrayForeground#6e6e6e
symbolIcon.booleanForeground#6e6e6e
symbolIcon.classForeground#6e6e6e
symbolIcon.colorForeground#6e6e6e
symbolIcon.constantForeground#6e6e6e
symbolIcon.constructorForeground#6e6e6e
symbolIcon.enumeratorForeground#6e6e6e
symbolIcon.enumeratorMemberForeground#6e6e6e
symbolIcon.eventForeground#6e6e6e
symbolIcon.fieldForeground#6e6e6e
symbolIcon.fileForeground#6e6e6e
symbolIcon.folderForeground#6e6e6e
symbolIcon.functionForeground#6e6e6e
symbolIcon.interfaceForeground#6e6e6e
symbolIcon.keyForeground#6e6e6e
symbolIcon.keywordForeground#6e6e6e
symbolIcon.methodForeground#6e6e6e
symbolIcon.moduleForeground#6e6e6e
symbolIcon.namespaceForeground#6e6e6e
symbolIcon.nullForeground#6e6e6e
symbolIcon.numberForeground#6e6e6e
symbolIcon.objectForeground#6e6e6e
symbolIcon.operatorForeground#6e6e6e
symbolIcon.packageForeground#6e6e6e
symbolIcon.propertyForeground#6e6e6e
symbolIcon.referenceForeground#6e6e6e
symbolIcon.snippetForeground#6e6e6e
symbolIcon.stringForeground#6e6e6e
symbolIcon.structForeground#6e6e6e
symbolIcon.textForeground#6e6e6e
symbolIcon.typeParameterForeground#6e6e6e
symbolIcon.unitForeground#6e6e6e
symbolIcon.variableForeground#6e6e6e
tab.activeForeground#474747
tab.border#ebebeb
tab.inactiveBackground#ebebeb
tab.inactiveForeground#b7b7b7
terminal.ansiBlack#ebebeb
terminal.ansiBlue#bfbfbf
terminal.ansiBrightBlack#d5d5d5
terminal.ansiBrightBlue#bfbfbf
terminal.ansiBrightCyan#939393
terminal.ansiBrightGreen#a9a9a9
terminal.ansiBrightMagenta#686868
terminal.ansiBrightRed#7e7e7e
terminal.ansiBrightWhite#101010
terminal.ansiBrightYellow#525252
terminal.ansiCyan#939393
terminal.ansiGreen#a9a9a9
terminal.ansiMagenta#686868
terminal.ansiRed#7e7e7e
terminal.ansiWhite#3c3c3c
terminal.ansiYellow#525252
terminal.background#ebebeb
terminal.foreground#686868
terminalCursor.background#ebebeb
terminalCursor.foreground#515151
textLink.activeForeground#101010
textLink.foreground#101010
textPreformat.foreground#6e6e6e
titleBar.activeBackground#ebebeb
titleBar.activeForeground#6e6e6e
titleBar.border#e2e2e2
titleBar.inactiveBackground#ebebeb
tree.indentGuidesStroke#dadada
window.activeBorder#e2e2e2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable.parameter.function	#515151	—
comment, punctuation.definition.comment	#c3c3c3	—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array	#515151	—
none	#515151	—
keyword.operator	#515151	—
keyword	#8f8f8f	—
variable	#8b8b8b	—
entity.name.function, meta.require, support.function.any-method	#999999	—
support.class, entity.name.class, entity.name.type.class	#686868	—
meta.class	#191919	—
keyword.other.special-method	#999999	—
storage	#8f8f8f	—
support.function	#7d7d7d	—
string, constant.other.symbol, entity.other.inherited-class	#747474	—
constant.numeric	#6e6e6e	—
none	#6e6e6e	—
none	#6e6e6e	—
constant	#6e6e6e	—
entity.name.tag	#8b8b8b	—
entity.other.attribute-name	#6e6e6e	—
entity.other.attribute-name.id, punctuation.definition.entity	#999999	—
meta.selector	#8f8f8f	—
none	#6e6e6e	—
markup.heading punctuation.definition.heading, entity.name.section	#999999
keyword.other.unit	#6e6e6e	—
markup.bold, punctuation.definition.bold	#686868	bold
markup.italic, punctuation.definition.italic	#8f8f8f	italic
markup.raw.inline	#747474	—
string.other.link, punctuation.definition.string.end.markdown	#8b8b8b	—
meta.link	#6e6e6e	—
markup.list	#8b8b8b	—
markup.quote	#6e6e6e	—
meta.separator	#515151	—
markup.inserted	#747474	—
markup.deleted	#8b8b8b	—
markup.changed	#8f8f8f	—
constant.other.color	#7d7d7d	—
string.regexp	#7d7d7d	—
constant.character.escape	#7d7d7d	—
punctuation.section.embedded, variable.interpolation	#8f8f8f	—
invalid.illegal	#191919	—
invalid.broken	#ebebeb	—
invalid.deprecated	#191919	—
invalid.unimplemented	#191919	—

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