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 Subtle

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#f1f5f9
activityBar.background#f1f5f9
activityBar.border#e8ecf0
activityBar.foreground#444b51
activityBar.inactiveForeground#babfc3
activityBarBadge.background#9aa0a5
badge.background#d9dee2
badge.foreground#444b51
button.background#dbe0e4
button.hoverBackground#d5d9de
checkbox.border#e8ecf0
dart.closingLabels#dfe3e7
debugIcon.breakpointCurrentStackframeForeground#6e747a
debugIcon.breakpointDisabledForeground#6e747a
debugIcon.breakpointForeground#6e747a
debugIcon.breakpointStackframeForeground#6e747a
debugIcon.breakpointUnverifiedForeground#6e747a
debugIcon.continueForeground#6e747a
debugIcon.disconnectForeground#6e747a
debugIcon.pauseForeground#6e747a
debugIcon.restartForeground#6e747a
debugIcon.startForeground#6e747a
debugIcon.stepBackForeground#6e747a
debugIcon.stepIntoForeground#6e747a
debugIcon.stepOutForeground#6e747a
debugIcon.stepOverForeground#6e747a
debugIcon.stopForeground#6e747a
debugToolBar.background#f1f5f9
dropdown.background#f1f5f9
dropdown.foreground#6e747a
editor.background#f1f5f9
editor.findMatchBackground#f1f5f9
editor.findMatchBorder#7d8389
editor.findMatchHighlightBackground#f1f5f9
editor.findMatchHighlightBorder#babfc3
editor.foldBackground#f1f5f9
editor.foreground#4f565c
editor.hoverHighlightBackground#e3e8ec
editor.lineHighlightBackground#ebeff3
editor.selectionBackground#e3e8ec
editorBracketMatch.background#f1f5f9
editorBracketMatch.border#babfc3
editorCursor.foreground#4f565c
editorError.foreground#9ea3a8
editorGroup.border#e8ecf0
editorGroupHeader.tabsBackground#f1f5f9
editorGroupHeader.tabsBorder#e8ecf0
editorHoverWidget.statusBarBackground#f1f5f9
editorIndentGuide.activeBackground#babfc3
editorIndentGuide.background#dfe3e7
editorInfo.foreground#9ea3a8
editorLightBulb.foreground#6e747a
editorLineNumber.activeForeground#b5babf
editorLineNumber.foreground#d9dee2
editorLink.activeForeground#444b51
editorOverviewRuler.border#e8ecf0
editorRuler.foreground#dfe3e7
editorSuggestWidget.foreground#9aa0a5
editorSuggestWidget.highlightForeground#444b51
editorWarning.foreground#9ea3a8
editorWhitespace.foreground#d9dee2
editorWidget.background#f1f5f9
focusBorder#f1f5f9
gitDecoration.addedResourceForeground#434a51
gitDecoration.conflictingResourceForeground#434a51
gitDecoration.deletedResourceForeground#9aa0a5
gitDecoration.ignoredResourceForeground#cdd2d7
gitDecoration.modifiedResourceForeground#434a51
gitDecoration.submoduleResourceForeground#9aa0a5
gitDecoration.untrackedResourceForeground#434a51
icon.foreground#bec3c8
input.background#f1f5f9
input.border#f1f5f9
input.foreground#6e747a
list.activeSelectionBackground#e8ecf0
list.activeSelectionForeground#444b51
list.errorForeground#be1f10
list.filterMatchBackground#d9dee2
list.filterMatchBorder#f1f5f9
list.focusBackground#e8ecf0
list.highlightForeground#666d73
list.hoverBackground#f1f5f9
list.inactiveSelectionBackground#f1f5f9
list.inactiveSelectionForeground#444b51
list.warningForeground#bd7c1b
listFilterWidget.background#f1f5f9
listFilterWidget.noMatchesOutline#be1f10
listFilterWidget.outline#babfc3
menu.background#f1f5f9
menu.foreground#6e747a
menubar.selectionBackground#e8ecf0
panel.border#e8ecf0
panelTitle.activeBorder#f1f5f9
panelTitle.activeForeground#444b51
panelTitle.inactiveForeground#babfc3
peekView.border#bec3c8
peekViewEditor.background#f1f5f9
peekViewEditor.matchHighlightBackground#f1f5f9
peekViewEditor.matchHighlightBorder#babfc3
peekViewEditorGutter.background#f1f5f9
peekViewResult.background#ecf0f4
peekViewResult.fileForeground#666d73
peekViewResult.lineForeground#babfc3
peekViewResult.matchHighlightBackground#e3e8ec
peekViewResult.selectionBackground#f1f5f9
peekViewResult.selectionForeground#444b51
pickerGroup.foreground#63696f
sash.hoverBorder#e3e8ec
scrollbar.shadow#f1f5f9
scrollbarSlider.activeBackground#0a12190f
scrollbarSlider.background#0a12190f
scrollbarSlider.hoverBackground#0a12190f
settings.checkboxBorder#e8ecf0
settings.dropdownBorder#e8ecf0
settings.modifiedItemIndicator#bec3c8
settings.textInputBorder#e8ecf0
sideBar.background#f1f5f9
sideBar.border#e8ecf0
sideBar.foreground#9aa0a5
sideBarSectionHeader.background#f1f5f9
sideBarSectionHeader.border#e8ecf0
statusBar.background#f1f5f9
statusBar.border#e8ecf0
statusBar.debuggingBackground#f1f5f9
statusBar.debuggingBorder#e8ecf0
statusBar.debuggingForeground#6e747a
statusBar.foreground#6e747a
statusBar.noFolderBackground#f1f5f9
statusBar.noFolderBorder#e8ecf0
statusBar.noFolderForeground#6e747a
statusBarItem.activeBackground#f1f5f9
statusBarItem.hoverBackground#f1f5f9
symbolIcon.arrayForeground#6e747a
symbolIcon.booleanForeground#6e747a
symbolIcon.classForeground#6e747a
symbolIcon.colorForeground#6e747a
symbolIcon.constantForeground#6e747a
symbolIcon.constructorForeground#6e747a
symbolIcon.enumeratorForeground#6e747a
symbolIcon.enumeratorMemberForeground#6e747a
symbolIcon.eventForeground#6e747a
symbolIcon.fieldForeground#6e747a
symbolIcon.fileForeground#6e747a
symbolIcon.folderForeground#6e747a
symbolIcon.functionForeground#6e747a
symbolIcon.interfaceForeground#6e747a
symbolIcon.keyForeground#6e747a
symbolIcon.keywordForeground#6e747a
symbolIcon.methodForeground#6e747a
symbolIcon.moduleForeground#6e747a
symbolIcon.namespaceForeground#6e747a
symbolIcon.nullForeground#6e747a
symbolIcon.numberForeground#6e747a
symbolIcon.objectForeground#6e747a
symbolIcon.operatorForeground#6e747a
symbolIcon.packageForeground#6e747a
symbolIcon.propertyForeground#6e747a
symbolIcon.referenceForeground#6e747a
symbolIcon.snippetForeground#6e747a
symbolIcon.stringForeground#6e747a
symbolIcon.structForeground#6e747a
symbolIcon.textForeground#6e747a
symbolIcon.typeParameterForeground#6e747a
symbolIcon.unitForeground#6e747a
symbolIcon.variableForeground#6e747a
tab.activeForeground#444b51
tab.border#f1f5f9
tab.inactiveBackground#f1f5f9
tab.inactiveForeground#babfc3
terminal.ansiBlack#f1f5f9
terminal.ansiBlue#c3c8cc
terminal.ansiBrightBlack#dadee3
terminal.ansiBrightBlue#c3c8cc
terminal.ansiBrightCyan#959a9f
terminal.ansiBrightGreen#acb1b6
terminal.ansiBrightMagenta#666d73
terminal.ansiBrightRed#7e8489
terminal.ansiBrightWhite#0a1219
terminal.ansiBrightYellow#4f565c
terminal.ansiCyan#959a9f
terminal.ansiGreen#acb1b6
terminal.ansiMagenta#666d73
terminal.ansiRed#7e8489
terminal.ansiWhite#383f46
terminal.ansiYellow#4f565c
terminal.background#f1f5f9
terminal.foreground#666d73
terminalCursor.background#f1f5f9
terminalCursor.foreground#4f565c
textLink.activeForeground#0a1219
textLink.foreground#0a1219
textPreformat.foreground#6e747a
titleBar.activeBackground#f1f5f9
titleBar.activeForeground#6e747a
titleBar.border#e8ecf0
titleBar.inactiveBackground#f1f5f9
tree.indentGuidesStroke#dfe3e7
window.activeBorder#e8ecf0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable.parameter.function	#4f565c	—
comment, punctuation.definition.comment	#c7ccd1	—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array	#4f565c	—
none	#4f565c	—
keyword.operator	#4f565c	—
keyword	#90969b	—
variable	#8c9197	—
entity.name.function, meta.require, support.function.any-method	#9aa0a5	—
support.class, entity.name.class, entity.name.type.class	#666d73	—
meta.class	#131b22	—
keyword.other.special-method	#9aa0a5	—
storage	#90969b	—
support.function	#7d8389	—
string, constant.other.symbol, entity.other.inherited-class	#747a80	—
constant.numeric	#6e747a	—
none	#6e747a	—
none	#6e747a	—
constant	#6e747a	—
entity.name.tag	#8c9197	—
entity.other.attribute-name	#6e747a	—
entity.other.attribute-name.id, punctuation.definition.entity	#9aa0a5	—
meta.selector	#90969b	—
none	#6e747a	—
markup.heading punctuation.definition.heading, entity.name.section	#9aa0a5
keyword.other.unit	#6e747a	—
markup.bold, punctuation.definition.bold	#666d73	bold
markup.italic, punctuation.definition.italic	#90969b	italic
markup.raw.inline	#747a80	—
string.other.link, punctuation.definition.string.end.markdown	#8c9197	—
meta.link	#6e747a	—
markup.list	#8c9197	—
markup.quote	#6e747a	—
meta.separator	#4f565c	—
markup.inserted	#747a80	—
markup.deleted	#8c9197	—
markup.changed	#90969b	—
constant.other.color	#7d8389	—
string.regexp	#7d8389	—
constant.character.escape	#7d8389	—
punctuation.section.embedded, variable.interpolation	#90969b	—
invalid.illegal	#131b22	—
invalid.broken	#f1f5f9	—
invalid.deprecated	#131b22	—
invalid.unimplemented	#131b22	—

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