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 Cool Gray

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#f9fafb
activityBar.background#f9fafb
activityBar.border#f0f1f3
activityBar.foreground#4b515c
activityBar.inactiveForeground#c2c4c8
activityBarBadge.background#a2a5ab
badge.background#e1e3e5
badge.foreground#4b515c
button.background#e3e5e7
button.hoverBackground#dddfe1
checkbox.border#f0f1f3
dart.closingLabels#e7e8ea
debugIcon.breakpointCurrentStackframeForeground#757982
debugIcon.breakpointDisabledForeground#757982
debugIcon.breakpointForeground#757982
debugIcon.breakpointStackframeForeground#757982
debugIcon.breakpointUnverifiedForeground#757982
debugIcon.continueForeground#757982
debugIcon.disconnectForeground#757982
debugIcon.pauseForeground#757982
debugIcon.restartForeground#757982
debugIcon.startForeground#757982
debugIcon.stepBackForeground#757982
debugIcon.stepIntoForeground#757982
debugIcon.stepOutForeground#757982
debugIcon.stepOverForeground#757982
debugIcon.stopForeground#757982
debugToolBar.background#f9fafb
dropdown.background#f9fafb
dropdown.foreground#757982
editor.background#f9fafb
editor.findMatchBackground#f9fafb
editor.findMatchBorder#858991
editor.findMatchHighlightBackground#f9fafb
editor.findMatchHighlightBorder#c2c4c8
editor.foldBackground#f9fafb
editor.foreground#565b66
editor.hoverHighlightBackground#ebedef
editor.lineHighlightBackground#f3f4f6
editor.selectionBackground#ebedef
editorBracketMatch.background#f9fafb
editorBracketMatch.border#c2c4c8
editorCursor.foreground#565b66
editorError.foreground#a5a8af
editorGroup.border#f0f1f3
editorGroupHeader.tabsBackground#f9fafb
editorGroupHeader.tabsBorder#f0f1f3
editorHoverWidget.statusBarBackground#f9fafb
editorIndentGuide.activeBackground#c1c4c8
editorIndentGuide.background#e6e8ea
editorInfo.foreground#a5a8af
editorLightBulb.foreground#757982
editorLineNumber.activeForeground#bdc0c4
editorLineNumber.foreground#e1e3e5
editorLink.activeForeground#4b515c
editorOverviewRuler.border#f0f1f3
editorRuler.foreground#e6e8ea
editorSuggestWidget.foreground#a2a5ab
editorSuggestWidget.highlightForeground#4b515c
editorWarning.foreground#a5a8af
editorWhitespace.foreground#e1e3e5
editorWidget.background#f9fafb
focusBorder#f9fafb
gitDecoration.addedResourceForeground#4b505c
gitDecoration.conflictingResourceForeground#4b505c
gitDecoration.deletedResourceForeground#a2a5ab
gitDecoration.ignoredResourceForeground#d5d7da
gitDecoration.modifiedResourceForeground#4b505c
gitDecoration.submoduleResourceForeground#a2a5ab
gitDecoration.untrackedResourceForeground#4b505c
icon.foreground#c6c8cc
input.background#f9fafb
input.border#f9fafb
input.foreground#757982
list.activeSelectionBackground#f0f1f3
list.activeSelectionForeground#4b515c
list.errorForeground#c12016
list.filterMatchBackground#e1e3e5
list.filterMatchBorder#f9fafb
list.focusBackground#f0f1f3
list.highlightForeground#6e727c
list.hoverBackground#f9fafb
list.inactiveSelectionBackground#f9fafb
list.inactiveSelectionForeground#4b515c
list.warningForeground#c07e22
listFilterWidget.background#f9fafb
listFilterWidget.noMatchesOutline#c12016
listFilterWidget.outline#c2c4c8
menu.background#f9fafb
menu.foreground#757982
menubar.selectionBackground#f0f1f3
panel.border#f0f1f3
panelTitle.activeBorder#f9fafb
panelTitle.activeForeground#4b515c
panelTitle.inactiveForeground#c2c4c8
peekView.border#c6c8cc
peekViewEditor.background#f9fafb
peekViewEditor.matchHighlightBackground#f9fafb
peekViewEditor.matchHighlightBorder#c2c4c8
peekViewEditorGutter.background#f9fafb
peekViewResult.background#f4f5f6
peekViewResult.fileForeground#6e727c
peekViewResult.lineForeground#c2c4c8
peekViewResult.matchHighlightBackground#ebedef
peekViewResult.selectionBackground#f9fafb
peekViewResult.selectionForeground#4b515c
pickerGroup.foreground#6a6f78
sash.hoverBorder#ebedef
scrollbar.shadow#f9fafb
scrollbarSlider.activeBackground#1118270f
scrollbarSlider.background#1118270f
scrollbarSlider.hoverBackground#1118270f
settings.checkboxBorder#f0f1f3
settings.dropdownBorder#f0f1f3
settings.modifiedItemIndicator#c6c8cc
settings.textInputBorder#f0f1f3
sideBar.background#f9fafb
sideBar.border#f0f1f3
sideBar.foreground#a2a5ab
sideBarSectionHeader.background#f9fafb
sideBarSectionHeader.border#f0f1f3
statusBar.background#f9fafb
statusBar.border#f0f1f3
statusBar.debuggingBackground#f9fafb
statusBar.debuggingBorder#f0f1f3
statusBar.debuggingForeground#757982
statusBar.foreground#757982
statusBar.noFolderBackground#f9fafb
statusBar.noFolderBorder#f0f1f3
statusBar.noFolderForeground#757982
statusBarItem.activeBackground#f9fafb
statusBarItem.hoverBackground#f9fafb
symbolIcon.arrayForeground#757982
symbolIcon.booleanForeground#757982
symbolIcon.classForeground#757982
symbolIcon.colorForeground#757982
symbolIcon.constantForeground#757982
symbolIcon.constructorForeground#757982
symbolIcon.enumeratorForeground#757982
symbolIcon.enumeratorMemberForeground#757982
symbolIcon.eventForeground#757982
symbolIcon.fieldForeground#757982
symbolIcon.fileForeground#757982
symbolIcon.folderForeground#757982
symbolIcon.functionForeground#757982
symbolIcon.interfaceForeground#757982
symbolIcon.keyForeground#757982
symbolIcon.keywordForeground#757982
symbolIcon.methodForeground#757982
symbolIcon.moduleForeground#757982
symbolIcon.namespaceForeground#757982
symbolIcon.nullForeground#757982
symbolIcon.numberForeground#757982
symbolIcon.objectForeground#757982
symbolIcon.operatorForeground#757982
symbolIcon.packageForeground#757982
symbolIcon.propertyForeground#757982
symbolIcon.referenceForeground#757982
symbolIcon.snippetForeground#757982
symbolIcon.stringForeground#757982
symbolIcon.structForeground#757982
symbolIcon.textForeground#757982
symbolIcon.typeParameterForeground#757982
symbolIcon.unitForeground#757982
symbolIcon.variableForeground#757982
tab.activeForeground#4b515c
tab.border#f9fafb
tab.inactiveBackground#f9fafb
tab.inactiveForeground#c2c4c8
terminal.ansiBlack#f9fafb
terminal.ansiBlue#cbcdd1
terminal.ansiBrightBlack#e2e3e6
terminal.ansiBrightBlue#cbcdd1
terminal.ansiBrightCyan#9ca0a6
terminal.ansiBrightGreen#b3b6bb
terminal.ansiBrightMagenta#6e727c
terminal.ansiBrightRed#858991
terminal.ansiBrightWhite#111827
terminal.ansiBrightYellow#575c67
terminal.ansiCyan#9ca0a6
terminal.ansiGreen#b3b6bb
terminal.ansiMagenta#6e727c
terminal.ansiRed#858991
terminal.ansiWhite#3f4551
terminal.ansiYellow#575c67
terminal.background#f9fafb
terminal.foreground#6e727c
terminalCursor.background#f9fafb
terminalCursor.foreground#565b66
textLink.activeForeground#111827
textLink.foreground#111827
textPreformat.foreground#757982
titleBar.activeBackground#f9fafb
titleBar.activeForeground#757982
titleBar.border#f0f1f3
titleBar.inactiveBackground#f9fafb
tree.indentGuidesStroke#e7e8ea
window.activeBorder#f0f1f3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable.parameter.function	#565b66	—
comment, punctuation.definition.comment	#cfd1d5	—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array	#565b66	—
none	#565b66	—
keyword.operator	#565b66	—
keyword	#989ba2	—
variable	#93979e	—
entity.name.function, meta.require, support.function.any-method	#a2a5ab	—
support.class, entity.name.class, entity.name.type.class	#6e727c	—
meta.class	#1a212f	—
keyword.other.special-method	#a2a5ab	—
storage	#989ba2	—
support.function	#858991	—
string, constant.other.symbol, entity.other.inherited-class	#7b8088	—
constant.numeric	#757982	—
none	#757982	—
none	#757982	—
constant	#757982	—
entity.name.tag	#93979e	—
entity.other.attribute-name	#757982	—
entity.other.attribute-name.id, punctuation.definition.entity	#a2a5ab	—
meta.selector	#989ba2	—
none	#757982	—
markup.heading punctuation.definition.heading, entity.name.section	#a2a5ab
keyword.other.unit	#757982	—
markup.bold, punctuation.definition.bold	#6e727c	bold
markup.italic, punctuation.definition.italic	#989ba2	italic
markup.raw.inline	#7b8088	—
string.other.link, punctuation.definition.string.end.markdown	#93979e	—
meta.link	#757982	—
markup.list	#93979e	—
markup.quote	#757982	—
meta.separator	#565b66	—
markup.inserted	#7b8088	—
markup.deleted	#93979e	—
markup.changed	#989ba2	—
constant.other.color	#858991	—
string.regexp	#858991	—
constant.character.escape	#858991	—
punctuation.section.embedded, variable.interpolation	#989ba2	—
invalid.illegal	#1a212f	—
invalid.broken	#f9fafb	—
invalid.deprecated	#1a212f	—
invalid.unimplemented	#1a212f	—

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